/* ===== Grille des dossiers photo (/galeries) ===== */
.ffsmc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--ffsmc-cols, 4), 1fr);
    gap: 20px;
    margin: 20px 0 40px;
}
@media (max-width: 768px) {
    .ffsmc-gallery-grid { grid-template-columns: repeat(var(--ffsmc-cols-mobile, 2), 1fr); }
}
.ffsmc-gallery-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f7f7;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ffsmc-gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.ffsmc-gallery-cover {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.ffsmc-gallery-cover img {
    width: 100%;
    height: 100%;
    /* « contain » et non « cover » : sur une galerie de reference
       (walkarounds, maquettisme), le sujet doit etre visible en entier.
       « cover » remplissait la tuile en rognant les cotes, ce qui coupait
       les ailes des avions et les extremites des vehicules. */
    object-fit: contain;
    background: #f2f2f2;
}
.ffsmc-gallery-card-title {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.95rem;
}
.ffsmc-gallery-card-count {
    padding: 0 12px 10px;
    font-size: 0.78rem;
    color: #888;
}

/* ===== Fil d'ariane arborescence ===== */
.ffsmc-folder-breadcrumb {
    margin: 10px 0 15px;
    font-size: 0.85rem;
    color: #666;
}
.ffsmc-folder-breadcrumb a {
    color: #666;
    text-decoration: none;
}
.ffsmc-folder-breadcrumb a:hover { text-decoration: underline; }
.ffsmc-folder-breadcrumb .sep { margin: 0 6px; color: #ccc; }

/* ===== Pagination des photos ===== */
.ffsmc-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 25px 0;
}
.ffsmc-page-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
}
.ffsmc-page-link:hover { background: #f5f5f5; }
.ffsmc-page-link.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* ===== Vue d'un dossier ===== */
.ffsmc-gallery-description {
    margin-bottom: 20px;
}
.ffsmc-photo-grid {
    display: grid;
    grid-template-columns: repeat(var(--ffsmc-cols, 4), 1fr);
    gap: 16px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .ffsmc-photo-grid { grid-template-columns: repeat(var(--ffsmc-cols-mobile, 2), 1fr); }
}
.ffsmc-photo-item {
    margin: 0;
    background: #f7f7f7;
    border-radius: 6px;
    overflow: hidden;
}
.ffsmc-photo-item img {
    width: 100%;
    height: 180px;
    /* Voir le commentaire sur .ffsmc-gallery-cover img : on privilegie
       la lisibilite du sujet a l'uniformite des tuiles. */
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}
.ffsmc-photo-item figcaption {
    padding: 6px 10px;
    font-size: 0.82rem;
    color: #555;
}
.ffsmc-photo-product-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid #e5e5e5;
    text-decoration: none;
    color: inherit;
    font-size: 0.8rem;
}
.ffsmc-photo-product-link img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

