/* style.css : feuille de style globale, chaque ligne commentee. */

* { /* Reset global + police par defaut */
    box-sizing: border-box; /* Inclut padding/border dans les dimensions */
    margin: 0;              /* Supprime les marges par defaut */
    padding: 0;             /* Supprime les espacements internes par defaut */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Police moderne sans serif */
}

/* Base page */
body { /* Style du corps de page */
    background: #f5f6fa; /* Fond gris clair */
    color: #222;         /* Couleur de texte principale */
}

header { /* Barre d'entete */
    background: #1e90ff;            /* Fond bleu */
    color: #fff;                    /* Texte blanc */
    padding: 15px 30px;             /* Espacement interne */
    display: flex;                  /* Layout flex */
    justify-content: space-between; /* Espace entre titre et nav */
    align-items: center;            /* Alignement vertical */
}

header h1 { /* Titre dans l'entete */
    font-size: 24px; /* Taille du titre */
}

nav a { /* Liens dans la nav */
    color: #fff;           /* Couleur blanche */
    margin-left: 15px;     /* Espacement entre liens */
    text-decoration: none; /* Pas de soulignement */
    font-weight: 500;      /* Semi-gras */
}

nav a:hover { /* Survol des liens */
    text-decoration: underline; /* Souligne au hover */
}

.container { /* Conteneur principal */
    max-width: 1200px; /* Largeur max */
    margin: 30px auto; /* Centre + marge verticale */
    padding: 0 15px;   /* Espacement horizontal */
}

.hero { /* Bandeau d'accueil */
    background: #ffffff;                  /* Fond blanc */
    border-radius: 8px;                   /* Coins arrondis */
    padding: 40px;                        /* Espacement interne */
    text-align: center;                   /* Texte centre */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Ombre legere */
}

.hero h2 { /* Titre hero */
    font-size: 32px;     /* Taille titre */
    margin-bottom: 15px; /* Espace sous titre */
}

.hero p { /* Texte hero */
    margin-bottom: 25px; /* Espace sous paragraphe */
    font-size: 16px;     /* Taille texte */
    color: #555;         /* Gris */
}

.btn-primary { /* Bouton principal */
    background: #1e90ff;   /* Fond bleu */
    border: none;          /* Sans bordure */
    border-radius: 4px;    /* Coins arrondis */
    color: #fff;           /* Texte blanc */
    padding: 12px 24px;    /* Espacement interne */
    text-decoration: none; /* Pas de soulignement */
    font-weight: 600;      /* Gras */
    display: inline-block; /* S'affiche en bloc inline */
}

.btn-primary:hover { /* Hover bouton principal */
    background: #1171c4; /* Bleu plus sombre */
}

.cards { /* Grille de cartes generique */
    margin-top: 30px;                                       /* Espace au-dessus */
    display: grid;                                          /* Layout grille */
    gap: 20px;                                              /* Espacement entre cartes */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Colonnes adaptatives */
}

.card { /* Carte standard */
    background: #ffffff;                     /* Fond blanc */
    border-radius: 8px;                      /* Coins arrondis */
    padding: 20px;                           /* Espacement interne */
    box-shadow: 0 2px 10px rgba(0,0,0,0.04); /* Ombre legere */
}

.card h3 { /* Titre de carte */
    margin-bottom: 10px; /* Espace sous le titre */
}

.card p { /* Paragraphe dans une carte */
    color: #555;     /* Gris */
    font-size: 14px; /* Taille texte */
}

.section-header { /* Entete de section avec titre + action */
    margin-top: 30px;                /* Espace au-dessus */
    margin-bottom: 15px;             /* Espace en dessous */
    display: flex;                   /* Flex container */
    flex-wrap: wrap;                 /* Autorise le retour */
    align-items: center;             /* Centrage vertical */
    gap: 12px;                       /* Espacement */
    justify-content: space-between;  /* Titre à gauche, lien à droite */
}

