/* ============================================================
   SORTIES.CSS — Styles spécifiques aux sorties
   - Filtres (boutons vert CAPVO)
   - Vignettes sorties
   - Galerie sorties
   - Badges sortie passée
   - Boutons spécifiques (upload, suppression)
============================================================ */

/* ============================================================
   BADGE SORTIE PASSEE
============================================================ */
.badge-passe {
    display: inline-block;
    background: #ccc;
    color: #333;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 6px;
    font-weight: bold;
}

/* ============================================================
   FILTRES CAPVO (vert CAPVO)
============================================================ */
.filtre-btn {
    display: inline-block;
    padding: 6px 16px;
    margin: 0 4px;
    background: #3a7f3a;
    color: white;
    border: 1px solid #2f6a2f;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s ease;
}

.filtre-btn:hover {
    background: #4c9a4c;
    border-color: #2f6a2f;
}

.filtre-btn.active {
    background: #b7e3b7;
    color: #2f6a2f;
    border-color: #2f6a2f;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   VIGNETTES SORTIES
============================================================ */
.vignette-sortie {
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    border: 1px solid #ccc;
    object-fit: cover;
    display: block !important;
    margin: 0 auto 15px auto !important;
}
.photo-auteur {
    font-size: 0.85em;
    color: #555;
    margin-top: 4px;
}

.photo-legende {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
    margin-top: 2px;
}

/* ============================================================
   UPLOAD / SUPPRESSION
============================================================ */
.btn-suppr {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    background: #c00;
    color: #fff;
    border-radius: 4px;
    font-size: 0.8em;
    text-decoration: none;
    position: relative;
    z-index: 999;
}
/* Bouton upload */
.upload-btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
    clear: both;
}

.upload-btn-container button {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2e7d32;
    color: #fff;
    padding: 12px 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    min-width: 260px;
}

/* ============================================================
   GALERIE D'ÉDITION (.galerie) — uniquement sur les pages
   expos_upload.php et sorties_upload.php
   Les règles ci-dessous DOIVENT rester limitées à la galerie
   d'édition : sinon elles bloquent les clics sur les <p class="legend">
   utilisés ailleurs (liens externes / PDF sur expos.php, sorties.php,
   ailleurs.php, etc.).
============================================================ */
.galerie div {
    pointer-events: none !important;
}
.galerie div .btn-suppr {
    pointer-events: auto !important;
}
.galerie .legend,
.galerie .legend * {
    pointer-events: none !important;
}

/* ============================================================
   GALERIE PHOTOS (sorties + expos)
   La classe .galerie-photos est posée sur le container parent
   pour distinguer du mode "défis"
============================================================ */
.galerie-photos .galerie-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s;
}
.galerie-photos .galerie-card img.loaded {
    opacity: 1;
}

