/* --- Structure globale du slider --- */
/* --- 1. Structure globale --- */
.potatoes-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    /* Le padding pour faire de la place aux flèches est mis ici maintenant */
    padding: 40px 60px 60px 60px; 
}

.potatoes-swiper {
    padding: 0 !important; /* On supprime le padding interne */
    width: 100%;
    overflow: hidden !important; /* Coupe net ce qui dépasse des 3 slides */
	
    padding-bottom: 40px !important;
}

/* --- La Card --- */
.potato-card {
    position: relative;
    padding: 30px 20px 40px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* La couleur de fond est gérée en inline via le PHP */
}

/* --- Badge "Je suis agro" --- */
.potato-badge-agro {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px; /* Ajustez selon votre image */
    height: auto;
    z-index: 10;
}

/* --- Image principale --- */
.potato-image-wrapper {
    height: 180px; /* Hauteur fixe pour aligner les contenus en dessous */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 40px; /* Espace pour ne pas chevaucher le badge */
}
.potato-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Contenu (Taxo, Titre, Bouton) --- */
.potato-content {
    width: 100%;
}
.potato-taxonomy {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: 600;
}
.potato-divider {
    width: 30px;
    height: 3px;
    background-color: #fff;
    border: none;
    margin: 0 auto 20px auto;
}
.potato-title {
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #fff;
}
.potato-subtitle {
    
    font-family: "Shadows Into Light", cursive;
    font-size: 24px;
    color: #4a4a4a; /* Couleur foncée comme sur la maquette */
    margin: 0 0 30px 0;
}

/* --- Bouton --- */
.potato-btn {
    display: inline-block;
    background-color: #fff;
    color: #333;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s ease;
}
.potato-btn:hover {
    background-color: #333;
    color: #fff;
}
/* --- 2. Navigation (Flèches et Points) --- */
.potatoes-slider-container .swiper-button-next,
.potatoes-slider-container .swiper-button-prev {
    color: #d89f5c; 
    background: transparent;
    border: 2px solid #d89f5c;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* On les centre verticalement par rapport au conteneur parent */
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

/* On colle les flèches aux bords extérieurs du conteneur parent */
.potatoes-slider-container .swiper-button-prev {
    left: 0;
}
.potatoes-slider-container .swiper-button-next {
    right: 0;
}

.potatoes-slider-container .swiper-button-next:after,
.potatoes-slider-container .swiper-button-prev:after {
    font-size: 16px; 
}

/* On descend un peu la pagination pour qu'elle ne colle pas aux cartes */
.potatoes-swiper .swiper-pagination {
    bottom: 0px !important; 
}
.potatoes-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid #d89f5c;
    opacity: 1;
}
.potatoes-swiper .swiper-pagination-bullet-active {
    background: #d89f5c;
}