/* Application de la police Oldenburg pour les paragraphes et les sous-titres descriptifs */
p, .font-oldenburg {
    font-family: 'Oldenburg', serif;
}

/* Décalage des ancres pour ne pas passer sous le header fixe (70px mobile / 80px desktop + marge) */
:target,
#catalogue,
#about,
#contact,
[id^="serie"] {
    scroll-margin-top: 86px;
}
@media (min-width: 768px) {
    :target,
    #catalogue,
    #about,
    #contact,
    [id^="serie"] {
        scroll-margin-top: 96px;
    }
}

/* Pegboard style background.
   background-attachment: local => le motif défile avec le contenu lors du scroll horizontal du rayon
   (sinon le fond reste collé à la zone visible et seules les cartes bougent). */
.pegboard-bg {
    background-color: #2a2c35;
    background-image: radial-gradient(#15161b 15%, transparent 16%), radial-gradient(#15161b 15%, transparent 16%);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    background-attachment: local;
}

/* Effet de blister plastique thermoformé brillant de base */
.blister-bubble {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.18) 100%);
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow: 
        inset 1px 1px 12px rgba(255, 255, 255, 0.6), 
        inset -3px -3px 15px rgba(0, 0, 0, 0.35),
        5px 12px 24px rgba(0, 0, 0, 0.4);
}

/* Masquage de la scrollbar standard tout en conservant le défilement */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Métallique de rayon de supermarché */
.shelf-edge {
    background: linear-gradient(0deg, #5a5d64 0%, #a2a6ae 50%, #767a82 100%);
    border-bottom: 4px solid #33363a;
}

/* Styles de perspective pour l'effet 3D + dimensionnement responsive des cartes produit */
.toy-card {
    transform-style: preserve-3d;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
    will-change: transform;
    /* Ratio réel des packagings (945 x 1182) */
    aspect-ratio: 945 / 1182;
    /* Coins arrondis homothétiques : rayon calculé en JS au prorata de la largeur réelle (var --r),
       avec un repli proportionnel pour les très vieux navigateurs. L'overflow:hidden clippe les couches internes,
       inutile d'arrondir l'image elle-même. */
    border-radius: 7%;
    border-radius: var(--r, 7%);
}

/* La carte est TOUJOURS pilotée par sa HAUTEUR (largeur dérivée du ratio via aspect-ratio).
   => le cadre fait exactement le ratio de l'image, donc aucune bande vide ne peut apparaître,
      quelle que soit la taille de fenêtre ou après rotation. */

/* DESKTOP (>= 768px) : hauteur plafonnée au viewport. Flèches de navigation visibles. */
@media (min-width: 768px) {
    .toy-card {
        height: min(78vh, 460px);
        width: auto;
    }
}

/* MOBILE / TACTILE (< 768px) : pas de flèches, on scrolle au doigt.
   Réserve verticale = header (~70px) + en-tête série (~80px) + py-4 du rayon (32px) ≈ 185px. */

/* PORTRAIT : largeur calée pour voir 1 produit + ~1/5 du suivant ; garde-fou hauteur pour ne jamais rogner. */
@media (max-width: 767.98px) and (orientation: portrait) {
    .toy-card {
        height: min(100vh - 185px, (100vw - 64px) / 1.2 * 1182 / 945);
        height: min(100svh - 185px, (100vw - 64px) / 1.2 * 1182 / 945);
        width: auto;
        max-width: calc((100vw - 64px) / 1.2);
    }
}

/* PAYSAGE (écran bas) : l'image tient toujours en hauteur visible, sans contrainte "1+1/5".
   On maximise la hauteur dispo ; un plafond évite une carte démesurément large. */
@media (max-width: 767.98px) and (orientation: landscape) {
    .toy-card {
        height: calc(100vh - 185px);
        height: calc(100svh - 185px);
        width: auto;
        max-width: 45vw;
    }
}

/* ===== ZONE IMAGE DE LA MODAL ===== */
/* Mobile : grande image à gauche, miniatures en colonne à droite. La popup entière scrolle (pas de scroll interne).
   flex-1 prend la largeur restante, le ratio du packaging fixe la hauteur. */
.modal-image-frame {
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 945 / 1182;
}
/* Desktop (côte à côte) : l'image s'étire pour occuper la hauteur de la carte. */
@media (min-width: 768px) {
    .modal-image-frame {
        min-height: 0;
        aspect-ratio: auto;
    }
}

.toy-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    /* Sous les flèches de navigation (z-20) mais au-dessus des cartes voisines */
    z-index: 10;
}

/* Superposition de brillance interactive 3D */
.shine-overlay {
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.45) 0%, transparent 60%);
    mix-blend-mode: overlay;
}

/* ===== NAVIGATION PRODUIT PRÉCÉDENT / SUIVANT DE LA MODAL ===== */
/* La "scène" aligne flèche gauche, carte, flèche droite.
   Par défaut (large) : flèches de part et d'autre de la carte.
   En dessous de 1180px : pas de place sur les côtés -> les flèches passent SOUS la carte. */
.modal-stage {
    width: 100%;
    max-width: 64rem; /* = max-w-5xl de la carte */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Flèche ronde, style flat retro cohérent avec le reste du site */
.modal-nav-btn {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0f172a;
    border: 2px solid #000;
    border-radius: 9999px;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
    transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s ease;
    cursor: pointer;
}
.modal-nav-btn:hover {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 1);
}
.modal-nav-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* LARGE (>= 1180px) : la carte occupe la largeur restante entre les deux flèches. */
@media (min-width: 1180px) {
    .modal-stage {
        flex-wrap: nowrap;
        max-width: none;
        gap: 1.5rem;
    }
    .modal-stage .modal-card {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ÉTROIT (< 1180px) : la carte prend toute la ligne, les deux flèches passent dessous, côte à côte. */
@media (max-width: 1179.98px) {
    .modal-stage .modal-card {
        order: 1;
        flex-basis: 100%;
    }
    #modal-prev { order: 2; }
    #modal-next { order: 3; }
}

/* ===== TRANSITION D'APPARITION DE LA MODAL PRODUIT ===== */
/* État fermé (mais présent dans le DOM pour animer) : transparent, carte légèrement réduite */
#product-modal {
    opacity: 0;
    transition: opacity 0.2s ease;
}
#product-modal #modal-overlay {
    opacity: 0;
    transition: opacity 0.2s ease;
}
#product-modal .modal-card {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.22s ease;
}
/* État ouvert (classe ajoutée en JS sur la frame suivante) */
#product-modal.is-open {
    opacity: 1;
}
#product-modal.is-open #modal-overlay {
    opacity: 1;
}
#product-modal.is-open .modal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}