/* ==========================================================================
   RESPONSIVE.CSS — Mobile-first
   Priorité mobile : lisibilité, photos larges, navigation simple, tap facile.
   Aucune tentative de conserver les colonnes/asymétries du journal sur mobile.
   ========================================================================== */

/* --- Base = mobile (déjà appliqué par défaut dans style.css / layout.css) ---
   Les règles ci-dessous ajustent/ajoutent du confort desktop à partir
   des points de rupture définis en Phase 2 : 600px (tablette) et 1024px. */

/* Navigation desktop cachée sur mobile, burger visible */
.nav-desktop,
.nav-cta {
    display: none;
}

.burger {
    display: flex;
    margin-left: auto;
}

/* Footer empilé sur mobile */
.footer-inner {
    grid-template-columns: 1fr;
    gap: var(--espace-3);
    text-align: left;
}

/* Boutons pleine largeur sur mobile pour un tap confortable */
.hero-cta .btn,
.carte-produit-footer .btn-commander {
    text-align: center;
}

.hero-cta {
    flex-direction: column;
}

.hero-cta .btn {
    width: 100%;
}

/* Grille produits : 1 colonne stricte sur mobile */
.produits-grille {
    grid-template-columns: 1fr;
}

.temoignages-grille {
    grid-template-columns: 1fr;
}

/* Pas de hover/translation sur mobile (pas de souris) */
.carte-produit:hover {
    transform: none;
    box-shadow: var(--ombre-sm);
}

.carte-produit:hover .carte-produit-image img {
    transform: none;
}


/* ==========================================================================
   TABLETTE — à partir de 600px
   ========================================================================== */
@media (min-width: 600px) {
    .produits-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .temoignages-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .modes-livraison,
    .valeurs-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .hero-cta {
        flex-direction: row;
    }

    .hero-cta .btn {
        width: auto;
    }
}


/* ==========================================================================
   DESKTOP — à partir de 1024px
   Réintroduction de la navigation horizontale et des grilles éditoriales.
   ========================================================================== */
@media (min-width: 1024px) {
    .nav-desktop,
    .nav-cta {
        display: block;
    }

    .nav-desktop {
        display: flex;
    }

    .burger {
        display: none;
    }

    .footer-inner {
        grid-template-columns: 2.5fr 0.833fr 0.833fr 0.833fr;
    }

    .produits-grille {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .temoignages-grille {
        grid-template-columns: repeat(3, 1fr);
    }

    .modes-livraison,
    .valeurs-grille {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hover subtil autorisé uniquement en environnement desktop (souris) :
       la carte se soulève et la photo respire légèrement en zoom. */
    .carte-produit:hover {
        transform: translateY(-6px);
        box-shadow: var(--ombre-lg);
    }

    .carte-produit:hover .carte-produit-image img {
        transform: scale(1.06);
    }

    .encadre:hover {
        box-shadow: var(--ombre-md);
    }

    /* Exemple de mise en page éditoriale asymétrique (à activer page par page
       en Phase 5, ex. pour le bloc "Édito du chef" en 2 colonnes 8/4). */
    .grille-asymetrique {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--espace-5);
        align-items: start;
    }
}

/* Le style complet de .header-scrolled (ombre + compacité) est défini une
   seule fois dans layout.css pour éviter deux déclarations concurrentes. */