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

01. FONTS
02. RESET
03. VARIABLES
04. GLOBAL
05. HEADER
    05.01 BUTTON
    05.02 LOGO
    05.03 MOBILE BURGER
    05.04 NAVIGATION
    05.05 DROPDOWN
    05.06 CTA
06. HOME PAGE
    06.01 HERO
    06.02 TRUST BAR
    06.03 FEATURES BAR
    06.04 PRODUCTS HOME
    06.05 ACTIVITY HOME
    06.06 ENGAGEMENT HOME
    06.07 CTA HOME
07. FOOTER
    07.01 CONTAINER
    07.02 TOP
    07.03 LOGO
    07.04 DESCRIPTION
    07.05 VALEURS
    07.06 COLONNES
    07.07 LIENS
    07.08 PRODUITS
    07.09 CONTACT
    07.10 BOTTOM
08. PRODUITS PAGE
    08.01 HERO
    08.02 OVERVIEW
    08.03 ACTIVITIES
    08.04 COMPOSANTS PARTAGÉS (CONIQUE + CARTON)
09. GOBELETS CONIQUES PAGE
    09.01 HERO
    09.02 POURQUOI CHOISIR (BENEFITS)
    09.03 AVANTAGES
    09.04 APPLICATIONS
    09.05 BRC GLOBAL STANDARD
    09.06 CTA
    09.07 CARACTÉRISTIQUES TECHNIQUES
    09.08 CONDITIONNEMENT
    09.09 FAQ
10. CARTON CUPS 20CL PAGE
    10.01 HERO
    10.02 POURQUOI CHOISIR (BENEFITS)
    10.03 AVANTAGES
    10.04 APPLICATIONS
    10.05 CARACTÉRISTIQUES TECHNIQUES
    10.06 CONDITIONNEMENT
11. SANS PLASTIQUE CUPS PAGE
    11.01 HERO
    11.02 POURQUOI CHOISIR (BENEFITS)
    11.03 AVANTAGES
    11.04 APPLICATIONS
    11.05 TECHNOLOGY
    11.06 CARACTÉRISTIQUES TECHNIQUES
    11.07 CONDITIONNEMENT
12. ENGAGEMENT PAGE
    12.01 HERO
    12.02 SECTIONS TEXTE
    12.03 LIEN EXTERNE (DPD)
    12.04 BRC (ancre)
    12.05 POURQUOI FAIRE CONFIANCE (BENEFITS)
13. SOCIETE PAGE
    13.01 HERO
    13.02 SECTIONS TEXTE
    13.03 NOTRE FAÇON DE TRAVAILLER
    13.04 POURQUOI CHOISIR (BENEFITS)
    13.05 NOS ENGAGEMENTS (CTA)
14. CONTACT PAGE
    14.01 HERO
    14.02 CONTACT FORM
        14.02.01 FORM
        14.02.02 SIDEBAR
        14.02.03 FEEDBACK & ÉTATS
15. MENTIONS PAGE
    15.01 HERO
    15.02 SECTIONS TEXTE
16. POLITIQUE DE CONFIDENTIALITÉ PAGE
    16.01 HERO
    16.02 SECTIONS TEXTE
17. POLITIQUE DE COOKIES PAGE
    17.01 HERO
    17.02 SECTIONS TEXTE

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

/* ====================================
01. FONTS
======================================= */

@font-face {
    font-family: 'Poppins';
    src: url('./assets/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('./assets/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('./assets/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter_28pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter_28pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/Inter_28pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* ====================================
02. RESET
======================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #FCF9F6;
    color: #1E1E1E;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
}


a {
    text-decoration: none;
}


/* ====================================
03. VARIABLES
======================================= */

:root {

    --green-primary: #005D3F;
    --green-secondary: #5F9F6D;
    --green-light: #D0D9CA;
    --beige: #F5F1E8;
    --off-white: #FCF9F6;
    --text-primary: #1E1E1E;
    --text-secondary: #5F5E58;
    --header-height: 90px;
    --container-width: 1390px;
}

/* GLOBAL COMPONENTS */

/* ====================================
04. GLOBAL
======================================= */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}


/* ====================================
05. HEADER
======================================= */

.site-header {
    position: relative;
    width: 100%;
    height: var(--header-height);
    background: #FCFBF8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 1000;
}

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

/* ===================================
05.01 BUTTON
==================================== */

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 190px;
    height: 42px;
    border-radius: 999px;
    background: #0B5D3F;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: #F5F1E8;
    transition: all 0.25s ease;
}


/*05.01.01 HOVER */

.header-btn:hover {
    background: #084730;
    transform: translateY(-1px);
}


/*05.01.02 SVG */

.header-btn svg {
    width: 16px;
    height: 16px;
}

/* ===================================
05.02 LOGO
==================================== */

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-logo img {
    width: 205px;
    height: auto;
}

/* ===================================
05.03 MOBILE BURGER
==================================== */

.mobile-menu-btn {
    display: none;
}
.mobile-menu-overlay {
    display: none;
}

/* ===================================
05.04 NAVIGATION
==================================== */

.main-navigation {
    margin-left: auto;
    margin-right: 62px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 54px;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 90px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.nav-menu > li > a svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-primary);
    transition: transform 0.2s ease;
}

.nav-menu > li > a:hover {
    color: var(--green-primary);
}

.nav-menu > li > a:hover svg {
    stroke: var(--green-primary);
}

.nav-menu > li > a.active {
    color: var(--green-primary);
}

.nav-menu > li > a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: var(--green-primary);
}

/* ===================================
05.05 DROPDOWN
==================================== */