.link-inline { /* Lien inline stylise */
    color: #1e90ff;       /* Couleur bleue */
    font-weight: 600;     /* Semi-gras */
    text-decoration: none; /* Pas de soulignement */
}

.link-inline:hover { /* Hover lien inline */
    text-decoration: underline; /* Souligne au survol */
}

.product-grid { /* Grille produits */
    margin-top: 10px;                                    /* Espace au-dessus */
    display: grid;                                       /* Layout grille */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Cartes adaptatives */
    gap: 24px;                                           /* Espacement entre cartes */
}

.product-card img { /* Image dans carte produit */
    width: 100%;             /* Pleine largeur */
    height: 200px;           /* Hauteur fixe */
    object-fit: contain;     /* Conserve le ratio */
    border-radius: 6px;      /* Coins arrondis */
    margin-bottom: 12px;     /* Espace sous l'image */
    background: #f0f2f5;     /* Fond gris */
}

.product-card h3 { /* Titre produit */
    margin-bottom: 8px; /* Espace sous le nom */
}

.product-card p { /* Texte produit */
    color: #555;     /* Gris */
    font-size: 14px; /* Taille texte */
}

.price-line { /* Ligne prix + ref */
    display: flex;                  /* Flex */
    justify-content: space-between; /* Prix à gauche, ref à droite */
    align-items: center;            /* Centrage vertical */
    margin-top: 10px;               /* Espace au-dessus */
    font-size: 14px;                /* Taille texte */
}

.price { /* Style du prix */
    font-weight: 700; /* Gras */
    color: #1e90ff;   /* Bleu prix */
}

.muted { /* Texte atténué */
    color: #666;     /* Gris moyen */
    margin-top: 8px; /* Espace au-dessus */
}

form { /* Style global des formulaires */
    background: #ffffff;                      /* Fond blanc */
    padding: 25px;                           /* Espacement interne */
    border-radius: 8px;                      /* Coins arrondis */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);  /* Ombre legere */
    margin-top: 20px;                        /* Espace au-dessus */
}

.form-group { /* Bloc champ + label */
    margin-bottom: 15px; /* Espace entre champs */
}

label { /* Label de formulaire */
    display: block;     /* Occupe toute la ligne */
    margin-bottom: 5px; /* Espace sous le label */
    font-weight: 500;   /* Semi-gras */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
select { /* Champs texte / select */
    width: 100%;            /* Pleine largeur */
    padding: 10px;          /* Espacement interne */
    border-radius: 4px;     /* Coins arrondis */
    border: 1px solid #ccc; /* Bordure grise */
}

input[type="submit"],
button { /* Boutons globaux */
    background: #1e90ff;  /* Fond bleu */
    border: none;         /* Sans bordure */
    border-radius: 4px;   /* Coins arrondis */
    color: #fff;          /* Texte blanc */
    padding: 10px 18px;   /* Espacement interne */
    cursor: pointer;      /* Curseur main */
    font-weight: 600;     /* Semi-gras */
}

input[type="submit"]:hover,
button:hover { /* Hover sur boutons */
    background: #1171c4; /* Bleu fonce */
}

.error { /* Bloc d'erreur */
    background: #ffe5e5; /* Fond rose clair */
    color: #b30000;      /* Texte rouge */
    padding: 10px;       /* Espacement */
    border-radius: 4px;  /* Coins arrondis */
    margin-bottom: 15px; /* Espace sous le bloc */
    font-size: 14px;     /* Taille texte */
}

.success { /* Bloc de succès */
    background: #e6ffed; /* Fond vert clair */
    color: #067d3b;      /* Texte vert */
    padding: 10px;       /* Espacement */
    border-radius: 4px;  /* Coins arrondis */
    margin-bottom: 15px; /* Espace sous le bloc */
    font-size: 14px;     /* Taille texte */
}

.table { /* Tableau générique */
    width: 100%;             /* Largeur 100% */
    border-collapse: collapse; /* Fusion des bordures */
    margin-top: 20px;        /* Espace au-dessus */
}

.table th,
.table td { /* Cellules du tableau */
    border: 1px solid #ddd; /* Bordure fine */
    padding: 8px 10px;      /* Espacement interne */
    text-align: left;       /* Alignement gauche */
    font-size: 14px;        /* Taille texte */
}

.table th { /* Entête du tableau */
    background: #f0f2f5; /* Fond gris clair */
}

.badge { /* Badge arrondi */
    display: inline-block; /* Affichage inline */
    padding: 3px 8px;      /* Espacement interne */
    border-radius: 999px;  /* Forme pill */
    font-size: 11px;       /* Petite taille */
    background: #e5f2ff;   /* Fond bleu clair */
    color: #1e90ff;        /* Texte bleu */
}

.profile-box { /* Encadré profil */
    background: #ffffff;                     /* Fond blanc */
    border-radius: 8px;                      /* Coins arrondis */
    padding: 20px;                           /* Espacement interne */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);  /* Ombre legere */
    margin-bottom: 20px;                     /* Espace sous le bloc */
}

