/* =============================================
   CODE IMAGE MANAGER — Public CSS
   Charte : #F39207 #009bb5 #61A937 #82171B
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;600;700&display=swap');

.cim-viewer * { font-family:'Fira Sans Condensed', sans-serif; box-sizing:border-box; }

.cim-viewer { max-width:1200px; margin:0 auto; padding:0 16px; }

/* ---- TITRE ---- */
.cim-title { font-size:32px; font-weight:700; color:#82171B; text-transform:uppercase; letter-spacing:1px; text-align:center; margin-bottom:24px; }

/* ---- BARRE RECHERCHE ---- */
.cim-search { text-align:center; margin-bottom:36px; }

.cim-search-form { display:inline-block; width:100%; max-width:600px; }

.cim-search-inner {
    display: flex;
    border: 2px solid #82171B;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(130,23,27,0.12);
    background: #fff;
}

.cim-code-input {
    flex:1;
    padding: 16px 20px;
    font-size:16px;
    border:none;
    outline:none;
    background: transparent;
    font-family: inherit;
}

.cim-btn-search {
    padding: 16px 28px;
    background: linear-gradient(135deg,#82171B,#5c1014);
    color:#fff;
    border:none;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    text-transform:uppercase;
    transition: background 0.2s;
    font-family: inherit;
}
.cim-btn-search:hover { background:linear-gradient(135deg,#5c1014,#82171B); }

/* ---- HEADER GALERIE ---- */
.cim-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px;
    background: linear-gradient(135deg,#82171B,#5c1014);
    border-radius: 10px;
    margin-bottom: 24px;
    color: #fff;
}

.cim-count { font-size:17px; font-weight:700; text-transform:uppercase; }

.cim-results-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ---- BOUTONS ---- */
.cim-btn-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #fff;
    color: #82171B;
    border: 2px solid #fff;
    border-radius: 8px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    transition: all 0.2s;
    font-family: inherit;
}
.cim-btn-dl:hover { background:#F39207; color:#fff; border-color:#F39207; }

.cim-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 8px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.cim-btn-secondary:hover { background:rgba(255,255,255,0.15); border-color:#fff; }

.cim-btn-back {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    font-size:13px;
    cursor:pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.cim-btn-back:hover { color:#fff; border-color:#fff; }

/* ---- GALERIE ---- */
.cim-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.cim-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(130,23,27,0.09);
    border: 2px solid transparent;
    transition: all 0.3s;
}
.cim-item:hover { transform:translateY(-6px); box-shadow:0 8px 24px rgba(130,23,27,0.18); border-color:#F39207; }

/* THUMBNAIL */
.cim-thumb {
    position: relative;
    padding-top: 72%;
    overflow: hidden;
    background: #f5f5f5;
    cursor: pointer;
}

.cim-thumb img {
    position: absolute;
    inset: 0;
    width:100%; height:100%;
    object-fit: cover;
    transition: transform 0.35s;
}
.cim-item:hover .cim-thumb img { transform:scale(1.07); }

.cim-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,rgba(130,23,27,0.8),rgba(243,146,7,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}
.cim-item:hover .cim-thumb-overlay { opacity:1; }

/* INFO */
.cim-item-info { padding:12px 14px 4px; }
.cim-item-name { margin:0 0 3px; font-size:14px; font-weight:600; color:#82171B; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cim-item-meta { margin:0; font-size:12px; color:#888; }

/* ACTION */
.cim-item-action { padding:4px 14px 14px; }

.cim-item-action .cim-btn-dl {
    display: flex;
    justify-content: center;
    width: 100%;
    background: linear-gradient(135deg,#82171B,#5c1014);
    color: #fff;
    border-color: transparent;
    padding: 10px;
    border-radius: 8px;
    font-size:13px;
    text-decoration:none;
}
.cim-item-action .cim-btn-dl:hover { background:linear-gradient(135deg,#F39207,#d67f06); border-color:transparent; }

.cim-view-only {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    color: #888;
    border-radius: 8px;
    font-size:13px;
    border: 2px dashed #ddd;
    font-weight:600;
}

/* ---- LOADING ---- */
#cim-loading { text-align:center; padding:50px; }

.cim-spinner {
    width:50px; height:50px;
    margin:0 auto 16px;
    border:4px solid #f0f0f0;
    border-top-color:#82171B;
    border-radius:50%;
    animation:cim-spin 0.8s linear infinite;
}

@keyframes cim-spin { to { transform:rotate(360deg); } }

#cim-loading p { color:#82171B; font-size:16px; font-weight:600; }

/* ---- ERREUR ---- */
.cim-error {
    max-width:550px;
    margin:30px auto;
    padding:18px 22px;
    background:#fff5f5;
    border-left:5px solid #82171B;
    border-radius:8px;
    color:#82171B;
    font-size:15px;
    font-weight:500;
}

/* ---- LIGHTBOX ---- */
#cim-lightbox, #cim-lightbox-g {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

#cim-lb-overlay, #cim-lb-overlay-g {
    position: absolute;
    inset: 0;
    background: rgba(130,23,27,0.93);
    backdrop-filter: blur(12px);
}

#cim-lb-box, #cim-lb-box-g {
    position: absolute;
    top:50%; left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    max-width:90vw;
    max-height:90vh;
}

#cim-lb-box img, #cim-lb-box-g img {
    max-width:90vw;
    max-height:80vh;
    border-radius:10px;
    border:3px solid #F39207;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

#cim-lb-close, .cim-lb-close-g {
    position: absolute;
    top:-20px; right:-20px;
    width:44px; height:44px;
    background:#F39207;
    color:#fff;
    border:none;
    border-radius:50%;
    font-size:22px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.2s, background 0.2s;
    z-index:2;
}
#cim-lb-close:hover, .cim-lb-close-g:hover { background:#82171B; transform:rotate(90deg); }

#cim-lb-caption, #cim-lb-cap-g {
    margin-top:14px;
    color:#fff;
    font-size:15px;
    font-weight:600;
    padding:10px 24px;
    background:rgba(130,23,27,0.7);
    border-radius:30px;
    display:inline-block;
    border:2px solid #F39207;
}

/* ---- VIDE ---- */
.cim-empty-msg { text-align:center; color:#888; font-style:italic; padding:30px; }

/* ---- RESPONSIVE ---- */
@media (max-width:768px) {
    .cim-title { font-size:24px; }
    .cim-gallery-header { flex-direction:column; text-align:center; }
    .cim-gallery { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
    .cim-search-inner { flex-direction:column; }
    .cim-btn-search { justify-content:center; }
}