/**
 * Styles partagés - Composants réutilisables
 * ==========================================
 */

/* ========================================
   FONTS
   ======================================== */

@font-face {
    font-family: 'LimesSans-Bold', 'Limes Sans';
    src: url('/wp-content/themes/nousonseme/assets/fonts/Limes Sans Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   SECTION TOGGLE - Affichage/Masquage
   ======================================== */

/* Sections cachées par défaut */
.section-plantes,
.section-conservation {
    display: none;
}

/* Sections actives */
.section-plantes.active,
.section-conservation.active {
    display: block;
}

/* Rows dans les sections (si besoin de granularité supplémentaire) */
.row-gamme {
    display: none !important;
}

.row-gamme.active {
    display: block !important;
}

/* Rows de gamme conservation (confitures, bouilleurs, etc.) */
.row-conservation-gamme {
    display: none !important;
}

.row-conservation-gamme.active {
    display: block !important;
}

/* ========================================
   CTA TOGGLE - Boutons de navigation
   ======================================== */

[data-section-toggle],
.nos-plantes-cta,
.nos-conservation-cta {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ========================================
   CAROUSEL - Styles Slick communs
   ======================================== */

.nos-carousel,
.plantes-carousel,
.conservation-carousel {
    margin: 0 -10px;
}

.nos-carousel .slick-slide,
.plantes-carousel .slick-slide,
.conservation-carousel .slick-slide {
    padding: 0 10px;
}

/* Flèches de navigation */
.nos-carousel .slick-prev,
.nos-carousel .slick-next,
.plantes-carousel .slick-prev,
.plantes-carousel .slick-next,
.conservation-carousel .slick-prev,
.conservation-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nos-carousel .slick-prev:hover,
.nos-carousel .slick-next:hover,
.plantes-carousel .slick-prev:hover,
.plantes-carousel .slick-next:hover,
.conservation-carousel .slick-prev:hover,
.conservation-carousel .slick-next:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nos-carousel .slick-prev,
.plantes-carousel .slick-prev,
.conservation-carousel .slick-prev {
    left: -20px;
}

.nos-carousel .slick-next,
.plantes-carousel .slick-next,
.conservation-carousel .slick-next {
    right: -20px;
}

/* Dots de pagination */
.nos-carousel .slick-dots,
.plantes-carousel .slick-dots,
.conservation-carousel .slick-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 20px 0 0;
    margin: 0;
}

.nos-carousel .slick-dots li,
.plantes-carousel .slick-dots li,
.conservation-carousel .slick-dots li {
    margin: 0 5px;
}

.nos-carousel .slick-dots li button,
.plantes-carousel .slick-dots li button,
.conservation-carousel .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    font-size: 0;
    cursor: pointer;
    transition: background 0.3s ease;
}

.nos-carousel .slick-dots li.slick-active button,
.plantes-carousel .slick-dots li.slick-active button,
.conservation-carousel .slick-dots li.slick-active button {
    background: #333;
}

/* ========================================
   CARDS - Style de base des cartes produit
   ======================================== */

.nos-card,
.plantes-card,
.conservation-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nos-card:hover,
.plantes-card:hover,
.conservation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.nos-card-image,
.plantes-card-image,
.conservation-card-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.nos-card-image img,
.plantes-card-image img,
.conservation-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nos-card-content,
.plantes-card-content,
.conservation-card-content {
    padding: 15px;
}

.nos-card-title,
.plantes-card-title,
.conservation-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

.nos-card-description,
.plantes-card-description,
.conservation-card-description {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* ========================================
   BLOC "LE +" - Composant générique
   Classes : .nos-plus-* (générique) et .conservation-plus-* (conservation)
   Note : Les classes .plantes-engrais-* restent dans plantes.css
   ======================================== */

.nos-plus-bloc,
.conservation-plus-bloc {
    padding: 40px;
    margin-bottom: 40px;
    border-radius: 20px;
}

.nos-plus-title,
.conservation-plus-title {
    font-family: "BerlinerGrotesk", sans-serif;
    color: white;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

.nos-plus-content,
.conservation-plus-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: white;
    padding: 10px 20px;
    border-radius: 15px;
    width: 90%;
    margin: 0 auto;
}

.nos-plus-top,
.conservation-plus-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.nos-plus-icon-wrapper,
.conservation-plus-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-shrink: 0;
    width: 30%;
}

.nos-plus-icon,
.conservation-plus-icon {
    font-size: 48px;
    font-weight: bold;
    color: #113e35;
    font-family: "BerlinerGrotesk", sans-serif;
}

.nos-plus-text,
.conservation-plus-text {
    flex: 1;
}

.nos-plus-text p,
.conservation-plus-text p {
    font-family: "BerlinerGrotesk", sans-serif;
    /*margin: 0 0 10px 0;*/
    color: #113e35;
    font-size: 18px;
    line-height: 1.6;
}

.nos-plus-bottom,
.conservation-plus-bottom {
    width: 100%;
}

.nos-plus-footnote,
.conservation-plus-footnote {
    font-family: "BerlinerGrotesk", sans-serif;
    font-size: 12px !important;
    font-style: italic;
    color: #113e35;
}

/* Image "LE +" - Desktop (min 1024px) */
@media all and (min-width: 1024px) {
    img.nos-plus-icon-image,
    img.conservation-plus-icon-image {
        position: absolute;
        left: -6%;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
    }
}

/* Image "LE +" - Tablette/Mobile (max 1023px) */
@media all and (max-width: 1023px) {
    img.nos-plus-icon-image,
    img.conservation-plus-icon-image {
        position: relative;
        left: 0;
        top: -10px;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        right: 0;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }

    .nos-plus-top,
    .conservation-plus-top {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .nos-plus-bloc,
    .conservation-plus-bloc {
        padding: 20px;
    }

    .nos-plus-title,
    .conservation-plus-title {
        font-size: 18px;
    }

    .nos-plus-content,
    .conservation-plus-content {
        padding: 20px;
    }

    .nos-plus-icon,
    .conservation-plus-icon {
        font-size: 36px;
    }

    .nos-plus-icon-wrapper,
    .conservation-plus-icon-wrapper {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nos-plus-icon,
    .conservation-plus-icon {
        font-size: 28px;
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .nos-carousel .slick-prev,
    .plantes-carousel .slick-prev,
    .conservation-carousel .slick-prev {
        left: -10px;
    }

    .nos-carousel .slick-next,
    .plantes-carousel .slick-next,
    .conservation-carousel .slick-next {
        right: -10px;
    }
}

@media (max-width: 768px) {
    .nos-carousel .slick-prev,
    .nos-carousel .slick-next,
    .plantes-carousel .slick-prev,
    .plantes-carousel .slick-next,
    .conservation-carousel .slick-prev,
    .conservation-carousel .slick-next {
        display: none !important;
    }
}