/**
 * Système de Cadres Framer - CSS Framework
 * Inspiré du framework Framer pour les images et conteneurs
 * Compatible avec WordPress et autres CMS
 */

/* ========== VARIABLES CSS POUR LE SYSTÈME DE CADRES ========== */
:root {
    --framer-border-radius: 20px;
    --framer-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --framer-animation-duration: 0.6s;
    --framer-animation-ease: ease-out;
    
    /* Couleurs XBorg */
    --xborg-primary: #72F1FE;
    --xborg-secondary: #E6E5EC;
    --xborg-dark: #18181F;
    --xborg-accent: rgba(114, 241, 254, 0.1);
    --xborg-border: rgba(114, 241, 254, 0.3);
}

/* ========== SYSTÈME DE BASE FRAMER ========== */

/**
 * Conteneur principal avec positionnement relatif
 * Utilisation : <div class="framer-container">
 */
.framer-container {
    position: relative;
    width: 100%;
    border-radius: var(--framer-border-radius);
    overflow: hidden;
    background: rgba(230, 229, 236, 0.05);
}

/**
 * Wrapper d'image avec positionnement absolu et héritage des bordures
 * Reproduit exactement le comportement Framer original
 * Utilisation : <div class="framer-background-image-wrapper" data-framer-background-image-wrapper="true">
 */
.framer-background-image-wrapper,
[data-framer-background-image-wrapper="true"] {
    position: absolute;
    border-radius: inherit;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/**
 * Image responsive avec héritage des bordures
 * Utilisation : <img class="framer-image" />
 */
.framer-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-position: center;
    transition: var(--framer-transition);
}

/* ========== MODES D'AJUSTEMENT D'IMAGE ========== */

/**
 * Mode Cover - remplit le conteneur en gardant les proportions
 */
.framer-image--cover,
.framer-image.cover {
    object-fit: cover;
}

/**
 * Mode Contain - ajuste l'image dans le conteneur
 */
.framer-image--contain,
.framer-image.contain {
    object-fit: contain;
}

/**
 * Mode Fill - étire l'image pour remplir exactement
 */
.framer-image--fill,
.framer-image.fill {
    object-fit: fill;
}

/**
 * Mode Scale Down - réduit si nécessaire, sinon comme contain
 */
.framer-image--scale-down,
.framer-image.scale-down {
    object-fit: scale-down;
}

/* ========== OVERLAYS ET EFFETS ========== */

/**
 * Overlay pour effets de superposition
 */
.framer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

/**
 * Overlay avec gradient XBorg
 */
.framer-overlay--xborg {
    background: linear-gradient(135deg, var(--xborg-accent) 0%, transparent 50%);
}

/**
 * Overlay sombre
 */
.framer-overlay--dark {
    background: rgba(0, 0, 0, 0.3);
}

/**
 * Overlay avec blur
 */
.framer-overlay--blur {
    backdrop-filter: blur(20px);
}

/* ========== CONTENU POSITIONNÉ ========== */

/**
 * Contenu centré au-dessus de l'image
 */
.framer-content {
    position: absolute;
    z-index: 10;
    padding: 1rem;
}

/**
 * Variantes de positionnement
 */
.framer-content--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.framer-content--top-left {
    top: 1rem;
    left: 1rem;
}

.framer-content--top-right {
    top: 1rem;
    right: 1rem;
}

.framer-content--bottom-left {
    bottom: 1rem;
    left: 1rem;
}

.framer-content--bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.framer-content--bottom-center {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* ========== ANIMATIONS FRAMER ========== */

/**
 * Animation d'apparition (fade + scale + translate)
 */
.framer-appear-animation {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    animation: framerAppear var(--framer-animation-duration) var(--framer-animation-ease) forwards;
}

@keyframes framerAppear {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/**
 * Animation de glissement depuis la gauche
 */
.framer-slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    animation: framerSlideInLeft var(--framer-animation-duration) var(--framer-animation-ease) forwards;
}

@keyframes framerSlideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * Animation de glissement depuis la droite
 */
.framer-slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    animation: framerSlideInRight var(--framer-animation-duration) var(--framer-animation-ease) forwards;
}

@keyframes framerSlideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * Délais d'animation pour effet en cascade
 */
.framer-delay-100 { animation-delay: 0.1s; }
.framer-delay-200 { animation-delay: 0.2s; }
.framer-delay-300 { animation-delay: 0.3s; }
.framer-delay-400 { animation-delay: 0.4s; }
.framer-delay-500 { animation-delay: 0.5s; }

/* ========== EFFETS HOVER ========== */

/**
 * Transformation au hover avec transition douce
 */