footer { /* Pied de page */
    text-align: center; /* Centrage texte */
    padding: 20px;      /* Espacement interne */
    margin-top: 40px;   /* Espace au-dessus */
    font-size: 13px;    /* Taille texte */
    color: #777;        /* Texte gris */
}

/* Bloc panier */
.cart-form { /* Formulaire panier */
    background: #fff;                       /* Fond blanc */
    border: 1px solid #e6e9f0;              /* Bordure claire */
    border-radius: 10px;                    /* Coins arrondis */
    padding: 16px;                          /* Espacement interne */
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* Ombre legere */
    margin-top: 16px;                       /* Espace au-dessus */
}

.cart-table { /* Conteneur des lignes panier */
    display: flex;          /* Colonne */
    flex-direction: column; /* Orientation verticale */
    gap: 12px;              /* Espace entre lignes */
}

.cart-row { /* Ligne de produit dans le panier */
    display: grid;                                      /* Grille pour répartir colonnes */
    grid-template-columns: 1fr 120px 120px 120px 90px;  /* Produit | prix | qty | total | action */
    align-items: center;                                /* Alignement vertical */
    gap: 12px;                                          /* Espace entre colonnes */
    padding: 10px 0;                                    /* Espacement vertical */
    border-bottom: 1px solid #f0f2f5;                   /* Séparateur */
}

.cart-product { /* Bloc image + infos produit */
    display: flex;        /* Flex horizontal */
    gap: 12px;            /* Espace entre image et texte */
    align-items: center;  /* Alignement vertical */
}

.cart-product img { /* Image du produit dans le panier */
    width: 70px;            /* Largeur fixe */
    height: 70px;           /* Hauteur fixe */
    object-fit: cover;      /* Remplit en rognant si besoin */
    border-radius: 6px;     /* Coins arrondis */
    border: 1px solid #eee; /* Bordure fine */
}

.cart-price,
.cart-total { /* Colonnes prix et total */
    text-align: right; /* Alignement à droite */
    font-weight: 600;  /* Semi-gras */
    color: #1e293b;    /* Gris foncé */
}

.cart-qty input { /* Champ quantité */
    width: 70px;               /* Largeur réduite */
    padding: 6px;              /* Espacement interne */
    border-radius: 6px;        /* Coins arrondis */
    border: 1px solid #d7dce5; /* Bordure claire */
}

.cart-actions { /* Ligne actions (vider, total, boutons) */
    display: flex;                 /* Flex horizontal */
    justify-content: space-between; /* Espace entre blocs */
    align-items: center;           /* Alignement vertical */
    margin-top: 14px;             /* Espace au-dessus */
}

.cart-summary { /* Bloc total et boutons */
    display: flex;       /* Flex horizontal */
    align-items: center; /* Alignement vertical */
    gap: 12px;           /* Espacement entre éléments */
}