.dropdown-menu {
    position: absolute;
    top: calc(100% - 10px);
    left: -20px;
    min-width: 240px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.dropdown-menu li + li {
    margin-top: 8px;
}

.dropdown-menu a {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.dropdown-menu a:hover {
    background: #F7F4EF;
    color: var(--green-primary);
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-dropdown:hover > a svg {
    transform: rotate(180deg);
}

/* ===================================
05.06 CTA
==================================== */

.mobile-cta-icon {
    display: none;
}

/* ====================================
06. HOME PAGE
======================================= */

/* ===================================
06.01 HERO
==================================== */
.mobile-products-hero-section {
    display: none;
}

.hero-section {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 470px;
    margin-bottom: 1px;
}

/*06.01.01 BG SECTION (CLASSE COMMUNE A TOUS LES HERO) */
/* Propriétés strictement identiques sur les 5 pages (index, produits, gobelets-coniques,
gobelets-carton-20cl, gobelets-carton-sans-plastique).
Ne PAS ajouter ici de background-image/size/position : ils varient selon les pages et restent définis dans
.hero-container / .conical-hero-container / .hero-carton-container / .hero-plastic-container */

.hero-bg-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
}

.hero-container {
    height: 100%;
    min-height: 470px;
    z-index: 5;
    background-color: #FCFBF8;
    background-image: url('./assets/images/ocups-hero-desktop-bg.png');
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 73%;
}

/*06.01.02 FADE OVERLAY */
/* NE PAS MODIFIER - rendu calé précisément sur index.html */

.hero-container::before {
      content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to right,
            #FCFBF8 0%,
            #FCFBF8 18%,
            rgba(252,251,248,0.98) 32%,
            rgba(252,251,248,0.95) 42%,
            rgba(252,251,248,0.88) 52%,
            rgba(252,251,248,0.74) 62%,
            rgba(245,241,232,0.50) 74%,
            rgba(245,241,232,0.22) 86%,
            rgba(245,241,232,0) 100%
        );
}

/*06.01.03 CONTENT */

.hero-content {
    position: relative;
    z-index: 5;
    width: 540px;
    padding-top: 58px;
    padding-left: 54px;
   
}

/*06.01.04 TITLE */

.hero-title {
    margin-bottom: 26px;
}


/* GREEN */
.hero-title-green {
    display: block;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.05em;
    color: #0B5D3F;
}


/* DARK */
.hero-title-dark {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: #1E1E1E;
}

/*06.01.05 DESCRIPTION */

.hero-description {
    max-width: 470px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    color: #1E1E1E;
}

/*06.01.06 BUTTONS */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.btn-mobile {
    display: none;
}

/*06.01.07 BASE BUTTON */

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    width: 300px;
    height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
}

/*06.01.08 PRIMARY BUTTON */

.hero-btn-primary {
    background: #0B5D3F;
    color: #F5F1E8;
    box-shadow:
        0 10px 18px rgba(11, 93, 63, 0.18);
}



/*06.01.09 SVG */

.hero-btn svg {
    width: 20px;
    height: 20px;
}

/* ===================================
06.02 TRUST BAR
==================================== */

.hero-trustbar {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
    MARGIN-BOTTOM: 18px;
}

/*06.02.01 ITEM */

.trust-item {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/*06.02.02 ICON */

.trust-item img {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    object-fit: contain;
    flex-shrink: 0;
}

/*06.02.03 TEXT */

.trust-item span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
    color: #1E1E1E;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 24px;
}
/*06.02.04 MOBILE */

.mobile-trustbar {
    display: none;
}

/* ===================================
06.03 FEATURES BAR
==================================== */

.features-bar {
    background-color: #FCFBF8;
    border-top: none;
}

/*06.03.01 CONTAINER */

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

/*06.03.02 ITEM */

.feature-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding:
        14px
        28px;
    position: relative;
}

/*06.03.03 SÉPARATEURS */

.feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 68px;
    background:
        rgba(0,0,0,0.08);
}

/*06.03.04 ICÔNE */

.feature-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/*06.03.05 CONTENU */

.feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*06.03.06 TITRE */

.feature-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    color: #0B5D3F;
    white-space: nowrap;
    margin: 0 0 4px 0;
}

/*06.03.07 TEXTE */

.feature-content p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
    color: #0A0A0A;
    margin: 0;
}

/*06.03.08 MOBILE */

.mobile-features-bar {
    display: none;
}

/*06.04.01 MOBILE (toggle) */

.mobile-products-slider {
    display: none;
}

.mobile-products-header-section,
.mobile-products-slider {
    display: none;
}
/*06.05.01 MOBILE (toggle) */

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

/*06.04.02 LAYOUT PARTAGÉ (réutilisé par Engagement) */

.two-columns-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 28px;
    align-items: stretch;
}

/*06.04.03 ESPACEMENTS (réutilisé par Engagement) */

.engagement-section {
    padding: 8px 0 18px;
    background: #FCFBF8;
}

/* ===================================
06.04 PRODUCTS HOME
==================================== */
/*06.04.04 SECTION */

.products-section {
    padding: 18px 0 18px;
    background: #FCFBF8;
}

/*06.04.05 LAYOUT */

.products-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 28px;
    padding-top: 14px;
    align-items: stretch;
}

/*06.04.06 COLONNES */

.products-left,
.products-right {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/*06.04.07 COLONNE DROITE */

.products-right {
    position: relative;
}

.products-right .products-header,
.products-right .activity-grid {
    margin-left: 28px;
    margin-bottom: 8px;
}

/*06.04.08 EN-TÊTES */

.products-header {
    display: flex;
    align-items: center;
    height: 28px;
    margin-bottom: 18px;
}

.products-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #1E1E1E;
}

/*06.04.09 GRID */

.products-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    height: 100%;
}

/*06.04.10 CARD */

.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

/*06.04.11 TEXTURE NATUREL */

.product-card-natural {
    background-image:
        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;
    background-repeat: no-repeat;
}

/*06.04.12 TEXTURE RECYCLÉ */

.product-card-recycled {
    background-image:
        linear-gradient(
            rgba(252,251,248,0.90),
            rgba(252,251,248,0.90)
        ),
        url('./assets/textures/master/paper-recycled-texture.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*06.04.13 LAYOUT HAUT */

.product-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 16px;

    margin-bottom: 18px;
}

/*06.04.14 TEXTE */

.product-card-text h3 {
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #1E1E1E;
}

.product-card-text ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-card-text li {
    position: relative;
    padding-left: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    color: #1E1E1E;
}

.product-card-text li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #0B5D3F;
}

/*06.04.15 IMAGE WRAPPER */

.product-image-wrapper {
    width: 120px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

/*06.04.16 IMAGE */

.product-image {
    width: auto;
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    display: block;
}

/*06.04.17 BAS */

.product-card-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: auto;
}

/*06.04.18 BADGES */

.product-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
}

.product-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-badge img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/*06.04.19 BOUTON */

.product-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 38px;
    padding: 0 18px;
    border: 1.5px solid #0B5D3F;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #0B5D3F;
    transition: all 0.25s ease;
}

.product-card-button:hover {
    background: #0B5D3F;
    color: #F5F1E8;
}

