/* ==========================================================================
   FICHIER : responsives.css
   RÔLE : Adaptabilité (Responsive Design) Tablette & Mobile.
   
   POURQUOI CE FICHIER EST ESSENTIEL :
   1. TRANSFORMATION DE LA GRILLE : Sur PC, les produits sont alignés en 
      colonnes fixes. Ici, on utilise Flexbox pour passer à 3 colonnes sur 
      Tablette et 2 colonnes sur Mobile, garantissant une lisibilité parfaite.
      
   2. ÉCONOMIE D'ESPACE : Suppression des éléments lourds ou inutiles sur petit 
      écran (images de décoration .image1/.image2, diaporama/slideshow) pour 
      accélérer le chargement et purifier le design.
      
   3. ERGONOMIE TACTILE : Les menus de navigation (absolus sur PC) sont 
      transformés en boutons "pilules" espacés et centrés, plus faciles à 
      cliquer avec le pouce.
      
   4. RÉALIGNEMENT DES ÉLÉMENTS : Le panier et les formulaires de recherche, 
      qui flottent à des endroits précis sur PC, sont ici remis dans le flux 
      vertical pour éviter les chevauchements de texte.
   ========================================================================== */



/* TABLETTE (≤ 1100px)
*/

@media screen and (max-width: 1100px) {

    .image1, 
    .image2 {
        display: none !important;
    }

    .wrapper {
        width: 95% !important;
    }

    .banniere1, .slideshow {
    display: none !important;
}


    /* Modification des produits sur tablette afin que ça s'affiche mieux  */
    
    .produits li {
        /* On passe à 3 produits par ligne environ sur tablette */
        width: calc(33.33% - 20px) !important; 
        min-height: 360px !important; /* Hauteur de sécurité */
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        margin-bottom: 20px !important;
    }

    .produits li img {
        height: 140px !important; /* Image un peu plus grande que sur mobile */
        object-fit: contain !important;
    }

    /* On uniformise la zone de texte */
    .produits li span {
        font-size: 13px !important;
        min-height: 45px !important; /* Place pour 2-3 lignes de texte */
        display: block !important;
    }

    /* NAVIGATION DISCRÈTE SUR TABLETTE (Boutons fins style pilule) 
       On évite les gros blocs pour garder de la finesse
    */
    .menu1, .menu2, .menu3, .menu4 {
        display: inline-block !important;
        width: auto !important;           /* S'adapte à la longueur du texte */
        padding: 0 15px !important;       /* Espacement intérieur */
        height: 30px !important;          /* Hauteur fine */
        line-height: 30px !important;
        margin: 5px !important;
        border: 1px solid #f17c79 !important; /* Bordure fine rose */
        border-radius: 20px;              /* Arrondi élégant */
        background-color: transparent !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .menu1 a, .menu2 a, .menu3 a, .menu4 a {
        color: #f17c79 !important;        /* Texte rose assorti */
        font-size: 12px !important;
        font-weight: bold;
    }

    /* AJUSTEMENT DU FOOTER (TABLETTE) */
    .blocbas {
        height: auto !important;
        min-height: 150px;
        padding: 20px 10px !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        background-color: #333;
    }

    .menu5, .mentionlegale, .fb, .informapik {
        width: 100% !important;
        text-align: center !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
    }

}


/* MOBILE (≤ 768px)
*/

@media screen and (max-width: 768px) {

    /* SUPPRESSION DU DIAPORAMA  */
    .banniere1, .slideshow {
        display: none !important;
    }

    /* NAVIGATION MOBILE (Style épuré) 
       Boutons fins pour ne pas étouffer l'écran
    */
    [class^="menu"] {
        display: inline-block !important; 
        width: auto !important; 
        padding: 0 12px !important;
        height: 28px !important;         /* Encore plus fin sur mobile */
        line-height: 28px !important;
        margin: 4px !important;
        border: 1px solid #f17c79 !important;
        border-radius: 15px;
        background-color: transparent !important;
        position: relative !important;
        top: 50px !important;
        left: auto !important;
    }
    
    [class^="menu"] a {
        color: #f17c79 !important;
        font-size: 11px !important;
        font-weight: bold;
    }

    /* Panier normal */
    .panier {
        position: relative !important;
        width: 100% !important;
        right: auto !important;
        margin: 10px 0 !important;
    }

    /* RECHERCHE ET GAMME CENTRÉS  */
    .recherche {
        position: relative !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 10px !important;
    }

    .texteGamme {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto 10px auto !important;
        font-size: 20px !important;      /* Un peu plus petit pour mobile */
    }

    #formu1 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    /* GRILLE DE PRODUITS (2 COLONNES)  */
    .produits {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        top: 0 !important;
    }

    /* Modification des produits sur mobile afin que ça s'affiche mieux  */

    .produits li {
        width: calc(50% - 15px) !important; 
        min-height: 340px !important; 
        height: auto !important;
        float: none !important;
        margin: 5px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 8px !important;
    }

    /* On s'assure que le nom du produit ne déborde pas */
    .produits li span, .produits li p {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin: 5px 0 !important;
        display: block !important;
        min-height: 40px;
    }

    /* On réduit un peu l'image sur mobile */
    .produits li img {
        height: 120px !important;
        margin-bottom: 10px !important;
    }


    /* AJUSTEMENT DU FOOTER (MOBILE) */
    .blocbas {
        height: auto !important;
        min-height: 150px;
        padding: 20px 10px !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        background-color: #333;
    }

    .menu5, .mentionlegale, .fb, .informapik {
        width: 100% !important;
        text-align: center !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    .informapik a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .informapik img {
        margin: 0 !important;
    }



    /* Contact */
    .pageContact, 
    .formContact {
        width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
    }

    /* Titres fixes */
    .titre1,
    .titre2,
    .titre3 {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        text-align: center;
        margin: 10px 0;
        width: 100% !important;
    }

    /* Boutons fixes à droite */
    .accueil,
    .actualites,
    .contact {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        right: auto !important;
        margin: 10px 0 !important;
    }
}