/**
 * PhotoClass Pro - Frontend Styles
 * Style moderne, épuré, doux et esthétique
 */

/* ==========================================
   VARIABLES & BASE
   ========================================== */

:root {
    --photoclass-primary: #2c3e50;
    --photoclass-secondary: #3498db;
    --photoclass-text: #333333;
    --photoclass-text-light: #777777;
    --photoclass-border: #e0e0e0;
    --photoclass-bg: #ffffff;
    --photoclass-bg-light: #f8f9fa;
    --photoclass-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --photoclass-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
    --photoclass-radius: 8px;
    --photoclass-transition: all 0.3s ease;
}

/* Container */
.photoclass-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ==========================================
   LISTE DES GALERIES (Archive)
   ========================================== */

.photoclass-archive {
    background: var(--photoclass-bg-light);
    min-height: 60vh;
}

/* Header */
.photoclass-header {
    text-align: center;
    margin-bottom: 60px;
}

.photoclass-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--photoclass-primary);
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.photoclass-subtitle {
    font-size: 1.1rem;
    color: var(--photoclass-text-light);
    margin: 0;
    font-weight: 400;
}

/* Grille des galeries */
.photoclass-galleries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
}

@media (max-width: 768px) {
    .photoclass-galleries-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Carte de galerie */
.photoclass-gallery-card {
    background: var(--photoclass-bg);
    border-radius: var(--photoclass-radius);
    overflow: hidden;
    box-shadow: var(--photoclass-shadow);
    transition: var(--photoclass-transition);
}

.photoclass-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--photoclass-shadow-hover);
}

.photoclass-gallery-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Image de couverture */
.photoclass-gallery-cover {
    position: relative;
    padding-bottom: 66.67%; /* Ratio 3:2 */
    background: var(--photoclass-bg-light);
    overflow: hidden;
}

.photoclass-gallery-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--photoclass-transition);
}

.photoclass-gallery-card:hover .photoclass-gallery-cover img {
    transform: scale(1.05);
}

.photoclass-no-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--photoclass-text-light);
    text-align: center;
}

/* Info de la galerie */
.photoclass-gallery-info {
    padding: 20px;
}

.photoclass-gallery-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--photoclass-primary);
    margin: 0 0 8px 0;
}

.photoclass-gallery-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--photoclass-text-light);
    margin: 0;
}

.photoclass-gallery-count svg {
    flex-shrink: 0;
}

/* Pas de galeries */
.photoclass-no-galleries {
    text-align: center;
    padding: 60px 20px;
    color: var(--photoclass-text-light);
}

/* ==========================================
   GALERIE INDIVIDUELLE (Masonry)
   ========================================== */

.photoclass-single-gallery {
    background: var(--photoclass-bg);
    min-height: 60vh;
}

/* Header de la galerie */
.photoclass-gallery-header {
    margin-bottom: 40px;
    text-align: center;
}

.photoclass-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--photoclass-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 20px;
    transition: var(--photoclass-transition);
}

.photoclass-back-link:hover {
    gap: 10px;
}

.photoclass-gallery-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--photoclass-primary);
    margin: 0 0 12px 0;
}

.photoclass-gallery-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    color: var(--photoclass-text-light);
    margin: 0;
}

/* Grille Masonry */
.photoclass-masonry-grid {
    column-count: 6; /* ✅ 3 → 6 pour réduire la taille des vignettes de 50% */
    column-gap: 10px; /* ✅ 20px → 10px pour optimiser l'espace */
}

@media (max-width: 992px) {
    .photoclass-masonry-grid {
        column-count: 4; /* ✅ 2 → 4 pour tablette */
    }
}

@media (max-width: 576px) {
    .photoclass-masonry-grid {
        column-count: 2; /* ✅ 1 → 2 pour mobile */
    }
}

/* Item Masonry */
.photoclass-masonry-item {
    break-inside: avoid;
    margin-bottom: 10px; /* ✅ 20px → 10px pour réduire l'espace entre les vignettes */
    position: relative;
}

.photoclass-image-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--photoclass-radius);
    box-shadow: var(--photoclass-shadow);
    transition: var(--photoclass-transition);
    cursor: pointer;
}

.photoclass-image-link:hover {
    box-shadow: var(--photoclass-shadow-hover);
}

.photoclass-masonry-image {
    display: block;
    width: 100%;
    height: auto;
    transition: var(--photoclass-transition);
}

.photoclass-image-link:hover .photoclass-masonry-image {
    transform: scale(1.02);
}

