/* Daniel — back-office : surcouche Tabler. */

body { background-color: #fbfcfe; }

.admin-navbar { background-color: #1b2330; }
.admin-navbar .nav-link.active,
.admin-navbar .nav-link:hover { color: #fff !important; }

/* Poignée de glisser-déposer (style « pois ») */
td.sortable-handle {
    width: 40px;
    padding: 0;
    cursor: grab;
    background: #f1f5f9 radial-gradient(circle, #cbd5e1 1.2px, transparent 1.5px) center / 8px 8px;
    border-right: 1px solid #e9edf2;
}
td.sortable-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }
.sortable-chosen { background: #eef2f7; }
tr.sortable-chosen { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.card.sortable-chosen { box-shadow: 0 6px 20px rgba(0,0,0,.18); background: #fff; }

/* Survols plus nets sur les actions */
.btn-ghost-danger:hover { background-color: var(--tblr-danger, #d63939) !important; color: #fff !important; }
.btn-ghost-secondary:hover { background-color: var(--tblr-secondary, #6c7a91) !important; color: #fff !important; }

/* Tableau « lignes-cartes » : coins arrondis + espace entre les lignes */
.rows-spaced { border-collapse: separate; border-spacing: 0 8px; }
.rows-spaced > thead > tr > th { border: 0; padding-top: 0; padding-bottom: .25rem; }
.rows-spaced > tbody > tr { box-shadow: 0 1px 3px rgba(20, 30, 50, .07); }
.rows-spaced > tbody > tr > td { background: #fff; border-top: 0; border-bottom: 0; }
.rows-spaced > tbody > tr > td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.rows-spaced > tbody > tr > td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* Grille de gestion des images */
.image-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .image-grid { grid-template-columns: 1fr; } }
.image-thumb { position: relative; background: #f1f5f9; border-radius: 6px; overflow: hidden; aspect-ratio: 3 / 2; }
.image-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.image-thumb.sortable-handle { cursor: grab; }
.image-thumb.sortable-handle:active { cursor: grabbing; }
.drag-grip { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.5); color: #fff; border-radius: 4px; padding: 2px 5px; font-size: 13px; line-height: 1; opacity: 0; transition: opacity .15s; }
.image-thumb:hover .drag-grip { opacity: 1; }

/* Légende compacte (état au repos) : nom tronqué + statut + actions */
.image-caption { padding: 8px 10px; }
.image-name { font-size: 13px; line-height: 1.4; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-name.is-empty { color: #94a3b8; font-style: italic; }
.image-caption-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.image-actions { display: flex; gap: 2px; }

/* Éditeur déployé : masqué au repos, visible quand la carte est en édition */
.image-editor { display: none; border-top: 1px solid #e9edf2; padding: 12px 10px; }
.image-card.editing .image-editor { display: block; }
.image-card.editing { outline: 2px solid var(--tblr-primary, #066fd1); outline-offset: -1px; }
.image-card.editing .image-caption-row { display: none; }
.image-editor textarea.image-autogrow { resize: none; overflow: hidden; min-height: 70px; line-height: 1.4; }

/* Boutons de carte : fond léger, petit coin arrondi, style commun */
.image-btn { border: none; border-radius: 7px; padding: 6px 14px; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color .12s, color .12s; }
.image-btn-neutral { background: #eef1f6; color: #3b4859; }
.image-btn-neutral:hover { background: #e1e6ee; color: #1e293b; }
.image-btn-primary { background: var(--tblr-primary, #066fd1); color: #fff; }
.image-btn-primary:hover { background: #0b5cad; }
.image-btn:disabled { background: #f1f3f7; color: #aeb7c4; cursor: default; }

/* Réglages imbriqués : indenté sous l'interrupteur parent, aligné avec son libellé + filet de rattachement */
.settings-nested { margin-left: 1.25rem; padding-left: 1.25rem; border-left: 2px solid #e2e7ee; }

/* Aperçus couleurs (paramètres) : pastille + champ hexa côte à côte */
.color-swatch { width: 100%; height: 38px; padding: 2px; cursor: pointer; }
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field .color-swatch { width: 48px; flex: 0 0 48px; }
.color-field .color-hex { flex: 1 1 auto; text-transform: lowercase; font-family: var(--tblr-font-monospace, ui-monospace, monospace); }

/* Honeypot (réutilisable) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Zone d'ajout d'images : bande pleine largeur, texture « à pois » (comme la poignée des galeries) */
.add-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 132px; border: 2px dashed #b6c2d2; border-radius: 12px; padding: 26px 22px; text-align: center; cursor: pointer; color: #5b6b7f; background-color: #f8fafc; background-image: radial-gradient(circle, #e7ecf2 1px, transparent 1.4px); background-size: 18px 18px; background-position: center; transition: border-color .15s, background-color .15s, color .15s; }
.add-dropzone:hover { border-color: var(--tblr-primary, #066fd1); background-color: #eff5ff; color: var(--tblr-primary, #066fd1); }
.add-dropzone.dragover { border-style: solid; border-color: var(--tblr-primary, #066fd1); background-color: #e3eeff; color: var(--tblr-primary, #066fd1); }
.add-dropzone-icon { font-size: 2.4rem; color: #94a3b8; transition: color .15s; }
.add-dropzone:hover .add-dropzone-icon, .add-dropzone.dragover .add-dropzone-icon { color: var(--tblr-primary, #066fd1); }

/* Poignée de réordonnancement : bande pleine largeur en haut (motif « à pois » identique aux galeries) */
.card-drag-handle { height: 26px; cursor: grab; background: #eef1f6 radial-gradient(circle, #93a1b5 1.4px, transparent 1.7px) center / 8px 8px; border-bottom: 1px solid #e2e7ee; transition: background-color .15s; }
.card-drag-handle:hover { background-color: #e2e7ef; }
.card-drag-handle:active { cursor: grabbing; }

/* Carte image : coins arrondis, la poignée et la vignette suivent grâce à overflow */
.image-card { border-radius: 12px; overflow: hidden; }
.card-drag-handle { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* Vignette = zone de remplacement (drop d'un fichier ou clic) */
.image-card .image-thumb { border-radius: 0; }
.image-thumb.image-drop { cursor: pointer; }
.image-drop-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; background: rgba(15,23,42,.55); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; opacity: 0; transition: opacity .15s; pointer-events: none; }
.image-drop-hint .ti { font-size: 22px; }
.image-thumb.image-drop:hover .image-drop-hint,
.image-thumb.image-drop.dragover .image-drop-hint { opacity: 1; }
.image-thumb.image-drop.dragover { outline: 2px solid var(--tblr-primary, #066fd1); outline-offset: -2px; }

/* Overlay de progression bloquant */
.upload-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(255,255,255,.92); align-items: center; justify-content: center; }
.upload-overlay.show { display: flex; }
.upload-overlay-box { width: min(440px, 90%); text-align: center; }