/* Cellule de galerie expos (admin + utilisateur) */
.galerie-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Lien de téléchargement individuel (admin) */
.photo-download {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 8px;
    text-align: center;
    background: #2e7d32;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}
.photo-download:hover {
    background: #1b5e20;
}

/* Lien de suppression d'une photo (admin only) */
.photo-suppr-admin {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 8px;
    text-align: center;
    background: #c62828;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}
.photo-suppr-admin:hover {
    background: #8e1c1c;
}

/* Métadonnées techniques de la photo (admin) */
.photo-fichier {
    font-size: 0.8em;
    color: #333;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-top: 4px;
    word-break: break-all;
}

/* ============================================================
   ACTIONS ADMIN — en-tête de galerie expo
   (boutons ZIP + Bordereau côte à côte, espacés)
============================================================ */
.expo-actions-admin {
    margin-top: 15px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.expo-actions-admin .concours-btn {
    padding: 8px 16px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}
.concours-btn-zip       { background: #2e7d32; }
.concours-btn-zip:hover { background: #1b5e20; }
/* Bouton "Générer le bordereau" : style actif vert CAPVO (comme ZIP) */
.concours-btn-bordereau       { background: #2e7d32; }
.concours-btn-bordereau:hover { background: #1b5e20; }

/* ============================================================
   BORDEREAU D'EXPO (admin) — page imprimable avec export CSV
============================================================ */
.bordereau-page {
    max-width: 1000px;
    margin: 0 auto;
}

.bordereau-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 20px;
}
/* Bouton "Retour à la galerie" — style actif vert CAPVO */
.bordereau-btn-back  { background: #2e7d32 !important; }
.bordereau-btn-back:hover { background: #1b5e20 !important; }
.bordereau-btn-print { background: #1976d2 !important; }
.bordereau-btn-csv   { background: #2e7d32 !important; }

.bordereau-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #2e7d32;
    padding-bottom: 10px;
}
.bordereau-header h1 {
    margin: 0 0 8px 0;
    color: #2e7d32;
}
.bordereau-dates {
    margin: 4px 0;
    font-size: 1.05em;
}
.bordereau-meta {
    margin: 4px 0 0 0;
    color: #555;
    font-size: 0.9em;
}

.bordereau-empty {
    text-align: center;
    color: #888;
    font-style: italic;
    margin: 30px 0;
}

.bordereau-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    margin-top: 10px;
}
.bordereau-table th,
.bordereau-table td {
    padding: 6px 8px;
    border: 1px solid #c2cdc2;
    vertical-align: top;
}
.bordereau-table thead th {
    background: #2e7d32;
    color: #fff;
    text-align: left;
}
.bordereau-table tbody tr:nth-child(even) {
    background: #f5f9f3;
}
.bordereau-table .col-fichier {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}
.bordereau-table .col-center { text-align: center; }
.bordereau-table .col-num    { text-align: right; }

.bordereau-table tfoot .bordereau-total td {
    background: #e8f3e6;
    font-weight: bold;
}
.bordereau-table tfoot .bordereau-total td.col-num {
    color: #1b5e20;
}

/* Ligne de sous-total par utilisateur dans le tbody.
   Tons plus doux que le total général pour rester subtil. */
.bordereau-table tbody .bordereau-sous-total td {
    background: #f3f8f0;
    font-style: italic;
    border-top: 1px solid #c5d8bd;
}
.bordereau-table tbody .bordereau-sous-total td.col-num {
    color: #1b5e20;
    font-weight: bold;
    font-style: normal;
}

/* --- Impression : nettoyer la page pour ne garder que le bordereau --- */
@media print {
    body * { visibility: hidden; }
    .bordereau-page, .bordereau-page * { visibility: visible; }
    .bordereau-page {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
    }
    .no-print { display: none !important; }
    .bordereau-table { font-size: 10pt; }
    .bordereau-table thead th {
        background: #2e7d32 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Mention "Estimation coût impression" — centrée, juste au-dessus du choix
   Impression CAPVO.
   Le formulaire parent est flex (align-items:center), donc on force
   width:100% pour que le <p> s'étire sur toute la largeur ; sinon le
   text-align:center centre le texte dans la largeur du contenu seul.
   !important pour neutraliser p { text-align: justify } de base.css. */
.estimation-impression {
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    font-size: 0.85em !important;
    color: #555 !important;
    text-align: center !important;
}

/* Badge type de photo : Couleur (par défaut, vert) ou Noir et Blanc (sombre) */
.photo-couleur {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    background: #1976d2;
    color: #fff;
}
.photo-couleur--nb {
    background: #333;
    color: #fff;
}

.photo-impression {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: #2f6a2f;
    color: #fff;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
}

.photo-admin {
    font-size: 0.75em;
    color: #2f6a2f;
    margin-top: 4px;
    border-top: 1px dashed #ccc;
    padding-top: 4px;
}

/* ============================================================
   VIGNETTE EXPO (page d'accueil expos)
============================================================ */
.vignette-expo {
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    border: 1px solid #ccc;
    object-fit: cover;
    display: block !important;
    margin: 0 auto 15px auto !important;
}

/* ============================================================
   OVERLAY D'ATTENTE — variante téléchargement (expos_galerie)
   Réutilise les animations upload-spin / upload-dots définies ci-dessous.
============================================================ */
#download-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#download-loading-overlay.show {
    display: flex;
}

/* ============================================================
   OVERLAY D'ATTENTE pendant l'upload d'une photo
============================================================ */
#upload-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#upload-loading-overlay.show {
    display: flex;
}
.upload-loading-box {
    background: #fff;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 90%;
}
.upload-loading-box p {
    margin: 14px 0 0 0;
    color: #2e7d32;
    font-weight: bold;
    font-size: 1.05em;
}
.upload-loading-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #c8e6c9;
    border-top-color: #2e7d32;
    border-radius: 50%;
    margin: 0 auto;
    animation: upload-spin 0.9s linear infinite;
}
@keyframes upload-spin { to { transform: rotate(360deg); } }
.upload-loading-box .dots::after {
    content: "";
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: upload-dots 1.2s steps(4, end) infinite;
}
@keyframes upload-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: "...."; }
}