/* ===== Blocs produits liés (dossier -> produits) ===== */
.ffsmc-linked-products {
    margin: 20px 0 30px;
}
.ffsmc-linked-products-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.ffsmc-linked-product-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
}
.ffsmc-linked-product-card img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}
.ffsmc-linked-product-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}
.ffsmc-linked-product-price {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* ===== Bloc "Photos de référence" sur la fiche produit ===== */
.ffsmc-product-gallery-block {
    margin: 25px 0;
}
.ffsmc-product-gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.ffsmc-product-gallery-card {
    display: block;
    width: 140px;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f7f7;
}
.ffsmc-product-gallery-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.ffsmc-product-gallery-card span {
    display: block;
    padding: 6px 8px;
    font-size: 0.8rem;
    font-weight: 600;
}
.ffsmc-customer-photo-card {
    border: 2px solid #f0ad4e;
}

/* ===== Rang éditable (admin) ===== */
.ffsmc-rank-input {
    text-align: center;
    padding: 2px 4px;
}

/* ===== Tags / matériel ===== */
.ffsmc-tag-filter {
    margin: 10px 0 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ffsmc-gallery-tags {
    margin: 10px 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ffsmc-tag-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: #eee;
    color: #333;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ffsmc-tag-pill:hover,
.ffsmc-tag-pill.active {
    background: #333;
    color: #fff;
}
.ffsmc-gallery-card-tags {
    padding: 0 12px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ffsmc-gallery-card-tags span {
    font-size: 0.7rem;
    background: #eee;
    border-radius: 10px;
    padding: 2px 8px;
    color: #666;
}

/* ===== Barre d'outils (compteur + taille des vignettes) ===== */
.ffsmc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0;
}
.ffsmc-photo-count {
    font-size: 0.9rem;
    color: #666;
}
.ffsmc-size-switch {
    display: inline-flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.ffsmc-size-btn {
    border: none;
    background: #fff;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    border-right: 1px solid #ddd;
}
.ffsmc-size-btn:last-child { border-right: none; }
.ffsmc-size-btn.active { background: #333; color: #fff; }

/* Grille adaptable selon la taille choisie */
/* Le nombre de colonnes de base vient des réglages admin (--ffsmc-cols /
   --ffsmc-cols-mobile, posés en inline style). Le sélecteur S/M/L ci-dessous
   ajuste ces variables via JS (voir ffsmcgallery.js) plutôt que de fixer des
   colonnes en dur, pour respecter les réglages choisis dans l'admin. */
.ffsmc-photo-grid[data-size="s"] .ffsmc-photo-item img { height: 130px; }
.ffsmc-photo-grid[data-size="m"] .ffsmc-photo-item img { height: 190px; }
.ffsmc-photo-grid[data-size="l"] .ffsmc-photo-item img { height: 260px; }

/* ===== Visionneuse plein écran ===== */
body.ffsmc-no-scroll {
    overflow: hidden;
}
.ffsmc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.94);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.ffsmc-lightbox[hidden] { display: none; }
.ffsmc-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}
.ffsmc-lightbox-img {
    max-width: 92vw;
    max-height: 76vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}
.ffsmc-lightbox-img.ffsmc-zoomed {
    cursor: zoom-out;
    transform: scale(1.8);
}
.ffsmc-lightbox-spinner {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ffsmc-spin 0.8s linear infinite;
}
.ffsmc-lightbox-spinner[hidden] { display: none; }
@keyframes ffsmc-spin { to { transform: rotate(360deg); } }
.ffsmc-lightbox-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0.6), transparent);
    z-index: 2;
}
.ffsmc-lightbox-counter {
    font-size: 0.9rem;
    opacity: 0.85;
}
.ffsmc-lightbox-actions { display: flex; gap: 6px; }
.ffsmc-lb-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.ffsmc-lb-btn:hover,
.ffsmc-lb-btn:focus { background: rgba(255,255,255,0.28); color: #fff; outline: none; }
.ffsmc-lb-btn[hidden] { display: none; }
.ffsmc-lightbox-caption {
    color: #ddd;
    padding: 12px 20px 20px;
    font-size: 0.9rem;
    text-align: center;
    max-width: 80vw;
    min-height: 1.2em;
}
.ffsmc-lightbox-prev,
.ffsmc-lightbox-next {
    position: absolute;
    background: rgba(0,0,0,0.25);
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 14px 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 4px;
}
.ffsmc-lightbox-prev:hover,
.ffsmc-lightbox-next:hover { background: rgba(0,0,0,0.55); }
.ffsmc-lightbox-prev { left: 10px; }
.ffsmc-lightbox-next { right: 10px; }
@media (max-width: 768px) {
    .ffsmc-lightbox-prev,
    .ffsmc-lightbox-next { font-size: 1.5rem; padding: 10px 12px; }
    .ffsmc-lightbox-img { max-height: 68vh; }
}

/* ===== Modale "envoyer à un ami" ===== */
.ffsmc-share-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ffsmc-share-modal[hidden] { display: none; }
.ffsmc-share-modal-inner {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
}
.ffsmc-share-modal-inner h4 { margin-top: 0; }
.ffsmc-share-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px;
}
#ffsmc-share-feedback { margin-top: 10px; font-size: 0.85rem; min-height: 1.2em; }
.ffsmc-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Bloc "incrusté" page d'accueil ===== */
.ffsmc-home-preview {
    margin: 40px 0;
}
.ffsmc-home-preview-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ffsmc-home-preview-header h2 {
    margin: 0;
    font-size: 1.4rem;
}
.ffsmc-home-preview-all {
    font-size: 0.85rem;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
}
.ffsmc-home-preview-all:hover { text-decoration: underline; }
.ffsmc-home-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.ffsmc-home-preview-item {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}
.ffsmc-home-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
    display: block;
}
.ffsmc-home-preview-item:hover img {
    transform: scale(1.06);
}