/* ===================================
06.05 ACTIVITY HOME
==================================== */
/*06.05.02 GRID */

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 11px;
    flex: 1;
    align-items: stretch;
    margin-top: 2px;
}


/*06.05.03 CARD */

.activity-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    transition: transform 0.25s ease;
}

/*06.05.04 HOVER */

.activity-grid img:hover {
    transform: translateY(-2px);
}

/* ===================================
06.06 ENGAGEMENT HOME
==================================== */
/*06.06.01 MOBILE (toggle) */
.mobile-engagement-section {
    display: none;
}

.engagement-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 110px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    background:
        linear-gradient(
            rgba(252,251,248,0.95),
            rgba(252,251,248,0.95)
        ),
        url('./assets/textures/master/natural-fibers-texture.png');

    background-size: cover;
}

/*06.06.02 IMAGE */

.engagement-image {
    position: relative;
    overflow: hidden;
}

.engagement-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.engagement-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background:
        linear-gradient(
            to right,
            rgba(252,251,248,0) 0%,
            rgba(252,251,248,0.08) 48%,
            #FCFBF8 100%
        );
}

/*06.06.03 CONTENU */

.engagement-content {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.engagement-content h2 {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: #0B5D3F;
}

.engagement-content p {
    margin: 0 0 10px;
    max-width: 620px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.35;
    color: #171717;
}

/*06.06.04 FEATURES */

.engagement-features {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    width: 100%;
}

.engagement-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
}

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

.engagement-feature span {
    max-width: 90px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    color: #0B5D3F;
}

/* ===================================
06.07 CTA HOME
==================================== */
.mobile-cta-section {
    display: none;
}
.cta-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 28px;
    padding: 14px 22px;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            #0B5D3F 0%,
            #084830 100%
        );
}

.cta-card h2 {
    margin: 0 0 8px;
    max-width: 320px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    color: #FFFFFF;
}

.cta-card p {
    margin: 0 0 12px;
    max-width: 320px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255,255,255,0.92);
}

/*06.07.02 BOUTON */

.engagement-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #0B5D3F;
}
/* ====================================
07. FOOTER
======================================= */
.mobile-footer {
    display: none;
}

.site-footer {
    position: relative;
    margin-top: 30px;
    background:
        linear-gradient(
            rgba(252,251,248,0.96),
            rgba(252,251,248,0.96)
        ),
        url('./assets/textures/master/natural-fibers-texture.png');

    background-size: cover;
    border-top:
        1px solid rgba(0,0,0,0.05);
}

/* ===================================
07.01 CONTAINER
==================================== */

.footer-container {
    padding-top: 20px;
    padding-bottom: 18px;
}

/* ===================================
07.02 TOP
==================================== */

.footer-top {
    display: grid;
    grid-template-columns: 1.15fr 0.7fr 0.9fr 0.95fr;
    gap: 38px;
    padding-bottom: 28px;
}

/* ===================================
07.03 LOGO
==================================== */

.footer-logo {
    display: inline-flex;
    margin-bottom: -6px;
}

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

/* ===================================
07.04 DESCRIPTION
==================================== */

.footer-description {
    max-width: 290px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    color: #171717;
}

/* ===================================
07.05 VALEURS
==================================== */

.footer-values {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-value img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.footer-value span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #0B5D3F;
}

/* ===================================
07.06 COLONNES
==================================== */

.footer-column h3 {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0B5D3F;
}

.footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: #0B5D3F;
}

/* ===================================
07.07 LIENS
==================================== */

.footer-links,
.footer-products {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #171717;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-links a:hover {
    color: #0B5D3F;
    transform: translateX(2px);
}

/* ===================================
07.08 PRODUITS
==================================== */

.footer-products li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-products img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.footer-products span {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #171717;
}

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

.footer-contact p {
    max-width: 270px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #171717;
}

/*07.09.01 CTA */

.footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    height: 44px;
    padding: 0 22px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: #0B5D3F;
    box-shadow:
        0 8px 18px rgba(11,93,63,0.14);
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.footer-cta:hover {
    transform: translateY(-1px);
    background: #084730;
}

.footer-cta span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #F5F1E8;
}

.footer-cta svg {
    width: 16px;
    height: 16px;
    color: #F5F1E8;
}

/*07.09.02 ITEMS DE CONTACT */

.footer-contact-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-contact-item img {
    width: 20px;
    height: 20px;
}

.footer-contact-item span {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #171717;
}

/* ===================================
07.10 BOTTOM
==================================== */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top:
        1px solid rgba(0,0,0,0.05);
}

.footer-bottom p,
.footer-legal-links a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #5F5E58;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-legal-links a {
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: #0B5D3F;
}

/* ====================================
08. PRODUITS PAGE
======================================= */

/* ===================================
08.01 HERO
==================================== */
/* Réutilise le Hero de la page d'accueil (mêmes classes,
même background) : rien de spécifique ici. */

/* ===================================
08.02 OVERVIEW
==================================== */
.mobile-products-overview-section {
    display: none
}

.products-overview-section {
    margin-top: 60px;
}
.products-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.products-overview-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 24px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.05);
   background:
    linear-gradient(
        rgba(252,251,248,0.82),
        rgba(252,251,248,0.82)
    ),
        url('./assets/textures/master/natural-fibers-texture.png');

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

.products-overview-content {
    flex: 1;
}

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

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

.products-overview-text:last-of-type {
    margin-bottom: 0;
}

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

/* ===================================
08.03 ACTIVITIES
==================================== */
.mobile-products-activities-section {
   display: none ;
}

.products-activity-section {
    margin-top: 90px;
}
.products-page-title {
    margin-bottom: 36px;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--green-primary);
}

.products-activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.products-activities-grid img {
    width: 100%;
    border-radius: 14px;
    transition: transform .25s ease;
}
.products-activities-grid img:hover {
    transform: translateY(-2px);
}
.products-activity-card {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.04);
    background: #FFFFFF;
    transition: transform .25s ease;
}

.products-activity-card:hover {
    transform: translateY(-2px);
}
.products-activity-card img {
    width: 100%;
    display: block;
    border-radius: 18px 18px 0 0;
}
.products-activity-content {
    padding: 18px 20px 22px;
}
.products-activity-content h3 {
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--green-primary);
}
.products-activity-content p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* ===================================
08.04 COMPOSANTS PARTAGÉS (CONIQUE + CARTON)
==================================== */
/* Utilisés en complément des classes propres à chaque page (.conical-*, .carton-*),
qui ne portent plus que ce qui diffère réellement d'une page à l'autre. */

