/* =========================================================
   MISE EN PAGE
   ========================================================= */
/* --- Conteneur centré, largeur maximale du site --- */
.conteneur-centre {
    max-width: 960px;
}

/* --- Zone de tableau défilante (entête figée quand on scrolle) --- */
.zone-tableau {
    max-height: calc(100vh - 360px);
    overflow: auto;
}
.entete-collante {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* --- Barre de recherche (largeur fixe, plein écran sur mobile) --- */
.champ-recherche {
    width: 350px;
    max-width: 100%;
}

/* =========================================================
   CARTES PRODUIT
   ========================================================= */
/* --- Image cliquable : format + ombre au survol --- */
.image-produit {
    height: 200px;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 0.5rem;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}
.image-produit:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* --- Boutons (⋮ + note) au-dessus de l'image de la carte --- */
.actions-carte {
    z-index: 2;
}

/* --- Image de couverture d'une carte (pièce ou produit) : 200px --- */
.image-carte {
    height: 200px;
    object-fit: cover;
}

/* --- Grande image de la page détail produit (portail client) --- */
.image-detail {
    height: 300px;
    object-fit: cover;
}

/* --- Vignettes cliquables sous la grande image (portail client) --- */
.vignette {
    height: 60px;
    width: 60px;
    object-fit: cover;
    cursor: pointer;
}

/* --- Menu ⋮ : visible seulement au survol de la carte --- */
.carte-produit .menu-carte {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.zone-image:hover .menu-carte {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
   BOUTONS DE STATUT (Approuver / Refuser)
   ========================================================= */
/* --- Couleurs personnalisées --- */
.btn-statut.btn-success {
    background-color: #68bc73;
    border-color: #68bc73;
}
.btn-statut.btn-danger {
    background-color: #fb7585;
    border-color: #fb7585;
}

/* --- Effet au survol : léger soulèvement + ombre --- */
/* --- Survol : la couleur fonce --- */
.btn-statut {
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}
.btn-statut.btn-success:hover {
    background-color: #58a463;
    border-color: #58a463;
}
.btn-statut.btn-danger:hover {
    background-color: #f9556a;
    border-color: #f9556a;
}

/* =========================================================
   MODALE PRODUIT — gestion des images
   ========================================================= */
/* Une vignette (image existante ou nouvelle) */
.vignette-produit {
    width: 120px;
}
/* La miniature à l'intérieur d'une vignette */
.img-miniature {
    height: 90px;
    width: 100%;
    object-fit: cover;
}
/* Image marquée pour suppression (× coché) → grisée */
.case-suppr:checked ~ .img-miniature {
    opacity: 0.35;
}

/* Le × n'apparaît qu'au survol de la vignette */
.vignette-produit .badge {
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.vignette-produit:hover .badge {
    opacity: 1;
}

/* =========================================================
   AUTRES UTILITAIRES
   ========================================================= */
/* Aperçu d'image dans une modale (création / modification pièce) */
.apercu-image {
    max-height: 200px;
}
/* Champ du lien de partage (page projet) */
.champ-lien {
    max-width: 360px;
}
/* Colonne « Nom du projet » du tableau des projets */
.col-nom-projet {
    width: 40%;
}
/* Table qui garde une largeur mini (scroll horizontal sur mobile) */
.table-large {
    min-width: 640px;
}

/* =========================================================
   ÉCRANS TACTILES (pas de survol possible)
   ========================================================= */
@media (hover: none) {
    .carte-produit .menu-carte {
        opacity: 1;
        pointer-events: auto;
    }
}