.btn-disabled { /* Bouton désactivé */
    background: #ccc;       /* Fond gris */
    border: 1px solid #ccc; /* Bordure gris */
    color: #666;            /* Texte gris foncé */
    cursor: not-allowed;    /* Curseur interdit */
    padding: 10px 12px;     /* Espacement */
    border-radius: 6px;     /* Coins arrondis */
}

.stock { /* Classe générique stock */
    font-weight: 600; /* Semi-gras */
    margin: 6px 0;    /* Espace vertical */
}

.stock-ok { /* Stock disponible */
    color: #0c9b2c; /* Vert */
}

.stock-out { /* Stock épuisé */
    color: #b30000; /* Rouge */
}

@media (max-width: 900px) { /* Styles responsives < 900px */
    .cart-row {
        grid-template-columns: 1fr; /* 1 colonne pour simplifier */
        align-items: start;         /* Alignement en haut */
    }
    .cart-price,
    .cart-total {
        text-align: left;          /* Alignement gauche en mobile */
    }
    .cart-actions {
        flex-direction: column;    /* Actions empilées */
        align-items: flex-start;   /* Alignement gauche */
        gap: 10px;                 /* Espacement vertical */
    }
    .cart-summary {
        flex-wrap: wrap;           /* Autorise retour à la ligne */
    }
}

.catalog-grid { /* Grille catalogue générique */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Colonnes adaptatives */
    gap: 24px; /* Espacement */
}

.btn-secondary { /* Bouton secondaire */
    display: inline-block;      /* Affichage inline-block */
    margin-top: 10px;           /* Espace au-dessus */
    padding: 10px 12px;         /* Espacement interne */
    border-radius: 6px;         /* Coins arrondis */
    border: 1px solid #1e90ff;  /* Bordure bleue */
    color: #1e90ff;             /* Texte bleu */
    text-decoration: none;      /* Pas de soulignement */
    font-weight: 600;           /* Semi-gras */
    text-align: center;         /* Texte centre */
    transition: all 0.15s ease; /* Transition hover */
}

.btn-secondary:hover { /* Hover bouton secondaire */
    background: #1e90ff; /* Fond bleu */
    color: #fff;         /* Texte blanc */
}

.dashboard-cards { /* Grille des cartes de stats (dashboard) */
    display: grid;                                      /* Layout grille */
    gap: 16px;                                          /* Espacement */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Colonnes adaptatives */
    margin-top: 16px;                                   /* Espace au-dessus */
}

.dashboard-card { /* Carte de stats */
    background: #fff;                       /* Fond blanc */
    border: 1px solid #e6e9f0;              /* Bordure claire */
    border-radius: 8px;                     /* Coins arrondis */
    padding: 14px;                          /* Espacement interne */
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* Ombre legere */
}

.dashboard-card h4 { /* Titre de métrique */
    margin-bottom: 6px; /* Espace sous le titre */
}

.dashboard-card .metric { /* Valeur principale */
    font-size: 24px;  /* Grande taille */
    font-weight: 700; /* Gras */
}

.dashboard-card small { /* Légende sous la métrique */
    color: #6b7280; /* Gris */
}

.invoice-box { /* Conteneur de facture */
    background: #fff;                        /* Fond blanc */
    border: 1px solid #e6e9f0;               /* Bordure claire */
    border-radius: 10px;                     /* Coins arrondis */
    padding: 20px;                           /* Espacement interne */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);  /* Ombre legere */
    margin-top: 16px;                        /* Espace au-dessus */
}

.invoice-grid { /* Grille pour blocs client/pro/détails */
    display: grid;                                            /* Layout grille */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Colonnes adaptatives */
    gap: 16px;                                               /* Espacement */
    margin-bottom: 14px;                                     /* Espace sous la grille */
}

.invoice-grid .box { /* Bloc individuel de la grille facture */
    background: #f8fafc; /* Fond gris-bleu clair */
    padding: 12px;       /* Espacement interne */
    border-radius: 8px;  /* Coins arrondis */
}