/* --- HERO : contenu, label, titre, description, CTA --- */
/* (nommé "product-hero-*" pour ne pas entrer en collision
avec .hero-content/.hero-title/... du Hero de la page d'accueil,
qui ont des valeurs différentes) */

.product-hero-content {
    width: 540px;
    padding-top: 28px;
    padding-left: 54px;
}

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

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

.product-hero-title {
    margin-top: 0;
    margin-bottom: 26px;
}

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

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

.product-hero-description {
    max-width: 520px;
    margin-bottom: 32px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--text-primary);
}

/* --- TITRES DE SECTION COMMUNS --- */

.section-title {
    margin-bottom: 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--green-primary);
}

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

/* --- CARD COMMUNE --- */

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

/* --- PADDINGS DE SECTION COMMUNS --- */

.benefits-section {
    padding: 70px 0;
}

.section-pb-70 {
    padding: 0 0 70px;
}

/* --- BLOC "POURQUOI CHOISIR..." (BENEFITS) --- */

.benefits-top {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 40px;
    align-items: center;
}

.benefits-content {
    max-width: 500px;
}

.benefits-content h2 {
    margin-bottom: 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--green-primary);
}

.benefits-content h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 15px;
    background: #B89558;
    border-radius: 999px;
}

.benefits-content p {
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    color: var(--text-primary);
}

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

.benefits-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.benefits-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
}

.benefits-divider {
    width: 100%;
    height: 1px;
    margin: 40px 0 30px;
    background: rgba(11,93,63,.08);
}

/* --- AVANTAGES ---
(pas de classe partagée pour tablet-* / mobile-* : dédiées
volontairement à chaque page pour absorber de gros
ajustements responsive propres à chacune) */

.advantage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 145px;
    padding: 18px 14px;
    background: transparent;
    border: 1px solid rgba(184,149,88,.55);
    border-radius: 18px;
    text-align: center;
    transition: all .25s ease;
}

.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(11,93,63,.08);
}

.advantage-card img {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
}

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

.advantage-card p {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ====================================
09. GOBELETS CONIQUES PAGE
======================================= */

/* ===================================
09.01 HERO
==================================== */

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

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

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

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

.conical-hero-container {
    min-height: 560px;
    background-image:
        url('./assets/images/ocups-hero-gobelets-coniques-bg.png');

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

/* CONTENT -> voir .product-hero-content (classe partagée) */

/* LABEL -> voir .product-hero-label (classe partagée) */

/* TITLE -> voir .product-hero-title / .product-hero-title-green / .product-hero-title-dark (classes partagées) */

/* DESCRIPTION -> voir .product-hero-description (classe partagée) */

/*09.01.01 BADGES (propre à cette page : pilules fines, fond transparent) */

.conical-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    background: transparent;
    border: 2px solid rgba(184,149,88,.55);
    border-radius: 999px;
    transition: all .25s ease;
}

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

.conical-hero-badge span {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/*09.01.02 CTA */

.conical-hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}

/* commune */

.conical-btn-primary,
.conical-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 52px;
    padding: 0 24px;
    gap: 12px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: all .25s ease;
}

/* primaire */

.conical-btn-primary {
    background: var(--green-primary);
    color: #F5F1E8;
}

.conical-btn-primary:hover {
    transform: translateY(-2px);
}

/* secondaire */

.conical-btn-secondary {
    background: transparent;
    border: 2px solid var(--green-primary);
    color: var(--green-primary);
}

.conical-btn-secondary:hover {
    background: rgba(11,93,63,.04);
}

/* icônes */

.conical-btn-primary img,
.conical-btn-secondary img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* -> voir .benefits-section / .section-pb-70 (classes partagées) */

/* -> voir .section-title (classe partagée) */

/* -> voir .card (classe partagée) */

/* ===================================
09.02 POURQUOI CHOISIR (BENEFITS)
==================================== */
/* mise en page commune : voir .benefits-top / .benefits-content / .benefits-image / .benefits-divider (classes partagées) */

.benefits-content p.conical-benefits-highlight {
    margin-top: 8px;
    margin-bottom: 0;
    font-weight: 700;
    color: var(--green-primary);
}

/* ===================================
09.03 AVANTAGES
==================================== */
/* .advantage-card reste partagée (classe commune), tablet-* et mobile-* restent dédiées à cette page */

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

.mobile-conical-advantages-section {
    display: none;
}

.conical-advantages-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

/* ===================================
09.04 APPLICATIONS
==================================== */

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

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

.conical-applications-section {
    padding: 0 0 70px;
}

/* TITRE */

.conical-applications-section h2 {
    margin-bottom: 48px;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--green-primary);
}

.conical-applications-section h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 15px;
    background: #B89558;
    border-radius: 999px;
}

.conical-applications-row {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.conical-applications-row-bottom {
    justify-content: center;
    margin-top: 42px;
}

/* CARD */

.conical-application-card {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform .25s ease;
}

.conical-application-card:hover {
    transform: translateY(-4px);
}

.conical-application-card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.conical-application-card h3 {
    margin-top: 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--green-primary);
}

/* ===================================
09.05 BRC GLOBAL STANDARD
==================================== */

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

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

.brc-section{
    padding:0 0 70px;

}

/* CARD */

.brc-card{
    position:relative;
    overflow:hidden;
    padding:58px 62px;
    background:#F8F3EA;
    border:1px solid rgba(184,149,88,.55);
    border-radius:32px;

}

/* DECORS */

.brc-decor{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;

}

.brc-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(

        ellipse at center,

        rgba(255,255,255,.32),

        rgba(255,255,255,0) 70%

    );
    pointer-events:none;

}

/* LEAF */

.brc-leaf{
    position:absolute;
    left:-40px;
    bottom:-90px;
    width:260px;
    height:auto;
    opacity:.06;

}

/* GLOBE */

.brc-globe{
    position:absolute;
    right:-80px;
    top:55px;
    width:240px;
    height:auto;
    opacity:.06;

}

/* GRID */

.brc-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:
    230px
    2px
    1fr;
    gap:70px;
    align-items:center;

}

/* LOGO */

