/* Fiches et lecteur de fichiers : balise <fichier> (choco_lecteur.js) */

fichier {display: block; margin: 0.5rem 0;}

.fichier-groupe {border-radius: 6px;}
.fichier-titre {font-weight: bold; margin-bottom: 0.35rem;}

/* Côte à côte (par défaut) */
.fichier-piste {display: flex; flex-wrap: wrap; gap: 0.75rem;}
.fichier-fiche {
    position: relative; width: 170px; padding: 0.5rem; cursor: pointer;
    border-radius: 8px;
    background-color: var(--bs-border-color, #dee2e6); color: var(--bs-body-color, #212529); /* fond gris : la fiche ressort */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.fichier-fiche:hover, .fichier-fiche:focus-visible {border-color: var(--bs-primary, #0d6efd); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); outline: none;}
.fichier-vignette {width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px;}
.fichier-vignette img {max-width: 100%; max-height: 100%; object-fit: contain;}
.fichier-vignette .bi {font-size: 3.2rem; color: var(--bs-secondary-color, #6c757d);}
.fichier-nom {font-size: 0.85rem; text-align: center; overflow-wrap: anywhere; line-height: 1.2;}
.fichier-pastille {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--bs-primary, #0d6efd); color: #fff; font-size: 0.85rem;
}
.fichier-telecharger {
    position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    background-color: var(--bs-secondary-bg, #e9ecef); color: var(--bs-body-color, #212529); font-size: 0.85rem;
}
.fichier-telecharger:hover {background-color: var(--bs-secondary, #6c757d); color: #fff;}
/* Remplacer (auteur) : sous Télécharger */
.fichier-remplacer {
    position: absolute; top: 38px; left: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--bs-secondary-bg, #e9ecef); color: var(--bs-body-color, #212529); font-size: 0.85rem;
}
.fichier-remplacer:hover {background-color: var(--bs-warning, #ffc107); color: #000;}
/* Supprimer (auteur) : sous Remplacer */
.fichier-supprimer {
    position: absolute; top: 70px; left: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--bs-secondary-bg, #e9ecef); color: var(--bs-body-color, #212529); font-size: 0.85rem;
}
.fichier-supprimer:hover {background-color: var(--bs-danger, #dc3545); color: #fff;}
/* Boutons d'auteur visibles seulement en mode édition du document (frame-block-show, posée par change_mode_edit) */
.frame-block:not(.frame-block-show) .fichier-edition {display: none;}

/* Lecteur intégré (attribut ouvert) : pleine largeur, empilés */
.fichier-ouvert .fichier-piste {flex-direction: column; flex-wrap: nowrap;}
.fichier-integre {width: 100%; cursor: default; align-items: stretch; padding: 0; background-color: var(--bs-body-bg, #fff);}
.fichier-integre:hover {box-shadow: none; border-color: var(--bs-border-color, #dee2e6);}
.fichier-entete {display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--bs-border-color, #dee2e6);}
.fichier-entete .fichier-nom {text-align: left;}

/* Carrousel : fiches empilées dans une seule cellule de grille, placées en 3D par le JS (fichier_pivoter) selon leur
   écart à la fiche courante ; chaque changement est animé par la transition (aucun défilement natif).
   overflow: clip et non hidden : une piste hidden défilerait en douce quand une fiche voisine reçoit le focus. */
.fichier-carrousel .fichier-piste {display: grid; grid-template-areas: "pile"; justify-items: center; align-content: center;
                                   overflow: clip; perspective: 1000px;}
.fichier-carrousel .fichier-piste:focus-visible {outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px;}
.fichier-carrousel .fichier-fiche {grid-area: pile; transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.15s, border-color 0.15s;}
.fichier-carrousel .fichier-glisse .fichier-fiche {transition: none;} /* glisser : les fiches suivent le pointeur */
/* Fiches : même taille que côte à côte ; glisser et molette gérés par le JS (le doigt fait encore défiler la page) */
.fichier-carrousel:not(.fichier-ouvert) .fichier-piste {padding-block: 0.75rem; user-select: none; touch-action: pan-y pinch-zoom;}
.fichier-vertical:not(.fichier-ouvert) .fichier-piste {touch-action: pan-x pinch-zoom;}
@media (prefers-reduced-motion: reduce) {
    .fichier-carrousel .fichier-fiche {transition: box-shadow 0.15s, border-color 0.15s;}
}
.fichier-nav {display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.4rem;}
.fichier-compteur {font-size: 0.85rem; min-width: 3.5em; text-align: center;}

/* Lecteur (modale et intégré) */
.lecteur-corps {display: flex; flex-direction: column; overflow: hidden; background-color: var(--bs-tertiary-bg, #f8f9fa);}
.lecteur-corps:fullscreen {height: 100vh;}
.lecteur-attente, .lecteur-erreur {margin: auto; padding: 1rem;}
.lecteur-barre {display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.85rem;
                border-bottom: 1px solid var(--bs-border-color, #dee2e6); background-color: var(--bs-body-bg, #fff);}
.lecteur-corps > .lecteur-barre .lecteur-pastille {margin-right: auto;}

/* Boutons-icônes, pastilles et groupe de zoom (en-tête de la modale et barre du lecteur intégré) */
.lecteur-bouton {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0;
    border: none; border-radius: 8px; background: transparent; color: var(--bs-secondary-color, #6c757d);
    font-size: 1rem; text-decoration: none; cursor: pointer;
}
.lecteur-bouton:hover, .lecteur-bouton:focus-visible {background-color: var(--bs-secondary-bg, #e9ecef); color: var(--bs-body-color, #212529); outline: none;}
.lecteur-bouton-fermer:hover, .lecteur-bouton-fermer:focus-visible {background-color: rgba(220, 53, 69, 0.12); color: var(--bs-danger, #dc3545);}
.lecteur-pastille {
    display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; white-space: nowrap;
    font-size: 0.8rem; font-variant-numeric: tabular-nums; background-color: var(--bs-secondary-bg, #e9ecef); color: var(--bs-body-color, #212529);
}
.lecteur-groupe-boutons {display: inline-flex; align-items: center; border-radius: 8px; background-color: var(--bs-tertiary-bg, #f8f9fa);}
.lecteur-groupe-boutons .lecteur-bouton {width: 28px; height: 28px; font-size: 0.9rem;}
.lecteur-zoom-valeur {
    width: 3.6em; padding: 0.1rem 0; border: none; border-radius: 6px; background: transparent; color: inherit;
    text-align: center; font: inherit; font-size: 0.8rem; font-variant-numeric: tabular-nums; cursor: text;
}
.lecteur-zoom-valeur:hover {background-color: var(--bs-secondary-bg, #e9ecef);}
.lecteur-zoom-valeur:focus {outline: none; background-color: var(--bs-body-bg, #fff); box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd);}

/* Modale : en-tête compact sur une ligne (icône, nom, outils du lecteur, Télécharger, Fermer) */
#modal-lecteur-fichier .modal-content {overflow: hidden; border: none; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);}
.lecteur-entete {
    flex-wrap: nowrap; gap: 0.5rem; min-height: 46px; padding: 0.3rem 0.4rem 0.3rem 0.9rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1)); background-color: var(--bs-body-bg, #fff);
}
.lecteur-entete-icone {flex: none; font-size: 1.15rem; color: var(--bs-primary, #0d6efd);}
.lecteur-entete .modal-title {flex: 1 1 auto; min-width: 0; font-size: 0.95rem; font-weight: 600;}
.lecteur-outils {display: flex; align-items: center; flex: none;}
.lecteur-outils:empty {display: none;}
.lecteur-outils .lecteur-barre {padding: 0; gap: 0.35rem; border: none; background: none;}
.lecteur-separateur {flex: none; width: 1px; height: 22px; background-color: var(--bs-border-color, #dee2e6);}
.lecteur-corps-modale {height: calc(100dvh - 3.5rem - 47px);} /* marges de la modale, en-tête */
#modal-lecteur-fichier .modal-content:fullscreen {border-radius: 0;}
#modal-lecteur-fichier .modal-content:fullscreen .lecteur-corps-modale {height: calc(100vh - 47px);}
/* Pleine page (classe Bootstrap modal-fullscreen) : toute la fenêtre */
#modal-lecteur-fichier .modal-fullscreen .modal-content {border-radius: 0; box-shadow: none;}
#modal-lecteur-fichier .modal-fullscreen .lecteur-corps-modale {height: calc(100dvh - 47px);}
@media (max-width: 767.98px) { /* modal-fullscreen-md-down : déjà pleine page, en-tête allégé */
    #modal-lecteur-fichier .modal-content {border-radius: 0;}
    .lecteur-corps-modale {height: calc(100dvh - 47px);}
    .lecteur-bouton-pleine-page, .lecteur-bouton-pleine-page + .lecteur-separateur {display: none;}
    .lecteur-zoom-valeur, .lecteur-outils .lecteur-pastille-mot {display: none;}
}
.lecteur-pages {position: relative; flex: 1; overflow: auto; padding: 0.5rem; --lecteur-zoom: 1; cursor: grab;}
/* Sans transition (globale dans style.css) : la nouvelle largeur est lue aussitôt pour le rendu et le recentrage */
.lecteur-page {width: calc(100% * var(--lecteur-zoom)); transition: none; margin: 0 auto 0.5rem; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);}
.lecteur-page canvas {display: block; width: 100%; height: auto;}
.lecteur-image {flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; cursor: zoom-in;}
.lecteur-image img {max-width: 100%; max-height: 100%; object-fit: contain;}
/* Zoomé : marges auto (et non centrage du conteneur) pour que tout reste accessible par défilement */
.lecteur-image.zoome {align-items: flex-start; justify-content: flex-start; cursor: grab;}
.lecteur-image.zoome img {flex: none; margin: auto; max-width: none; max-height: none;}
.lecteur-glisse, .lecteur-glisse * {cursor: grabbing !important; user-select: none;}
.lecteur-video {width: 100%; height: 100%; background: #000;}
.lecteur-texte {flex: 1; margin: 0; overflow: auto;}
.lecteur-document {flex: 1; overflow: auto; padding: 1rem; background-color: var(--bs-body-bg, #fff);}
.lecteur-document img {max-width: 100%; height: auto;}
.lecteur-document:focus, .lecteur-pages:focus {outline: none;}
.lecteur-diapo h2:first-child {margin-top: 0;}
.lecteur-feuilles {flex-wrap: wrap; gap: 0.25rem;}
.lecteur-tableur {width: auto; font-size: 0.85rem;}
.lecteur-tableur td {white-space: pre-line; max-width: 24rem;}
.lecteur-tableur th {background-color: var(--bs-secondary-bg, #e9ecef); text-align: center; font-weight: normal; color: var(--bs-secondary-color, #6c757d);}
.lecteur-widget {flex: 1; width: 100%; height: 100%; border: none; background-color: #fff;}
.lecteur-netpbm {margin: auto; max-width: 100%; max-height: 100%; min-width: 64px; image-rendering: pixelated; background: #fff;}
.lecteur-note {font-size: 0.8rem; padding: 0.25rem 0.75rem; color: var(--bs-secondary-color, #6c757d);
               border-bottom: 1px solid var(--bs-border-color, #dee2e6); background-color: var(--bs-body-bg, #fff);}

@media (max-width: 576px) {
    .fichier-groupe:not(.fichier-carrousel) .fichier-fiche {width: 100%;}
}