@import url(Font.css);

body{margin: 0px; padding: 0px; font-family: Rubik-Regular;}
a{text-decoration: none; color: #fff;}
*{margin: 0 auto;}

:root {
    --black1: #060606;
    --black2: #B7B7B7;
    --black3: #e1d8d8;
    --black4: #222222;

    --blue1: #233a95;
    --blue2: #2c365e;

    --red1: #ed174a;
    --red2: #fef1f4;
}

/* CUSTOM CLASSES */

/* width */ 
.w1100{width: 1100px;}  .w550{width: 550px;}    .w40{width: 40px;}     .w600{width: 600px;}     .w500{width: 5;}
/* height */ 
.h50{height: 50px;}   .h150{height: 150px;}   .h200{height: 200px;}   .h40{height: 40px;}
/* padding */ 
.p10{padding: 10px;}    .p20{padding: 20px;}    .p12{padding: 12px;}    .p18{padding: 18px;}
.px10{padding: 0px 10px;}    .px20{padding: 0px 20px;}  .px30{padding: 0px 30px;}
.py10{padding: 10px 0px;}    .py20{padding: 20px 0px;}  .py30{padding: 30px 0px;}
/* margin */
.mauto{margin: 0 auto;}     .oauto{overflow: auto;}
.mrx10{margin: 0px 10px;}     .mrx20{margin: 0px 20px;}     .mrx100{margin: 0px 100px;}
.mry10{margin: 10px 0px;}     .mry20{margin: 20px 0px;}     .mry100{margin: 100px 0px;}     .mry30{margin: 30px 0px;}
.mry50{margin: 50px 0px;}
.mrl100{margin: 0px 100px 0px 0px;}
/* float */ 
.fleft{float: left;}    .fright{float: right;}
/* background */ 
.bgc1{background-color: var(--black1);}     .bgc2{background-color: var(--red2);}       .bgc3{background-color: var(--blue2);}
/* fore-ground color */
.fgc1{color: var(--black1);}    .fgc2{color: var(--black2);}    .fgc3{color: var(--black3);} 
.fgc4{color: var(--red1);}   .fgc5{color: var(--red1);}  
.fgwhite{color: #fff;} 
/* border-radius */
.bradius{border-radius: 50%;}
/* opacity */
.op_7{opacity: 0.7;}





/* header1 */
.header1{padding: 30px 0px 20px 0px;}
.profile_icon{border-radius: 50%; border: 1px solid var(--black3);}
.header_con{width: 750px; margin: 0 auto; text-align: center;}
#con1{font-family: Rubik-Bold; font-size: 30px;}
#con2{font-family: Rubik-Light; font-size: 12px;}

/* menu */
#menu{height: 80px; background-color: var(--blue1); position: sticky; top: 0px; z-index: 10;}
#menu_wrap{width: 650px; margin: 0 auto;}
.menu_con,.sub_menu{margin:0px;padding:0px;list-style-type:none;}
#list .menu_con{float:left; width:auto; margin:30px 15px; font-size: 20px; position:relative; border-radius: 5px; transition: all .5s;}
.menu_con:hover{border-bottom: 1px solid #fff;}
#list .menu_con ul{display:none;}
#list .menu_con:hover ul{display:block; position:absolute; left:20px; background-color: #fff; border-radius: 10px;}
.sub_menu a{font-family: Rubik-SemiBold; font-size: 15px; color: #000;padding: 0px 15px 5px 0px;}
.sub_menu a:hover{color: var(--red1);}

/* banner */
#banner{height: 510px; background-image: url(../img/mart.jpg);background-repeat: no-repeat; background-size: 100%;}
.inner_banner{width: 1100px; padding: 150px 0px;}
.con1{font-family: Rubik-VariableFont_wght; font-size: 18px; padding-bottom:15px;}
.con2{font-family: Rubik-BoldItalic; font-size: 50px; margin-bottom: 30px;}
.shop_btn{margin: 0px; background-color: var(--red1); 
    font-family: Rubik-VariableFont_wght; font-size: 18px; font-weight: bold; text-align: center; 
    width: 100px; border-radius: 10px; padding: 15px 20px; transition: all 1s;}
.shop_btn:hover{background-color: var(--blue1);}
.ban_pic img{width: 500px;}

/* Products */
.vegetables{width: 1100px; height: 500px; padding: 50px 0px 100px 0px; margin: 0 auto;}
.item_header{font-family: Rubik-Italic-VariableFont_wght; font-size: 30px; font-weight: bold; text-align: center; margin-bottom: 50px; color: var(--red1);}
.items{width: 1100px; text-align: center;}
.labels a{color: var(--black1); font-family: Rubik-SemiBold; font-size: 17px;}
.labels{padding: 10px 20px; margin: 0px 20px; border-radius: 5px; border: var(--black2) 1px solid;}
.labels:hover{background-color: var(--red1);}
.labels:hover a{color: #fff;}
.items_card{width: 17%; margin: 0px 10px; float: left; border: var(--black3) 1px solid; padding: 0px 1px 10px 1px; border-radius: 5px; box-shadow: 2px 2px 8px var(--black2);}
.items_img1{background-image: url(../img/a1.png); height: 250px; background-repeat: no-repeat; background-size: cover; background-color: #f4f4f4; border-radius: 5px;}
.items_img2{background-image: url(../img/b1.png); height: 250px; background-repeat: no-repeat; background-size: cover; background-color: #f4f4f4; border-radius: 5px;}
.items_img3{background-image: url(../img/a2.png); height: 250px; background-repeat: no-repeat; background-size: cover; background-color: #f4f4f4; border-radius: 5px;}
.items_img4{background-image: url(../img/b2.png); height: 250px; background-repeat: no-repeat; background-size: cover; background-color: #f4f4f4; border-radius: 5px;}
.items_img5{background-image: url(../img/a3.png); height: 250px; background-repeat: no-repeat; background-size: cover; background-color: #f4f4f4; border-radius: 5px;}
.cart_btn{margin: 0 auto; font-family: Rubik-Light; font-size: 15px; text-align: center;
    width: 100px; padding: 7px 10px; transition: all 1s; border: var(--black2) 1px solid; border-radius: 5px;}
.cart_btn a{color: #000;}
.cart_btn:hover{background-color: var(--blue1);}
.cart_btn:hover a{color: #fff;}
.item_lebel{margin-top: 30px;}
.item_lebel a{color: var(--red1); font-weight: bold; font-size: 20px;}
.item_price{margin: 10px 0px; font-family: Rubik-Light; font-size: 15px;}
.item_price b{font-size: 18px;}

/* Cashback Banner */
.cashback{background-color: #e8e8ea; height: 400px; position: relative;}

.cashback_wrap{width: 50%; height: 400px; float: left;}
.cashback_banner{background-image: url(../img/bgs2.jpg); background-repeat: no-repeat; background-size: cover; width: 50%; height: 400px; float: right;}

.cashback_col1{width: 600px; height: 400px; float: left; position: relative; z-index: 1;}
.cashback_col1 img{width: 400px; height: 400px;}
.col1_content{position: absolute; top: 100px; left: 280px; z-index: 1;}
._con1{text-align: right; font-family: Rubik-VariableFont_wght;}
._con2{text-align: right; font-family: Rubik-BoldItalic; font-weight: bold; font-size: 40px;}
._con2 span{font-family: Rubik-VariableFont_wght; color: var(--red1);}
._con3{text-align: right; font-family: Rubik-VariableFont_wght; margin-top: 50px;}
._con3 a{color: var(--red1); transition: color 2s; text-shadow: 3px 2px 3px var(--blue1);}
._con3 a:hover{color: var(--black1);}

.cashback_col2{width: 500px; height: 400px; float: right; position: relative;}
.org_btn{margin: 180px auto;}
.org_btn span{font-family: Rubik-SemiBold; font-weight: bold; font-size: 20px; color: #fff; border: #fff 2px solid; padding: 20px; background-color: #000; border-radius: 10px;
position: absolute; top: 150px; left: 200px;
}

.banner_con_wrap{width: 1100px; margin: 0 auto; position: relative;}
.Banner_content{position: absolute; top: 0px; left: -50px; margin: 0 auto;}

/* Special Deals */
.banner_wrap{width: 1100px; height: 650px; position: relative; z-index: 1;}
.banner1_2{float: left; width: 610px; margin: 0 auto; position: relative; z-index: 1;}
.banner1{background-image: url(../img/bgs3.jpg); background-repeat: no-repeat; background-size: cover; height: 290px; margin: 0px 0px 20px 0px; border-radius: 10px; position: relative; z-index: 1;}
.banner2{background-image: url(../img/bgs5.jpg); background-repeat: no-repeat; background-size: cover; height: 290px; border-radius: 10px; position: relative; z-index: 1;}
.banner3{float: right; background-image: url(../img/bgs4.jpg); background-repeat: no-repeat; background-size: cover; width: 470px; height: 600px; margin: 0 auto; border-radius: 10px; position: relative; z-index: 1;}
.banner1 #discount1{width: 10px; height: 10px; background-color: var(--blue1); padding: 25px 45px 45px 25px; border-radius: 50%; position: absolute; top: 10px; right: 10px; color: #fff; font-family: Rubik-Light; font-weight: bold;}
#tit_wrap{position: absolute; top: 180px; left: 40px;}
#tit_wrap #title1{color: #fff; font-family: Rubik-SemiBold; font-size: 30px;}
.banner3 #banner3_con{position: absolute; top: 100px; right: 50px;}
.banner3 #banner3_con .ban3_con{text-align: right; width: 200px; font-family: Rubik-SemiBold; color: #fff; font-size: 30px; margin: 10px 0px;}
.banner3 #banner3_con .ban3_con:nth-child(even){color: var(--red1); font-family: Rubik-ExtraBold;}
.banner3 #banner3_con .ban3_con:nth-child(3){font-family: Rubik-Light;}

/* Top Brands */
.brands .brand_header{width: 200px; font-family: Rubik-Italic-VariableFont_wght; font-size: 30px; font-weight: bold; text-align: center; margin-bottom: 30px; color: var(--red1);}
.brand_icon_wrap{width: 1100px; height: 170px;}
.brand_icon_wrap .brand_icon{float: right; margin: 0px 30px;}
.brand_icon_wrap .brand_icon img{width: 160px; height: 100px; background-color: #f4f4f4; border-radius: 10px;}

/* Newsletter */
#form{height: 70px; background-color: var(--blue1); padding: 50px 0px;}
#form #form_elements{width: 1100px; background-color: #e1d8d8;}
#form #form_elements #form_con{width: 530px; float: left; font-family: Rubik-SemiBold; color: #fff;}
#form #form_elements #form_con #form_con1{font-size: 40px;}
#form #form_elements #form_con #form_con2{font-family: Rubik-Light; font-size: 15px; opacity: .8;}
#form #form_elements #form_email{width: 480px; float: right; position: relative;}
#form #form_elements #form_email #Email{margin: 0 auto; outline: none; border: #fff 0px solid; height: 40px; width: 340px; border-radius: 20px; font-size: 16px; padding: 0px 140px 0px 10px;}
#form #form_elements #form_email #form_btn{position: absolute; top: 11px; left: 380px;}
#form #form_elements #form_email #form_btn #Email_btn{background-color: var(--red1); font-size: 15px; padding: 12px 50px; color: #fff;border: none; border-radius: 0px 20px 20px 0px;}
#form #form_elements #form_email #Email::placeholder{position: absolute; left: 10px;}

/* Contact Us */
#Contact{width: 1100px; height: 240px; padding: 80px 0px;}
#Contact #Contact_header .Contact_tit{width: 255px; margin: 0px 10px 0px 0px; float: left; font-family: Rubik-VariableFont_wght; font-size: 25px;}
.address,.info,.social_button_list{list-style-type: none; font-size: 15px; color: #000;}
.address a{color: #000;}
.info a{color: #000;}
.social_button_list li{display: inline; padding: 8px 8px; margin: 0px 2px; font-size: 14px; background-color: var(--black3); border-radius: 50%;}
.social_button_list a{color: #000;}

/* Footer */
.page_footer{text-align: center; padding: 30px; border-top: 1px solid var(--black2);}

/* Formulaire */

/* Définition d'une variable pour la couleur principale (le vert du bouton 'Envoyer') */
:root {
    --main-color: #4CAF50; /* Vert foncé, basé sur le "green" du bouton */
    --secondary-color: #388E3C; /* Vert plus foncé pour le hover */
    --text-color: #333;
    --border-color: #ccc;
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Styles pour le Contenu Principal du Contact */
.main-content-wrapper {
    /* w1100 (centrage) */
    max-width: 1100px; 
    margin: 0 auto;
    padding: 20px;
}

.page-header-title {
    text-align: center;
    margin: 40px 0;
    font-size: 3.5rem;
    color: var(--main-color);
    font-weight: 700;
}

.section-subtitle {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--main-color);
    padding-bottom: 10px;
}

/* Disposition en deux colonnes (Formulaire et Infos) */
.contact-section-layout {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.form-wrapper,
.info-and-map-wrapper {
    width: 48%; /* Répartition à peu près égale */
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

/* Style du Formulaire */
.custom-contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    display: flex;
    gap: 15px;
}

.input-group .contact-input {
    flex: 1; /* Pour que prénom et nom prennent la même largeur */
}

.contact-input,
.contact-textarea {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-input:focus,
.contact-textarea:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    outline: none;
}

.contact-textarea {
    resize: vertical;
}

/* Style du Bouton d'Envoi */
.submit-btn {
    padding: 15px 20px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s;
}

.submit-btn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

.submit-btn i {
    margin-right: 8px;
}

/* Styles pour les Informations de Contact */
.info-block {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.contact-icon {
    color: var(--main-color);
    font-size: 1.5rem;
    margin-right: 15px;
    width: 30px; /* Assure un alignement parfait */
    text-align: center;
}

.info-block p a {
    color: var(--main-color);
    text-decoration: none;
}

.map-placeholder {
    margin-top: 30px;
    border-radius: 5px;
    overflow: hidden; /* Pour contenir l'iframe */
    border: 1px solid var(--border-color);
}

.map-placeholder iframe {
    width: 100%;
    display: block;
}

/* Message d'erreur JS */
.error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
    display: none; /* Masqué par défaut */
}

/* Media Queries pour la Réactivité (Mobile) */
@media (max-width: 768px) {
    .contact-section-layout {
        flex-direction: column;
    }

    .form-wrapper,
    .info-and-map-wrapper {
        width: 100%;
        margin-bottom: 30px;
    }
    
    .input-group {
        flex-direction: column;
    }
}

/* Mettez à jour les liens de menu actifs */
#menu #list .active-link a {
    color: var(--main-color); /* Assurez-vous d'utiliser votre couleur principale */
    font-weight: bold;
}

/* About */

/* --- Variables et Styles Généraux pour le Contenu --- */
:root {
    /* Couleur dominante (basée sur l'identité africaine/alimentaire) */
    --primary-color: #388E3C; /* Vert foncé/Authentique */
    --secondary-color: #FFC107; /* Jaune/Chaleur */
    --text-color: #333;
    --light-bg: #f5f5f5;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Centre le contenu principal */
.w1100 { 
    max-width: 1100px;
    margin: 0 auto;
}

/* Style de la page complète */
.about-page-wrapper {
    padding: 50px 20px;
}

.page-header-title {
    text-align: center;
    font-size: 3.2rem;
    color: var(--primary-color);
    margin-bottom: 50px;
    line-height: 1.2;
    font-weight: 700;
}

.section-subtitle {
    font-size: 2.5rem;
    color: var(--text-color);
    margin: 40px 0 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
    font-weight: 600;
}

/* --- Section 1: Mission --- */
.about-mission {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
    padding: 30px;
    background: var(--light-bg);
    border-radius: 10px;
}

.mission-text-block {
    flex: 2;
}

.mission-text-block p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 20px;
}

.mission-text-block p strong {
    color: var(--primary-color);
    font-weight: 700;
}

.mission-image-block {
    flex: 1;
    min-width: 300px; /* Assure une taille minimale pour l'image */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}
.mission-image-block img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Section 2: CAB Grid (Sélection) --- */
.cab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.cab-item {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 5px solid var(--primary-color);
}

.cab-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cab-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.cab-item h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

.cab-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

.cab-desc strong {
    color: var(--primary-color);
}


/* --- Section 3: Engagement --- */
.about-commitment {
    margin-bottom: 60px;
}

.about-commitment p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}
.about-commitment p strong {
    color: var(--secondary-color);
}

/* --- Section 4: CTA --- */
.about-cta {
    text-align: center;
    padding: 40px;
    background: var(--primary-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    margin-top: 40px;
}

.about-cta p {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 500;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: var(--secondary-color);
    color: var(--text-color);
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.cta-button:hover {
    background: #FFD740; /* Jaune plus clair */
    transform: scale(1.05);
}


/* --- Media Queries pour la Réactivité --- */
@media (max-width: 900px) {
    .page-header-title {
        font-size: 2.5rem;
    }
    .about-mission {
        flex-direction: column;
        text-align: center;
    }
    .mission-image-block {
        order: -1; /* Place l'image en haut sur mobile */
    }
}
@media (max-width: 600px) {
    .cab-grid {
        grid-template-columns: 1fr;
    }
    .cab-item {
        padding: 20px;
    }
    .about-cta p {
        font-size: 1.2rem;

    }
    .cta-button {
        font-size: 1.1rem;
        padding: 12px 25px;
    }
}

/* Mise à jour du menu actif */
#menu #list .active-link a {
    color: var(--primary-color);
    font-weight: bold;
}

/* Products*/

/* --- New CSS for the Products Page Grid (Simulating Bootstrap Columns) --- */

/* 1. Container and Row Setup */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.w1100 { 
    max-width: 1100px;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
    display: flex; /* Use flexbox for powerful column control */
    flex-wrap: wrap; /* Allow wrapping to new lines */
}
/* Ensure the products grid is the one using the flex layout */
.products-grid {
    margin-bottom: 70px; /* Spacing between product rows */
}

/* 2. Column Simulation (.col-md-4) */
.product-col-4 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Default for mobile (1 column) */
.product-col-4 {
    width: 100%;
}

/* Medium screens and up (3 columns) */
@media (min-width: 992px) {
    .product-col-4 {
        width: 33.33333333%;
    }
}
/* Tablets (2 columns) */
@media (min-width: 768px) and (max-width: 991px) {
    .product-col-4 {
        width: 50%;
    }
}

/* 3. Centering the last row (2 items in a 3-column grid) */
.center-last-row {
    justify-content: center; /* Center the remaining items horizontally */
}

/* 4. Product Image Height (to make them look uniform like the inspired services) */
.service-item .thumb img {
    height: 250px; /* Set a fixed height for all product images */
    object-fit: cover; /* Ensures images cover the area without stretching */
}

/* 5. CTA Button Style Update (Optional, using existing button class) */
.products-cta {
    margin-top: 30px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* ============================================== */
/* === STYLES SPÉCIFIQUES POUR LA GALERIE/PRODUITS (Portfolio) === */
/* ============================================== */

/* Réinitialisation ou Styles de base pour la grille */
.gap {
    height: 40px; /* Espaceur */
}
.gap-small {
    height: 20px;
}
.title-border {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d9d9d9; /* Ligne de séparation sous les titres */
    text-align: center; /* Centrer le titre de la page */
}

/* Styles pour le filtre de catégories (MixItUp) */
#portfolio-filter {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    text-align: center;
}
#portfolio-filter li {
    display: inline-block;
    margin: 0 5px 5px 0;
}
#portfolio-filter a {
    display: block;
    padding: 8px 15px;
    background-color: #f7f7f7;
    color: #595959;
    font-size: 13px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
#portfolio-filter a:hover {
    background-color: #e5e5e5;
    color: #333;
}
/* Style pour le filtre actif */
#portfolio-filter li.active a {
    background-color: #1693a5; 
    color: #ffffff;
}

/* Styles pour la grille d'éléments (MixItUp) */
#portfolio-grid {
    list-style: none;
    padding: 0;
    margin-left: -15px; /* Compense le padding du span3 pour un alignement parfait */
}
#portfolio-grid li {
    padding-left: 15px;
    position: relative; 
}
.mix {
    opacity: 0; /* Caché initialement, MixItUp le montre */
    display: none; /* Caché pour les navigateurs sans JS */
}
.mix.in {
    opacity: 1;
    display: block;
}

/* ============================================== */
/* === STYLES CLÉS POUR LE RECADRAGE DYNAMIQUE 4:3 (Portfolio) === */
/* ============================================== */

/* 1. Conteneur (a.thumb-info) : Force le ratio 4:3 (75% pour 4:3) */
.thumb-info {
    position: relative; /* CRITIQUE : Sert de base pour l'image en 'absolute' */
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: block;
    
    /* TECHNIQUE CLÉ POUR LE RATIO D'ASPECT CSS 4:3 */
    padding-top: 75%; /* (3 / 4) * 100% = 75% */
    height: 0; /* Annule la hauteur pour que padding-top définisse la hauteur réelle */
}

/* 2. Image (img) : Redimensionnement et Recadrage Dynamique */
.thumb-info img {
    /* CRITIQUE : Positionne l'image par-dessus le conteneur */
    position: absolute; 
    top: 0;
    left: 0;
    
    /* CRITIQUE : Assure que l'image prend 100% de la surface 4:3 */
    width: 100%;
    height: 100%;
    
    /* STYLE CLEF : Recadre l'image pour couvrir le conteneur 4:3 sans déformation */
    object-fit: cover; 
    
    display: block;
    transition: transform 0.3s ease-in-out;
}

/* Effet de zoom au survol */
.thumb-info:hover img {
    transform: scale(1.05);
}

/* 3. Styles pour le titre */
.thumb-info-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 1; 
}