/* ==========================================================================
   FICHIER : extrait_css.css
   RÔLE : Correctifs structurels et ajustements de précision.
   
   Ce fichier intervient en dernier dans la hiérarchie CSS (après style.css 
   et responsives.css) pour appliquer des réglages spécifiques sur :

   1. La structure globale (.wrapper, .banniere).
   2. L'affichage des actualités sur la page d'accueil.
   3. La fluidité des tableaux de commande sur mobile (overflow-x).
   
   On l'utilise pour isoler les modifications importantes de mise en 
   page sans polluer le fichier style.css principal.
   ========================================================================== */

/* STRUCTURE GLOBALE  */
.wrapper {
    width: 100% !important; /* Force le conteneur à prendre toute la largeur disponible */
    max-width: 1100px;      /* Mais ne dépasse jamais 1100px pour garder un design centré sur grand écran */
    margin: 0 auto;         /* Centre automatiquement le site dans la fenêtre du navigateur */
    position: relative;     /* Sert de point de repère pour les éléments positionnés en 'absolute' (comme le panier) */
}


.produits {
    /* 1. On annule le rembobinage de -30px qui fait monter les produits sur la diapo */
    top: 0px !important; 
    
    /* 2. On ajoute une marge de sécurité pour que le premier produit ne touche pas la diapo */
    margin-top: 50px !important; 
    
    /* 3. On s'assure que le bloc prend bien toute la largeur pour ne pas monter à côté */
    width: 100% !important;
    flex-basis: 100%;
}


.index .produits {
    margin-top: -10px !important;
}

.banniere {
    background-image: url(img/fond2.jpg);
    position: relative;
    top: 20px; 
    left: 0;
    width: 100% !important;
    height: 124px !important;
    background-color: #FFF;
    z-index: 7;
}

.banniere1 {
    cursor: pointer;
    margin-left: 5px;
    display: inline-block;
    position: relative;
    z-index: 8;
    width: 500px !important;
    height: 300px !important; 
    top: -10px !important; 
}

.banniere1 ul, 
.banniere1 img {
    width: 500px !important;
    height: 300px !important;
}



/* --- AJUSTEMENT POUR L'INDEX --- */
/* Comme l'index utilise un script spécial, on s'assure que l'actualité ne descend pas */
.actualite {
    margin-top: 0px !important; 
    position: relative;
    top: 10px; /* Petit ajustement pour coller à la bannière */
}




/* ACTUALITÉS (index.php)  */
.actualite {
    display: block;          /* Force chaque bloc d'actualité à occuper une ligne entière */
    width: 100% !important;
    max-width: 1100px;
    margin: 0 auto 30px auto; /* Centre le bloc et ajoute un espace de 30px en dessous */
    text-align: center;      /* Centre le texte et les images à l'intérieur */
    min-height: auto !important; /* Supprime toute contrainte de hauteur minimale héritée du style.css */
}





/* TABLEAUX DE COMMANDE  */
#texte_tableau {
    width: 100%;
    /* Sécurité Mobile : Si le tableau est trop large pour l'écran, 
       une barre de défilement apparaîtra UNIQUEMENT pour le tableau, sans casser le site */
    overflow-x: auto; 
}

table {
    width: 100%;             /* Le tableau occupe toute la largeur de son conteneur parent */
    /* min-width: 600px;     <- Optionnel : Garantit que le tableau reste lisible même sur petit écran */
}