body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5eee8;
    color: #222;
}

header {
    background-color: #111;
    color: white;
    padding: 20px 30px;
}

main {
    width: calc(100% - 32px);
    max-width: none;
    margin: 16px;
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    min-width: 0;
}
.topbar {
    background-color: #2f2a26;
    color: white;
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-logo {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
}

.topbar-logo span {
    display: block;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 4px;
    opacity: 0.8;
    margin-top: 3px;
}

.btn-deconnexion {
    display: inline-block;
    padding: 10px 16px;
    background-color: #dc2626;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
}

.btn-deconnexion:hover {
    background-color: #b91c1c;
}
.bienvenue {
    margin-bottom: 30px;
}

.bienvenue h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
    color: #2f2a26;
}

.bienvenue p {
    margin: 0;
    font-size: 16px;
    color: #6f6259;
}
.statistiques {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}

.carte-stat {
    background-color: #ffffff;
    border: 1px solid #e7ddd5;
    border-radius: 12px;
    padding: 20px;
}

.carte-titre {
    display: block;
    font-size: 14px;
    color: #7b6d63;
    margin-bottom: 8px;
}

.carte-nombre {
    display: block;
    font-size: 28px;
    color: #2f2a26;
}

@media (max-width: 700px) {
    .statistiques {
        grid-template-columns: 1fr;
    }
}
.menu-gestion {
    display: grid;
    gap: 16px;
}

.menu-carte {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background-color: #ffffff;
    border: 1px solid #d8ccc3;
    border-radius: 12px;
    text-decoration: none;
    color: #2f2a26;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: 0.2s ease;
}

.menu-carte:hover {
    background-color: #f8f1ec;
    transform: translateY(-1px);
}

.menu-carte div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.menu-carte strong {
    font-size: 16px;
}

.menu-carte span {
    font-size: 14px;
    color: #7b6d63;
}

.menu-fleche {
    font-size: 28px !important;
    color: #2f2a26 !important;
}
.menu-principal {
    display: flex;
    align-items: center;
    gap: 24px;
}

.menu-principal > a,
.menu-bouton {
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 6px;
}

.menu-principal > a:hover,
.menu-bouton:hover {
    opacity: 0.75;
}

.menu-deroulant {
    position: relative;
}

.sous-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background-color: white;
    border: 1px solid #e7ddd5;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 1000;
}

.sous-menu a {
    display: block;
    padding: 12px 16px;
    color: #2f2a26;
    text-decoration: none;
    font-size: 14px;
}

.sous-menu a:hover {
    background-color: #f8f1ec;
}

.menu-deroulant:hover .sous-menu {
    display: block;
}
.nouveau-groupe td {
    border-top: 8px solid #f5eee8;
}
.gestion-formulaires {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.bloc-formulaire {
    background-color: #ffffff;
    border: 1px solid #e7ddd5;
    border-radius: 12px;
    padding: 20px;
}

.bloc-formulaire h2 {
    margin-top: 0;
    font-size: 18px;
    color: #2f2a26;
}
.bloc-formulaire input,
.bloc-formulaire select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d8ccc3;
    border-radius: 8px;
    background-color: white;
    font-size: 14px;
    color: #2f2a26;
}

.bloc-formulaire label {
    font-size: 14px;
    font-weight: bold;
    color: #2f2a26;
}
.bloc-formulaire button {
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    background-color: #2f2a26;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
}

.bloc-formulaire button:hover {
    background-color: #4a423c;
}
.actions-produit {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 15px 0 25px 0;
}

.actions-produit form {
    margin: 0;
}

.btn-modifier-produit,
.btn-supprimer-produit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-modifier-produit {
    background-color: #2f2a26;
    color: white;
}

.btn-modifier-produit:hover {
    background-color: #4a423c;
}

.btn-supprimer-produit {
    background-color: #dc2626;
    color: white;
}

