/* ===========================
   HABS - Icon System
   Icônes géométriques conformes à la charte
   Minimaliste, Flat 2D, Perspective 2D
   =========================== */

/* Base Icon Container */
.habs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    position: relative;
    flex-shrink: 0;
}

/* Feature icons in cards */
.feature-card .habs-icon,
.offering-card .habs-icon,
.timeline-item .habs-icon {
    margin-bottom: 1rem;
}

/* Stats icons */
.stat-card .habs-icon {
    margin-bottom: 0.5rem;
}

/* Large Icon (Hero sections) */
.habs-icon-lg {
    width: 64px;
    height: 64px;
}

/* Extra Large Icon */
.habs-icon-xl {
    width: 80px;
    height: 80px;
}

/* ===========================
   ICÔNES MÉTAPHORES ACCEPTÉES
   =========================== */

/* Réseau (Network) - 3 nodes connectés */
.habs-icon-network::before,
.habs-icon-network::after {
    content: '';
    position: absolute;
}

.habs-icon-network::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    top: 20%;
    left: 20%;
    box-shadow: 
        24px 0 0 var(--color-accent),
        12px 20px 0 var(--color-accent);
}

.habs-icon-network::after {
    width: 24px;
    height: 2px;
    background: var(--color-accent);
    top: 22%;
    left: 28%;
    transform: rotate(30deg);
    box-shadow: 0 18px 0 var(--color-accent);
}

/* Stack (Layers) - 3 couches */
.habs-icon-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.habs-icon-stack::before,
.habs-icon-stack::after {
    content: '';
    width: 32px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 2px;
}

.habs-icon-stack > span {
    width: 32px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 2px;
    opacity: 0.7;
}

/* Signal (Waveform) */
.habs-icon-signal::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to right, transparent 0%, transparent 45%, var(--color-accent) 45%, var(--color-accent) 55%, transparent 55%),
        linear-gradient(to bottom, transparent 0%, transparent 45%, var(--color-accent) 45%, var(--color-accent) 55%, transparent 55%);
    clip-path: polygon(
        10% 50%, 20% 30%, 30% 70%, 40% 40%, 
        50% 60%, 60% 35%, 70% 65%, 80% 45%, 90% 50%
    );
}

/* Identité (Fingerprint simplifié) */
.habs-icon-identity::before,
.habs-icon-identity::after {
    content: '';
    position: absolute;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
}

.habs-icon-identity::before {
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.habs-icon-identity::after {
    width: 36px;
    height: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}

/* ===========================
   ICÔNES USE CASES
   =========================== */

/* Brain / Neuro */
.habs-icon-brain::before,
.habs-icon-brain::after {
    content: '';
    position: absolute;
}

.habs-icon-brain::before {
    width: 28px;
    height: 32px;
    border: 3px solid var(--color-accent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.habs-icon-brain::after {
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Health / Medical */
.habs-icon-health::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 4px;
    background: var(--color-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px var(--color-accent), 0 8px 0 var(--color-accent), 0 -8px 0 var(--color-accent);
}

.habs-icon-health::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 28px;
    background: var(--color-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Security / Shield */
.habs-icon-security::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 32px;
    border: 3px solid var(--color-accent);
    border-radius: 2px 2px 50% 50% / 2px 2px 60% 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.habs-icon-security::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 6px;
    border-left: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Defense / Military */
.habs-icon-defense::before {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-accent);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.habs-icon-defense::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background: var(--color-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 -8px 0 var(--color-accent), 0 8px 0 var(--color-accent);
}

/* AI / Robot */
.habs-icon-ai::before,
.habs-icon-ai::after {
    content: '';
    position: absolute;
}

.habs-icon-ai::before {
    width: 24px;
    height: 28px;
    border: 3px solid var(--color-accent);
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.habs-icon-ai::after {
    width: 12px;
    height: 2px;
    background: var(--color-accent);
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 0 var(--color-accent);
}

/* ===========================
   ICÔNES FONCTIONNELLES
   =========================== */

/* Upload */
.habs-icon-upload::before,
.habs-icon-upload::after {
    content: '';
    position: absolute;
}

.habs-icon-upload::before {
    width: 3px;
    height: 24px;
    background: var(--color-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
}

.habs-icon-upload::after {
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--color-accent);
    border-right: 3px solid var(--color-accent);
    top: 28%;
    left: 50%;
    transform: translate(-50%, 0) rotate(-45deg);
}

/* Analysis / Chart */
.habs-icon-chart::before {
    content: '';
    position: absolute;
    width: 6px;
    background: var(--color-accent);
    height: 12px;
    left: 20%;
    bottom: 30%;
    box-shadow: 
        8px 8px 0 0 var(--color-accent),
        16px -4px 0 0 var(--color-accent),
        24px 4px 0 0 var(--color-accent);
}

/* Target / Focus */
.habs-icon-target::before,
.habs-icon-target::after {
    content: '';
    position: absolute;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
}

.habs-icon-target::before {
    width: 32px;
    height: 32px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.habs-icon-target::after {
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-accent);
}

/* Search / Magnifier */
.habs-icon-search::before,
.habs-icon-search::after {
    content: '';
    position: absolute;
}

.habs-icon-search::before {
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    top: 35%;
    left: 35%;
}

.habs-icon-search::after {
    width: 3px;
    height: 12px;
    background: var(--color-accent);
    bottom: 25%;
    right: 25%;
    transform: rotate(45deg);
}

/* Lightning / Fast */
.habs-icon-lightning::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid var(--color-accent);
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.habs-icon-lightning::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid var(--color-accent);
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
}

/* Cloud */
.habs-icon-cloud::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 16px;
    background: var(--color-accent);
    border-radius: 50px 50px 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}

.habs-icon-cloud::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 50%;
    top: 42%;
    left: 35%;
}

/* Plug / Connection */
.habs-icon-plug::before,
.habs-icon-plug::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 16px;
    background: var(--color-accent);
    border-radius: 2px;
}

.habs-icon-plug::before {
    left: 30%;
    top: 50%;
    transform: translateY(-50%);
}

.habs-icon-plug::after {
    right: 30%;
    top: 50%;
    transform: translateY(-50%);
}

/* Mobile / Device */
.habs-icon-mobile::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 32px;
    border: 3px solid var(--color-accent);
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.habs-icon-mobile::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: var(--color-accent);
    bottom: 28%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
}

/* Puzzle / Integration */
.habs-icon-puzzle::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(
        0 0, 40% 0, 40% -20%, 60% -20%, 60% 0, 100% 0,
        100% 40%, 120% 40%, 120% 60%, 100% 60%, 100% 100%,
        60% 100%, 60% 120%, 40% 120%, 40% 100%, 0 100%,
        0 60%, -20% 60%, -20% 40%, 0 40%
    );
}

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

/* Float Animation pour Hero Icons */
@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.habs-icon-float {
    animation: iconFloat 3s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.habs-icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

/* Hover Effect */
.habs-icon:hover::before,
.habs-icon:hover::after {
    filter: drop-shadow(0 0 8px rgba(74, 158, 255, 0.6));
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .habs-icon-xl {
        width: 64px;
        height: 64px;
    }
    
    .habs-icon-lg {
        width: 56px;
        height: 56px;
    }
}