/* ===== Divers ===== */
.ffsmc-folder-icon { font-size: 0.95em; }
.ffsmc-photo-item {
    display: flex;
    flex-direction: column;
}
.ffsmc-photo-item > a { display: block; }
.ffsmc-size-btn:focus-visible,
.ffsmc-page-link:focus-visible,
.ffsmc-tag-pill:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .ffsmc-gallery-card,
    .ffsmc-home-preview-item img,
    .ffsmc-lightbox-img { transition: none; }
    .ffsmc-lightbox-spinner { animation: none; }
}

.ffsmc-page-gap {
    display: inline-block;
    padding: 6px 8px;
    color: #999;
}

/* ===== Mode aperçu ===== */
.ffsmc-preview-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #fdf3e3;
    border: 1px solid #d79a2b;
    border-left-width: 4px;
    border-radius: 4px;
    font-size: 0.92rem;
    color: #5c4413;
}
.ffsmc-preview-badge {
    padding: 3px 10px;
    background: #d79a2b;
    color: #fff;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}
.ffsmc-preview-text { flex: 1 1 240px; }
.ffsmc-preview-exit {
    color: #5c4413;
    text-decoration: underline;
    white-space: nowrap;
}
.ffsmc-draft-badge {
    display: inline-block;
    padding: 1px 7px;
    background: #d79a2b;
    color: #fff;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* ===== Espace contributeur ===== */
.ffsmc-contrib-trail { margin-bottom: 14px; font-size: 0.9rem; }
.ffsmc-trail-sep { margin: 0 6px; color: #999; }
.ffsmc-contrib-roots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ffsmc-root-link {
    padding: 5px 12px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 0.88rem;
}
.ffsmc-root-link.active { background: #333; color: #fff; border-color: #333; }
.ffsmc-moderation-notice { font-size: 0.9rem; }
.ffsmc-contrib-section { margin-bottom: 28px; }
.ffsmc-contrib-section h2 { font-size: 1.05rem; margin-bottom: 10px; }
.ffsmc-contrib-albums { list-style: none; padding: 0; margin: 0 0 14px; }
.ffsmc-contrib-albums li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.ffsmc-contrib-albums .ffsmc-count { color: #888; font-size: 0.85rem; }
.ffsmc-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ffsmc-inline-form input[type="text"] { flex: 1 1 220px; }

.ffsmc-contrib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.ffsmc-contrib-card {
    position: relative;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    padding: 10px;
}
.ffsmc-contrib-card.is-pending { border-color: #d79a2b; background: #fffdf7; }
.ffsmc-contrib-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}
.ffsmc-contrib-card input[type="text"] { width: 100%; margin-bottom: 6px; }
.ffsmc-status-badge,
.ffsmc-cover-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
}
.ffsmc-status-badge { background: #d79a2b; }
.ffsmc-cover-badge { background: #2e7d32; }
.ffsmc-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ffsmc-danger { color: #b94a48; }

/* ===== Bandeaux partenaires ===== */
.ffsmc-banners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 24px 0;
}
.ffsmc-banner img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.ffsmc-banner a {
    display: block;
    transition: opacity 0.15s ease;
}
.ffsmc-banner a:hover { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
    .ffsmc-banner a { transition: none; }
}

/* ===== Dossiers protégés ===== */
body.ffsmc-protected .ffsmc-photo-grid img,
body.ffsmc-protected .ffsmc-lightbox img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ===== Bloc d'annonce de la galerie ===== */
.ffsmc-home-preview-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.ffsmc-home-intro { flex: 1 1 320px; }
.ffsmc-home-intro h2 { margin: 0 0 6px; }
.ffsmc-home-subtitle {
    margin: 0 0 6px;
    color: #555;
    font-size: 0.95rem;
    max-width: 60ch;
}
.ffsmc-home-counts {
    margin: 0;
    color: #777;
    font-size: 0.85rem;
}
.ffsmc-home-cta { white-space: nowrap; }

/* Disposition « bandeau » : une seule rangée, qui défile si besoin. */
.ffsmc-home-strip .ffsmc-home-preview-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.ffsmc-home-strip .ffsmc-home-preview-item {
    flex: 0 0 150px;
}
.ffsmc-home-strip .ffsmc-home-preview-item img {
    height: 110px;
    object-fit: cover;
}

/* Disposition « minimale » : annonce seule, encadrée discrètement. */
.ffsmc-home-minimal {
    padding: 20px 24px;
    background: #f7f9fb;
    border: 1px solid #e5eaee;
    border-radius: 6px;
}
.ffsmc-home-minimal .ffsmc-home-preview-header { margin-bottom: 0; }

/* La barre d'outils d'administration est positionnee par rapport a la
   photo : sans ce reperage, elle irait se coller au coin de la page. */
.ffsmc-photo-item {
    position: relative;
}

/* =========================================================================
   Retouche depuis la boutique — reservee a un employe habilite
   ========================================================================= */

.ffsmc-edit-flash {
    margin: 0 0 16px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 4px;
}

.ffsmc-edit-flash-ok {
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #86efac;
}

.ffsmc-edit-flash-ko {
    color: #7f1d1d;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

/* --- Boutons poses sur chaque photo ------------------------------------ */

.ffsmc-photo-admin {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ffsmc-photo-item:hover .ffsmc-photo-admin,
.ffsmc-photo-admin:focus-within {
    opacity: 1;
}

/* Sur ecran tactile il n'y a pas de survol : les boutons restent visibles. */
@media (hover: none) {
    .ffsmc-photo-admin {
        opacity: 0.9;
    }
}

.ffsmc-photo-admin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    background: rgba(17, 24, 39, 0.72);
    border: 0;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.ffsmc-photo-admin-btn:hover,
.ffsmc-photo-admin-btn:focus {
    background: #2563eb;
}

.ffsmc-photo-admin-danger:hover,
.ffsmc-photo-admin-danger:focus {
    background: #dc2626;
}

/* --- Panneau ------------------------------------------------------------ */

body.ffsmc-editor-open {
    overflow: hidden;
}

.ffsmc-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 20, 28, 0.78);
}

.ffsmc-editor-backdrop[hidden] {
    display: none;
}

.ffsmc-editor-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.ffsmc-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.ffsmc-editor-head h3 {
    margin: 0;
    font-size: 16px;
}

.ffsmc-editor-rank {
    font-weight: normal;
    color: #6b7280;
}

.ffsmc-editor-close {
    width: 32px;
    height: 32px;
    font-size: 22px;
    line-height: 1;
    color: #374151;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.ffsmc-editor-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    overflow: auto;
}

.ffsmc-editor-stage {
    flex: 1 1 460px;
    min-width: 260px;
}

/* Fond en damier : sur une image a transparence, il faut voir tout de suite
   ce qui est transparent et ce qui est blanc. */
.ffsmc-editor-canvas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 8px;
    background-color: #f3f4f6;
    background-image:
        linear-gradient(45deg, #e2e4e9 25%, transparent 25%, transparent 75%, #e2e4e9 75%),
        linear-gradient(45deg, #e2e4e9 25%, transparent 25%, transparent 75%, #e2e4e9 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.ffsmc-editor-canvas.is-cropping {
    cursor: crosshair;
}

.ffsmc-editor-canvas img {
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    cursor: default;
    user-select: none;
    -webkit-user-drag: none;
}

.ffsmc-crop-box {
    position: absolute;
    background: rgba(37, 99, 235, 0.14);
    border: 2px dashed #2563eb;
    pointer-events: none;
}

.ffsmc-crop-box[hidden] {
    display: none;
}

.ffsmc-editor-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.ffsmc-editor-tools {
    flex: 0 1 340px;
    min-width: 250px;
}

.ffsmc-tool {
    padding: 12px 0;
    border-bottom: 1px solid #eef0f3;
}

.ffsmc-tool:last-child {
    border-bottom: 0;
}

.ffsmc-tool h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #374151;
}

.ffsmc-tool-note {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}

.ffsmc-tool input[type="file"] {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
}

/* Boutons du panneau : styles propres au module, pour ne dependre d'aucun
   theme. Un theme qui redefinit .btn ne peut donc pas casser l'outil. */
.ffsmc-btn {
    margin: 0 6px 6px 0;
    padding: 7px 12px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

.ffsmc-btn:hover:not(:disabled) {
    background: #e5e7eb;
}

.ffsmc-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.ffsmc-btn-primary {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
}

.ffsmc-btn-primary:hover:not(:disabled) {
    background: #1d4ed8;
}

.ffsmc-btn-danger {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

.ffsmc-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}


/* --- Le crayon sur la vignette d'un dossier -------------------------------
   Meme comportement que sur une photo : invisible tant que la souris n'est
   pas sur la carte, toujours visible sur ecran tactile ou il n'y a pas de
   survol. */
.ffsmc-gallery-card-holder {
    position: relative;
}

.ffsmc-gallery-card-holder:hover .ffsmc-cover-admin,
.ffsmc-cover-admin:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .ffsmc-cover-admin {
        opacity: 0.9;
    }
}