.framer-hover-transform {
    transition: var(--framer-transition);
    cursor: pointer;
}

.framer-hover-transform:hover {
    transform: translateY(-5px);
}

/**
 * Effet de levitation au hover
 */
.framer-hover-lift {
    transition: var(--framer-transition);
}

.framer-hover-lift:hover {
    transform: translateY(-10px) rotateY(2deg);
    box-shadow: 
        0 20px 40px rgba(114, 241, 254, 0.15),
        0 15px 25px rgba(0, 0, 0, 0.4);
}

/**
 * Effet de scale au hover
 */
.framer-hover-scale {
    transition: var(--framer-transition);
}

.framer-hover-scale:hover {
    transform: scale(1.02);
}

/**
 * Effet de rotation au hover
 */
.framer-hover-rotate {
    transition: var(--framer-transition);
}

.framer-hover-rotate:hover {
    transform: rotate(2deg);
}

/* ========== TAILLES DE CONTENEURS ========== */

/**
 * Tailles prédéfinies pour les conteneurs
 */
.framer-container--small {
    height: 200px;
}

.framer-container--medium {
    height: 300px;
}

.framer-container--large {
    height: 400px;
}

.framer-container--xl {
    height: 500px;
}

.framer-container--square {
    aspect-ratio: 1;
    height: auto;
}

.framer-container--wide {
    aspect-ratio: 16/9;
    height: auto;
}

.framer-container--portrait {
    aspect-ratio: 3/4;
    height: auto;
}

/* ========== STYLES XBORG SPÉCIFIQUES ========== */

/**
 * Variante XBorg avec effets spéciaux
 */
.framer-container--xborg {
    background: rgba(24, 24, 31, 0.8);
    border: 1px solid var(--xborg-border);
    backdrop-filter: blur(20px);
}

/**
 * Effet de lueur XBorg
 */
.framer-glow {
    box-shadow: 
        0 0 20px var(--xborg-accent),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/**
 * Bordure animée XBorg
 */
.framer-border-animated {
    position: relative;
    overflow: hidden;
}

.framer-border-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--xborg-primary), transparent);
    animation: borderAnimation 2s linear infinite;
    z-index: 1;
}

@keyframes borderAnimation {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ========== RESPONSIVE BREAKPOINTS FRAMER ========== */

/**
 * Système responsive Framer (mobile first)
 */
.framer-responsive {
    display: block;
}

/* Mobile (jusqu'à 809px) */
@media (max-width: 809.98px) {
    .framer-hidden-mobile {
        display: none !important;
    }
    
    .framer-container {
        --framer-border-radius: 15px;
    }
    
    .framer-content {
        padding: 0.75rem;
    }
}

/* Tablet (810px à 1025px) */
@media (min-width: 810px) and (max-width: 1025.98px) {
    .framer-hidden-tablet {
        display: none !important;
    }
}

/* Desktop (1026px et plus) */
@media (min-width: 1026px) {
    .framer-hidden-desktop {
        display: none !important;
    }
}

/* ========== UTILITIES ========== */

/**
 * Utilitaires pour le z-index
 */
.framer-z-1 { z-index: 1; }
.framer-z-2 { z-index: 2; }
.framer-z-3 { z-index: 3; }
.framer-z-10 { z-index: 10; }
.framer-z-20 { z-index: 20; }
.framer-z-50 { z-index: 50; }

/**
 * Utilitaires pour les bordures
 */
.framer-rounded-sm { border-radius: 8px; }
.framer-rounded-md { border-radius: 12px; }
.framer-rounded-lg { border-radius: 16px; }
.framer-rounded-xl { border-radius: 20px; }
.framer-rounded-2xl { border-radius: 24px; }
.framer-rounded-full { border-radius: 9999px; }

/**
 * Utilitaires pour les ombres
 */
.framer-shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.framer-shadow-md {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.framer-shadow-lg {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.framer-shadow-xl {
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.25);
}

/* ========== EXEMPLES D'UTILISATION ========== */

/**
 * Exemple d'utilisation complète :
 * 
 * <div class="framer-container framer-container--medium framer-container--xborg framer-glow framer-hover-lift">
 *   <div class="framer-background-image-wrapper">
 *     <img class="framer-image framer-image--cover" 
 *          src="https://framerusercontent.com/images/X5K7nNbk5pNrqlDbxUoAt0CuRo8.svg" 
 *          alt="Background" />
 *   </div>
 *   <div class="framer-overlay framer-overlay--xborg"></div>
 *   <div class="framer-content framer-content--center framer-appear-animation">
 *     <h3>Titre</h3>
 *     <p>Description</p>
 *   </div>
 * </div>
 */