/* ============================================================ */
/* CSS spécifique à galerie.php — Carrousel immersif eSVT     */
/* Barre d'outil : classe commune .ui-barre (style.css)        */
/* ============================================================ */

/* ============ MESSAGES ============ */
.msg-ok {
    background:#d1fae5; border-left:4px solid #10b981; color:#065f46;
    padding:10px 16px; border-radius:4px;
}
.msg-err {
    background:#fee2e2; border-left:4px solid #ef4444; color:#991b1b;
    padding:10px 16px; border-radius:4px;
}

.gal-msg { margin:12px 24px; }

/* ============ BARRE D'OUTIL (05/11/2026) ============ */
/* Structure et habillage : .ui-barre (style.css). Ici, le compteur. */
.gal-barre-compteur {
    font-size:13px; font-weight:600; color:#64748b;
}
.gal-barre-compteur b { color:#1e293b; }

/* Recherche (champ commun .ui-barre-recherche) + bouton effacer */
.gal-recherche input { padding-right:34px; }
#gal-search-clear {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:22px; height:22px; border:none; border-radius:50%;
    background:rgba(0,0,0,0.08); color:#64748b; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s;
}
#gal-search-clear:hover { background:rgba(0,0,0,0.15); }
#gal-search-clear[hidden] { display:none; }

/* Aucun résultat : message au centre du carrousel, flèches et outils masqués */
#gal-aucun-resultat {
    position:absolute; inset:0; z-index:5;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    color:rgba(255,255,255,0.75); font-size:15px; text-align:center; padding:24px;
}
#gal-aucun-resultat[hidden] { display:none; }
.gal-aucun-resultat-icone { font-size:40px; opacity:.6; }
#gal-carousel.gal-sans-resultat .gal-arrow,
#gal-carousel.gal-sans-resultat #gal-counter { display:none; }