.inline-form { /* Formulaire affiché en ligne */
    display: inline; /* Inline pour aligner plusieurs formulaires */
}

.catalog-hero { /* Bandeau hero du catalogue */
    background: linear-gradient(135deg, #1e90ff 0%, #4db6ff 100%); /* Dégradé bleu */
    color: #fff;             /* Texte blanc */
    border-radius: 12px;     /* Coins arrondis */
    padding: 28px;           /* Espacement interne */
    display: flex;           /* Flex horizontal */
    align-items: center;     /* Centrage vertical */
    justify-content: space-between; /* Espace entre blocs */
    gap: 16px;               /* Espacement entre éléments */
    box-shadow: 0 6px 18px rgba(0, 129, 255, 0.15); /* Ombre marquée */
}

.catalog-hero h2 { /* Titre dans le bandeau catalogue */
    font-size: 30px;   /* Grande taille */
    margin-bottom: 8px; /* Espace sous le titre */
}

.catalog-hero .muted { /* Texte atténué en blanc */
    color: rgba(255,255,255,0.85); /* Blanc atténué */
}

.catalog-toolbar { /* Barre d'outils du catalogue (recherche/filtres) */
    margin-top: 18px;                        /* Espace au-dessus */
    background: #fff;                        /* Fond blanc */
    border: 1px solid #e6e9f0;               /* Bordure claire */
    border-radius: 10px;                     /* Coins arrondis */
    padding: 14px;                           /* Espacement interne */
    display: flex;                           /* Flex horizontal */
    gap: 12px;                               /* Espacement entre éléments */
    align-items: center;                     /* Centrage vertical */
    flex-wrap: nowrap;                       /* Pas de retour ligne */
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);  /* Ombre legere */
}

.toolbar-search { /* Bloc recherche (input + bouton) */
    display: flex;     /* Flex horizontal */
    flex: 0 0 360px;   /* Largeur fixe initiale */
    min-width: 280px;  /* Largeur mini */
    gap: 8px;          /* Espacement entre input et bouton */
}

.toolbar-search input[type="text"] { /* Champ de recherche */
    flex: 1;                   /* Prend toute la place dispo */
    padding: 10px 12px;        /* Espacement interne */
    border: 1px solid #d7dce5; /* Bordure claire */
    border-radius: 8px;        /* Coins arrondis */
}

.toolbar-search button { /* Bouton de recherche */
    padding: 10px 14px;  /* Espacement interne */
    border-radius: 8px;  /* Coins arrondis */
    border: none;        /* Pas de bordure */
    background: #1e90ff; /* Fond bleu */
    color: #fff;         /* Texte blanc */
    font-weight: 600;    /* Semi-gras */
}

.toolbar-filters { /* Ligne des filtres (chips) */
    display: flex;           /* Flex horizontal */
    align-items: center;     /* Centrage vertical */
    gap: 8px;                /* Espacement */
    flex: 1 1 auto;          /* Peut grandir/rétrécir */
    min-width: 0;            /* Autorise la réduction */
    overflow-x: auto;        /* Scroll horizontal si trop d'éléments */
    overflow-y: hidden;      /* Pas de scroll vertical */
    white-space: nowrap;     /* Empêche le retour à la ligne */
    flex-wrap: nowrap;       /* Pas de wrap */
}

.filters-label { /* Label "Filtres" */
    font-weight: 700;   /* Gras */
    font-size: 13px;    /* Petite taille */
    color: #1f2937;     /* Gris foncé */
    white-space: nowrap; /* Pas de retour ligne */
}

.filters-chips { /* Conteneur des chips de filtre */
    display: flex;           /* Flex horizontal */
    flex-wrap: nowrap;       /* Pas de wrap par defaut */
    gap: 8px;                /* Espacement entre chips */
    white-space: nowrap;     /* Pas de retour ligne */
    overflow-x: auto;        /* Scroll horizontal possible */
    overflow-y: hidden;      /* Pas de scroll vertical */
    align-items: center;     /* Centrage vertical */
}