.brc-logo{
    display:flex;
    justify-content:center;
    align-items:center;

}

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

}

/* DIVIDER */

.brc-divider{
    width:2px;
    height:78%;
    justify-self:center;
    align-self:center;
    background:rgba(184,149,88,.45);

}

/* TITRE */

.brc-title{
    margin:0;
    max-width:760px;
    font-family:'Poppins',sans-serif;
    font-size:30px;
    line-height:1.08;
    font-weight:700;
    color:var(--green-primary);

}

.brc-title::after{
    content:"";
    display:block;
    width:56px;
    height:3px;
    margin-top:18px;
    margin-bottom:28px;
    background:#B89558;
    border-radius:999px;

}

/* TEXTE */

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

}

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

}

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

}

/* ===================================
09.06 CTA
==================================== */

.brc-cta{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 32px;
    background:var(--green-primary);
    color:#F5F1E8;
    text-decoration:none;
    font-family:'Inter',sans-serif;
    font-size:17px;
    font-weight:600;
    border-radius:999px;
    box-shadow:
        0 10px 24px rgba(11,93,63,.18),
        inset 0 0 0 2px rgba(255,255,255,.15);

    transition:.25s ease;
    position:relative;
    overflow:hidden;
}

.brc-cta:hover{
    transform:translateY(-2px);
    box-shadow:
        0 14px 30px rgba(11,93,63,.22),
        inset 0 0 0 2px rgba(255,255,255,.18);

}

.brc-cta::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,0)
    );

    pointer-events:none;

}

.brc-arrow{

    width:20px;
    height:20px;
    margin-left:10px;

}

/* ===================================
09.07 CARACTÉRISTIQUES TECHNIQUES
==================================== */

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

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

.conical-specs-card {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    gap: 40px;
    padding: 30px 36px;
}

/* LISTE */

.conical-specs-list {
    display: flex;
    flex-direction: column;
}

.conical-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(11,93,63,.08);
}

.conical-spec-row span {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.conical-spec-row strong {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* PRODUIT */

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

.conical-specs-product img {
    width: 200px;
    height: auto;
}

/* COMPOSITION */

.conical-specs-right p {
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* CERTIFICATIONS */

.conical-specs-certifications {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 28px;
}

.conical-specs-certifications img {
    width: 64px;
    height: auto;
}

/* ===================================
09.08 CONDITIONNEMENT
==================================== */

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

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

.conical-packaging-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 30px 36px;
}

/* COLONNES */

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

/* HEADER */

.conical-packaging-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.conical-packaging-header img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

/* TITRES */

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

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

/* LISTES */

.conical-packaging-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.conical-packaging-list li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
}

.conical-packaging-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #B89558;
}

/* ===================================
09.09 FAQ
==================================== */
.tablet-faq-section{
    display:none;
}

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

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

/* TITRE -> le FAQ utilise déjà .section-title (classe partagée) */

/* GRID */

.conical-faq-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;

}

/* CARD */

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

}

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

}

/* QUESTION */

.conical-faq-question{
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:22px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;

}

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

}

.conical-faq-question span{
    flex:1;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    line-height:1.35;
    font-weight:600;
    color:var(--green-primary);

}

/* FLECHE */

.conical-faq-arrow{
    width:20px;
    height:20px;
    flex-shrink:0;
    color:var(--green-primary);
    transition: transform .25s ease;

}

.conical-faq-item.active .conical-faq-arrow{
    transform:rotate(180deg);

}

/* REPONSE */

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

}

.conical-faq-item.active .conical-faq-answer{
    max-height:180px;

}

.conical-faq-answer p{
    padding:0 22px 22px 72px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.5;
    color:var(--text-primary);

}

/* ====================================
10. CARTON CUPS 20CL PAGE
======================================= */

/* ===================================
10.01 HERO
==================================== */

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

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

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

/* CONTAINER */

.hero-carton-container{
    min-height:560px;
    background-image:

        linear-gradient(
            90deg,
            rgba(252,251,248,.95) 0%,
            rgba(252,251,248,.88) 34%,
            rgba(252,251,248,0) 58%
        ),

        url("./assets/images/ocups-hero-gobelets-carton-20cl-bg.png");

    background-size:cover;
    background-position:center;

}

/* CONTENT -> voir .product-hero-content (classe partagée) */

/* LABEL -> voir .product-hero-label (classe partagée) */

/* TITLE -> voir .product-hero-title / .product-hero-title-green / .product-hero-title-dark (classes partagées) */

/* DESCRIPTION -> voir .product-hero-description (classe partagée) */

/*10.01.01 BADGES */

.hero-carton-badges{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:nowrap;

}

.hero-carton-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:170px;
    height:60px;
    padding:0 24px;
    background:rgba(252,251,248,.55);
    backdrop-filter:blur(4px);
    border:2px solid rgba(184,149,88,.55);
    border-radius:999px;
    transition:all .25s ease;

}

.hero-carton-badge img{
    width:18px;
    height:18px;
    flex-shrink:0;

}

.hero-carton-badge span{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    white-space:normal;

}

/*10.01.02 CTA */

.hero-carton-buttons{
    display:flex;
    align-items:center;
    margin-top:40px;

}

.carton-btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width: 250px;
    height: 52px;
    padding: 0 24px;
    background:var(--green-primary);
    border-radius:999px;
    color:#F8F3EA;
    text-decoration:none;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:700;
    transition:.25s ease;

}

.carton-btn-primary:hover{
    transform: translateY(-2px);

}

.carton-btn-primary img{
    width:20px;
    height:20px;
    flex-shrink:0;

}

.carton-btn-primary span{
    display:block;
    line-height:1;

}

/* -> voir .benefits-section / .section-pb-70 (classes partagées) */

/* -> voir .section-title (classe partagée) */

/* -> voir .card (classe partagée) */

/* ===================================
10.02 POURQUOI CHOISIR (BENEFITS)
==================================== */
/* mise en page commune : voir .benefits-top / .benefits-content / .benefits-image / .benefits-divider (classes partagées) */

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

/* ===================================
10.03 AVANTAGES
==================================== */
/* .advantage-card reste partagée (classe commune), tablet-* et mobile-* restent dédiées à cette page */

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

.mobile-carton-advantages-section {
    display: none;
}

.carton-advantages-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

/* ===================================
10.04 APPLICATIONS
==================================== */

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

}

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

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

/* TITRE */