.btn-supprimer-produit:hover {
    background-color: #b91c1c;
}
.table-vente {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.table-vente .col-produit {
    width: 40%;
}

.table-vente .col-petite {
    width: 10%;
}

.table-vente .col-total {
    width: 12%;
}

.table-vente .col-action {
    width: 8%;
}

/* =========================================================
   LARGEUR GLOBALE / RESPONSIVE
   ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
}

img {
    max-width: 100%;
}

.bloc-formulaire textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d8ccc3;
    border-radius: 8px;
    background-color: white;
    font-size: 14px;
    color: #2f2a26;
    font-family: Arial, sans-serif;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}


/* =========================================================
   PAGE DE CONNEXION
   ========================================================= */

body.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

body.page-connexion main.login-card {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
}

.login-logo {
    margin-bottom: 18px;
    text-align: center;
}

.login-logo img {
    display: block;
    width: auto;
    max-width: 210px;
    max-height: 110px;
    margin: 0 auto;
    object-fit: contain;
}

.login-card h1 {
    margin: 0 0 6px;
    text-align: center;
    color: #2f2a26;
}

.login-subtitle {
    margin: 0 0 24px;
    text-align: center;
    color: #7b6d63;
}

.alert-erreur {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #efb5b5;
    border-radius: 8px;
    background: #fff1f1;
    color: #a51d1d;
    font-size: 14px;
    font-weight: bold;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-form label {
    margin-top: 6px;
    color: #2f2a26;
    font-size: 14px;
    font-weight: bold;
}

.login-form input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d8ccc3;
    border-radius: 8px;
    background: white;
    color: #2f2a26;
    font-size: 15px;
}

.login-form input:focus {
    outline: none;
    border-color: #7f6f63;
    box-shadow: 0 0 0 3px rgba(127, 111, 99, 0.12);
}

.login-form button {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    background: #2f2a26;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.login-form button:hover {
    background: #4a423c;
}

.login-form button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}


/* =========================================================
   RESPONSIVE GÉNÉRAL
   ========================================================= */

@media (max-width: 1000px) {

    .topbar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .menu-principal {
        order: 3;
        width: 100%;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .menu-principal > a,
    .menu-bouton {
        white-space: nowrap;
    }

    .gestion-formulaires {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 700px) {

    main {
        width: calc(100% - 20px);
        margin: 10px;
        padding: 18px;
        border-radius: 10px;
    }

    .topbar {
        padding: 14px 16px;
    }

    .topbar-logo {
        font-size: 20px;
    }

    .btn-deconnexion {
        padding: 8px 11px;
        font-size: 13px;
    }

    .gestion-formulaires {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.page-connexion {
        padding: 12px;
    }

    body.page-connexion main.login-card {
        width: 100%;
        max-width: 420px;
        margin: 0;
        padding: 24px 20px;
    }
}


/* =========================================================
   HARMONISATION VISUELLE COMPLÈTE
   ========================================================= */

:root {
    --ouma-bg: #f5eee8;
    --ouma-panel: #ffffff;
    --ouma-panel-soft: #fbf8f5;
    --ouma-text: #2f2a26;
    --ouma-muted: #7b6d63;
    --ouma-line: #e7ddd5;
    --ouma-line-strong: #d8ccc3;
    --ouma-accent: #2f2a26;
    --ouma-accent-hover: #4a423c;
    --ouma-danger: #dc2626;
    --ouma-danger-hover: #b91c1c;
    --ouma-success-bg: #eef8f0;
    --ouma-success-line: #b9dcbc;
    --ouma-success-text: #315d36;
    --ouma-error-bg: #fff1f1;
    --ouma-error-line: #efb5b5;
    --ouma-error-text: #a51d1d;
}

body {
    background-color: var(--ouma-bg);
    color: var(--ouma-text);
}

main {
    width: calc(100% - 32px);
    margin: 16px;
    padding: 24px;
    background: var(--ouma-panel);
    border-radius: 14px;
    box-sizing: border-box;
}

main > * {
    min-width: 0;
}

main h1 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.2;
    color: var(--ouma-text);
}

main h2 {
    color: var(--ouma-text);
}

main p,
.description-section,
.description-type-lieu,
.aide-champ,
.aide-operation,
.aide-recherche-produit,
.aide-mouvement,
.type-lieu-info {
    color: var(--ouma-muted);
    line-height: 1.45;
}

main form {
    min-width: 0;
}

main label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ouma-text);
}

main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main select,
main textarea {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--ouma-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--ouma-text);
    font-size: 14px;
    font-family: Arial, sans-serif;
}

main textarea {
    min-height: 110px;
    resize: vertical;
}

main input:focus,
main select:focus,
main textarea:focus {
    outline: none;
    border-color: #8a7769;
    box-shadow: 0 0 0 3px rgba(138, 119, 105, 0.12);
}

main button,
main .button,
main input[type="submit"],
main input[type="button"] {
    min-height: 42px;
    box-sizing: border-box;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--ouma-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

main button:hover,
main .button:hover,
main input[type="submit"]:hover,
main input[type="button"]:hover {
    background: var(--ouma-accent-hover);
}

.btn-deconnexion {
    background-color: var(--ouma-danger);
}

.btn-deconnexion:hover {
    background-color: var(--ouma-danger-hover);
}

.message-formulaire,
.alert-erreur {
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
}

.message-formulaire.succes {
    background: var(--ouma-success-bg);
    border: 1px solid var(--ouma-success-line);
    color: var(--ouma-success-text);
}

.message-formulaire.erreur,
.alert-erreur {
    background: var(--ouma-error-bg);
    border: 1px solid var(--ouma-error-line);
    color: var(--ouma-error-text);
}

.resume-stocks,
.resume-stats,
.resume-ventes,
.grille-lieux,
.grille-graphiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 0 0 22px;
}