/* Overlay au survol */
.photoclass-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--photoclass-transition);
}

.photoclass-image-link:hover .photoclass-image-overlay {
    opacity: 1;
}

.photoclass-image-overlay svg {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Pas d'images */
.photoclass-no-images {
    text-align: center;
    padding: 60px 20px;
    color: var(--photoclass-text-light);
}

/* ==========================================
   LIGHTBOX
   ========================================== */

.photoclass-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photoclass-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s ease;
}

.photoclass-lightbox-content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 1400px;
    max-height: 900px;
    z-index: 1;
    animation: zoomIn 0.3s ease;
}

/* Boutons */
.photoclass-lightbox-close,
.photoclass-lightbox-prev,
.photoclass-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    transition: var(--photoclass-transition);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photoclass-lightbox-close:hover,
.photoclass-lightbox-prev:hover,
.photoclass-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.photoclass-lightbox-close {
    top: 20px;
    right: 20px;
}

.photoclass-lightbox-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.photoclass-lightbox-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.photoclass-lightbox-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.photoclass-lightbox-next:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Image dans lightbox */
.photoclass-lightbox-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photoclass-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Protection des images */
.photoclass-masonry-image,
.photoclass-lightbox-image {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
}

.photoclass-image-link {
    pointer-events: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .photoclass-lightbox-content {
        width: 95%;
        height: 95%;
    }
    
    .photoclass-lightbox-prev,
    .photoclass-lightbox-next {
        width: 40px;
        height: 40px;
    }
    
    .photoclass-lightbox-prev {
        left: 10px;
    }
    
    .photoclass-lightbox-next {
        right: 10px;
    }
}

/* ==========================================
   DATE D'EXPIRATION
   ========================================== */

.photoclass-expiration-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2271b1;
    color: white;
    padding: 14px 20px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    margin: 15px 0 20px 0;
    box-shadow: 0 4px 15px rgba(34, 113, 177, 0.3);
}

.photoclass-expiration-notice svg {
    flex-shrink: 0;
    stroke-width: 2.5;
}

.photoclass-expiration-notice span {
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .photoclass-expiration-notice {
        font-size: 14px;
        padding: 10px 16px;
    }
}
/* ================================================
   GALERIES SCOLAIRES - PARENT ET ENFANTS
   ================================================ */

/* Grille des galeries enfants */
.photoclass-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
	max-width: 1000px;
}

/* Carte enfant */
.photoclass-child-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.photoclass-child-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.photoclass-child-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image de couverture */
.photoclass-child-cover {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Ratio 4:3 */
    overflow: hidden;
    background: #f5f5f5;
}

.photoclass-child-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.photoclass-child-card:hover .photoclass-child-cover img {
    transform: scale(1.05);
}

.photoclass-child-cover .photoclass-no-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Informations */
.photoclass-child-info {
    padding: 16px;
}

.photoclass-child-name {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 8px;
}

.photoclass-child-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #718096;
    margin: 0;
}

.photoclass-child-meta svg {
    flex-shrink: 0;
}

/* Badge élèves dans le header */
.photoclass-parent-gallery .photoclass-gallery-meta svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .photoclass-children-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
    
    .photoclass-child-name {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .photoclass-children-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   BOUTON ACHAT RAPIDE SUR LES VIGNETTES
   ========================================== */

.pcp-quick-buy {
    position: absolute;
    top: 10px;
    right: 55px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

.photoclass-masonry-item:hover .pcp-quick-buy {
    opacity: 1;
}

.pcp-quick-buy:hover {
    background: #2271b1;
    transform: scale(1.1);
}

.pcp-quick-buy:hover svg {
    stroke: white;
}
.pcp-quick-buy svg {
    width: 20px;
    height: 20px;
    stroke: #2271b1;
    transition: stroke 0.3s;
}
/* ============================================================
   CORRECTIONS ICÔNES - Compatibilité tous thèmes
   ============================================================ */

/* Taille des icônes sur les photos */
.photoclass-favorite-btn svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    stroke: #e74c3c !important;
}

.photoclass-favorite-btn.is-favorite svg {
    fill: #e74c3c !important;
}

.pcp-quick-buy svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    stroke: #2271b1 !important;
}

/* Bouton fermer lightbox */
button.pcp-lightbox-close {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

button.pcp-lightbox-close svg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

/* Flèches navigation lightbox */
button.pcp-nav-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
	line-height: 1 !important;
    box-sizing: border-box !important;
}