.carton-applications-section h2{
    margin-bottom:48px;
    font-family:'Poppins',sans-serif;
    font-size:24px;
    line-height:1.1;
    font-weight:700;
    color:var(--green-primary);

}

.carton-applications-section h2::after{

    content:"";
    display:block;
    width:48px;
    height:3px;
    margin-top:15px;
    background:#B89558;
    border-radius:999px;

}

.carton-applications-row{
    display:flex;
    justify-content:center;
    gap:28px;
}

.carton-applications-row-bottom{
    justify-content:center;
    margin-top:42px;
}

/* CARD */

.carton-application-card{
    width:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    text-decoration:none;
    transition:transform .25s ease;
}

.carton-application-card:nth-child(5){
    grid-column:2;
   
}

.carton-application-card:hover{
    transform:translateY(-4px);

}

.carton-application-card img{
    width: 200px;
    height:200px;
    object-fit: cover;
    
}

.carton-application-card h3{
    margin-top:16px;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:1.25;
    font-weight:600;
    color:var(--green-primary);

}

/* ===================================
10.05 CARACTÉRISTIQUES TECHNIQUES
==================================== */

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

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

.carton-specs-card {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    gap: 40px;
    padding: 30px 36px;
}

/* LISTE */

.carton-specs-list {
    display: flex;
    flex-direction: column;
}

.carton-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(11,93,63,.08);
}

.carton-spec-row span {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.carton-spec-row strong {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* PRODUIT */

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

.carton-specs-product img {
    width: 200px;
    height: auto;
}

/* COMPOSITION */

.carton-specs-right p {
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* CERTIFICATIONS */

.carton-specs-certifications {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}

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

/* MENTION LÉGALE */

.carton-specs-right 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;
}

/* ===================================
10.06 CONDITIONNEMENT
==================================== */

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

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

.carton-packaging-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 30px 36px;
}

/* COLONNES */

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

/* HEADER */

.carton-packaging-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.carton-packaging-header img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

/* TITRES */

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

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

/* LISTES */

.carton-packaging-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.carton-packaging-list li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
}

.carton-packaging-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #B89558;
}
/* ====================================
11. SANS PLASTIQUE CUPS PAGE
======================================= */

/* ===================================
11.01 HERO
==================================== */

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

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

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

/* CONTAINER */

.hero-plastic-container{
    min-height:560px;
    background-image:

        linear-gradient(
            90deg,
            rgba(252,251,248,.95) 0%,
            rgba(252,251,248,.80) 25%,
            rgba(252,251,248,0) 45%
        ),

        url("./assets/images/ocups-hero-gobelets-carton-sans-plastique-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

/* Colonne de contenu élargie pour cette page uniquement,
afin de loger 3 pilules plus larges sur une seule ligne
(le reste des pages garde .product-hero-content à 540px) */

.hero-plastic-container .product-hero-content{
    width:700px;
}

/* CONTENT -> voir .product-hero-content (classe partagée) */

/* LABEL -> voir .product-hero-label (classe partagée) */

/* TITLE -> voir .product-hero-title / .product-hero-title-green / .product-hero-title-dark (classes partagées) */

/* DESCRIPTION -> voir .product-hero-description (classe partagée) */

/*11.01.01 BADGES */

.hero-plastic-badges{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:16px;

}

.hero-plastic-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:200px;
    height:60px;
    padding:0 18px;
    background:rgba(252,251,248,.55);
    backdrop-filter:blur(4px);
    border:2px solid rgba(184,149,88,.55);
    border-radius:999px;
    transition:all .25s ease;

}

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

}

.hero-plastic-badge span{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    white-space:normal;

}

/*11.01.02 CTA */

.hero-plastic-buttons{
    display:flex;
    align-items:center;
    margin-top:40px;

}

.plastic-btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width: 250px;
    height: 52px;
    padding: 0 24px;
    background:var(--green-primary);
    border-radius:999px;
    color:#F8F3EA;
    text-decoration:none;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:700;
    transition:.25s ease;

}

.plastic-btn-primary:hover{
    transform: translateY(-2px);

}

.plastic-btn-primary img{
    width:20px;
    height:20px;
    flex-shrink:0;

}

.plastic-btn-primary span{
    display:block;
    line-height:1;

}

/* -> voir .benefits-section / .section-pb-70 (classes partagées) */

/* -> voir .section-title (classe partagée) */

/* -> voir .card (classe partagée) */

/* ===================================
11.02 POURQUOI CHOISIR (BENEFITS)
==================================== */
/* mise en page commune : voir .benefits-top / .benefits-content / .benefits-image / .benefits-divider (classes partagées) */

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

/* ===================================
11.03 AVANTAGES
==================================== */
/* .advantage-card reste partagée (classe commune), tablet-* reste dédiée à cette page */

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

.mobile-plastic-advantages-section{
    display: none;
}

.plastic-advantages-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

/* ===================================
11.04 APPLICATIONS
==================================== */

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

}

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

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

/* TITRE */

.plastic-applications-section h2{
    margin-bottom:48px;
    font-family:'Poppins',sans-serif;
    font-size:24px;
    line-height:1.1;
    font-weight:700;
    color:var(--green-primary);

}

.plastic-applications-section h2::after{

    content:"";
    display:block;
    width:48px;
    height:3px;
    margin-top:15px;
    background:#B89558;
    border-radius:999px;

}

.plastic-applications-row{
    display:flex;
    justify-content:center;
    gap:28px;
}

.plastic-applications-row-bottom{
    display:flex;
    justify-content:center;
    gap:28px;
    margin-top:42px;
}

/* CARD */

.plastic-application-card{
    width:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    text-decoration:none;
    transition:transform .25s ease;
}

.plastic-application-card:hover{
    transform:translateY(-4px);

}

.plastic-application-card img{
    width: 200px;
    height:200px;
    object-fit: cover;

}

.plastic-application-card h3{
    margin-top:16px;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:1.25;
    font-weight:600;
    color:var(--green-primary);

}

/* ===================================
11.05 TECHNOLOGY
==================================== */

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

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

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

/* CARD */

.plastic-technology-card{
    position:relative;
    overflow:hidden;
    padding:58px 62px;
    background:#F8F3EA;
    border:1px solid rgba(184,149,88,.55);
    border-radius:32px;
}

/* DECORS */

.plastic-technology-decor{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.plastic-technology-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(
        ellipse at center,
        rgba(255,255,255,.32),
        rgba(255,255,255,0) 70%
    );
}