/* ============ GALERIE NON INSTALLÉE ============ */
.gal-non-installee { padding:40px 24px; text-align:center; }
.gal-non-installee h2 { margin-bottom:12px; }
.gal-non-installee p { color:#64748b; margin-bottom:20px; }
.gal-mt-8 { margin-top:8px; }

/* ============ ANTI-SCROLL : la galerie remplit exactement la fenêtre ============ */
html, body {
    overflow:hidden;
    height:100%;
}

/* ============ FORMULAIRE DANS LA MODALE ============ */
.gal-form-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
    max-width:700px;
}
.gal-form-field { display:flex; flex-direction:column; gap:4px; }
.gal-form-field-full { grid-column:1 / -1; }
.gal-form-field label {
    font-size:12px; font-weight:700; color:#475569;
    text-transform:uppercase; letter-spacing:0.3px;
}
.gal-form-field .req { color:#ef4444; }
.gal-form-field input[type="text"],
.gal-form-field textarea {
    border:1px solid #cbd5e1; border-radius:8px;
    padding:8px 12px; font-size:14px; font-family:inherit;
    outline:none; transition:border-color 0.2s;
}
.gal-form-field input[type="text"]:focus,
.gal-form-field textarea:focus {
    border-color:#db9b38;
}
.gal-form-field input[type="file"] {
    font-size:13px; color:#475569;
}
.gal-form-field small {
    font-size:11px; color:#94a3b8;
}
.gal-form-actions {
    display:flex; gap:10px; margin-top:14px;
}
.gal-btn-primary {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 20px; border-radius:8px;
    background:#db9b38; color:#fff; border:none;
    font-size:14px; font-weight:700; cursor:pointer;
    transition:background 0.2s; text-decoration:none !important;
}
.gal-btn-primary:hover { background:#c8891f; text-decoration:none !important; }
.gal-btn-secondary {
    padding:9px 18px; border-radius:8px;
    background:#f1f5f9; color:#475569; border:1px solid #cbd5e1;
    font-size:14px; font-weight:600; cursor:pointer;
    transition:background 0.15s;
}
.gal-btn-secondary:hover { background:#e2e8f0; }

/* ============ CARROUSEL PLEIN ÉCRAN ============ */
#gal-carousel {
    position:relative;
    width:100%;
    /* Hauteur par défaut, recalculée par JS pour tenir compte des bandeaux */
    height:calc(100vh - 62px);
    height:calc(100dvh - 62px);
    overflow:hidden;
    background:#0f172a;
}

/* ---- SLIDE ---- */
.gal-slide {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity 0.6s ease;
    z-index:1;
    /* Petit padding pour ne pas coller aux bords */
    padding:12px;
    background-origin:content-box;
}
.gal-slide.active {
    opacity:1;
    z-index:2;
}

/* ---- OVERLAY DÉGRADÉ BAS ---- */
.gal-slide-overlay {
    position:absolute; bottom:0; left:0; right:0;
    height:50%;
    background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    pointer-events:none;
    z-index:3;
}

/* ---- TEXTE SUPERPOSÉ ---- */
.gal-slide-caption {
    position:absolute; bottom:0; left:0; right:0;
    padding:40px 60px 50px;
    z-index:4;
    color:#fff;
    max-width:900px;
}
.gal-slide-titre {
    font-size:32px; font-weight:800;
    line-height:1.2; margin:0 0 8px;
    text-shadow:0 2px 12px rgba(0,0,0,0.5);
    letter-spacing:-0.3px;
}
.gal-slide-desc {
    font-size:16px; line-height:1.6;
    opacity:0.9; margin:0;
    text-shadow:0 1px 6px rgba(0,0,0,0.4);
    max-width:700px;
}

/* ---- BOUTON LIEN SUR SLIDE ---- */
.gal-slide-link {
    display:inline-flex; align-items:center; gap:7px;
    margin-top:14px; padding:9px 20px; border-radius:8px;
    background:rgba(219,155,56,0.85); color:#fff;
    font-size:14px; font-weight:700; text-decoration:none !important;
    transition:background 0.2s, transform 0.15s;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,0.2);
    text-shadow:none;
}
.gal-slide-link:hover {
    background:rgba(219,155,56,1); transform:translateY(-1px);
    text-decoration:none !important;
}
.gal-slide-link:active { transform:translateY(0); }
.gal-lien-ico { flex-shrink:0; vertical-align:middle; }

/* ---- FLÈCHES ---- */
.gal-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:10;
    width:52px; height:52px; border-radius:50%;
    background:rgba(0,0,0,0.35); border:2px solid rgba(255,255,255,0.25);
    color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s, border-color 0.2s, transform 0.2s;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.gal-arrow:hover {
    background:rgba(0,0,0,0.55);
    border-color:rgba(255,255,255,0.5);
}
.gal-arrow:active { transform:translateY(-50%) scale(0.92); }
.gal-arrow-left  { left:20px; }
.gal-arrow-right { right:20px; }

/* ---- COMPTEUR (plein écran seulement : hors plein écran, celui de la barre) ---- */
#gal-counter {
    display:none;
    position:absolute; bottom:20px; right:24px;
    z-index:10;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    padding:6px 14px; border-radius:20px;
    font-size:13px; font-weight:600; color:rgba(255,255,255,0.85);
    letter-spacing:0.5px;
}

/* ---- BOUTON PLEIN ÉCRAN (même look que les icônes admin) ---- */
#gal-fs-btn {
    position:absolute; top:16px; right:16px;
    z-index:11;
}

/* Navigateur sans plein écran (iPhone) : bouton masqué par l'attribut hidden
   (prioritaire sur le display:flex de .gal-admin-ico) */
#gal-fs-btn[hidden] { display:none; }

/* ---- BOUTONS ADMIN SUR SLIDE ---- */
/* Décalés à gauche du bouton plein écran : 16px + 36px + 8px d'écart */
.gal-slide-admin {
    position:absolute; top:16px; right:60px;
    z-index:10;
    display:flex; gap:8px;
}

/* ---- MODE PLEIN ÉCRAN ---- */
/* Classe .gal-fs posée en JS (fullscreenchange) : évite de mélanger
   :fullscreen et :-webkit-full-screen dans un même sélecteur, ce qui
   fait ignorer toute la règle par les navigateurs qui n'en connaissent qu'un. */