.chip { /* Style d'une chip */
    display: inline-flex;     /* Flex inline */
    align-items: center;      /* Centrage vertical */
    padding: 8px 12px;        /* Espacement interne */
    border-radius: 999px;     /* Forme pill */
    border: 1px solid #d7dce5; /* Bordure claire */
    color: #1e293b;           /* Texte gris foncé */
    text-decoration: none;    /* Pas de soulignement */
    transition: all 0.15s ease; /* Transition sur hover */
    background: #f8fafc;      /* Fond clair */
}

.chip:hover { /* Survol d'une chip */
    border-color: #1e90ff; /* Bordure bleue */
    color: #1e90ff;        /* Texte bleu */
    background: #f0f6ff;   /* Fond bleuté */
}

.chip-active { /* Chip active */
    background: #1e90ff; /* Fond bleu */
    color: #fff;         /* Texte blanc */
    border-color: #1e90ff; /* Bordure bleue */
    font-weight: 600;    /* Semi-gras */
}

.product-footer { /* Pied de carte produit */
    display: flex;                 /* Flex horizontal */
    align-items: center;           /* Centrage vertical */
    justify-content: space-between; /* Espace entre prix et bouton */
    gap: 10px;                     /* Espacement */
    margin-top: auto;              /* Se colle en bas si carte flexible */
    padding-top: 10px;             /* Espace avant la ligne */
    border-top: 1px solid #eef2f7; /* Ligne séparatrice */
}

.price-block { /* Bloc prix détaillé */
    display: flex;           /* Flex vertical */
    flex-direction: column;
    gap: 2px;                /* Petit espacement */
}

.price-block small { /* Texte secondaire du bloc prix */
    color: #6b7280; /* Gris clair */
}

.badge-light { /* Badge clair */
    background: #eef2ff; /* Fond bleu très clair */
    color: #1d4ed8;      /* Bleu soutenu */
}

.strong-blue { /* Texte bleu fort */
    color: #1d4ed8;  /* Couleur bleu */
    font-weight: 700; /* Gras */
}

.eyebrow { /* Surtitre en petites majuscules */
    text-transform: uppercase; /* Majuscules */
    letter-spacing: 0.08em;    /* Espacement lettres */
    font-size: 12px;           /* Petite taille */
    font-weight: 700;          /* Gras */
    margin-bottom: 6px;        /* Espace sous le surtitre */
}

.stock.badge-style { /* Badge de stock */
    display: inline-flex; /* Flex inline */
    align-items: center;  /* Centrage vertical */
    gap: 6px;             /* Espace entre éléments */
    padding: 6px 10px;    /* Espacement interne */
    border-radius: 999px; /* Forme pill */
    font-size: 13px;      /* Taille texte */
    border: 1px solid #e5e7eb; /* Bordure claire */
}

.catalog-header { /* En-tête de la page catalogue */
    display: flex;                 /* Flex horizontal */
    justify-content: space-between; /* Espace entre intro et recherche */
    align-items: center;           /* Centrage vertical */
    gap: 16px;                     /* Espacement */
    flex-wrap: wrap;               /* Autorise le wrap en mobile */
    margin-bottom: 12px;           /* Espace sous l'en-tête */
}

.catalog-intro h2 { /* Titre d'intro catalogue */
    margin-bottom: 6px; /* Espace sous le titre */
}

.catalog-intro .muted { /* Texte atténué sous le titre */
    margin-top: 4px; /* Espace au-dessus */
}

.catalog-search { /* Barre de recherche/filtre catalogue */
    display: grid;                         /* Grille */
    grid-template-columns: 1fr 200px auto; /* Input large, select moyen, bouton auto */
    gap: 8px;                              /* Espacement entre champs */
    min-width: 320px;                      /* Largeur minimale */
}

.catalog-search select,
.catalog-search input[type="text"] { /* Champs de recherche */
    padding: 10px 12px;         /* Espacement interne */
    border-radius: 8px;         /* Coins arrondis */
    border: 1px solid #d7dce5;  /* Bordure claire */
}