/* Décors */

.plastic-technology-wave{
    position:absolute;
    left:-40px;
    bottom:-60px;
    width:220px;
    opacity:.05;
}

.plastic-technology-leaf{
    position:absolute;
    right:-70px;
    top:40px;
    width:220px;
    opacity:.05;
}

/* GRID */

.plastic-technology-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:300px 2px 1fr;
    gap:40px;
    align-items:center;
}

/* VISUEL */

.plastic-technology-visual{
    display:flex;
    justify-content:center;
    align-items:center;
}

.plastic-technology-visual img{
    width:100%;
    max-width:200px;
    height:auto;
    display:block;
}

/* DIVIDER */

.plastic-technology-divider{
    width:2px;
    height:78%;
    background:rgba(184,149,88,.45);
}

/* TITRE */

.plastic-technology-title{
    margin:0;
    max-width:760px;
    font-family:'Poppins',sans-serif;
    font-size:30px;
    line-height:1.08;
    font-weight:700;
    color:var(--green-primary);
}

.plastic-technology-title::after{
    content:"";
    display:block;
    width:56px;
    height:3px;
    margin-top:18px;
    margin-bottom:28px;
    background:#B89558;
    border-radius:999px;
}

/* TEXTE */

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

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

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

/* ===================================
11.06 CARACTÉRISTIQUES TECHNIQUES
==================================== */

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

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

.plastic-specs-card {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    gap: 40px;
    padding: 30px 36px;
}

/* LISTE */

.plastic-specs-list {
    display: flex;
    flex-direction: column;
}

.plastic-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(11,93,63,.08);
}

.plastic-spec-row span {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.plastic-spec-row strong {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* PRODUIT */

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

.plastic-specs-product img {
    width: 200px;
    height: auto;
}

/* COMPOSITION */

.plastic-specs-right p {
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* ===================================
11.07 CONDITIONNEMENT
==================================== */

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

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

.plastic-packaging-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 30px 36px;
}

/* COLONNES */

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

/* HEADER */

.plastic-packaging-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.plastic-packaging-header img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

/* TITRES */

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

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

/* LISTES */

.plastic-packaging-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plastic-packaging-list li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
}

.plastic-packaging-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #B89558;
}

/* ====================================
12. ENGAGEMENT PAGE
======================================= */
/* 12.01 HERO */

.engagement-hero-section {
    display: block;
}

.engagement-hero-layout {
    display: grid;
    grid-template-columns: 560px 1fr;
    align-items: center;
    gap: 70px;
    padding-bottom: 48px;
}

.engagement-hero-content {
    padding-top: 28px;
    padding-left: 54px;
}

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

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

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

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

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

.engagement-hero-description {
    max-width: 500px;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-primary);
}

.engagement-hero-description:last-of-type {
    margin-bottom: 0;
}

.engagement-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.engagement-hero-visual img {
    width: 100%;
    max-width: 620px;
    height: auto;
    transform: translateY(40px);
}

/* 12.02 SECTIONS TEXTE */

.engagement-page-section {
    padding: 0 0 48px;
}

.engagement-page-section p {
    max-width: 780px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.engagement-page-section p:last-child {
    margin-bottom: 0;
}

.engagement-closing {
    margin-top: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: italic;
    color: var(--green-primary);
}

.engagement-subtitle {
    margin-top: 34px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--green-primary);
}

/* 12.03 LIEN EXTERNE (DPD) */

.engagement-link-wrap {
    margin-top: 20px;
}

.engagement-link {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--green-primary);
    text-decoration: none;
}

.engagement-link:hover {
    text-decoration: underline;
}

/* 12.04 BRC (ancre) */

.engagement-brc {
    scroll-margin-top: 24px;
}

#brc {
    scroll-margin-top: 24px;
}

/* 12.05 POURQUOI FAIRE CONFIANCE (réutilise .advantage-card) */

.engagement-benefits-section {
    padding: 0 0 48px;
}

.engagement-benefits-section .section-title {
    margin-bottom: 36px;
}

.engagement-advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ====================================
13. SOCIETE PAGE
======================================= */
/* 13.01 HERO */

.societe-hero-section {
    display: block;
}

.societe-hero-layout {
    display: grid;
    grid-template-columns: 560px 1fr;
    align-items: center;
    gap: 70px;
    padding-bottom: 48px;
}

.societe-hero-content {
    padding-top: 28px;
    padding-left: 54px;
}

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

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

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

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

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

.societe-hero-description {
    max-width: 500px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-primary);
}

.societe-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.societe-hero-visual img {
    width: 100%;
    max-width: 620px;
    height: auto;
    transform: translateY(40px);
}

/* 13.02 SECTIONS TEXTE */

.societe-section {
    padding: 0 0 48px;
}

.societe-section p {
    max-width: 780px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.societe-section p:last-child {
    margin-bottom: 0;
}

.societe-closing {
    margin-top: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: italic;
    color: var(--green-primary);
}

/* 13.03 NOTRE FAÇON DE TRAVAILLER */

.societe-approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 6px;
}

.societe-approach-item h3 {
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--green-primary);
}

.societe-approach-item p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* 13.04 POURQUOI CHOISIR (réutilise .advantage-card) */

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

.societe-benefits-section .section-title {
    margin-bottom: 36px;
}

.societe-advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 13.05 NOS ENGAGEMENTS (CTA) */

.societe-engagements-cta {
    margin-top: 26px;
}

/* ====================================
14. CONTACT PAGE
======================================= */

/* ===================================
14.01 HERO
==================================== */

.contact-hero-section {
    display: block;
}

.contact-hero-layout {
    display: grid;
    grid-template-columns: 560px 1fr;
    align-items: center;
    gap: 70px;
    padding-bottom: 48px;
}

.contact-hero-content {
    padding-top: 28px;
    padding-left: 54px;
}

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

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

.contact-hero-title {
    margin-bottom: 26px;
}

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

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

.contact-hero-description {
    max-width: 500px;
    margin-bottom: 32px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Features */

.contact-hero-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-feature img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.contact-feature h3 {
    margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--green-primary);
}