.carte-stock,
.resume-stats .carte-stat,
.resume-ventes .carte-stat,
.bloc-lieu-stat,
.carte-graphique,
.fiche-produit,
.section-details,
.carte-vente {
    background: var(--ouma-panel);
    border: 1px solid var(--ouma-line);
    border-radius: 12px;
    padding: 18px;
    box-sizing: border-box;
}

.carte-stock .libelle,
.carte-stock .libelle-total,
.resume-stats .libelle-stat,
.resume-ventes .carte-titre,
.valeur-manquante,
.commentaire-vide {
    color: var(--ouma-muted);
}

.carte-stock .valeur,
.carte-stock .stock-total,
.resume-stats .valeur-stat,
.resume-ventes .carte-nombre,
.stock-total-produit,
.carte-stock .valeur-stock {
    font-size: 18px;
    font-weight: 700;
    color: var(--ouma-text);
}

.table-responsive,
.tableau-produits-wrapper,
.tableau-stocks-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table,
.table-triable,
.table-vente,
.table-stat-lieu,
.table-stat-produits,
.table-stat-dons {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    background: #fff;
}

table th,
table td,
.table-triable th,
.table-triable td,
.table-vente th,
.table-vente td,
.table-stat-lieu th,
.table-stat-lieu td,
.table-stat-produits th,
.table-stat-produits td,
.table-stat-dons th,
.table-stat-dons td {
    padding: 10px 12px;
    border: 1px solid var(--ouma-line-strong);
    vertical-align: top;
    font-size: 14px;
}

table th,
.table-triable th,
.table-vente th,
.table-stat-lieu th,
.table-stat-produits th,
.table-stat-dons th {
    background: var(--ouma-panel-soft);
    color: var(--ouma-text);
    font-weight: 700;
}

.table-triable tbody tr:hover,
.table-vente tbody tr:hover,
.table-stat-lieu tbody tr:hover,
.table-stat-produits tbody tr:hover,
.table-stat-dons tbody tr:hover,
table tbody tr:hover {
    background: #fcfaf8;
}

.actions-tableau,
.col-actions,
.col-actions-vente {
    white-space: nowrap;
}

.lien-fiche,
.lien-modifier,
.actions-tableau a,
.btn-supprimer-vente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 34px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
}

.lien-fiche {
    background: #f3ece6;
    color: var(--ouma-text);
}

.lien-fiche:hover {
    background: #e9ddd2;
}

.lien-modifier,
.actions-tableau a {
    background: var(--ouma-accent);
    color: #fff;
}

.lien-modifier:hover,
.actions-tableau a:hover {
    background: var(--ouma-accent-hover);
}

.btn-supprimer-vente,
.btn-supprimer-produit {
    background: var(--ouma-danger);
    color: #fff;
}

.btn-supprimer-vente:hover,
.btn-supprimer-produit:hover {
    background: var(--ouma-danger-hover);
}

.badge-direct,
.badge-pro,
.badge-don,
.badge-type,
.badge-type-lieu,
.produit-donne-badge,
.statut-code,
.badge-archive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-direct,
.badge-type-lieu,
.statut-code.oui,
.oui {
    background: #eef8f0;
    color: #315d36;
}

.badge-pro {
    background: #f2eef8;
    color: #5c3b93;
}

.badge-don,
.produit-donne-badge,
.badge-archive {
    background: #fff6e9;
    color: #9a6217;
}

.statut-code.non,
.non {
    background: #f1efed;
    color: #7b6d63;
}

.code-boutique-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.entete-vente,
.bas-vente {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.bas-vente {
    margin-top: 22px;
    align-items: start;
}

.champ-entete-vente,
.champ-bas-vente,
.ligne-form-periode,
.champ-periode {
    min-width: 0;
}

.table-vente {
    margin-top: 8px;
}

.table-vente .col-produit {
    width: 40%;
}

.table-vente select,
.table-vente input {
    min-height: 40px;
}

.table-vente td button {
    width: 100%;
    margin-bottom: 8px;
}

.supprimer-ligne {
    background: #fff1f1;
    color: #a51d1d;
    border: 1px solid #efb5b5;
}

.supprimer-ligne:hover {
    background: #ffe5e5;
}

#ajouter-ligne {
    background: var(--ouma-accent);
    color: #fff;
}

