/* ========================================================== */
/* HERO : IMAGE (ORDINATEUR) / VIDÉO (MOBILE)                 */
/* ========================================================== */

@media (max-width: 1500px) {
    .sp-container {
        padding: 1rem 0%;
    }  
    .latest-products .product-grid {
            grid-template-columns: repeat(4,1fr);
    }
}

/* Pour tablettes et petits ordinateurs */
@media (max-width: 992px) {
    
     .latest-products .product-grid {
            grid-template-columns: repeat(3,1fr);
    }
    #cp-list, #cp-skeleton {
        grid-template-columns: repeat(2, 1fr);
    }
    .sp-container {
        padding: 1rem 3%;
    }
    .sp-grid {
        grid-template-columns: 1fr;
    }
    .rel-row {
        grid-template-columns: 1fr 1fr;
    }
    
    .video-overlay{
      background-color: rgb(10 56 51 / 30%);
    }
     .header {
      background-color: transparent;
   }
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border-top: 1px solid var(--border-light);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 5%;
        display: none;
        opacity: 0;
        backdrop-filter: blur(5px);
        transition: opacity 0.3s ease;
    }
    .navbar.active {
        display: flex;
        opacity: 1;
    }
    .navbar a {
        margin: 1rem 0;
        color: var(--primary-dark-green);
    }
    #menu-btn {
        display: block;
        font-size: 1.3rem;
        color: #d4af37;
    }

    .hero-slider .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1;
    }
    .hero-slider .hero-content p {
        font-size: 1.1rem;
    }
    .section-title {
        font-size: 2.2rem;
    }

    .about-us-mini {
        flex-direction: column-reverse;
        text-align: center;
    }
    .about-us-content {
        min-width: unset;
        width: 100%;
        padding-right: 3%;
    }
    .about-us-content .section-title {
        text-align: center;
    }
    .about-us-content .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .about-us-image {
        margin-bottom: 3rem;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-section {
        margin-bottom: 2rem;
        text-align: center;
    }
    .footer-section.footer-brand {
        order: -1;
        margin-bottom: 3rem;
    }
    .footer-section h4 {
        margin-bottom: 0.8rem;
    }
    }

/* Pour mobile et tablettes verticales */
@media (max-width: 768px) {
    #cp-list, #cp-skeleton {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
    .cp-card-content h3 {
        font-size: 1.5rem;
    }
    .latest-products .product-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 10PX;
    }
    .sp-rel .head {
        flex-direction: column;
    }
    .sp-info h1 {
        margin: 0px 0 0.5rem;
    }
    .sp-info h1, .sp-info h1 .skeleton{
     margin: 0px 0 0rem;
    }
    .sp-info h1 { font-size: 2rem; }
    .side-cart { max-width: 90%; }
    .sp-price {
        margin-bottom: 0.5rem;
    }
    .trust-banner {
        padding: 2.5rem 5%;
        /* Sur mobile, on peut passer sur 2 colonnes */
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .trust-item {
        min-width: unset;
        flex-direction: column;
    }
    .trust-item i {
        font-size: 2rem;
    }
    .trust-item p {
        font-size: 0.8rem;
    }
    .latest-products .product-card h3{
        margin: 0;
    }

    .collections-container {
        padding: 2rem 1rem; /* Réduit l'espacement général */
    }

    .collections-header h1 {
        font-size: 2rem; /* Réduit la taille du titre principal */
    }
    
    .collections-header p {
        font-size: 1rem; /* Réduit la taille du paragraphe */
    }

    /* --- La Grille Moderne --- */
    .collection-grid {
        /*
         * LA MODIFICATION CLÉ :
         * On force la grille à avoir exactement 2 colonnes qui se partagent l'espace.
        */
        grid-template-columns: repeat(2, 1fr); 
        gap: 1rem; /* Réduit l'espacement entre les cartes */
    }

    /* --- Le Design des Cartes --- */
    .card-overlay h3 {
        font-size: 1.5rem; /* Réduit la taille du titre sur la carte */
    }
    
    .collection-card-placeholder {
        padding: 1rem;
    }
    /* .collection-card img ,.image-container{
        height: 160px !important;
    } */
    .latest-products .product-card .price{
        margin-bottom: .4rem;
    }
    .container_info_card {
        /* MIN-height: 170px; */
    }
    .announcement-arrow {
        display: none;
    }
    .announcement-slide p {
        font-size: 0.8rem;
    }
    .announcement-bar {
        justify-content: center;
    }
    .hero-video {
        width: 150%;
    }
    .header {
        padding: 0.8rem 3%;
    }
    .header .logo .logo-img {
        height: 35px;
    }
    .product-card .image-container {
        height: 300px;
    }
    .icons i, .icons .fa-bars {
        margin-left: 1rem;
        font-size: 1.1rem;
        color: #d4af37;
    }
    .featured-collections {
        padding: 2rem 5%;
    }
    .hero-slider {
        height: 400px;
    }
    .hero-slider .hero-content h1 {
        font-size: 2.8rem;
    }
    .hero-slider .hero-content p {
        font-size: 1rem;
    }
    .slider-btn {
        padding: 0.6rem 0.9rem;
        font-size: 1.2rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .about-us-mini {
        padding: 2rem 0%;
    }
    .product-grid{
          grid-template-columns: repeat(2,1fr);
        gap: 9px;
    }
    .collection-grid {
      grid-template-columns: repeat(1,1fr);
    }
    .about-us-image img {
        max-width: 100%;
    }
    .footer-section p {
        font-size: 0.85rem;
    }
    
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-right-column { grid-row: 1; height: auto; position: static; border-left: none; background-color: transparent; padding: 0 0 3rem 0; border-bottom: 1px solid var(--border-light); }
    .checkout-left-column { padding-right: 0; border-right: none; }
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    .payment-summary {
        margin-top: 2rem;
        position: static; /* Annule le sticky sur mobile */
    }
}

/* Règle spécifique pour la navigation, souvent pour les tablettes */
@media (max-width: 820px){
    .nav-chef .full { display:none; }
    .nav-chef .short { display:inline; }
}
/* Règle spécifique pour la navigation, souvent pour les tablettes */
@media (max-width: 500px){

    .checkout-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .summary-items-list {
        padding-bottom: 0;
    }
    .summary-totals {
        padding-top: 0rem;
    }
    .payment-method-body {
        padding-left: 1rem;
    }
    .rib-details {
        padding-left: 15px;
    }
}

/* Pour les très petits mobiles (écrans jusqu'à 480px de large) */
@media (max-width: 480px) {
    .collection-grid {
        gap: 0.8rem; /* Espace encore plus réduit */
    }

    .card-overlay h3 {
        font-size: 1.2rem;
    }
}