.contact-feature p {
    max-width: 360px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* Illustration */

.contact-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-hero-visual img {
    width: 100%;
    max-width: 640px;
    height: auto;
    transform: translateY(55px);
}

/* ===================================
14.02 CONTACT FORM
==================================== */

.contact-form-section {
    padding: 0 0 48px;
}

.contact-form-column {
    display: flex;
    flex-direction: column;
}

.contact-intro {
    max-width: 620px;
    margin-bottom: 36px;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.section-divider {
    width: 100%;
    height: 1px;
    margin: 40px 0 30px;
    background: rgba(11,93,63,.08);
}

/* ===================================
14.02.01 FORM
==================================== */

.contact-form {
    display: flex;
    flex-direction: column;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 22px;
}

.contact-field {
    display: flex;
    flex-direction: column;
}

/* Espace manquant entre les champs autonomes Sujet et Message */
.contact-form-grid + .contact-field {
    margin-bottom: 22px;
}

.contact-field label {
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    padding: 16px 18px;
    font: inherit;
    color: var(--text-primary);
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    transition: .25s;
}

.contact-field textarea {
    resize: vertical;
    min-height: 190px;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {

    outline: none;
    border-color: var(--green-primary);

}

.contact-rgpd {
    margin: 28px 0;
}

.contact-rgpd label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-rgpd span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.contact-rgpd a {
    color: var(--green-primary);
    font-weight: 600;
}

.contact-recaptcha {
    margin-bottom: 28px;
}

/* ===================================
14.02.02 SIDEBAR
==================================== */

.contact-sidebar {
    padding: 34px;
}

.contact-sidebar h3 {
    margin-bottom: 14px;

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

.contact-sidebar>p {
    margin-bottom: 32px;

    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.contact-sidebar-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-sidebar-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-sidebar-item img {
    width: 42px;
    height: 42px;
}

.contact-sidebar-item strong {
    display: block;
    margin-bottom: 4px;

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

.contact-sidebar-item span {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
/* ===================================
14.02.03 FEEDBACK & ÉTATS
==================================== */
/*14.02.03.01 HONEYPOT (anti-spam, masqué) */

.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*14.02.03.02 MESSAGE DE FEEDBACK */

.contact-form-feedback {
    margin-bottom: 20px;
    padding: 0;
    max-height: 0;
    overflow: hidden;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;

    border-radius: 14px;
    opacity: 0;
    transition: .3s ease;
}

.contact-form-feedback.is-success,
.contact-form-feedback.is-error {
    padding: 16px 18px;
    max-height: 200px;
    opacity: 1;
}

.contact-form-feedback.is-success {
    color: var(--green-primary);
    background: rgba(95,159,109,.12);
    border: 1px solid rgba(95,159,109,.35);
}

.contact-form-feedback.is-error {
    color: #9B1C1C;
    background: rgba(155,28,28,.08);
    border: 1px solid rgba(155,28,28,.28);
}

/*14.02.03.03 BOUTON — ÉTAT CHARGEMENT */

.contact-submit-loading {
    display: none;
}

.contact-form.is-submitting .contact-submit-label {
    display: none;
}

.contact-form.is-submitting .contact-submit-loading {
    display: inline;
}

.contact-submit-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ====================================
15. MENTIONS PAGE
======================================= */
/* 15.01 HERO */
/* Page de contenu sans illustration : hero une seule colonne,
   calé sur le rendu engagement/societe (fond via .hero-bg-section). */

.mentions-hero-section {
    display: block;
}

.mentions-hero-content {
    max-width: 820px;
    padding-top: 28px;
    padding-bottom: 48px;
    padding-left: 54px;
}

.mentions-hero-title {
    margin-bottom: 16px;
}

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

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

.mentions-hero-note {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-style: italic;
    color: var(--text-secondary);
}

/* 15.02 SECTIONS TEXTE */

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

.mentions-page-section p {
    max-width: 780px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.mentions-page-section p:last-child {
    margin-bottom: 0;
}

.mentions-page-section a {
    color: var(--green-primary);
    text-decoration: none;
}

.mentions-page-section a:hover {
    text-decoration: underline;
}

/* Blocs identité / hébergeur : lignes rapprochées mais aérées */

.mentions-page-section .mentions-details {
    line-height: 1.9;
}

/* ====================================
16. POLITIQUE DE CONFIDENTIALITÉ PAGE
======================================= */
/* 16.01 HERO */
/* Page de contenu sans illustration : hero une seule colonne,
   calé sur mentions/engagement (fond via .hero-bg-section). */

.confidentialite-hero-section {
    display: block;
}

.confidentialite-hero-content {
    max-width: 820px;
    padding-top: 28px;
    padding-bottom: 48px;
    padding-left: 54px;
}

.confidentialite-hero-title {
    margin-bottom: 16px;
}

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

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

.confidentialite-hero-note {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-style: italic;
    color: var(--text-secondary);
}

/* 16.02 SECTIONS TEXTE */

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

.confidentialite-page-section p {
    max-width: 780px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.confidentialite-page-section p:last-child {
    margin-bottom: 0;
}

.confidentialite-page-section a {
    color: var(--green-primary);
    text-decoration: none;
}

.confidentialite-page-section a:hover {
    text-decoration: underline;
}

/* Bloc responsable du traitement : lignes rapprochées mais aérées */

.confidentialite-page-section .confidentialite-details {
    line-height: 1.9;
}

/* ====================================
17. POLITIQUE DE COOKIES PAGE
======================================= */
/* 17.01 HERO */
/* Page de contenu sans illustration : hero une seule colonne,
   calé sur mentions/confidentialité (fond via .hero-bg-section). */

.cookies-hero-section {
    display: block;
}

.cookies-hero-content {
    max-width: 820px;
    padding-top: 28px;
    padding-bottom: 48px;
    padding-left: 54px;
}

.cookies-hero-title {
    margin-bottom: 16px;
}

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

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

.cookies-hero-note {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-style: italic;
    color: var(--text-secondary);
}

/* 17.02 SECTIONS TEXTE */

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

.cookies-page-section p {
    max-width: 780px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.cookies-page-section p:last-child {
    margin-bottom: 0;
}

.cookies-page-section a {
    color: var(--green-primary);
    text-decoration: none;
}

.cookies-page-section a:hover {
    text-decoration: underline;
}

/* Sous-titres des catégories de cookies (section 2) */

.cookies-subtitle {
    margin-top: 34px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--green-primary);
}

/* Liste des cookies utilisés : lignes rapprochées mais aérées */

.cookies-page-section .cookies-details {
    line-height: 1.9;
}