.message-stock-insuffisant {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff4e8;
    color: #8a4d07;
    font-size: 12px;
    font-weight: 700;
}

.ligne-stock-insuffisant {
    background: #fffaf4;
}

.action-vente {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.action-vente button {
    min-width: 280px;
}

.recherche-produit {
    position: relative;
}

.resultats-produits {
    border: 1px solid var(--ouma-line);
    border-radius: 10px;
    background: #fff;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.option-code-produit {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ouma-line);
    border-radius: 10px;
    background: var(--ouma-panel-soft);
}

.form-periode,
.navigation-periode,
.barre-periode,
.zone-periode,
.onglets-periode,
.contenu-periode {
    min-width: 0;
}

.navigation-periode,
.barre-periode {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.onglets-periode {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bouton-periode,
.bouton-appliquer,
.bouton-tri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ouma-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ouma-text);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.bouton-periode:hover,
.bouton-appliquer:hover,
.bouton-tri:hover {
    background: var(--ouma-panel-soft);
}

.onglet-periode.actif,
.bouton-periode.actif,
.bouton-tri.actif {
    background: var(--ouma-accent);
    border-color: var(--ouma-accent);
    color: #fff;
}

.carte-vente {
    padding: 0;
    overflow: hidden;
}

.carte-vente > * {
    padding-left: 18px;
    padding-right: 18px;
}

.carte-vente .resume-vente-entete,
.carte-vente .entete-vente,
.carte-vente .resume-vente,
.carte-vente .resume-ligne {
    min-width: 0;
}

.fiche-produit table td,
.fiche-produit table th,
.section-details table td,
.section-details table th {
    font-size: 14px;
}

@media (max-width: 1200px) {
    .entete-vente,
    .bas-vente,
    .code-boutique-item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    main {
        width: calc(100% - 20px);
        margin: 10px;
        padding: 18px;
    }

    .resume-stocks,
    .resume-stats,
    .resume-ventes,
    .grille-lieux,
    .grille-graphiques,
    .statistiques,
    .gestion-formulaires {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }

    .menu-principal {
        width: 100%;
        order: 3;
        overflow-x: auto;
        gap: 14px;
        padding-bottom: 2px;
    }
}

@media (max-width: 700px) {
    main h1 {
        font-size: 24px;
    }

    table th,
    table td,
    .table-triable th,
    .table-triable td,
    .table-vente th,
    .table-vente td,
    .table-stat-lieu th,
    .table-stat-lieu td,
    .table-stat-produits th,
    .table-stat-produits td,
    .table-stat-dons th,
    .table-stat-dons td {
        padding: 8px 9px;
        font-size: 13px;
    }

    .action-vente {
        justify-content: stretch;
    }

    .action-vente button {
        width: 100%;
        min-width: 0;
    }

    .actions-produit {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-modifier-produit,
    .btn-supprimer-produit {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   RESPONSIVE COMPLET OÜMA GESTION
   ========================================================= */

/* Empêche les blocs de dépasser de leur conteneur */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

main {
    overflow: visible;
}

main > *,
section,
form,
.gestion-formulaires,
.bloc-formulaire,
.section-formulaire,
.section-details,
.fiche-produit,
.carte-vente,
.carte-stock,
.carte-stat,
.bloc-lieu-stat,
.carte-graphique {
    min-width: 0;
    max-width: 100%;
}

/* Tableaux larges : défilement horizontal propre */
.tableau-produits-wrapper,
.tableau-stocks-wrapper,
.table-responsive,
main > table,
.section-details > table,
.fiche-produit > table,
.bloc-lieu-stat > table {
    max-width: 100%;
}

.tableau-produits-wrapper,
.tableau-stocks-wrapper,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Bouton menu mobile masqué sur ordinateur */
.menu-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.menu-mobile-toggle:hover {
    background: rgba(255,255,255,.12);
}

/* Les boutons Ventes / Produits reprennent l'apparence des anciens spans */
.menu-bouton {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

/* Très grands écrans */
@media (min-width: 1800px) {
    main {
        width: calc(100% - 40px);
        margin: 20px;
        padding: 32px;
    }
}

/* Tablette paysage et petits ordinateurs */
@media (max-width: 1200px) {

    main {
        width: calc(100% - 24px);
        margin: 12px;
        padding: 22px;
    }

    .bienvenue h1,
    main h1 {
        font-size: 26px;
    }

    .resume-stocks,
    .resume-stats,
    .resume-ventes,
    .statistiques,
    .grille-lieux,
    .grille-graphiques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gestion-formulaires {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Formulaires vente plus souples */
    .entete-vente,
    .bas-vente {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entete-vente > :last-child:nth-child(odd),
    .bas-vente > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Les tableaux avec énormément de colonnes restent utilisables */
    .tableau-produits,
    .tableau-stocks,
    .table-stat-produits,
    .table-stat-dons,
    .table-stat-lieu {
        min-width: 900px;
    }
}

/* Tablette portrait / gros téléphone */
@media (max-width: 900px) {

    .topbar {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
    }

    .topbar-logo {
        font-size: 21px;
    }

    .topbar-logo span {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .menu-mobile-toggle {
        display: inline-flex;
    }

    .btn-deconnexion {
        padding: 9px 11px;
        font-size: 12px;
        white-space: nowrap;
    }

    .menu-principal {
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        padding: 8px 0 2px;
        overflow: visible;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .menu-principal.ouvert {
        display: flex;
    }

    .menu-principal > a,
    .menu-bouton {
        display: flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-radius: 8px;
        color: #fff;
        text-align: left;
        font-size: 14px;
    }

    .menu-principal > a:hover,
    .menu-bouton:hover,
    .menu-bouton[aria-expanded="true"] {
        background: rgba(255,255,255,.08);
        opacity: 1;
    }

    .menu-deroulant {
        width: 100%;
    }

    .sous-menu {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        margin: 4px 0 6px;
        border: 0;
        border-radius: 8px;
        box-shadow: none;
        background: #403832;
    }

    .menu-deroulant.ouvert .sous-menu {
        display: block;
    }

    .menu-deroulant:hover .sous-menu {
        display: none;
    }

    .menu-deroulant.ouvert:hover .sous-menu {
        display: block;
    }

    .sous-menu a {
        color: #fff;
        padding: 11px 18px;
        font-size: 13px;
    }

    .sous-menu a:hover {
        background: rgba(255,255,255,.08);
    }

    main {
        width: calc(100% - 16px);
        margin: 8px;
        padding: 18px;
        border-radius: 10px;
    }

    .bienvenue {
        margin-bottom: 22px;
    }

    .bienvenue p {
        font-size: 14px;
    }

    .resume-stocks,
    .resume-stats,
    .resume-ventes,
    .statistiques,
    .grille-lieux,
    .grille-graphiques,
    .gestion-formulaires {
        grid-template-columns: 1fr;
    }

    .entete-vente,
    .bas-vente,
    .code-boutique-item,
    .resume-operation,
    .form-modifier-vente,
    .operation-infos {
        grid-template-columns: 1fr !important;
    }

    .entete-vente > *,
    .bas-vente > * {
        grid-column: auto !important;
    }

    .bloc-formulaire,
    .section-formulaire,
    .section-details,
    .fiche-produit {
        padding: 16px;
    }

    .actions-produit {
        flex-wrap: wrap;
    }

    .btn-modifier-produit,
    .btn-supprimer-produit {
        flex: 1 1 190px;
    }

    .navigation-periode,
    .barre-periode {
        justify-content: flex-start;
    }

    .zone-canvas,
    canvas {
        max-width: 100% !important;
    }
}

/* Téléphone */
@media (max-width: 700px) {

    main {
        width: calc(100% - 12px);
        margin: 6px;
        padding: 14px;
        border-radius: 9px;
    }

    main h1,
    .bienvenue h1 {
        font-size: 22px;
    }

    main h2 {
        font-size: 18px;
    }

    .carte-stat,
    .carte-stock,
    .carte-vente,
    .bloc-formulaire,
    .section-formulaire,
    .section-details,
    .fiche-produit,
    .bloc-lieu-stat,
    .carte-graphique {
        border-radius: 10px;
    }

    .menu-carte {
        padding: 15px 16px;
    }

    .menu-carte strong {
        font-size: 14px;
    }

    .menu-carte span {
        font-size: 12px;
    }

    /* Champs confortables au doigt */
    main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    main select,
    main textarea,
    main button {
        font-size: 16px;
    }

    main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    main select {
        min-height: 46px;
    }

    /* AJOUTER UNE VENTE :
       sur mobile chaque ligne produit devient une carte verticale */
    .table-vente {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent;
    }

    .table-vente thead {
        display: none;
    }

    .table-vente tbody {
        display: block;
        width: 100%;
    }

    .table-vente tr.ligne-vente {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        margin-bottom: 14px;
        padding: 12px;
        border: 1px solid #e7ddd5;
        border-radius: 10px;
        background: #fbf8f5;
    }

    .table-vente tr.ligne-vente td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .table-vente tr.ligne-vente td:first-child,
    .table-vente tr.ligne-vente td:last-child {
        grid-column: 1 / -1;
    }

    .table-vente tr.ligne-vente td::before {
        display: block;
        margin-bottom: 5px;
        color: #7b6d63;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .table-vente tr.ligne-vente td:nth-child(1)::before {
        content: "Produit";
    }

    .table-vente tr.ligne-vente td:nth-child(2)::before {
        content: "Quantité";
    }

    .table-vente tr.ligne-vente td:nth-child(3)::before {
        content: "Prix TTC";
    }

    .table-vente tr.ligne-vente td:nth-child(4)::before {
        content: "Remise €";
    }

    .table-vente tr.ligne-vente td:nth-child(5)::before {
        content: "Remise %";
    }

    .table-vente tr.ligne-vente td:nth-child(6)::before {
        content: "Total TTC";
    }

    .table-vente tr.ligne-vente td:nth-child(7)::before {
        content: "Actions";
    }

    .table-vente td button {
        width: 100%;
        margin: 4px 0 0;
    }

    .action-vente,
    .actions-formulaire {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .action-vente button,
    .actions-formulaire > * {
        width: 100%;
        min-width: 0;
    }

    /* Détail des ventes */
    .operation-entete {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .operation-total {
        text-align: left !important;
    }

    .actions-vente {
        justify-content: stretch !important;
        flex-direction: column;
    }

    .actions-vente > *,
    .actions-vente form,
    .actions-vente a,
    .actions-vente button {
        width: 100%;
    }

    .ligne-produit {
        display: block !important;
    }

    .produit-detail-mobile {
        display: block !important;
    }

    .ligne-produit .cellule-produit {
        display: none !important;
    }

    /* Détails produit et formulaires */
    .actions-produit {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-modifier-produit,
    .btn-supprimer-produit {
        width: 100%;
        min-width: 0;
    }

    /* Statistiques */
    .onglets-periode,
    .navigation-periode,
    .barre-periode,
    .grille-rapide {
        width: 100%;
    }

    .onglet-periode,
    .bouton-periode,
    .bouton-appliquer {
        flex: 1 1 auto;
    }

    /* Tableaux complexes : scroll uniquement à l'intérieur */
    .tableau-produits-wrapper,
    .tableau-stocks-wrapper,
    .table-responsive,
    .bloc-lieu-stat {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tableau-produits,
    .tableau-stocks,
    .table-stat-produits,
    .table-stat-dons,
    .table-stat-lieu {
        min-width: 760px;
    }

    /* Catégories et codes boutique */
    .gestion-formulaires {
        gap: 12px;
    }

    .code-boutique-item {
        display: block;
    }

    .code-boutique-item > * + * {
        margin-top: 6px;
    }

    /* Le menu de sortie ne mange pas toute la barre */
    .btn-deconnexion {
        font-size: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-deconnexion::before {
        content: "↪";
        font-size: 20px;
        line-height: 1;
    }
}

/* Très petits téléphones */
@media (max-width: 430px) {

    .topbar {
        grid-template-columns: 1fr auto auto;
        padding: 10px;
    }

    .topbar-logo {
        font-size: 18px;
    }

    .topbar-logo span {
        font-size: 8px;
    }

    main {
        padding: 12px;
    }

    main h1,
    .bienvenue h1 {
        font-size: 20px;
    }

    .table-vente tr.ligne-vente {
        grid-template-columns: 1fr;
    }

    .table-vente tr.ligne-vente td {
        grid-column: 1 !important;
    }

    .carte-stat,
    .carte-stock,
    .bloc-formulaire,
    .section-formulaire,
    .section-details,
    .fiche-produit {
        padding: 13px;
    }

    .carte-nombre,
    .carte-stock .valeur,
    .valeur-stat {
        font-size: 22px !important;
    }
}


/* =========================================================
   CORRECTION MOBILE : PRODUITS + STATISTIQUES
   ========================================================= */

.deconnexion-icone {
    display: none;
}

@media (max-width: 700px) {

    /*
     * Le tableau Produits devient une liste de fiches.
     * On garde toutes les informations, mais sans forcer
     * un tableau de 16 colonnes sur un écran de téléphone.
     */
    .tableau-produits-wrapper {
        overflow: visible;
    }

    .tableau-produits {
        display: block;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent;
    }

    .tableau-produits thead {
        display: none;
    }

    .tableau-produits tbody {
        display: block;
        width: 100%;
    }

    .tableau-produits tbody tr[data-sort-row="1"] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        width: 100%;
        margin-bottom: 14px;
        border: 1px solid #e7ddd5;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,.04);
    }

    .tableau-produits tbody tr[data-sort-row="1"] td {
        display: flex;
        min-width: 0;
        width: auto !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #eee5df !important;
        gap: 10px;
        align-items: flex-start;
        justify-content: space-between;
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .tableau-produits tbody tr[data-sort-row="1"] td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 46%;
        color: #7b6d63;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .15px;
    }

    .tableau-produits tbody tr[data-sort-row="1"] .col-reference,
    .tableau-produits tbody tr[data-sort-row="1"] .colonne-produit,
    .tableau-produits tbody tr[data-sort-row="1"] .col-actions {
        grid-column: 1 / -1;
    }

    .tableau-produits tbody tr[data-sort-row="1"] .col-reference {
        background: #faf7f5;
        font-size: 16px;
        font-weight: 700;
    }

    .tableau-produits tbody tr[data-sort-row="1"] .colonne-produit {
        justify-content: flex-start;
        text-align: left !important;
        font-size: 16px;
        font-weight: 700;
    }

    .tableau-produits tbody tr[data-sort-row="1"] .colonne-produit::before {
        display: none;
    }

    .tableau-produits tbody tr[data-sort-row="1"] .col-etiquette,
    .tableau-produits tbody tr[data-sort-row="1"] .col-sous-categorie,
    .tableau-produits tbody tr[data-sort-row="1"] .col-categorie,
    .tableau-produits tbody tr[data-sort-row="1"] .col-code-boutique {
        grid-column: 1 / -1;
    }

    .tableau-produits tbody tr[data-sort-row="1"] .col-actions {
        padding: 10px !important;
        background: #faf7f5;
        border-bottom: 0 !important;
    }

    .tableau-produits tbody tr[data-sort-row="1"] .col-actions::before {
        display: none;
    }

    .tableau-produits .actions-tableau {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .tableau-produits .lien-fiche,
    .tableau-produits .lien-modifier {
        width: 100%;
        min-height: 40px;
        margin: 0;
    }


    /*
     * Statistiques > Ventes par produit :
     * même logique, chaque produit devient une petite fiche.
     */
    .table-stat-produits {
        display: block;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent;
    }

    .table-stat-produits thead {
        display: none;
    }

    .table-stat-produits tbody {
        display: block;
        width: 100%;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        margin-bottom: 12px;
        border: 1px solid #e7ddd5;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] td {
        display: flex;
        width: auto !important;
        min-width: 0;
        padding: 9px 11px !important;
        border: 0 !important;
        border-bottom: 1px solid #eee5df !important;
        gap: 8px;
        justify-content: space-between;
        text-align: right !important;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] td::before {
        content: attr(data-label);
        color: #7b6d63;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] .col-reference,
    .table-stat-produits tbody tr[data-sort-row="1"] .col-produit {
        grid-column: 1 / -1;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] .col-reference {
        background: #faf7f5;
        font-weight: 700;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] .col-produit {
        justify-content: flex-start;
        text-align: left !important;
        font-size: 15px;
        font-weight: 700;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] .col-produit::before {
        display: none;
    }

    .table-stat-produits tbody tr[data-sort-row="1"] .col-ca {
        grid-column: 1 / -1;
        border-bottom: 0 !important;
        background: #faf7f5;
        font-size: 15px;
    }


    /*
     * Déconnexion : plus d'emoji bleu iOS.
     */
    .btn-deconnexion::before {
        content: none !important;
    }

    .btn-deconnexion .deconnexion-texte {
        display: none;
    }

    .btn-deconnexion .deconnexion-icone {
        display: inline;
        color: #fff;
        font-size: 22px;
        line-height: 1;
    }
}

@media (max-width: 430px) {

    .tableau-produits tbody tr[data-sort-row="1"],
    .table-stat-produits tbody tr[data-sort-row="1"] {
        grid-template-columns: 1fr;
    }

    .tableau-produits tbody tr[data-sort-row="1"] td,
    .table-stat-produits tbody tr[data-sort-row="1"] td {
        grid-column: 1 !important;
    }

    .tableau-produits .actions-tableau {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBILE V2 - AJOUTER UNE VENTE
   ========================================================= */

@media (max-width: 700px) {

    body {
        overflow-x: hidden;
    }

    main {
        overflow: hidden;
    }

    .entete-vente,
    .bas-vente {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .entete-vente > *,
    .bas-vente > *,
    .champ-entete-vente,
    .champ-bas-vente {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .champ-entete-vente input,
    .champ-entete-vente select,
    .champ-bas-vente input,
    .champ-bas-vente select,
    .champ-bas-vente textarea {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .table-vente,
    .table-vente tbody,
    .table-vente tr,
    .table-vente td {
        max-width: 100% !important;
    }
}


/* =========================================================
   MOBILE V2 - STOCKS SANS DÉFILEMENT HORIZONTAL
   ========================================================= */

@media (max-width: 700px) {

    .aide-modification-rapide {
        font-size: 13px;
        line-height: 1.45;
    }

    .tableau-stocks-wrapper {
        overflow: visible !important;
    }

    .tableau-stocks {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
    }

    .tableau-stocks thead,
    .tableau-stocks tfoot {
        display: none !important;
    }

    .tableau-stocks tbody {
        display: block !important;
        width: 100% !important;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100% !important;
        margin-bottom: 14px;
        border: 1px solid #e7ddd5;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,.04);
    }

    .tableau-stocks tbody tr[data-sort-row="1"] td {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #eee5df !important;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 55%;
        color: #7b6d63;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .col-reference,
    .tableau-stocks tbody tr[data-sort-row="1"] .col-produit {
        grid-column: 1 / -1;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .col-reference {
        background: #faf7f5;
        font-size: 16px;
        font-weight: 700;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .col-produit {
        justify-content: flex-start;
        text-align: left !important;
        font-size: 15px;
        font-weight: 700;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .col-produit::before {
        display: none;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .stock-editable {
        cursor: pointer;
        background: #fffaf6;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .stock-editable::after {
        content: "✎";
        color: #9a8b80;
        font-size: 12px;
        margin-left: 4px;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .stock-editable.en-edition::after {
        display: none;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .stock-total,
    .tableau-stocks tbody tr[data-sort-row="1"] .valeur-stock {
        background: #faf7f5;
        font-weight: 700;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .valeur-stock:last-child {
        border-bottom: 0 !important;
    }

    /* On garde le double-clic desktop.
       Sur mobile, un simple tap ouvre l'édition. */
    .stock-editable {
        touch-action: manipulation;
    }
}

@media (max-width: 430px) {
    .tableau-stocks tbody tr[data-sort-row="1"] {
        grid-template-columns: 1fr;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] td {
        grid-column: 1 !important;
    }
}


/* =========================================================
   MOBILE V3 - CORRECTIONS FINALES DATE + ALIGNEMENT STOCKS
   ========================================================= */

.date-vente-wrapper {
    width: 100%;
    min-width: 0;
}

/*
 * Safari iPhone donne parfois au champ date une largeur
 * intrinsèque supérieure à son conteneur.
 * Le wrapper porte donc le visuel du champ et masque
 * proprement tout dépassement interne du contrôle iOS.
 */
@media (max-width: 700px) {

    .date-vente-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden;
        border: 1px solid #d8ccc3;
        border-radius: 8px;
        background: #fff;
        box-sizing: border-box;
    }

    .date-vente-wrapper input[type="date"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
        appearance: none;
        text-align: center;
    }

    .date-vente-wrapper input[type="date"]:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .date-vente-wrapper:focus-within {
        border-color: #8a7769;
        box-shadow: 0 0 0 3px rgba(138, 119, 105, 0.12);
    }


    /*
     * Stocks mobile :
     * le crayon créait trois éléments dans la ligne
     * (libellé / chiffre / crayon), ce qui plaçait le chiffre
     * visuellement au milieu.
     * On le retire : libellé à gauche, valeur bien collée à droite.
     */
    .tableau-stocks tbody tr[data-sort-row="1"] .stock-editable::after {
        display: none !important;
        content: none !important;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .stock-editable,
    .tableau-stocks tbody tr[data-sort-row="1"] .stock-total,
    .tableau-stocks tbody tr[data-sort-row="1"] .valeur-stock {
        justify-content: space-between !important;
        text-align: right !important;
    }

    .tableau-stocks tbody tr[data-sort-row="1"] .stock-editable input {
        width: 92px !important;
        max-width: 45% !important;
        margin-left: auto !important;
        text-align: right !important;
    }
}


/* =========================================================
   CORRECTION MOBILE - BOUTONS FICHE PRODUIT
   ========================================================= */

@media (max-width: 700px) {

    .actions-produit {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .actions-produit > a,
    .actions-produit > form {
        flex: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .actions-produit form {
        display: block !important;
    }

    .btn-modifier-produit,
    .btn-supprimer-produit {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 16px !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    .actions-produit form .btn-supprimer-produit {
        width: 100% !important;
    }
}