/* =========================================
   STYLE GLOBAL
========================================= */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4; /* Fond gris clair pour le reste du site */
}

/* =========================================
   EN-TÊTE (HEADER) - Style Maxi Kits
========================================= */
.entete-principale {
    display: flex;
    justify-content: space-between; /* Pousse le logo à gauche et le menu à droite */
    align-items: center; /* Centre verticalement */
    background-color: #000000; /* Fond noir */
    color: #ffffff; /* Texte blanc */
    padding: 15px 50px; /* Espace autour */
    height: 5vh;
}

.boite-logo a {
    margin: 0;
    font-size: 30px;
    font-weight: bold; /* Pour garder l'aspect titre qu'avait le h2 */
    letter-spacing: 2px;
    color: #ffffff; /* Force la couleur blanche */
    text-decoration: none;
    display: inline-block; /* Obligatoire pour que le transform (agrandissement) fonctionne bien */
    transition: all 0.3s ease; /* Rend l'animation bien fluide */
}

.boite-logo a:hover {
    transform: scale(1.05); /* Agrandit le texte de 5% sans décaler le reste du menu */
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8); /* Crée une vraie lueur blanche diffuse tout autour */
}


/* =========================================
   LOGO CENTRAL
========================================= */
.logo-central {
    /* La position absolue le sort du flux normal, 
       il ne poussera ni le menu de gauche ni celui de droite */
    position: absolute;
    left: 50%; /* Pousse le logo à 50% de l'écran vers la droite */
    transform: translateX(-50%); /* Le recule de la moitié de sa propre taille pour qu'il soit PILE au centre */
}

.logo-central img {
    /* On limite la taille de l'image pour qu'elle ne déborde pas de tes 10vh */
    max-height: 6vh; /* 8vh laisse un petit espace (1vh en haut, 1vh en bas) */
    transition: transform 0.3s ease; /* Pour rajouter une petite animation sympa */
    box-shadow: 0px 8px 16px rgba(185, 213, 255, 0);
}

/* Optionnel : petit effet quand on passe la souris sur le logo central */
.logo-central img:hover {
    transform: scale(1.05);
}



/* =========================================
   NAVIGATION ET LIENS
========================================= */
.navigation-principale {
    display: flex;
    align-items: center;
    gap: 30px; /* Espace entre les liens */
}

.navigation-principale a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase; /* Met tout en majuscules */
    letter-spacing: 1px;
    transition: color 0.3s ease; /* Animation fluide au survol */
}

/* Changement de couleur au passage de la souris */
.navigation-principale a:hover, 
.bouton-compte:hover {
    color: #00fff7; /* Orange/Rouge style Maxi Kits, tu peux changer ! */
    cursor: pointer;
}

/* =========================================
   MENU DÉROULANT (COMPTE)
========================================= */
.menu-deroulant {
    position: relative;
    display: inline-block;
    /* On crée un "pont" invisible pour que la souris ne perde pas le hover */
    padding-bottom: 20px; 
    margin-bottom: -20px; 
}

.bouton-compte {
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* La boite cachée par défaut */
.contenu-deroulant {
    display: none;
    position: absolute;
    right: 0;
    top: 100%; /* Colle la boite pile en dessous du texte */
    background-color: #ffffff; 
    color: #000000; 
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-radius: 4px;
    overflow: hidden;
    z-index: 100;
}

/* Style du bandeau "Salut, ..." */
.contenu-deroulant p {
    margin: 0;
    padding: 12px 16px;
    font-size: 20px;
    background-color: #f1f1f1; 
    /* Le trait de séparation propre : */
    border-bottom: 1px solid #e0e0e0; 
}

/* Les liens du menu */
.contenu-deroulant a {
    display: block; /* CRUCIAL : force le lien à prendre toute la largeur ! */
    color: #000000; 
    padding: 12px 16px;
    text-transform: none; 
    font-weight: normal;
}

.contenu-deroulant a:hover {
    background-color: #f9f9f9;
    color: #00f2ff;
}

/* Afficher la boite au survol */
.menu-deroulant:hover .contenu-deroulant {
    display: block;
}

/* =========================================
   PIED DE PAGE (FOOTER) - Style Maxi Kits
========================================= */
.pied-principal {
    background-color: #000000; /* Fond noir comme l'en-tête */
    color: #ffffff; /* Texte blanc */
    padding: 40px 0 20px 0;
    margin-top: 50px; /* Donne de l'espace avec le contenu du dessus */
    font-size: 14px;
}

/* Grille alignée pour les 3 colonnes */
.conteneur-pied {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: table; /* Structure en tableau pour aligner les colonnes proprement */
    table-layout: fixed;
}

.colonne-pied {
    display: table-cell;
    vertical-align: top;
    padding: 0 20px;
}

/* Titres des sections du footer */
.colonne-pied h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.colonne-pied p {
    color: #cccccc;
    line-height: 1.6;
    margin: 0;
}

/* Liste de navigation */
.colonne-pied ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.colonne-pied ul li {
    margin-bottom: 10px;
}

.colonne-pied ul li a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.colonne-pied ul li a:hover {
    color: #0088ff; /* Lueur orange au survol */
}

/* Section réseaux sociaux */
.liens-reseaux {
    padding-top: 5px;
}

.lien-reseau {
    display: block; /* Un réseau par ligne */
    color: #cccccc;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.lien-reseau:hover {
    color: #00bbff;
}

/* Zone Copyright tout en bas */
.bas-copyright {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #222; /* Ligne fine de séparation */
}

.bas-copyright p {
    color: #666666;
    margin: 0;
    font-size: 12px;
}

/* =========================================
   PAGE DE CONNEXION (INDEX.PHP RACINE)
========================================= */
/* =========================================
   LA BANDEROLE NOIRE (PAGE DE CONNEXION)
========================================= */
.banniere-login {
    position: absolute; /* Se colle tout en haut indépendamment du reste */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000000; /* Le fond noir */
    color: #ffffff; /* Le texte blanc */
    text-align: center; /* Centre le texte (tu peux mettre "left" si tu préfères à gauche) */
    padding: 20px 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Petite ombre légère en dessous */
}

.banniere-login h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 3px; /* Espace bien les lettres pour le côté premium */
    font-weight: bold;
}