#gal-carousel.gal-fs {
    width:100vw;
    height:100vh !important; /* l'emporte sur la hauteur inline posée par galRecalcHeight() */
    height:100dvh !important;
    background:#000;
}
/* La modale et la confirmation vivent hors du carrousel : invisibles en plein
   écran. Les outils admin y sont donc masqués (c'est un mode lecture). */
#gal-carousel.gal-fs .gal-slide-admin { display:none; }
#gal-carousel.gal-fs #gal-counter { display:block; }
.gal-admin-ico {
    width:36px; height:36px; border-radius:8px;
    background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.2);
    color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    text-decoration:none !important;
}
.gal-admin-ico:hover { background:rgba(0,0,0,0.65); text-decoration:none !important; }
.gal-admin-danger:hover { background:rgba(220,38,38,0.7); }

/* ---- BADGE INACTIF ---- */
.gal-slide-badge-inactif {
    position:absolute; top:16px; left:16px;
    z-index:10;
    background:rgba(239,68,68,0.8); color:#fff;
    padding:4px 12px; border-radius:6px;
    font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.5px;
}

/* ============ ÉTAT VIDE ============ */
#gal-empty {
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:16px;
    height:calc(100vh - 200px);
    color:#94a3b8; text-align:center;
    padding:40px 24px;
}
#gal-empty h2 { color:#475569; font-size:20px; font-weight:700; }
#gal-empty p { font-size:14px; max-width:400px; }

/* ============ MODALE UNIFIÉE AJOUT / ÉDITION ============ */
#gal-modal-overlay {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.5); z-index:9998;
}
#gal-modal-overlay.visible { display:block; }
#gal-modal {
    display:none; position:fixed;
    top:50%; left:50%; transform:translate(-50%, -50%);
    background:#fff; border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    width:90%; max-width:540px;
    z-index:9999; overflow:hidden;
    animation:galFadeIn 0.25s ease-out;
}
#gal-modal.visible { display:block; }
@keyframes galFadeIn {
    from { opacity:0; transform:translate(-50%, -50%) scale(0.95); }
    to   { opacity:1; transform:translate(-50%, -50%) scale(1); }
}
.gal-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px;
    background:linear-gradient(135deg, #db9b38 0%, #c8891f 100%);
    color:#fff;
}
.gal-modal-header h3 { font-size:16px; font-weight:700; margin:0; }
.gal-modal-close {
    background:none; border:none; color:rgba(255,255,255,0.8);
    font-size:22px; cursor:pointer; line-height:1; padding:0 4px;
}
.gal-modal-close:hover { color:#fff; }
#gal-modal form {
    padding:20px 24px 24px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .gal-slide-caption { padding:30px 40px 40px; }
    .gal-slide-titre { font-size:26px; }
    .gal-slide-desc { font-size:15px; }
    .gal-arrow { width:44px; height:44px; }
    .gal-arrow-left  { left:12px; }
    .gal-arrow-right { right:12px; }
}

@media (max-width: 600px) {
    #gal-carousel { height:calc(100vh - 52px); height:calc(100dvh - 52px); }
    .gal-slide-caption { padding:20px 20px 60px; }
    .gal-slide-titre { font-size:20px; }
    .gal-slide-desc { font-size:13px; }
    .gal-slide-link { font-size:12px; padding:7px 14px; margin-top:10px; }
    .gal-arrow { width:38px; height:38px; }
    .gal-arrow svg { width:20px; height:20px; }
    .gal-arrow-left  { left:8px; }
    .gal-arrow-right { right:8px; }
    #gal-counter { bottom:14px; right:14px; font-size:12px; }
    .gal-form-grid { grid-template-columns:1fr; }
    #gal-modal { width:95%; max-width:95%; }
}

@media (max-width: 380px) {
    .gal-slide-titre { font-size:18px; }
    .gal-slide-desc { font-size:12px; }
}