button.pcp-nav-btn svg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

/* Croix fermeture panier sidebar */
button.pcp-cart-close,
.pcp-cart-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Croix fermeture Room View */
button.pcp-room-view-close,
.pcp-room-view-close {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    background: white !important;
    color: #333 !important;
}

.pcp-room-view-close svg {
    stroke: #333 !important;
    width: 24px !important;
    height: 24px !important;
}

/* Flèches lightbox - forcer rond (spécificité maximale) */
div.pcp-lightbox button.pcp-nav-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    aspect-ratio: 1/1 !important;
}

/* TOUS les boutons de fermeture PhotoClass Pro */
[class*="pcp-"][class*="-close"],
[class*="photoclass-"][class*="-close"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    aspect-ratio: 1/1 !important;
}

[class*="pcp-"][class*="-close"] svg,
[class*="photoclass-"][class*="-close"] svg {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

/* TOUS les boutons de navigation (flèches) - SAUF sélecteur photos */
[class*="pcp-nav-"],
[class*="pcp-"][class*="-prev"]:not(.pcp-selector-btn-prev):not([id*="selector"]),
[class*="pcp-"][class*="-next"]:not(.pcp-selector-btn-next):not([id*="selector"]) {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    aspect-ratio: 1/1 !important;
}

[class*="pcp-nav-"] svg,
[class*="pcp-"][class*="-prev"] svg,
[class*="pcp-"][class*="-next"] svg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

/* OVERRIDE KADENCE - Spécificité maximale */
html body .pcp-lightbox button.pcp-nav-btn.pcp-nav-prev,
html body .pcp-lightbox button.pcp-nav-btn.pcp-nav-next,
html body button.pcp-nav-btn.pcp-nav-prev,
html body button.pcp-nav-btn.pcp-nav-next {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    aspect-ratio: 1/1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* EXCEPTION : Boutons textuels du sélecteur de photos (pas des flèches rondes) */
.pcp-selector-btn-prev,
.pcp-selector-btn-next,
.pcp-selector-2steps-prev,
.pcp-selector-2steps-next,
#pcp-selector-2steps-prev,
#pcp-selector-2steps-next {
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 25px !important;
    aspect-ratio: auto !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    line-height: normal !important;
}

/* EXCEPTION : Bouton suppression miniature dans le bandeau cadeau */
#pcp-gift-selected-inline .pcp-gift-preview-inline-remove {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* FIX MOBILE : Sélecteur photos 2 étapes */
@media (max-width: 768px) {
    #pcp-photo-selector-2steps-modal .pcp-selector-footer {
        flex-direction: column !important;
        padding: 10px !important;
    }
    
    #pcp-photo-selector-2steps-modal .pcp-selector-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
    }
    
    #pcp-photo-selector-2steps-modal .pcp-selector-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 10px 5px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    #pcp-photo-selector-2steps-modal .pcp-selector-info {
        display: none !important;
    }

/* EXCEPTION : Boutons du panier - Spécificité MAXIMALE contre Kadence */
html body div#pcp-cart-sidebar .pcp-qty-btn,
html body div#pcp-cart-sidebar button.pcp-qty-btn,
html body div#pcp-cart-sidebar .pcp-qty-btn.pcp-qty-plus,
html body div#pcp-cart-sidebar .pcp-qty-btn.pcp-qty-minus,
html body div.pcp-cart-sidebar .pcp-qty-btn,
html body div.pcp-cart-sidebar button.pcp-qty-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    font-size: 14px !important;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    color: #333 !important;
}

html body div#pcp-cart-sidebar .pcp-qty-btn:hover,
html body div.pcp-cart-sidebar .pcp-qty-btn:hover {
    background: #0693e3 !important;
    color: white !important;
    border-color: #0693e3 !important;
}

html body div#pcp-cart-sidebar .pcp-cart-item-remove,
html body div#pcp-cart-sidebar button.pcp-cart-item-remove,
html body div.pcp-cart-sidebar .pcp-cart-item-remove,
html body div.pcp-cart-sidebar button.pcp-cart-item-remove {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    font-size: 18px !important;
    background: #fee !important;
    color: #dc3545 !important;
    border: none !important;
}

html body div#pcp-cart-sidebar .pcp-cart-item-remove:hover,
html body div.pcp-cart-sidebar .pcp-cart-item-remove:hover {
    background: #dc3545 !important;
    color: white !important;
}

}