/* Assure-toi que ton .page-login a bien "position: relative;" 
Voici à quoi il doit ressembler maintenant :
*/
.page-login {
    position: relative; /* IMPORTANT pour la banderole absolute */
    background-color: #ffffff; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; 
}

.conteneur-login {
    width: 100%;
    max-width: 450px; /* Largeur de la boite de connexion */
    padding: 40px;
}

.conteneur-login h1 {
    font-size: 20px;
    color: #6c757d; /* Gris clair textuel */
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* Style des champs de texte */
.input-login {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ced4da; /* Bordure grise très fine */
    border-radius: 2px;
    font-size: 15px;
    box-sizing: border-box; /* Empêche le champ de dépasser de l'écran */
    color: #495057;
    font-family: inherit;
}

.input-login::placeholder {
    color: #adb5bd; /* Couleur grise du texte d'exemple */
}

.input-login:focus {
    outline: none;
    border-color: #495057; /* La bordure fonce quand on clique dedans */
}

/* Gestion des messages PHP */
.messages-alerte { margin-top: 30px; }
.messages-alerte .alerte { color: #dc3545; font-size: 14px; text-align: center; }
.messages-alerte .succes { color: #28a745; font-size: 14px; text-align: center; }

.copyright-login {
    color: #adb5bd;
    font-size: 12px;
    margin-top: 20px;
}

/* Alignement du bouton principal */
.actions-login {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* LE NOUVEAU BOUTON : Plein, noir, pro */
.bouton-login {
    width: 100%; /* Le bouton prend toute la largeur du formulaire */
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 15px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 3px; /* Coins très légèrement arrondis */
    transition: background-color 0.3s ease;
}

/* Effet au survol du bouton principal */
.bouton-login:hover {
    background-color: #006177;
}

/* Zone du lien de création de compte */
.liens-bas-login {
    text-align: center; /* Centre le lien sous le bouton */
    margin-top: 15px;
}

/* Lien pour créer un compte (style épuré) */
.lien-secondaire {
    color: #6c757d;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent; /* Prépare une bordure invisible */
}

.lien-secondaire:hover {
    color: #000000; /* Devient noir au survol */
    border-bottom: 1px solid #000000; /* Un trait fin apparaît sous le texte */
}

/* =========================================
   PAGES INTERNES (PARAMÈTRES, CATALOGUE...)
========================================= */
.conteneur-page {
    width: 90%;
    max-width: 1000px;
    margin: 50px auto; /* Centre la page avec de l'espace en haut et en bas */
    min-height: 50vh; /* S'assure que le footer ne remonte pas trop haut */
}

.titre-page {
    font-size: 28px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
    border-left: 5px solid #00b3ff; /* Petit trait de design sur la gauche */
    padding-left: 15px;
}

/* Grille pour aligner les cartes de paramètres */
.grille-parametres {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si l'écran est petit */
    gap: 30px;
}

/* Style des blocs individuels */
.carte-parametre {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 30px;
    flex: 1; /* Prend l'espace disponible équitablement */
    min-width: 300px; /* Ne devient jamais trop petit */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.carte-parametre h2 {
    font-size: 18px;
    margin-top: 0;
    text-transform: uppercase;
    color: #333333;
}

.separateur {
    border: 0;
    border-top: 1px solid #eeeeee;
    margin: 15px 0 25px 0;
}

.info-texte {
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* --- BOUTONS SPÉCIFIQUES --- */

/* Bouton rouge pour supprimer (utilise la base du bouton noir de connexion) */
.bouton-rouge {
    background-color: #dc3545;
}

.bouton-rouge:hover {
    background-color: #c82333;
}

/* Variante : bouton qui ressemble à un lien mais stylé (ex: Supprimer mon compte) */
.bouton-danger {
    display: block;
    text-align: center;
    background-color: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.bouton-danger:hover {
    background-color: #dc3545;
    color: #ffffff;
}

/* Option pour centrer une carte toute seule (Page delete) */
.zone-centree {
    max-width: 500px;
    margin: 0 auto;
}

/* =========================================
   PAGE CATALOGUE (GRILLE PRODUITS) - 5 PAR LIGNE
========================================= */

/* =========================================
   CONTENEUR SPÉCIFIQUE AU CATALOGUE (PLEINE LARGEUR)
========================================= */
.conteneur-catalogue {
    width: 96%; /* Prend presque tout l'écran, laisse juste une toute petite bordure esthétique */
    max-width: none; /* Fait sauter la limite des 1000px ! */
    margin: 50px auto;
    min-height: 50vh;
}

.grille-produits {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* On réduit un peu l'espace pour faire rentrer les 5 cartes */
    justify-content: flex-start;
}

.carte-produit {
    background-color: #ffffff;
    border: 1px solid #eaeaea; /* Bordure très douce, plus moderne */
    border-radius: 8px; /* Coins légèrement plus arrondis */
    padding: 15px; /* Moins de marge interne pour gagner de la place */
    width: calc(20% - 16px); /* 20% = 5 maillots par ligne (moins l'espace du gap) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carte-produit:hover {
    transform: translateY(-5px);
    /* Ombre avec un léger reflet bleu ciel au survol pour coller à ton thème */
    box-shadow: 0 12px 24px rgba(0, 179, 255, 0.15); 
}

.image-produit {
    width: 100%;
    height: 160px; /* HAUTEUR FIXE OBLIGATOIRE : aligne toutes tes cartes même si les images sont différentes */
    object-fit: contain; 
    margin-bottom: 15px;
}

.nom-produit {
    font-size: 13px; /* Police un peu plus petite car les cartes sont étroites */
    font-weight: 700;
    color: #333333;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    flex-grow: 1; /* Pousse le prix et le bouton vers le bas */
}

/* Le bouton "Voir les détails" */
.bouton-voir {
    background-color: #ffffff;
    color: #00b3ff; 
    border: 2px solid #00b3ff;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    border-radius: 3px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    display: block; /* S'assure que le bouton prend bien sa forme de bloc */
}

.bouton-voir:hover {
    background-color: #00b3ff;
    color: #ffffff;
}

/* =========================================
   PAGE DÉTAIL PRODUIT (PRODUCT.PHP)
========================================= */
.conteneur-produit {
    display: flex;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 50px; /* Un peu plus d'espace à l'intérieur */
    gap: 100px; /* On écarte bien l'image du formulaire */
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    width: 100%; /* S'assure que le bloc blanc touche les bords */
    box-sizing: border-box;
}

/* Colonne Image (Gauche) */
.colonne-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* J'utilise ton bleu ciel pour la bordure autour de l'image, comme sur ton wireframe mais adapté à tes couleurs */
    border: 2px solid #00b3ff; 
    border-radius: 8px;
    padding: 20px;
    background-color: #fcfcfc;
}

.image-detail {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

/* Colonne Formulaire (Droite) */
.colonne-formulaire {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.entete-formulaire {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #f4f4f4;
    padding-bottom: 15px;
}

.entete-formulaire h2 {
    margin: 0;
    font-size: 22px;
    text-transform: uppercase;
    color: #000000;
}

.prix-detail {
    font-size: 22px;
    font-weight: bold;
    color: #00b3ff;
}

.formulaire-produit {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.groupe-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.groupe-input label {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
}

/* Design des champs de saisie */
.formulaire-produit input[type="text"],
.formulaire-produit input[type="number"],
.formulaire-produit select {
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.formulaire-produit input:focus,
.formulaire-produit select:focus {
    outline: none;
    border-color: #00b3ff;
}

/* Alignement du bas (Quantité + Bouton) */
.bas-formulaire {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-top: 10px;
}

.quantite-box {
    width: 120px;
}

/* Le gros bouton d'ajout au panier */
.bouton-panier {
    flex: 1;
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.bouton-panier:hover {
    background-color: #ffffff;
    color: #000000;
}

/* S'adapte sur téléphone : les colonnes passent l'une sous l'autre */
@media (max-width: 800px) {
    .conteneur-produit {
        flex-direction: column;
        padding: 20px;
        gap: 30px;
    }
}

/* =========================================
   PAGE PANIER (PANIER.PHP)
========================================= */
/* La carte de chaque article du panier */
.carte-panier {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Ombre très légère */
    gap: 30px;
}

/* L'image de l'article */
.image-panier {
    width: 150px; /* Taille fixée pour ne pas prendre tout l'écran */
    height: auto;
    object-fit: contain;
    background-color: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 10px;
}

/* La zone centrale avec le texte */
.details-panier {
    flex-grow: 1; /* Pousse le prix tout à droite en prenant l'espace restant */
}

.details-panier h3 {
    margin-top: 0;
    color: #000000;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
}

.details-panier p {
    margin: 5px 0;
    color: #555555;
    font-size: 15px;
}

/* Le prix sur la droite */
.prix-panier p {
    font-size: 22px;
    font-weight: bold;
    color: #00b3ff;
    margin: 0;
}

/* =========================================
   ZONE DE VALIDATION DU PANIER
========================================= */
.form-validation {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.form-validation input[type="text"] {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
    font-size: 15px;
    font-family: inherit;
}

.form-validation input[type="text"]:focus {
    outline: none;
    border-color: #00b3ff;
}

.bouton-valider {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 14px 25px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bouton-valider:hover {
    background-color: #00b3ff;
}

/* =========================================
   ZONE DE RECHERCHE CATALOGUE
========================================= */

/* Remplace le style inline */
.zone-recherche-catalogue {
    text-align: center;
    margin-bottom: 30px;
}

/* Aligne le champ texte et le bouton proprement sur la même ligne */
.barre-recherche {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Petit espace entre le champ et le bouton */
}

/* Style du champ de saisie (inspiré de tes autres formulaires) */
.input-recherche {
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 300px; /* Largeur de la barre */
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

/* Lueur bleue quand on clique dans la barre de recherche */
.input-recherche:focus {
    outline: none;
    border-color: #00b3ff;
}

/* Style du bouton "Chercher" (inspiré de tes boutons noirs) */
.bouton-recherche {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 13px 25px; /* Aligné avec la hauteur de l'input */
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Devient bleu ciel au survol */
.bouton-recherche:hover {
    background-color: #00b3ff;
}

/* =========================================
   CLASSES DE FORMATAGE (HOME.PHP)
========================================= */

/* Messages système */
.message-succes {
    text-align: center;
    color: green;
    font-weight: bold;
    margin-top: 20px;
}

.message-vide {
    text-align: center;
    width: 100%;
    color: #777;
    font-style: italic;
}

/* Typographie Bienvenue */
.titre-bienvenue {
    margin-bottom: 5px;
    font-size: 32px;
    text-transform: uppercase;
    color: #000;
}

.sous-titre-bienvenue {
    text-align: center;
    color: #555;
    font-size: 18px;
    margin-bottom: 30px;
}

/* Zone de recherche Accueil */
.zone-recherche-accueil {
    text-align: center;
    margin-bottom: 40px;
}

.bouton-recherche {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    background-color: #00b3ff;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
}

.bouton-recherche:hover {
    background-color: #000000;
}

/* Ligne de séparation esthétique */
.separateur-section {
    border: 0;
    border-top: 1px solid #eee;
    margin: 40px 0;
}

/* Ajustement du titre Nouveautés */
.titre-section {
    text-align: center;
    display: block;
    margin-bottom: 30px;
}

/* =========================================
   BANNIÈRE IMAGE ET RÉASSURANCE (HOME.PHP)
========================================= */

/* Bannière principale */
.banniere-image-container {
    margin-bottom: 50px;
    text-align: center;
}

.image-banniere-promo {
    width: 100%;
    max-width: 160vh; 
    height: auto;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.image-banniere-promo:hover {
    transform: scale(1.02); 
}

/* Barre de réassurance (4 colonnes) */
.barre-reassurance {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 60px;
    padding: 30px 0;
}

.reassurance-item {
    flex: 1;
    text-align: center;
}

.icone-ronde {
    font-size: 40px;
    margin-bottom: 15px;
}

.reassurance-item h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #333;
    text-transform: uppercase;
}

.reassurance-item p {
    margin: 0;
    font-size: 14px;
    color: #777;
}

/* Positionnement du badge NOUVEAUTÉ */
.carte-produit {
    position: relative; /* Indispensable pour que le badge reste DANS la carte */
}

.badge-nouveau {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #ffffff;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #ddd;
    text-transform: uppercase;
    z-index: 10;
}