/*
============================================
APERTURE SCIENCE - COMPOSANTS
Fichier: aperture-components.css
Auteur: Emile SNYERS
Date: 2025-08-16
Version: 2.0
Licence: Creative Commons BY-NC 4.0

Description: Composants réutilisables du framework Aperture Science
Header, logo, sections, cartes, tableaux et autres éléments modulaires
============================================
*/

/* === HEADER COMPONENT === */
.aperture-header {
    background: linear-gradient(135deg, var(--aperture-grey) 0%, var(--aperture-dark) 100%);
    border-bottom: 3px solid var(--aperture-orange);
    padding: var(--spacing-md) 0;
    position: relative;
    overflow: hidden;
}

.aperture-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
    animation: scan 8s linear infinite;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* === LOGO APERTURE === */
.aperture-logo {
    width: 60px;
    height: 60px;
    position: relative;
    cursor: pointer;
    transition: var(--transition-fast);
}

.aperture-logo:hover {
    transform: scale(1.1);
}

.aperture-blades {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 20s linear infinite;
}

.aperture-blade {
    position: absolute;
    width: 50%;
    height: 50%;
    background: var(--aperture-white);
    transform-origin: right bottom;
}

.aperture-blade:nth-child(1) { transform: rotate(0deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }
.aperture-blade:nth-child(2) { transform: rotate(45deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }
.aperture-blade:nth-child(3) { transform: rotate(90deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }
.aperture-blade:nth-child(4) { transform: rotate(135deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }
.aperture-blade:nth-child(5) { transform: rotate(180deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }
.aperture-blade:nth-child(6) { transform: rotate(225deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }
.aperture-blade:nth-child(7) { transform: rotate(270deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }
.aperture-blade:nth-child(8) { transform: rotate(315deg); clip-path: polygon(100% 100%, 50% 100%, 100% 50%); }

.aperture-center {
    position: absolute;
    width: 30%;
    height: 30%;
    background: var(--aperture-dark);
    border-radius: var(--border-radius-full);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* === TITRE HEADER === */
.header-title {
    flex: 1;
    text-align: center;
}

.header-title h1 {
    margin-bottom: var(--spacing-xs);
    animation: glowPulse 3s ease-in-out infinite;
}

.project-id {
    font-size: var(--font-size-sm);
    color: var(--aperture-orange);
    font-family: 'Courier New', monospace;
    opacity: 0;
    animation: fadeInDown 1s ease-out 0.5s forwards;
}

/* === STATUS INDICATOR === */
.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid var(--aperture-orange);
    border-radius: var(--border-radius-sm);
    position: relative;
    overflow: hidden;
}

.status-indicator::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(45deg, transparent, var(--aperture-orange), transparent);
    opacity: 0;
    animation: borderGlow 3s linear infinite;
}

.status-light {
    width: 20px;
    height: 20px;
    background: var(--aperture-orange);
    border-radius: var(--border-radius-full);
    animation: pulse 2s ease-in-out infinite;
    box-shadow: var(--shadow-glow);
}

/* === CONTAINER PRINCIPAL === */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* === WARNING SECTION === */
.warning-section {
    background: rgba(255, 107, 53, 0.1);
    border: 2px solid var(--aperture-orange);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    position: relative;
    overflow: hidden;
    animation: slideInLeft 0.8s ease-out;
}

.warning-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 107, 53, 0.05) 10px,
        rgba(255, 107, 53, 0.05) 20px
    );
    animation: stripeMove 20s linear infinite;
}

.warning-icon {
    font-size: 3em;
    animation: warningBlink 2s ease-in-out infinite;
    z-index: 1;
}

/*
============================================
FIN DU FICHIER: aperture-components.css
Auteur: Emile SNYERS
Date: 2025-08-16
Version: 2.0

Composants principaux du framework Aperture Science
réutilisables et modulaires pour une architecture propre
============================================
*/