.catalog-search button { /* Bouton de recherche */
    padding: 10px 14px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    border: none;       /* Pas de bordure */
    background: #1e90ff; /* Fond bleu */
    color: #fff;         /* Texte blanc */
    font-weight: 600;    /* Semi-gras */
}

.category-bar { /* Barre horizontale de categories */
    display: flex;              /* Flex horizontal */
    align-items: center;        /* Centrage vertical */
    gap: 10px;                  /* Espacement */
    background: #fff;           /* Fond blanc */
    border: 1px solid #e6e9f0;  /* Bordure claire */
    border-radius: 10px;        /* Coins arrondis */
    padding: 10px;              /* Espacement interne */
    margin-bottom: 18px;        /* Espace sous la barre */
    overflow: hidden;           /* Coupe le dépassement */
}

.chips-row { /* Ligne de chips (scrollable) */
    display: flex;           /* Flex horizontal */
    gap: 8px;                /* Espacement entre chips */
    overflow-x: auto;        /* Scroll horizontal */
    overflow-y: hidden;      /* Pas de scroll vertical */
    flex: 1;                 /* Occupe l'espace dispo */
    padding-bottom: 4px;     /* Petit espace bas */
    white-space: nowrap;     /* Pas de retour ligne */
}

.new-catalog-grid { /* Grille catalogue harmonisee */
    margin-top: 16px;                                   /* Espace au-dessus */
    gap: 24px;                                          /* Espacement */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* Colonnes larges adaptatives */
}

.new-catalog-grid .product-card img { /* Images des nouvelles cartes */
    height: 200px;        /* Hauteur fixe */
    object-fit: contain;  /* Contient sans rogner */
}

.new-catalog-grid .product-card .btn-secondary { /* Bouton secondaire dans les nouvelles cartes */
    width: 120px;     /* Largeur fixe */
    text-align: center; /* Texte centre */
}

@media (max-width: 900px) { /* Responsive < 900px */
    .catalog-hero {
        flex-direction: column;    /* Empile les éléments */
        align-items: flex-start;   /* Aligne à gauche */
    }
    .catalog-toolbar {
        flex-direction: column;    /* Empile les blocs */
        align-items: stretch;      /* Étire sur la largeur */
        flex-wrap: wrap;           /* Autorise le wrap */
    }
    .toolbar-search {
        width: 100%;      /* Pleine largeur */
        flex: 1 1 auto;   /* Peut grandir/rétrécir */
    }
    .filters-chips {
        flex-wrap: wrap;  /* Wrap des chips */
        overflow-x: visible; /* Pas de scroll horizontal */
    }
}

@media (max-width: 900px) { /* Responsive grille catalogue < 900px */
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes */
    }
}

@media (max-width: 1200px) and (min-width: 901px) { /* Responsive intermédiaire */
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colonnes */
    }
}

@media (max-width: 1500px) and (min-width: 1201px) { /* Grand écran */
    .catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 colonnes */
    }
}
@media (min-width: 1501px) { /* Très grand écran */
    .catalog-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 colonnes */
    }
}

/* Harmonisation catalogue avec page d'accueil */
.new-catalog-grid {
    margin-top: 16px;                                        /* Espace au-dessus */
    gap: 24px;                                               /* Espacement */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* Colonnes adaptatives */
}

.new-catalog-grid .product-card img {
    height: 200px;        /* Hauteur image */
    object-fit: contain;  /* Contient sans rogner */
}

.new-catalog-grid .product-card .btn-secondary {
    width: 120px;    /* Largeur bouton */
    text-align: center; /* Texte centre */
}

.invoice-actions { /* Boutons d'action facture (impression/PDF) */
    display: flex;  /* Flex horizontal */
    gap: 10px;      /* Espacement entre boutons */
    margin-bottom: 12px; /* Espace sous les boutons */
}