/* _content/Project2/Components/Layout/MainLayout.razor.rz.scp.css */
/* _content/Project2/Components/Layout/NavMenu.razor.rz.scp.css */
/* _content/Project2/Components/Modules/SubscriptionModal.razor.rz.scp.css */
/* Styles pour la modal d'abonnements avec préfixe sub- */
.sub-modal[b-666v3k8lsy] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
}

    .sub-modal.sub-show[b-666v3k8lsy] {
        display: block;
        animation: subFadeIn-b-666v3k8lsy 0.3s ease-out;
    }

@keyframes subFadeIn-b-666v3k8lsy {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.sub-modal-overlay[b-666v3k8lsy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 16, 32, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1051;
}

.sub-modal-content[b-666v3k8lsy] {
    position: relative;
    width: 92%;
    max-width: 1200px;
    max-height: 92vh;
    overflow-y: auto;
    margin: 4vh auto;
    background: rgba(13, 20, 38, 0.97);
    border: 1px solid rgba(255, 75, 43, 0.3);
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 75, 43, 0.1);
    z-index: 1052;
    color: #fff;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}

    .sub-modal-content[b-666v3k8lsy]::-webkit-scrollbar {
        width: 8px;
    }

    .sub-modal-content[b-666v3k8lsy]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .sub-modal-content[b-666v3k8lsy]::-webkit-scrollbar-thumb {
        background: rgba(255, 75, 43, 0.5);
        border-radius: 4px;
    }

        .sub-modal-content[b-666v3k8lsy]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 75, 43, 0.7);
        }

.sub-modal-header[b-666v3k8lsy] {
    padding: 1.8rem 2rem;
    background: linear-gradient(135deg, rgba(13, 20, 38, 0.8), rgba(26, 32, 53, 0.8));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 75, 43, 0.2);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(5px);
}

    .sub-modal-header h2[b-666v3k8lsy] {
        margin: 0;
        font-size: 2.2rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        background: linear-gradient(135deg, #fff, #ff416c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
    }

        .sub-modal-header h2[b-666v3k8lsy]::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, #ff4b2b, #ff416c);
            border-radius: 3px;
        }

.sub-close-btn[b-666v3k8lsy] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 2.2rem;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

    .sub-close-btn:hover[b-666v3k8lsy] {
        color: #ff416c;
        background-color: rgba(255, 255, 255, 0.05);
        transform: rotate(90deg);
    }

/* Toggle pour les prix annuels/mensuels */
.sub-modal-price-toggle[b-666v3k8lsy] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.5rem;
    position: relative;
}

.sub-toggle-container[b-666v3k8lsy] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.6rem 1.2rem;
    border-radius: 30px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

    .sub-toggle-container span[b-666v3k8lsy] {
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
        transition: color 0.3s ease;
        font-size: 0.95rem;
    }

        .sub-toggle-container span.sub-active[b-666v3k8lsy] {
            color: #fff;
            font-weight: 700;
        }

.sub-switch[b-666v3k8lsy] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

    .sub-switch input[b-666v3k8lsy] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.sub-slider[b-666v3k8lsy] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: .4s;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

    .sub-slider[b-666v3k8lsy]:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background: linear-gradient(135deg, #ff4b2b, #ff416c);
        transition: .4s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

input:checked + .sub-slider[b-666v3k8lsy] {
    background-color: rgba(255, 255, 255, 0.25);
}

input:focus + .sub-slider[b-666v3k8lsy] {
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

input:checked + .sub-slider[b-666v3k8lsy]:before {
    transform: translateX(24px);
}

.sub-slider.sub-round[b-666v3k8lsy] {
    border-radius: 34px;
}

    .sub-slider.sub-round[b-666v3k8lsy]:before {
        border-radius: 50%;
    }

.sub-savings-badge[b-666v3k8lsy] {
    position: absolute;
    right: 20%;
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    border-radius: 20px;
    transform: translateY(-50%);
    box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
    display: flex;
    align-items: center;
}

    .sub-savings-badge[b-666v3k8lsy]::before {
        content: '💰';
        margin-right: 6px;
        font-size: 1.1rem;
    }

/* Cartes d'abonnement */
.sub-cards[b-666v3k8lsy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
    overflow-y: auto;
    max-height: 75vh;
}

    /* Ajout de styles pour s'assurer que le scroll fonctionne bien */
    .sub-cards[b-666v3k8lsy]::-webkit-scrollbar {
        width: 6px;
    }

    .sub-cards[b-666v3k8lsy]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .sub-cards[b-666v3k8lsy]::-webkit-scrollbar-thumb {
        background: rgba(255, 75, 43, 0.5);
        border-radius: 3px;
    }

.sub-card[b-666v3k8lsy] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .sub-card:hover[b-666v3k8lsy] {
        transform: translateY(-12px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 75, 43, 0.1);
        background: rgba(255, 255, 255, 0.05);
    }

    .sub-card.sub-recommended[b-666v3k8lsy] {
        border: 2px solid #ff416c;
        transform: scale(1.05);
        z-index: 2;
        box-shadow: 0 20px 40px rgba(255, 75, 43, 0.15);
        background: rgba(255, 255, 255, 0.05);
    }

        .sub-card.sub-recommended:hover[b-666v3k8lsy] {
            transform: scale(1.05) translateY(-12px);
            box-shadow: 0 25px 50px rgba(255, 75, 43, 0.25);
        }

.sub-recommended-badge[b-666v3k8lsy] {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    padding: 0.4rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    clip-path: polygon(10px 0%, 100% 0%, 90% 100%, 0% 100%);
    box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
    z-index: 5;
}

.sub-header[b-666v3k8lsy] {
    padding: 1.3rem 1.0rem;
    text-align: center;
    border-radius: 8px 8px 0 0;
    position: relative;
    overflow: hidden;
}

    .sub-header[b-666v3k8lsy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
        opacity: 0.5;
    }

    .sub-header h3[b-666v3k8lsy] {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white;
        position: relative;
        z-index: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.sub-price[b-666v3k8lsy] {
    text-align: center;
    padding: 1.5rem 1.5rem 0.8rem;
}

.sub-price-value[b-666v3k8lsy] {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ff416c;
    display: block;
    line-height: 1;
    text-shadow: 0 2px 5px rgba(255, 65, 108, 0.2);
}

.sub-period[b-666v3k8lsy] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin-top: 0.5rem;
    display: block;
}

.sub-description[b-666v3k8lsy] {
    padding: 0 1.5rem 0.8rem;
    text-align: center;
}

    .sub-description p[b-666v3k8lsy] {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0;
        max-height: 60px;
        overflow: hidden;
    }

.sub-features[b-666v3k8lsy] {
    padding: 0.5rem 1.5rem;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 200px;
}

    /* Styles pour la scrollbar des fonctionnalités */
    .sub-features[b-666v3k8lsy]::-webkit-scrollbar {
        width: 5px;
    }

    .sub-features[b-666v3k8lsy]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .sub-features[b-666v3k8lsy]::-webkit-scrollbar-thumb {
        background: rgba(255, 75, 43, 0.5);
        border-radius: 3px;
    }

    .sub-features ul[b-666v3k8lsy] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sub-features li[b-666v3k8lsy] {
        display: flex;
        align-items: center;
        padding: 0.6rem 0;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

        .sub-features li:last-child[b-666v3k8lsy] {
            border-bottom: none;
        }

        .sub-features li.sub-included[b-666v3k8lsy] {
            color: white;
        }

        .sub-features li.sub-excluded[b-666v3k8lsy] {
            color: rgba(255, 255, 255, 0.5);
        }

.sub-icon[b-666v3k8lsy] {
    width: 22px;
    height: 22px;
    margin-right: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.sub-icon-check[b-666v3k8lsy] {
    background-color: rgba(46, 125, 50, 0.15);
    position: relative;
    box-shadow: 0 0 0 1px rgba(46, 125, 50, 0.3);
}

    .sub-icon-check[b-666v3k8lsy]::before {
        content: "✓";
        color: #4caf50;
        font-size: 0.8rem;
        font-weight: bold;
    }

.sub-icon-cross[b-666v3k8lsy] {
    background-color: rgba(198, 40, 40, 0.15);
    position: relative;
    box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.3);
}

    .sub-icon-cross[b-666v3k8lsy]::before {
        content: "✕";
        color: #e74c3c;
        font-size: 0.8rem;
        font-weight: bold;
    }

.sub-icon-info[b-666v3k8lsy] {
    background-color: rgba(33, 150, 243, 0.15);
    position: relative;
    box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.3);
}

    .sub-icon-info[b-666v3k8lsy]::before {
        content: "i";
        color: #2196F3;
        font-size: 0.8rem;
        font-weight: bold;
        font-style: italic;
    }

.sub-action[b-666v3k8lsy] {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, rgba(13, 20, 38, 1) 85%, rgba(13, 20, 38, 0.9) 100%);
    z-index: 5;
    border-top: 1px solid rgba(255, 75, 43, 0.1);
    margin-top: auto;
}

.sub-button[b-666v3k8lsy] {
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

    .sub-button[b-666v3k8lsy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
        z-index: 1;
    }

    .sub-button:hover[b-666v3k8lsy]::before {
        left: 100%;
    }

.sub-subscribe-button[b-666v3k8lsy] {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: white;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3);
}

    .sub-subscribe-button:hover[b-666v3k8lsy] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(255, 75, 43, 0.4);
    }

    .sub-subscribe-button:active[b-666v3k8lsy] {
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
    }

.sub-details-button[b-666v3k8lsy] {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .sub-details-button:hover[b-666v3k8lsy] {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.2);
    }

/* Modal de détails */
.sub-details-modal[b-666v3k8lsy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: subZoomIn-b-666v3k8lsy 0.3s ease-out;
}

@keyframes subZoomIn-b-666v3k8lsy {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.sub-details-overlay[b-666v3k8lsy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 16, 32, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1061;
}

.sub-details-content[b-666v3k8lsy] {
    position: relative;
    width: 90%;
    max-width: 800px;
    background: rgba(13, 20, 38, 0.97);
    border: 1px solid rgba(255, 75, 43, 0.3);
    border-radius: 8px;
    z-index: 1062;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.sub-details-header[b-666v3k8lsy] {
    padding: 1.8rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .sub-details-header h3[b-666v3k8lsy] {
        margin: 0;
        font-size: 1.8rem;
        font-weight: 700;
        color: white;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.sub-details-body[b-666v3k8lsy] {
    padding: 2rem;
    overflow-y: auto;
}

    .sub-details-body[b-666v3k8lsy]::-webkit-scrollbar {
        width: 8px;
    }

    .sub-details-body[b-666v3k8lsy]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .sub-details-body[b-666v3k8lsy]::-webkit-scrollbar-thumb {
        background: rgba(255, 75, 43, 0.5);
        border-radius: 4px;
    }

        .sub-details-body[b-666v3k8lsy]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 75, 43, 0.7);
        }

.sub-price-detail[b-666v3k8lsy],
.sub-features-detail[b-666v3k8lsy],
.sub-full-description[b-666v3k8lsy] {
    margin-bottom: 2.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

    .sub-price-detail h4[b-666v3k8lsy],
    .sub-features-detail h4[b-666v3k8lsy],
    .sub-full-description h4[b-666v3k8lsy] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-top: 0;
        margin-bottom: 1.2rem;
        color: white;
        position: relative;
        padding-left: 1rem;
        display: flex;
        align-items: center;
    }

        .sub-price-detail h4[b-666v3k8lsy]::before,
        .sub-features-detail h4[b-666v3k8lsy]::before,
        .sub-full-description h4[b-666v3k8lsy]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(135deg, #ff4b2b, #ff416c);
            border-radius: 4px;
        }

.sub-price-table[b-666v3k8lsy] {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.sub-price-row[b-666v3k8lsy] {
    display: flex;
    align-items: center;
    padding: 1.2rem;
    position: relative;
}

    .sub-price-row:not(:last-child)[b-666v3k8lsy]::after {
        content: '';
        position: absolute;
        left: 1.2rem;
        right: 1.2rem;
        bottom: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
    }

    .sub-price-row span[b-666v3k8lsy] {
        margin-right: 1rem;
        color: rgba(255, 255, 255, 0.8);
    }

    .sub-price-row .sub-price-value[b-666v3k8lsy] {
        margin-left: auto;
        font-size: 1.6rem;
        font-weight: 700;
        color: #ff416c;
    }

    .sub-price-row .sub-savings[b-666v3k8lsy] {
        font-size: 0.95rem;
        color: #4caf50;
        font-weight: 500;
        margin-left: 1rem;
        padding: 0.3rem 0.8rem;
        background: rgba(76, 175, 80, 0.1);
        border-radius: 12px;
        white-space: nowrap;
    }

.sub-features-table[b-666v3k8lsy] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-features-table tr[b-666v3k8lsy] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: background-color 0.2s ease;
    }

        .sub-features-table tr:hover[b-666v3k8lsy] {
            background-color: rgba(255, 255, 255, 0.03);
        }

        .sub-features-table tr:last-child[b-666v3k8lsy] {
            border-bottom: none;
        }

    .sub-features-table td[b-666v3k8lsy] {
        padding: 1rem;
        color: rgba(255, 255, 255, 0.8);
    }

        .sub-features-table td:first-child[b-666v3k8lsy] {
            width: 70%;
        }

        .sub-features-table td:last-child[b-666v3k8lsy] {
            text-align: center;
            font-weight: 600;
        }

.sub-full-description p[b-666v3k8lsy] {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.sub-action-detail[b-666v3k8lsy] {
    text-align: center;
    margin-top: 2.5rem;
}

    .sub-action-detail .sub-subscribe-button[b-666v3k8lsy] {
        width: auto;
        padding: 1.2rem 3.5rem;
        font-size: 1.1rem;
        border-radius: 6px;
    }

/* Ajustements pour garantir la visibilité des boutons */
.sub-card[b-666v3k8lsy] {
    max-height: calc(85vh - 4rem);
    display: flex;
    flex-direction: column;
}

.sub-features[b-666v3k8lsy] {
    flex-grow: 1;
    overflow-y: auto;
    max-height: 40vh;
    padding-right: 0.5rem;
}

.sub-action[b-666v3k8lsy] {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding-top: 1rem;
    box-shadow: 0 -5px 10px rgba(10, 16, 32, 0.3);
    margin-top: auto;
    z-index: 5;
}

/* Responsive design */
@media (max-width: 1200px) {
    .sub-cards[b-666v3k8lsy] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .sub-modal-header h2[b-666v3k8lsy] {
        font-size: 2rem;
    }

    .sub-price-value[b-666v3k8lsy] {
        font-size: 2.8rem;
    }
}

@media (max-width: 992px) {
    .sub-card.sub-recommended[b-666v3k8lsy] {
        transform: scale(1.02);
    }

        .sub-card.sub-recommended:hover[b-666v3k8lsy] {
            transform: scale(1.02) translateY(-12px);
        }

    .sub-savings-badge[b-666v3k8lsy] {
        display: none;
    }

    .sub-modal-content[b-666v3k8lsy],
    .sub-details-content[b-666v3k8lsy] {
        width: 95%;
        margin: 2.5vh auto;
    }

    .sub-cards[b-666v3k8lsy] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .sub-modal-header[b-666v3k8lsy] {
        padding: 1.5rem;
    }

        .sub-modal-header h2[b-666v3k8lsy] {
            font-size: 1.8rem;
        }

    .sub-cards[b-666v3k8lsy] {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        padding: 1.2rem;
        max-height: 70vh;
    }

    .sub-details-header h3[b-666v3k8lsy] {
        font-size: 1.5rem;
    }

    .sub-details-body[b-666v3k8lsy] {
        padding: 1.5rem;
    }

    .sub-price-detail[b-666v3k8lsy],
    .sub-features-detail[b-666v3k8lsy],
    .sub-full-description[b-666v3k8lsy] {
        padding: 1.2rem;
    }

    .sub-card[b-666v3k8lsy] {
        max-height: none;
        height: auto;
        min-height: auto;
    }

    .sub-features[b-666v3k8lsy] {
        max-height: 200px;
    }
}

@media (max-width: 480px) {
    .sub-toggle-container[b-666v3k8lsy] {
        padding: 0.5rem;
        gap: 0.5rem;
    }

        .sub-toggle-container span[b-666v3k8lsy] {
            font-size: 0.85rem;
        }

    .sub-price-row[b-666v3k8lsy] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

        .sub-price-row .sub-price-value[b-666v3k8lsy] {
            margin-left: 0;
            margin-top: 0.5rem;
        }

        .sub-price-row .sub-savings[b-666v3k8lsy] {
            margin-left: 0;
            margin-top: 0.5rem;
        }

    .sub-action-detail .sub-subscribe-button[b-666v3k8lsy] {
        width: 100%;
        padding: 1rem;
    }
}

/* Gestion des très petits écrans */
@media (max-height: 700px) {
    .sub-modal-content[b-666v3k8lsy] {
        max-height: 95vh;
        margin: 2.5vh auto;
    }

    .sub-price[b-666v3k8lsy] {
        padding: 1rem 1.5rem 0.5rem;
    }

    .sub-description[b-666v3k8lsy] {
        padding: 0 1.5rem 0.5rem;
    }

    .sub-features li[b-666v3k8lsy] {
        padding: 0.4rem 0;
    }

    .sub-action[b-666v3k8lsy] {
        padding: 1rem;
    }

    .sub-button[b-666v3k8lsy] {
        padding: 0.8rem 1.2rem;
    }

    .sub-modal-price-toggle[b-666v3k8lsy] {
        padding: 1rem;
    }

    .sub-header[b-666v3k8lsy] {
        padding: 1.2rem;
    }
}

/* Animations et effets supplémentaires */
.sub-card[b-666v3k8lsy] {
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.4s ease;
}

.sub-button[b-666v3k8lsy] {
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.3s ease;
}

.sub-recommended-badge[b-666v3k8lsy] {
    animation: subPulse-b-666v3k8lsy 2s infinite;
}

@keyframes subPulse-b-666v3k8lsy {
    0% {
        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
    }

    50% {
        box-shadow: 0 5px 25px rgba(255, 75, 43, 0.5);
    }

    100% {
        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
    }
}

/* Smoothscroll pour les cartes lors de l'utilisation sur mobile */
.sub-cards[b-666v3k8lsy] {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Animation d'apparition graduelle pour les cartes */
.sub-card[b-666v3k8lsy] {
    animation: cardAppear-b-666v3k8lsy 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

    .sub-card:nth-child(1)[b-666v3k8lsy] {
        animation-delay: 0.1s;
    }

    .sub-card:nth-child(2)[b-666v3k8lsy] {
        animation-delay: 0.2s;
    }

    .sub-card:nth-child(3)[b-666v3k8lsy] {
        animation-delay: 0.3s;
    }

@keyframes cardAppear-b-666v3k8lsy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Effet de vague au hover sur les boutons */
.sub-subscribe-button[b-666v3k8lsy] {
    position: relative;
    overflow: hidden;
}

    .sub-subscribe-button[b-666v3k8lsy]:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .sub-subscribe-button:focus:not(:active)[b-666v3k8lsy]::after {
        animation: ripple-b-666v3k8lsy 1s ease-out;
    }

@keyframes ripple-b-666v3k8lsy {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

/* Style pour le mode dark/light (adaptatif) */
/* Style pour le mode sombre forcé */
.sub-modal-content[b-666v3k8lsy] {
    background: rgba(30, 32, 40, 0.97);
    color: #f5f5f5;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.sub-modal-header[b-666v3k8lsy] {
    background: linear-gradient(135deg, rgba(40, 42, 54, 0.8), rgba(30, 32, 40, 0.8));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sub-card[b-666v3k8lsy] {
    background: rgba(40, 42, 54, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.sub-features li[b-666v3k8lsy],
.sub-description p[b-666v3k8lsy] {
    color: #bbb;
}

.sub-toggle-container span[b-666v3k8lsy] {
    color: #999;
}

    .sub-toggle-container span.sub-active[b-666v3k8lsy] {
        color: #f5f5f5;
    }

.sub-details-content[b-666v3k8lsy] {
    background: rgba(30, 32, 40, 0.97);
    color: #f5f5f5;
}

.sub-modal-header h2[b-666v3k8lsy] {
    background: linear-gradient(135deg, #f5f5f5, #ff416c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-price-value[b-666v3k8lsy] {
    color: #ff416c;
    text-shadow: 0 2px 5px rgba(255, 65, 108, 0.2);
}

.sub-details-body[b-666v3k8lsy]::-webkit-scrollbar-track,
.sub-features[b-666v3k8lsy]::-webkit-scrollbar-track,
.sub-cards[b-666v3k8lsy]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.sub-action[b-666v3k8lsy] {
    background: linear-gradient(to top, rgba(30, 32, 40, 1) 85%, rgba(30, 32, 40, 0.9) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sub-details-overlay[b-666v3k8lsy] {
    background-color: rgba(30, 32, 40, 0.85);
    backdrop-filter: blur(5px);
}

.sub-price-detail[b-666v3k8lsy],
.sub-features-detail[b-666v3k8lsy],
.sub-full-description[b-666v3k8lsy] {
    background: rgba(40, 42, 54, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sub-price-table[b-666v3k8lsy] {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sub-price-row:not(:last-child)[b-666v3k8lsy]::after {
    background: rgba(255, 255, 255, 0.1);
}

.sub-features-table tr[b-666v3k8lsy] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .sub-features-table tr:hover[b-666v3k8lsy] {
        background-color: rgba(255, 255, 255, 0.05);
    }

/* Smoothscroll pour les cartes lors de l'utilisation sur mobile */
.sub-cards[b-666v3k8lsy] {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Animation d'apparition graduelle pour les cartes */
.sub-card[b-666v3k8lsy] {
    animation: cardAppear-b-666v3k8lsy 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

    .sub-card:nth-child(1)[b-666v3k8lsy] {
        animation-delay: 0.1s;
    }

    .sub-card:nth-child(2)[b-666v3k8lsy] {
        animation-delay: 0.2s;
    }

    .sub-card:nth-child(3)[b-666v3k8lsy] {
        animation-delay: 0.3s;
    }

@keyframes cardAppear-b-666v3k8lsy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Effet de vague au hover sur les boutons */
.sub-subscribe-button[b-666v3k8lsy] {
    position: relative;
    overflow: hidden;
}

    .sub-subscribe-button[b-666v3k8lsy]:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }

    .sub-subscribe-button:focus:not(:active)[b-666v3k8lsy]::after {
        animation: ripple-b-666v3k8lsy 1s ease-out;
    }

@keyframes ripple-b-666v3k8lsy {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    20% {
        transform: scale(25, 25);
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

/* Mise en évidence de l'abonnement recommandé */
.sub-recommended-badge[b-666v3k8lsy] {
    animation: subPulse-b-666v3k8lsy 2s infinite;
}

@keyframes subPulse-b-666v3k8lsy {
    0% {
        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
    }

    50% {
        box-shadow: 0 5px 25px rgba(255, 75, 43, 0.5);
    }

    100% {
        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
    }
}
/* _content/Project2/Components/Pages/Home.razor.rz.scp.css */
/* Hero Section - Adaptations mobile */
.hero[b-ae2yom28e2] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(10, 16, 32, 0.7);
    overflow: hidden;
    padding-top: 140px; /* Compenser la hauteur du header fixe */
}

    .hero[b-ae2yom28e2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('../img/grid.png');
        opacity: 0.1;
        animation: moveGrid-b-ae2yom28e2 20s linear infinite;
    }

@keyframes moveGrid-b-ae2yom28e2 {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(-50%) translateY(-50%);
    }
}

.hero-content[b-ae2yom28e2] {
    max-width: 1200px;
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.hero h1[b-ae2yom28e2] {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2;
    background: linear-gradient(135deg, #fff 0%, #ff416c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p[b-ae2yom28e2] {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* Products Section */
.products-section[b-ae2yom28e2] {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a1020, #1a2035);
    position: relative;
    overflow: hidden;
}

.products-content[b-ae2yom28e2] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

    .products-content h2[b-ae2yom28e2] {
        text-align: center;
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 2rem;
        text-transform: uppercase;
        letter-spacing: 3px;
        background: linear-gradient(135deg, #fff, #ff416c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.cta-content[b-ae2yom28e2] {
    justify-content: center;
    text-align: center;
    padding: 50px 0;
    margin-bottom: 4rem;
}

    .cta-content h3[b-ae2yom28e2] {
        font-size: 2rem;
        color: white;
        margin-bottom: 1rem;
    }

    .cta-content p[b-ae2yom28e2] {
        margin: 20px auto;
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.1rem;
        max-width: 600px;
    }

.product-grid[b-ae2yom28e2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.product-card[b-ae2yom28e2] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    transition: all 0.3s ease;
}

    .product-card:hover[b-ae2yom28e2] {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(255, 75, 43, 0.2);
    }

    .product-card h3[b-ae2yom28e2] {
        font-size: 1.5rem;
        color: white;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .product-card p[b-ae2yom28e2] {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 1.5rem;
        line-height: 1.6;
    }

.product-image[b-ae2yom28e2] {
    margin-bottom: 1.5rem;
    text-align: center;
}

    .product-image img[b-ae2yom28e2] {
        max-width: 100%;
        max-height: 200px;
        object-fit: contain;
        border-radius: 8px;
    }

/* Boutons */
.cta-button[b-ae2yom28e2], .details-button[b-ae2yom28e2], .buy-button[b-ae2yom28e2], .form-submit[b-ae2yom28e2] {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: white;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    margin: 0.5rem;
}

    .cta-button[b-ae2yom28e2]::before, .details-button[b-ae2yom28e2]::before, .buy-button[b-ae2yom28e2]::before, .form-submit[b-ae2yom28e2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
        z-index: 1;
    }

    .cta-button:hover[b-ae2yom28e2]::before, .details-button:hover[b-ae2yom28e2]::before, .buy-button:hover[b-ae2yom28e2]::before, .form-submit:hover[b-ae2yom28e2]::before {
        left: 100%;
    }

    .cta-button:hover[b-ae2yom28e2], .details-button:hover[b-ae2yom28e2], .buy-button:hover[b-ae2yom28e2], .form-submit:hover[b-ae2yom28e2] {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(255, 75, 43, 0.4);
    }

.links[b-ae2yom28e2] {
    color: #2196F3;
    text-decoration: underline;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    /* Hero Section Mobile */
    .hero[b-ae2yom28e2] {
        min-height: 100vh;
        padding-top: 120px; /* Ajusté pour le header mobile */
    }

    .hero-content[b-ae2yom28e2] {
        padding: 1rem;
    }

    .hero h1[b-ae2yom28e2] {
        font-size: 2.5rem;
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
    }

    .hero p[b-ae2yom28e2] {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    /* Services Section Mobile */
    .service-block[b-ae2yom28e2] {
        min-height: auto;
        flex-direction: column;
        padding: 2rem 0;
        background-color: rgba(10, 16, 32, 0.9);
    }

    .service-image-container[b-ae2yom28e2] {
        position: relative;
        width: 100%;
        height: 250px;
        margin-bottom: 2rem;
        opacity: 0.8;
    }

    .service-content[b-ae2yom28e2] {
        position: relative;
        width: 100%;
        padding: 2rem 1.5rem;
        background: rgba(10, 16, 32, 0.95);
        clip-path: none;
        border: none;
        border-top: 3px solid #ff4b2b;
        margin: 0;
    }

    .service-block.reverse .service-content[b-ae2yom28e2] {
        clip-path: none;
        border: none;
        border-top: 3px solid #ff4b2b;
        margin: 0;
    }

    .service-content h2[b-ae2yom28e2] {
        font-size: 1.8rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
        text-align: center;
    }

    .service-content p[b-ae2yom28e2] {
        font-size: 1rem;
        line-height: 1.6;
        text-align: center;
    }

    /* Products Section Mobile */
    .products-section[b-ae2yom28e2] {
        padding: 60px 0;
    }

    .products-content[b-ae2yom28e2] {
        padding: 0 1rem;
    }

        .products-content h2[b-ae2yom28e2] {
            font-size: 2.2rem;
            margin-bottom: 1.5rem;
            letter-spacing: 1px;
        }

    .cta-content[b-ae2yom28e2] {
        padding: 30px 0;
        margin-bottom: 2rem;
    }

        .cta-content h3[b-ae2yom28e2] {
            font-size: 1.6rem;
            margin-bottom: 1rem;
        }

        .cta-content p[b-ae2yom28e2] {
            font-size: 1rem;
            margin: 15px auto;
        }

    .product-grid[b-ae2yom28e2] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-card[b-ae2yom28e2] {
        padding: 1.5rem;
        margin: 0 0.5rem;
    }

        .product-card h3[b-ae2yom28e2] {
            font-size: 1.3rem;
            text-align: center;
            margin-bottom: 1rem;
        }

        .product-card p[b-ae2yom28e2] {
            font-size: 0.95rem;
            text-align: center;
            line-height: 1.5;
        }

    .product-image img[b-ae2yom28e2] {
        max-height: 150px;
    }

    /* Boutons Mobile */
    .cta-button[b-ae2yom28e2], .details-button[b-ae2yom28e2], .buy-button[b-ae2yom28e2], .form-submit[b-ae2yom28e2] {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
        margin: 0.3rem;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .details-button[b-ae2yom28e2] {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    /* Très petits écrans */
    .hero[b-ae2yom28e2] {
        padding-top: 100px;
    }

        .hero h1[b-ae2yom28e2] {
            font-size: 2rem;
            line-height: 1.1;
        }

        .hero p[b-ae2yom28e2] {
            font-size: 1.1rem;
        }

    .service-content[b-ae2yom28e2] {
        padding: 1.5rem 1rem;
    }

        .service-content h2[b-ae2yom28e2] {
            font-size: 1.5rem;
        }

        .service-content p[b-ae2yom28e2] {
            font-size: 0.95rem;
        }

    .products-content h2[b-ae2yom28e2] {
        font-size: 1.8rem;
    }

    .cta-content h3[b-ae2yom28e2] {
        font-size: 1.4rem;
    }

    .product-card[b-ae2yom28e2] {
        padding: 1rem;
        margin: 0;
    }

        .product-card h3[b-ae2yom28e2] {
            font-size: 1.2rem;
        }

    .cta-button[b-ae2yom28e2], .details-button[b-ae2yom28e2] {
        padding: 0.7rem 1.5rem;
        font-size: 0.85rem;
        width: 90%;
        max-width: 280px;
    }
}
/* _content/Project2/Components/Pages/OrderSummary.razor.rz.scp.css */
/* CSS PAGE COMMANDE - COMPLET AVEC VALIDATION TEMPS RÉEL - MODIFIÉ */

/* CONTAINER PRINCIPAL */
.order-container[b-6d8y1zlvon] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    min-height: 100vh;
    position: relative;
    margin-top: 40px;
}

@media (max-width: 1200px) {
    .order-container[b-6d8y1zlvon] {
        margin-top: 100px;
    }
}

/* HEADER DE COMMANDE */
.order-header[b-6d8y1zlvon] {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    padding-top: 80px;
}

    .order-header h1[b-6d8y1zlvon] {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: var(--spacing-lg);
        text-transform: uppercase;
        letter-spacing: 2px;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.additional-equipment[b-6d8y1zlvon] {
    background: rgba(0, 119, 182, 0.05);
    border-radius: var(--radius);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    border-left: 3px solid var(--primary-blue);
}

/* FORMULAIRE CLIENT AVEC VALIDATION TEMPS RÉEL - MODIFIÉ */
.contact-form[b-6d8y1zlvon] {
    margin-top: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    position: relative;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
}

    .contact-form[b-6d8y1zlvon]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

.form-row[b-6d8y1zlvon] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group[b-6d8y1zlvon] {
    margin-bottom: var(--spacing-lg);
}

    .form-group label[b-6d8y1zlvon] {
        display: block;
        margin-bottom: var(--spacing-sm);
        color: var(--text-primary);
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.02em;
    }

        /* Indicateurs visuels pour les champs requis */
        .form-group label[b-6d8y1zlvon]::after {
            content: ' *';
            color: #f44336;
            font-weight: bold;
        }

        .form-group label[for="notes"][b-6d8y1zlvon]::after {
            content: '';
        }

.form-input[b-6d8y1zlvon],
.form-select[b-6d8y1zlvon],
.form-textarea[b-6d8y1zlvon] {
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-6d8y1zlvon],
    .form-select:focus[b-6d8y1zlvon],
    .form-textarea:focus[b-6d8y1zlvon] {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
    }

    /* VALIDATION TEMPS RÉEL - STYLES AMÉLIORÉS */
    .form-input.field-valid[b-6d8y1zlvon],
    .form-select.field-valid[b-6d8y1zlvon],
    .form-textarea.field-valid[b-6d8y1zlvon] {
        border-color: #4caf50;
        background: rgba(76, 175, 80, 0.08);
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
    }

    .form-input.field-error[b-6d8y1zlvon],
    .form-select.field-error[b-6d8y1zlvon],
    .form-textarea.field-error[b-6d8y1zlvon] {
        border-color: #f44336;
        background: rgba(244, 67, 54, 0.08);
        box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15);
        animation: shake-b-6d8y1zlvon 0.4s ease-in-out;
    }

/* Animation shake améliorée pour les erreurs */
@keyframes shake-b-6d8y1zlvon {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

/* Focus avec validation */
.form-input:focus.field-valid[b-6d8y1zlvon],
.form-select:focus.field-valid[b-6d8y1zlvon],
.form-textarea:focus.field-valid[b-6d8y1zlvon] {
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
}

.form-input:focus.field-error[b-6d8y1zlvon],
.form-select:focus.field-error[b-6d8y1zlvon],
.form-textarea:focus.field-error[b-6d8y1zlvon] {
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.25);
}

.form-select[b-6d8y1zlvon] {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 20 20\'%3e%3cpath stroke=\'%23555555\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M6 8l4 4 4-4\'/%3e%3c/svg%3e');
    background-position: right var(--spacing-md) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 3rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

    .form-select option[b-6d8y1zlvon] {
        background-color: var(--bg-card);
        color: var(--text-primary);
    }

.form-textarea[b-6d8y1zlvon] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Messages de validation avec animation */
.validation-message[b-6d8y1zlvon] {
    color: #f44336;
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
    display: block;
    font-weight: 500;
    opacity: 0;
    animation: fadeInValidation-b-6d8y1zlvon 0.3s ease-in-out forwards;
}

@keyframes fadeInValidation-b-6d8y1zlvon {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ALERTES AVEC ANIMATION */
.alert[b-6d8y1zlvon] {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-lg);
    border: 2px solid transparent;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
}

.alert-danger[b-6d8y1zlvon] {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
    color: #f44336;
    animation: slideDownAlert-b-6d8y1zlvon 0.3s ease-out;
}

@keyframes slideDownAlert-b-6d8y1zlvon {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-6d8y1zlvon] {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

/* BOUTONS AVEC VALIDATION TEMPS RÉEL - MODIFIÉ POUR TOUJOURS ACTIF */
.form-actions[b-6d8y1zlvon] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-2xl);
    gap: var(--spacing-lg);
}

.btn[b-6d8y1zlvon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-back[b-6d8y1zlvon] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

    .btn-back:hover[b-6d8y1zlvon] {
        background: var(--bg-accent);
        border-color: var(--primary-blue);
        color: var(--primary-blue);
    }

.btn-next[b-6d8y1zlvon],
.btn-primary[b-6d8y1zlvon] {
    background: var(--gradient-primary);
    color: var(--text-white);
    box-shadow: var(--shadow-colored);
    transition: all var(--transition);
}

    .btn-next:hover[b-6d8y1zlvon],
    .btn-primary:hover[b-6d8y1zlvon] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

.submit-btn[b-6d8y1zlvon] {
    width: 100%;
    padding: 1.25rem var(--spacing-xl);
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-colored);
}

    .submit-btn:hover[b-6d8y1zlvon] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

    .submit-btn:disabled[b-6d8y1zlvon] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }


.spinner[b-6d8y1zlvon] {
    animation: spin-b-6d8y1zlvon 1s linear infinite;
}

/* ÉTATS SPÉCIAUX */
.no-subscription[b-6d8y1zlvon] {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--text-secondary);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

    .no-subscription p[b-6d8y1zlvon] {
        margin-bottom: var(--spacing-2xl);
        font-size: 1.25rem;
    }

/* RESPONSIVE DESIGN */

/* Tablettes */
@media (max-width: 1200px) {
    .order-container[b-6d8y1zlvon] {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .order-header h1[b-6d8y1zlvon] {
        font-size: 3rem;
    }

    .equipment-grid[b-6d8y1zlvon] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 992px) {
    .order-subscription-options[b-6d8y1zlvon] {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .subscription-pills[b-6d8y1zlvon] {
        justify-content: center;
    }

    .sub-toggle-container[b-6d8y1zlvon] {
        justify-content: center;
    }

    .step-connector[b-6d8y1zlvon] {
        width: 80px;
    }
}

/* Smartphones */
@media (max-width: 768px) {
    .order-container[b-6d8y1zlvon] {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .order-header[b-6d8y1zlvon] {
        padding-top: 60px;
    }

        .order-header h1[b-6d8y1zlvon] {
            font-size: 2.5rem;
            letter-spacing: 1px;
        }

    .order-subtitle[b-6d8y1zlvon] {
        font-size: 1.125rem;
    }

    .order-section[b-6d8y1zlvon] {
        padding: var(--spacing-lg);
    }

        .order-section h2[b-6d8y1zlvon] {
            font-size: 1.875rem;
        }

    .order-steps[b-6d8y1zlvon] {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .step-connector[b-6d8y1zlvon] {
        width: 2px;
        height: 50px;
        top: 0;
        transform: rotate(90deg);
    }

    .equipment-grid[b-6d8y1zlvon] {
        grid-template-columns: 1fr;
    }

    .form-row[b-6d8y1zlvon] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-6d8y1zlvon] {
        flex-direction: column-reverse;
    }

    .btn[b-6d8y1zlvon] {
        width: 100%;
    }

    .subscription-pills[b-6d8y1zlvon] {
        flex-direction: column;
        align-items: stretch;
    }

    .subscription-pill[b-6d8y1zlvon] {
        text-align: center;
    }

    /* Responsive pour la validation */
    .validation-message[b-6d8y1zlvon] {
        font-size: 0.8rem;
    }

    .form-group label[b-6d8y1zlvon]::after {
        font-size: 0.9rem;
    }
}

/* Petits smartphones */
@media (max-width: 576px) {
    .order-header h1[b-6d8y1zlvon] {
        font-size: 2rem;
    }

    .order-subtitle[b-6d8y1zlvon] {
        font-size: 1rem;
    }

    .order-section h2[b-6d8y1zlvon] {
        font-size: 1.5rem;
        padding-left: var(--spacing-sm);
    }

    .order-section[b-6d8y1zlvon] {
        padding: var(--spacing-md);
    }

    .step-number[b-6d8y1zlvon] {
        width: 40px;
        height: 40px;
    }

    .equipment-details[b-6d8y1zlvon] {
        padding: var(--spacing-lg);
    }

    .equipment-price[b-6d8y1zlvon] {
        font-size: 1.5rem;
    }

    .quantity-btn[b-6d8y1zlvon] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .quantity[b-6d8y1zlvon] {
        font-size: 1.125rem;
        min-width: 40px;
    }

    .btn[b-6d8y1zlvon] {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 0.9rem;
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .order-container[b-6d8y1zlvon] {
        padding: var(--spacing-sm);
    }

    .order-header h1[b-6d8y1zlvon] {
        font-size: 1.75rem;
    }

    .step-number[b-6d8y1zlvon] {
        width: 35px;
        height: 35px;
        font-size: 0.875rem;
    }

    .step-label[b-6d8y1zlvon] {
        font-size: 0.75rem;
    }
}

/* Mode paysage sur mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .order-header[b-6d8y1zlvon] {
        padding-top: 40px;
        margin-bottom: var(--spacing-xl);
    }

        .order-header h1[b-6d8y1zlvon] {
            font-size: 2rem;
            margin-bottom: var(--spacing-sm);
        }

    .order-subtitle[b-6d8y1zlvon] {
        font-size: 0.9rem;
    }

    .order-steps[b-6d8y1zlvon] {
        margin: var(--spacing-lg) 0;
    }

    .step-number[b-6d8y1zlvon] {
        width: 35px;
        height: 35px;
    }

    .step-label[b-6d8y1zlvon] {
        font-size: 0.75rem;
    }

    .order-section[b-6d8y1zlvon] {
        padding: var(--spacing-lg);
    }

        .order-section h2[b-6d8y1zlvon] {
            font-size: 1.5rem;
            margin-bottom: var(--spacing-lg);
        }
}

/* États hover améliorés pour desktop */
@media (hover: hover) and (pointer: fine) {
    .equipment-card:hover[b-6d8y1zlvon] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

    .total-row:hover[b-6d8y1zlvon] {
        background: var(--gray-100);
    }

    .included-feature:hover[b-6d8y1zlvon] {
        background: rgba(0, 119, 182, 0.02);
    }

    .order-section:hover[b-6d8y1zlvon] {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }
}

/* Styles pour les écrans tactiles */
@media (hover: none) and (pointer: coarse) {
    .btn:hover[b-6d8y1zlvon],
    .equipment-card:hover[b-6d8y1zlvon],
    .subscription-pill:hover[b-6d8y1zlvon] {
        transform: none;
    }

    .btn:active[b-6d8y1zlvon] {
        transform: scale(0.98);
    }

    .equipment-card:active[b-6d8y1zlvon] {
        transform: scale(0.98);
    }

    .subscription-pill:active[b-6d8y1zlvon] {
        transform: scale(0.98);
    }

    .quantity-btn:active[b-6d8y1zlvon] {
        transform: scale(0.95);
    }

    /* Augmenter les zones de touch pour mobile */
    .btn[b-6d8y1zlvon] {
        min-height: 44px;
    }

    .quantity-btn[b-6d8y1zlvon] {
        min-width: 44px;
        min-height: 44px;
    }

    .subscription-pill[b-6d8y1zlvon] {
        min-height: 44px;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    /* Éviter le zoom sur les inputs sur iOS */
    .form-input[b-6d8y1zlvon],
    .form-select[b-6d8y1zlvon],
    .form-textarea[b-6d8y1zlvon] {
        font-size: 16px;
    }
}

/* Mode sombre si utilisé */
@media (prefers-color-scheme: dark) {
    .form-input.field-valid[b-6d8y1zlvon],
    .form-select.field-valid[b-6d8y1zlvon],
    .form-textarea.field-valid[b-6d8y1zlvon] {
        background: rgba(76, 175, 80, 0.1);
    }

    .form-input.field-error[b-6d8y1zlvon],
    .form-select.field-error[b-6d8y1zlvon],
    .form-textarea.field-error[b-6d8y1zlvon] {
        background: rgba(244, 67, 54, 0.1);
    }
}

/* Préférences utilisateur pour les animations */
@media (prefers-reduced-motion: reduce) {
    *[b-6d8y1zlvon] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .loading-spinner[b-6d8y1zlvon] {
        animation: none;
    }

    .btn:hover[b-6d8y1zlvon],
    .equipment-card.selected[b-6d8y1zlvon],
    .subscription-pill:hover[b-6d8y1zlvon],
    .order-section:hover[b-6d8y1zlvon] {
        transform: none !important;
    }

    /* Désactivation des animations de validation */
    .form-input.field-error[b-6d8y1zlvon],
    .form-select.field-error[b-6d8y1zlvon],
    .form-textarea.field-error[b-6d8y1zlvon] {
        animation: none;
    }

    .validation-message[b-6d8y1zlvon] {
        animation: none;
        opacity: 1;
    }

    .alert.alert-danger[b-6d8y1zlvon] {
        animation: none;
    }
}

/* Focus styles pour l'accessibilité */
.btn:focus[b-6d8y1zlvon],
.form-input:focus[b-6d8y1zlvon],
.form-select:focus[b-6d8y1zlvon],
.form-textarea:focus[b-6d8y1zlvon],
.subscription-pill:focus[b-6d8y1zlvon],
.quantity-btn:focus[b-6d8y1zlvon] {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

.equipment-card:focus[b-6d8y1zlvon] {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Animation d'entrée pour les éléments */
@keyframes fadeInUp-b-6d8y1zlvon {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-section[b-6d8y1zlvon] {
    animation: fadeInUp-b-6d8y1zlvon 0.6s ease-out;
}

.equipment-card[b-6d8y1zlvon] {
    animation: fadeInUp-b-6d8y1zlvon 0.6s ease-out;
    animation-fill-mode: both;
}

    .equipment-card:nth-child(1)[b-6d8y1zlvon] {
        animation-delay: 0.1s;
    }

    .equipment-card:nth-child(2)[b-6d8y1zlvon] {
        animation-delay: 0.2s;
    }

    .equipment-card:nth-child(3)[b-6d8y1zlvon] {
        animation-delay: 0.3s;
    }

/* Désactiver les animations sur les appareils avec des performances limitées */
@media (prefers-reduced-motion: reduce) {
    .order-section[b-6d8y1zlvon],
    .equipment-card[b-6d8y1zlvon] {
        animation: none;
    }
}

/* Support pour les anciens navigateurs */
@supports not (backdrop-filter: blur(20px)) {
    .order-section[b-6d8y1zlvon],
    .equipment-card[b-6d8y1zlvon],
    .order-total[b-6d8y1zlvon],
    .contact-form[b-6d8y1zlvon] {
        background: var(--bg-card);
    }
}

/* STYLES ADDITIONNELS POUR LA VALIDATION TEMPS RÉEL */

/* Animation de pulsation pour les champs actifs */
@keyframes pulse-b-6d8y1zlvon {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 119, 182, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 119, 182, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 119, 182, 0);
    }
}

.form-input:focus[b-6d8y1zlvon],
.form-select:focus[b-6d8y1zlvon],
.form-textarea:focus[b-6d8y1zlvon] {
    animation: pulse-b-6d8y1zlvon 2s infinite;
}

/* Indicateur de progression pour les formulaires */
.form-progress[b-6d8y1zlvon] {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.form-progress-bar[b-6d8y1zlvon] {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* État de survol pour les labels */
.form-group label:hover[b-6d8y1zlvon] {
    color: var(--primary-blue);
    cursor: pointer;
}

/* Amélioration des transitions des boutons */
.btn[b-6d8y1zlvon] {
    position: relative;
    overflow: hidden;
}

    .btn[b-6d8y1zlvon]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:active[b-6d8y1zlvon]::before {
        width: 300px;
        height: 300px;
    }

/* Styles pour les tooltips de validation */
.form-tooltip[b-6d8y1zlvon] {
    position: relative;
}

    .form-tooltip[b-6d8y1zlvon]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--gray-800);
        color: var(--white);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        z-index: 1000;
    }

    .form-tooltip:hover[b-6d8y1zlvon]::after {
        opacity: 1;
    }

/* État de chargement pour les champs */
.form-input.loading[b-6d8y1zlvon],
.form-select.loading[b-6d8y1zlvon],
.form-textarea.loading[b-6d8y1zlvon] {
    background-image: linear-gradient(90deg, transparent, rgba(0, 119, 182, 0.1), transparent);
    background-size: 200% 100%;
    animation: loading-shine-b-6d8y1zlvon 1.5s infinite;
}

@keyframes loading-shine-b-6d8y1zlvon {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Styles pour les messages de succès */
.success-message[b-6d8y1zlvon] {
    color: #4caf50;
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0;
    animation: fadeInValidation-b-6d8y1zlvon 0.3s ease-in-out forwards;
}

    .success-message[b-6d8y1zlvon]::before {
        content: '✓';
        font-weight: bold;
    }

/* Amélioration des états focus pour l'accessibilité */
.form-input:focus-visible[b-6d8y1zlvon],
.form-select:focus-visible[b-6d8y1zlvon],
.form-textarea:focus-visible[b-6d8y1zlvon] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Styles pour les champs obligatoires vides */
.form-input:invalid:not(:focus):not(:placeholder-shown)[b-6d8y1zlvon],
.form-select:invalid:not(:focus)[b-6d8y1zlvon],
.form-textarea:invalid:not(:focus):not(:placeholder-shown)[b-6d8y1zlvon] {
    border-color: rgba(244, 67, 54, 0.3);
}

/* Amélioration du contraste pour l'accessibilité */
@media (prefers-contrast: high) {
    .form-input[b-6d8y1zlvon],
    .form-select[b-6d8y1zlvon],
    .form-textarea[b-6d8y1zlvon] {
        border-width: 3px;
    }

    .validation-message[b-6d8y1zlvon] {
        font-weight: 700;
    }

    .btn[b-6d8y1zlvon] {
        border-width: 3px;
    }
}

clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;[b-6d8y1zlvon]
}

.order-subtitle[b-6d8y1zlvon] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* INDICATEUR D'ÉTAPES */
.order-steps[b-6d8y1zlvon] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-2xl) 0;
    padding: 0 var(--spacing-md);
}

.step[b-6d8y1zlvon] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-number[b-6d8y1zlvon] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    transition: var(--transition);
    border: 2px solid var(--gray-200);
}

.step.active .step-number[b-6d8y1zlvon] {
    background: var(--gradient-primary);
    color: var(--text-white);
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-colored);
}

.step.completed .step-number[b-6d8y1zlvon] {
    background: #4caf50;
    color: var(--text-white);
    border-color: #4caf50;
}

.step-label[b-6d8y1zlvon] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
}

.step.active .step-label[b-6d8y1zlvon] {
    color: var(--text-primary);
    font-weight: 700;
}

.step-connector[b-6d8y1zlvon] {
    width: 100px;
    height: 2px;
    background: var(--gray-200);
    margin: 0 var(--spacing-lg);
    position: relative;
    top: -25px;
}

/* LOADING ET ERROR STATES */
.loading-container[b-6d8y1zlvon],
.error-container[b-6d8y1zlvon] {
    text-align: center;
    padding: var(--spacing-3xl);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.loading-spinner[b-6d8y1zlvon] {
    width: 50px;
    height: 50px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-6d8y1zlvon 1s linear infinite;
    margin: 0 auto var(--spacing-lg);
}

@keyframes spin-b-6d8y1zlvon {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-container h3[b-6d8y1zlvon] {
    color: #f44336;
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.loading-container p[b-6d8y1zlvon],
.error-container p[b-6d8y1zlvon] {
    margin-top: var(--spacing-lg);
    font-size: 1.125rem;
    color: var(--text-secondary);
}

/* SECTIONS */
.order-section[b-6d8y1zlvon] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

    .order-section[b-6d8y1zlvon]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }

    .order-section:hover[b-6d8y1zlvon]::before {
        transform: scaleX(1);
    }

    .order-section h2[b-6d8y1zlvon] {
        font-size: 2.25rem;
        font-weight: 800;
        margin-bottom: var(--spacing-xl);
        position: relative;
        padding-left: var(--spacing-lg);
        color: var(--text-primary);
    }

        .order-section h2[b-6d8y1zlvon]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--gradient-primary);
            border-radius: var(--radius-sm);
        }

.section-hint[b-6d8y1zlvon] {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    font-size: 1rem;
    line-height: 1.6;
}

/* SÉLECTION D'ABONNEMENT */
.order-subscription-options[b-6d8y1zlvon] {
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.subscription-pills[b-6d8y1zlvon] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.subscription-pill[b-6d8y1zlvon] {
    background: var(--bg-accent);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}

    .subscription-pill.active[b-6d8y1zlvon] {
        background: var(--gradient-primary);
        color: var(--text-white);
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-colored);
    }

    .subscription-pill:hover:not(.active)[b-6d8y1zlvon] {
        background: rgba(0, 119, 182, 0.1);
        color: var(--primary-blue);
        transform: translateY(-2px);
        border-color: var(--primary-blue);
    }

/* TOGGLE FACTURATION */
.sub-modal-price-toggle[b-6d8y1zlvon] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.sub-toggle-container[b-6d8y1zlvon] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--bg-accent);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 50px;
    border: 1px solid var(--border-color);
}

    .sub-toggle-container span[b-6d8y1zlvon] {
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.9rem;
        transition: var(--transition);
    }

        .sub-toggle-container span.sub-active[b-6d8y1zlvon] {
            color: var(--primary-blue);
            font-weight: 700;
        }

.sub-switch[b-6d8y1zlvon] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

    .sub-switch input[b-6d8y1zlvon] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.sub-slider[b-6d8y1zlvon] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gray-200);
    transition: var(--transition);
    border-radius: 34px;
}

    .sub-slider[b-6d8y1zlvon]:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background: var(--white);
        transition: var(--transition);
        border-radius: 50%;
        box-shadow: var(--shadow-sm);
    }

input:checked + .sub-slider[b-6d8y1zlvon] {
    background: var(--primary-blue);
}

    input:checked + .sub-slider[b-6d8y1zlvon]:before {
        transform: translateX(24px);
    }

/* RÉCAPITULATIF TOTAL */
.order-total[b-6d8y1zlvon] {
    background: var(--bg-accent);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
}

.total-details[b-6d8y1zlvon] {
    width: 100%;
}

.total-row[b-6d8y1zlvon] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

    .total-row:last-child[b-6d8y1zlvon] {
        border-bottom: none;
    }

.total-divider[b-6d8y1zlvon] {
    height: 2px;
    background: var(--gradient-primary);
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius-sm);
}

.subscription-header[b-6d8y1zlvon] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(0, 119, 182, 0.05);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    border-left: 4px solid var(--primary-blue);
}

.included-features[b-6d8y1zlvon] {
    margin: var(--spacing-md) 0;
    background: var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;
}

.included-header[b-6d8y1zlvon] {
    background: var(--gray-200);
    font-weight: 600;
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: 1.1rem;
}

.included-feature[b-6d8y1zlvon] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

    .included-feature:last-child[b-6d8y1zlvon] {
        border-bottom: none;
    }

    .included-feature.included[b-6d8y1zlvon] {
        color: var(--text-primary);
    }

    .included-feature.excluded[b-6d8y1zlvon] {
        color: var(--text-muted);
    }

.feature-status-icon[b-6d8y1zlvon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: var(--spacing-sm);
    font-size: 0.8rem;
    font-weight: 700;
}

.included .feature-status-icon[b-6d8y1zlvon] {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.excluded .feature-status-icon[b-6d8y1zlvon] {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.total-subscription[b-6d8y1zlvon],
.total-sum[b-6d8y1zlvon] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.total-final[b-6d8y1zlvon] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--primary-blue);
}

    .total-subscription span:last-child[b-6d8y1zlvon],
    .total-sum span:last-child[b-6d8y1zlvon],
    .total-final span:last-child[b-6d8y1zlvon] {
        color: var(--primary-blue);
        font-weight: 800;
    }

/* ÉQUIPEMENTS */
.equipment-grid[b-6d8y1zlvon] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.equipment-card[b-6d8y1zlvon] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 2px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

    .equipment-card.selected[b-6d8y1zlvon] {
        border-color: var(--primary-blue);
        background: var(--bg-accent);
        box-shadow: var(--shadow-colored);
        transform: translateY(-5px);
    }

.equipment-image[b-6d8y1zlvon] {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: var(--gray-100);
    border-bottom: 1px solid var(--border-color);
}

    .equipment-image img[b-6d8y1zlvon] {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        border-radius: var(--radius);
    }

.equipment-details[b-6d8y1zlvon] {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

    .equipment-details h3[b-6d8y1zlvon] {
        margin: 0 0 var(--spacing-sm) 0;
        font-size: 1.375rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .equipment-details p[b-6d8y1zlvon] {
        margin: 0 0 var(--spacing-lg) 0;
        color: var(--text-secondary);
        font-size: 1rem;
        line-height: 1.6;
        flex-grow: 1;
    }

.equipment-price[b-6d8y1zlvon] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-lg);
    display: block;
}

.quantity-selector[b-6d8y1zlvon] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.quantity-btn[b-6d8y1zlvon] {
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-sm);
}

    .quantity-btn:hover:not(:disabled)[b-6d8y1zlvon] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-colored);
    }

    .quantity-btn:disabled[b-6d8y1zlvon] {
        background: var(--gray-300);
        color: var(--gray-500);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.quantity[b-6d8y1zlvon] {
    font-size: 1.375rem;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
    color: var(--text-primary);
    background: var(--gray-100);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

/* RÉSUMÉS */
/* RÉSUMÉS */
.equipment-summary[b-6d8y1zlvon],
.final-summary[b-6d8y1zlvon] {
    margin-top: var(--spacing-2xl);
    background: var(--bg-accent);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
}

    .equipment-summary h3[b-6d8y1zlvon],
    .final-summary h3[b-6d8y1zlvon] {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
        color: var(--text-primary);
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.additional-equipment[b-6d8y1zlvon] {
    background: rgba(0, 119, 182, 0.05);
    border-radius: var(--radius);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    border-left: 3px solid var(--primary-blue);
}

/* FORMULAIRE CLIENT AVEC VALIDATION TEMPS RÉEL - MODIFIÉ */
.contact-form[b-6d8y1zlvon] {
    margin-top: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    position: relative;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
}

    .contact-form[b-6d8y1zlvon]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

.form-row[b-6d8y1zlvon] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group[b-6d8y1zlvon] {
    margin-bottom: var(--spacing-lg);
}

    .form-group label[b-6d8y1zlvon] {
        display: block;
        margin-bottom: var(--spacing-sm);
        color: var(--text-primary);
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.02em;
    }

        /* Indicateurs visuels pour les champs requis */
        .form-group label[b-6d8y1zlvon]::after {
            content: ' *';
            color: #f44336;
            font-weight: bold;
        }

        .form-group label[for="notes"][b-6d8y1zlvon]::after {
            content: '';
        }

.form-input[b-6d8y1zlvon],
.form-select[b-6d8y1zlvon],
.form-textarea[b-6d8y1zlvon] {
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-6d8y1zlvon],
    .form-select:focus[b-6d8y1zlvon],
    .form-textarea:focus[b-6d8y1zlvon] {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
    }

    /* VALIDATION TEMPS RÉEL - STYLES AMÉLIORÉS */
    .form-input.field-valid[b-6d8y1zlvon],
    .form-select.field-valid[b-6d8y1zlvon],
    .form-textarea.field-valid[b-6d8y1zlvon] {
        border-color: #4caf50;
        background: rgba(76, 175, 80, 0.08);
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
    }

    .form-input.field-error[b-6d8y1zlvon],
    .form-select.field-error[b-6d8y1zlvon],
    .form-textarea.field-error[b-6d8y1zlvon] {
        border-color: #f44336;
        background: rgba(244, 67, 54, 0.08);
        box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15);
        animation: shake-b-6d8y1zlvon 0.4s ease-in-out;
    }

/* Animation shake améliorée pour les erreurs */
@keyframes shake-b-6d8y1zlvon {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

/* Focus avec validation */
.form-input:focus.field-valid[b-6d8y1zlvon],
.form-select:focus.field-valid[b-6d8y1zlvon],
.form-textarea:focus.field-valid[b-6d8y1zlvon] {
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
}

.form-input:focus.field-error[b-6d8y1zlvon],
.form-select:focus.field-error[b-6d8y1zlvon],
.form-textarea:focus.field-error[b-6d8y1zlvon] {
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.25);
}

.form-select[b-6d8y1zlvon] {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 20 20\'%3e%3cpath stroke=\'%23555555\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M6 8l4 4 4-4\'/%3e%3c/svg%3e');
    background-position: right var(--spacing-md) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 3rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

    .form-select option[b-6d8y1zlvon] {
        background-color: var(--bg-card);
        color: var(--text-primary);
    }

.form-textarea[b-6d8y1zlvon] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Messages de validation avec animation */
.validation-message[b-6d8y1zlvon] {
    color: #f44336;
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
    display: block;
    font-weight: 500;
    opacity: 0;
    animation: fadeInValidation-b-6d8y1zlvon 0.3s ease-in-out forwards;
}

@keyframes fadeInValidation-b-6d8y1zlvon {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ALERTES AVEC ANIMATION */
.alert[b-6d8y1zlvon] {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-lg);
    border: 2px solid transparent;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
}

.alert-danger[b-6d8y1zlvon] {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
    color: #f44336;
    animation: slideDownAlert-b-6d8y1zlvon 0.3s ease-out;
}

@keyframes slideDownAlert-b-6d8y1zlvon {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-6d8y1zlvon] {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

/* BOUTONS AVEC VALIDATION TEMPS RÉEL - MODIFIÉ POUR TOUJOURS ACTIF */
.form-actions[b-6d8y1zlvon] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-2xl);
    gap: var(--spacing-lg);
}

.btn[b-6d8y1zlvon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-back[b-6d8y1zlvon] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

    .btn-back:hover[b-6d8y1zlvon] {
        background: var(--bg-accent);
        border-color: var(--primary-blue);
        color: var(--primary-blue);
    }

.btn-next[b-6d8y1zlvon],
.btn-primary[b-6d8y1zlvon] {
    background: var(--gradient-primary);
    color: var(--text-white);
    box-shadow: var(--shadow-colored);
    transition: all var(--transition);
}

    .btn-next:hover[b-6d8y1zlvon],
    .btn-primary:hover[b-6d8y1zlvon] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

.submit-btn[b-6d8y1zlvon] {
    width: 100%;
    padding: 1.25rem var(--spacing-xl);
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-colored);
}

    .submit-btn:hover[b-6d8y1zlvon] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

    .submit-btn:disabled[b-6d8y1zlvon] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

/* RETIRER LES STYLES DISABLED - LE BOUTON RESTE TOUJOURS ACTIF
.btn-primary.disabled,
.submit-btn.disabled {
    background: var(--gray-300) !important;
    color: var(--gray-500) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.6;
}

.btn-primary.disabled:hover,
.submit-btn.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--gray-300) !important;
}
*/

.spinner[b-6d8y1zlvon] {
    animation: spin-b-6d8y1zlvon 1s linear infinite;
}

/* ÉTATS SPÉCIAUX */
.no-subscription[b-6d8y1zlvon] {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--text-secondary);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

    .no-subscription p[b-6d8y1zlvon] {
        margin-bottom: var(--spacing-2xl);
        font-size: 1.25rem;
    }

/* RESPONSIVE DESIGN */

/* Tablettes */
@media (max-width: 1200px) {
    .order-container[b-6d8y1zlvon] {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .order-header h1[b-6d8y1zlvon] {
        font-size: 3rem;
    }

    .equipment-grid[b-6d8y1zlvon] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 992px) {
    .order-subscription-options[b-6d8y1zlvon] {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .subscription-pills[b-6d8y1zlvon] {
        justify-content: center;
    }

    .sub-toggle-container[b-6d8y1zlvon] {
        justify-content: center;
    }

    .step-connector[b-6d8y1zlvon] {
        width: 80px;
    }
}

/* Smartphones */
@media (max-width: 768px) {
    .order-container[b-6d8y1zlvon] {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .order-header[b-6d8y1zlvon] {
        padding-top: 60px;
    }

        .order-header h1[b-6d8y1zlvon] {
            font-size: 2.5rem;
            letter-spacing: 1px;
        }

    .order-subtitle[b-6d8y1zlvon] {
        font-size: 1.125rem;
    }

    .order-section[b-6d8y1zlvon] {
        padding: var(--spacing-lg);
    }

        .order-section h2[b-6d8y1zlvon] {
            font-size: 1.875rem;
        }

    .order-steps[b-6d8y1zlvon] {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .step-connector[b-6d8y1zlvon] {
        width: 2px;
        height: 50px;
        top: 0;
        transform: rotate(90deg);
    }

    .equipment-grid[b-6d8y1zlvon] {
        grid-template-columns: 1fr;
    }

    .form-row[b-6d8y1zlvon] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-6d8y1zlvon] {
        flex-direction: column-reverse;
    }

    .btn[b-6d8y1zlvon] {
        width: 100%;
    }

    .subscription-pills[b-6d8y1zlvon] {
        flex-direction: column;
        align-items: stretch;
    }

    .subscription-pill[b-6d8y1zlvon] {
        text-align: center;
    }

    /* Responsive pour la validation */
    .validation-message[b-6d8y1zlvon] {
        font-size: 0.8rem;
    }

    .form-group label[b-6d8y1zlvon]::after {
        font-size: 0.9rem;
    }
}

/* Petits smartphones */
@media (max-width: 576px) {
    .order-header h1[b-6d8y1zlvon] {
        font-size: 2rem;
    }

    .order-subtitle[b-6d8y1zlvon] {
        font-size: 1rem;
    }

    .order-section h2[b-6d8y1zlvon] {
        font-size: 1.5rem;
        padding-left: var(--spacing-sm);
    }

    .order-section[b-6d8y1zlvon] {
        padding: var(--spacing-md);
    }

    .step-number[b-6d8y1zlvon] {
        width: 40px;
        height: 40px;
    }

    .equipment-details[b-6d8y1zlvon] {
        padding: var(--spacing-lg);
    }

    .equipment-price[b-6d8y1zlvon] {
        font-size: 1.5rem;
    }

    .quantity-btn[b-6d8y1zlvon] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .quantity[b-6d8y1zlvon] {
        font-size: 1.125rem;
        min-width: 40px;
    }

    .btn[b-6d8y1zlvon] {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 0.9rem;
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .order-container[b-6d8y1zlvon] {
        padding: var(--spacing-sm);
    }

    .order-header h1[b-6d8y1zlvon] {
        font-size: 1.75rem;
    }

    .step-number[b-6d8y1zlvon] {
        width: 35px;
        height: 35px;
        font-size: 0.875rem;
    }

    .step-label[b-6d8y1zlvon] {
        font-size: 0.75rem;
    }
}

/* Mode paysage sur mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .order-header[b-6d8y1zlvon] {
        padding-top: 40px;
        margin-bottom: var(--spacing-xl);
    }

        .order-header h1[b-6d8y1zlvon] {
            font-size: 2rem;
            margin-bottom: var(--spacing-sm);
        }

    .order-subtitle[b-6d8y1zlvon] {
        font-size: 0.9rem;
    }

    .order-steps[b-6d8y1zlvon] {
        margin: var(--spacing-lg) 0;
    }

    .step-number[b-6d8y1zlvon] {
        width: 35px;
        height: 35px;
    }

    .step-label[b-6d8y1zlvon] {
        font-size: 0.75rem;
    }

    .order-section[b-6d8y1zlvon] {
        padding: var(--spacing-lg);
    }

        .order-section h2[b-6d8y1zlvon] {
            font-size: 1.5rem;
            margin-bottom: var(--spacing-lg);
        }
}

/* États hover améliorés pour desktop */
@media (hover: hover) and (pointer: fine) {
    .equipment-card:hover[b-6d8y1zlvon] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

    .total-row:hover[b-6d8y1zlvon] {
        background: var(--gray-100);
    }

    .included-feature:hover[b-6d8y1zlvon] {
        background: rgba(0, 119, 182, 0.02);
    }

    .order-section:hover[b-6d8y1zlvon] {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }
}

/* Styles pour les écrans tactiles */
@media (hover: none) and (pointer: coarse) {
    .btn:hover[b-6d8y1zlvon],
    .equipment-card:hover[b-6d8y1zlvon],
    .subscription-pill:hover[b-6d8y1zlvon] {
        transform: none;
    }

    .btn:active[b-6d8y1zlvon] {
        transform: scale(0.98);
    }

    .equipment-card:active[b-6d8y1zlvon] {
        transform: scale(0.98);
    }

    .subscription-pill:active[b-6d8y1zlvon] {
        transform: scale(0.98);
    }

    .quantity-btn:active[b-6d8y1zlvon] {
        transform: scale(0.95);
    }

    /* Augmenter les zones de touch pour mobile */
    .btn[b-6d8y1zlvon] {
        min-height: 44px;
    }

    .quantity-btn[b-6d8y1zlvon] {
        min-width: 44px;
        min-height: 44px;
    }

    .subscription-pill[b-6d8y1zlvon] {
        min-height: 44px;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    /* Éviter le zoom sur les inputs sur iOS */
    .form-input[b-6d8y1zlvon],
    .form-select[b-6d8y1zlvon],
    .form-textarea[b-6d8y1zlvon] {
        font-size: 16px;
    }
}

/* Mode sombre si utilisé */
@media (prefers-color-scheme: dark) {
    .form-input.field-valid[b-6d8y1zlvon],
    .form-select.field-valid[b-6d8y1zlvon],
    .form-textarea.field-valid[b-6d8y1zlvon] {
        background: rgba(76, 175, 80, 0.1);
    }

    .form-input.field-error[b-6d8y1zlvon],
    .form-select.field-error[b-6d8y1zlvon],
    .form-textarea.field-error[b-6d8y1zlvon] {
        background: rgba(244, 67, 54, 0.1);
    }
}

/* Préférences utilisateur pour les animations */
@media (prefers-reduced-motion: reduce) {
    *[b-6d8y1zlvon] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .loading-spinner[b-6d8y1zlvon] {
        animation: none;
    }

    .btn:hover[b-6d8y1zlvon],
    .equipment-card.selected[b-6d8y1zlvon],
    .subscription-pill:hover[b-6d8y1zlvon],
    .order-section:hover[b-6d8y1zlvon] {
        transform: none !important;
    }

    /* Désactivation des animations de validation */
    .form-input.field-error[b-6d8y1zlvon],
    .form-select.field-error[b-6d8y1zlvon],
    .form-textarea.field-error[b-6d8y1zlvon] {
        animation: none;
    }

    .validation-message[b-6d8y1zlvon] {
        animation: none;
        opacity: 1;
    }

    .alert.alert-danger[b-6d8y1zlvon] {
        animation: none;
    }
}

/* Focus styles pour l'accessibilité */
.btn:focus[b-6d8y1zlvon],
.form-input:focus[b-6d8y1zlvon],
.form-select:focus[b-6d8y1zlvon],
.form-textarea:focus[b-6d8y1zlvon],
.subscription-pill:focus[b-6d8y1zlvon],
.quantity-btn:focus[b-6d8y1zlvon] {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

.equipment-card:focus[b-6d8y1zlvon] {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Animation d'entrée pour les éléments */
@keyframes fadeInUp-b-6d8y1zlvon {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-section[b-6d8y1zlvon] {
    animation: fadeInUp-b-6d8y1zlvon 0.6s ease-out;
}

.equipment-card[b-6d8y1zlvon] {
    animation: fadeInUp-b-6d8y1zlvon 0.6s ease-out;
    animation-fill-mode: both;
}

    .equipment-card:nth-child(1)[b-6d8y1zlvon] {
        animation-delay: 0.1s;
    }

    .equipment-card:nth-child(2)[b-6d8y1zlvon] {
        animation-delay: 0.2s;
    }

    .equipment-card:nth-child(3)[b-6d8y1zlvon] {
        animation-delay: 0.3s;
    }

/* Désactiver les animations sur les appareils avec des performances limitées */
@media (prefers-reduced-motion: reduce) {
    .order-section[b-6d8y1zlvon],
    .equipment-card[b-6d8y1zlvon] {
        animation: none;
    }
}

/* Support pour les anciens navigateurs */
@supports not (backdrop-filter: blur(20px)) {
    .order-section[b-6d8y1zlvon],
    .equipment-card[b-6d8y1zlvon],
    .order-total[b-6d8y1zlvon],
    .contact-form[b-6d8y1zlvon] {
        background: var(--bg-card);
    }
}

/* STYLES ADDITIONNELS POUR LA VALIDATION TEMPS RÉEL */

/* Animation de pulsation pour les champs actifs */
@keyframes pulse-b-6d8y1zlvon {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 119, 182, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 119, 182, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 119, 182, 0);
    }
}

.form-input:focus[b-6d8y1zlvon],
.form-select:focus[b-6d8y1zlvon],
.form-textarea:focus[b-6d8y1zlvon] {
    animation: pulse-b-6d8y1zlvon 2s infinite;
}

/* Indicateur de progression pour les formulaires */
.form-progress[b-6d8y1zlvon] {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.form-progress-bar[b-6d8y1zlvon] {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* État de survol pour les labels */
.form-group label:hover[b-6d8y1zlvon] {
    color: var(--primary-blue);
    cursor: pointer;
}

/* Amélioration des transitions des boutons */
.btn[b-6d8y1zlvon] {
    position: relative;
    overflow: hidden;
}

    .btn[b-6d8y1zlvon]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:active[b-6d8y1zlvon]::before {
        width: 300px;
        height: 300px;
    }

/* Styles pour les tooltips de validation */
.form-tooltip[b-6d8y1zlvon] {
    position: relative;
}

    .form-tooltip[b-6d8y1zlvon]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--gray-800);
        color: var(--white);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        z-index: 1000;
    }

    .form-tooltip:hover[b-6d8y1zlvon]::after {
        opacity: 1;
    }

/* État de chargement pour les champs */
.form-input.loading[b-6d8y1zlvon],
.form-select.loading[b-6d8y1zlvon],
.form-textarea.loading[b-6d8y1zlvon] {
    background-image: linear-gradient(90deg, transparent, rgba(0, 119, 182, 0.1), transparent);
    background-size: 200% 100%;
    animation: loading-shine-b-6d8y1zlvon 1.5s infinite;
}

@keyframes loading-shine-b-6d8y1zlvon {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Styles pour les messages de succès */
.success-message[b-6d8y1zlvon] {
    color: #4caf50;
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0;
    animation: fadeInValidation-b-6d8y1zlvon 0.3s ease-in-out forwards;
}

    .success-message[b-6d8y1zlvon]::before {
        content: '✓';
        font-weight: bold;
    }

/* Amélioration des états focus pour l'accessibilité */
.form-input:focus-visible[b-6d8y1zlvon],
.form-select:focus-visible[b-6d8y1zlvon],
.form-textarea:focus-visible[b-6d8y1zlvon] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Styles pour les champs obligatoires vides */
.form-input:invalid:not(:focus):not(:placeholder-shown)[b-6d8y1zlvon],
.form-select:invalid:not(:focus)[b-6d8y1zlvon],
.form-textarea:invalid:not(:focus):not(:placeholder-shown)[b-6d8y1zlvon] {
    border-color: rgba(244, 67, 54, 0.3);
}

/* Amélioration du contraste pour l'accessibilité */
@media (prefers-contrast: high) {
    .form-input[b-6d8y1zlvon],
    .form-select[b-6d8y1zlvon],
    .form-textarea[b-6d8y1zlvon] {
        border-width: 3px;
    }

    .validation-message[b-6d8y1zlvon] {
        font-weight: 700;
    }

    .btn[b-6d8y1zlvon] {
        border-width: 3px;
    }
}
/* _content/Project2/Components/Pages/Paiement/Cancel.razor.rz.scp.css */


.result-container[b-xmijmihc5o] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-alt) 100%);
    position: relative;
    overflow: hidden;
}

    .result-container[b-xmijmihc5o]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('../img/grid.png');
        opacity: 0.1;
        animation: moveGrid-b-xmijmihc5o 20s linear infinite;
    }

@keyframes moveGrid-b-xmijmihc5o {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(-50%) translateY(-50%);
    }
}

.result-box[b-xmijmihc5o] {
    background: rgba(26, 32, 53, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    max-width: 800px;
    width: 100%;
    padding: 3rem;
    text-align: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100% );
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .result-box.success[b-xmijmihc5o] {
        border-left: 4px solid var(--success-color);
    }

    .result-box.error[b-xmijmihc5o] {
        border-left: 4px solid var(--error-color);
    }

.result-icon[b-xmijmihc5o] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 60px;
    position: relative;
}

.success-icon[b-xmijmihc5o] {
    color: var(--success-color);
    animation: pulse-b-xmijmihc5o 2s infinite;
}

.error-icon[b-xmijmihc5o] {
    color: var(--error-color);
    animation: shake-b-xmijmihc5o 0.5s;
}

@keyframes pulse-b-xmijmihc5o {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shake-b-xmijmihc5o {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-10px);
    }

    40%, 80% {
        transform: translateX(10px);
    }
}

.result-box h1[b-xmijmihc5o] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #fff 0%, var(--accent-color-gradient) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.result-message[b-xmijmihc5o] {
    font-size: 1.2rem;
    color: var(--light-text-muted);
    margin-bottom: 2rem;
}

.info-section[b-xmijmihc5o] {
    margin: 2.5rem 0;
    text-align: left;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

    .info-section h2[b-xmijmihc5o] {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: var(--light-text);
        border-left: 3px solid var(--accent-color);
        padding-left: 1rem;
    }

.order-details[b-xmijmihc5o] {
    color: var(--light-text-muted);
}

    .order-details p[b-xmijmihc5o] {
        margin-bottom: 1rem;
    }

    .order-details ul[b-xmijmihc5o] {
        list-style-type: none;
        padding-left: 1rem;
    }

        .order-details ul li[b-xmijmihc5o] {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
        }

            .order-details ul li[b-xmijmihc5o]::before {
                content: '•';
                color: var(--accent-color);
                position: absolute;
                left: 0;
                font-size: 1.2rem;
            }

.next-steps[b-xmijmihc5o] {
    margin: 2rem 0;
    text-align: left;
}

    .next-steps h3[b-xmijmihc5o] {
        font-size: 1.3rem;
        color: var(--light-text);
        margin-bottom: 1rem;
    }

    .next-steps ul[b-xmijmihc5o] {
        list-style-type: none;
        padding-left: 0;
    }

        .next-steps ul li[b-xmijmihc5o] {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 0.8rem;
            color: var(--light-text-muted);
        }

            .next-steps ul li[b-xmijmihc5o]::before {
                content: '✓';
                color: var(--success-color);
                position: absolute;
                left: 0;
            }

.result-box.error .next-steps ul li[b-xmijmihc5o]::before {
    content: '→';
    color: var(--accent-color);
}

.action-buttons[b-xmijmihc5o] {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.btn[b-xmijmihc5o] {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.btn-primary[b-xmijmihc5o] {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-gradient));
    color: white;
}

    .btn-primary:hover[b-xmijmihc5o] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
    }

.btn-outline[b-xmijmihc5o] {
    background: transparent;
    color: var(--light-text);
    border: 1px solid var(--accent-color);
}

    .btn-outline:hover[b-xmijmihc5o] {
        background: rgba(255, 75, 43, 0.1);
        transform: translateY(-2px);
    }

.btn-light[b-xmijmihc5o] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--light-text-muted);
}

    .btn-light:hover[b-xmijmihc5o] {
        background: rgba(255, 255, 255, 0.2);
    }

/* Responsive design */
@media (max-width: 768px) {
    .result-box[b-xmijmihc5o] {
        padding: 2rem 1.5rem;
    }

        .result-box h1[b-xmijmihc5o] {
            font-size: 2rem;
        }

    .result-message[b-xmijmihc5o] {
        font-size: 1rem;
    }

    .result-icon[b-xmijmihc5o] {
        width: 100px;
        height: 100px;
        font-size: 50px;
    }

    .action-buttons[b-xmijmihc5o] {
        flex-direction: column;
    }

    .btn[b-xmijmihc5o] {
        width: 100%;
    }
}


.btn[b-xmijmihc5o] {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: white;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
}

    .btn[b-xmijmihc5o]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
        z-index: 1;
    }


    /* Déplacement de l'effet lumineux */
    .btn[b-xmijmihc5o]::before {
        left: 100%;
    }

    /* Effet de survol général */
    .btn:hover[b-xmijmihc5o] {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(255, 75, 43, 0.4);
    }

    /* Effet au clic */
    .btn:active[b-xmijmihc5o] {
        transform: translateY(1px);
        box-shadow: 0 2px 10px rgba(255, 75, 43, 0.4);
    }

    /* Style pour bouton désactivé */
    .btn:disabled[b-xmijmihc5o] {
        background: linear-gradient(135deg, #b86b5d, #b86b7b);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }



/* Ajustements responsifs */
@media (max-width: 768px) {
    .btn[b-xmijmihc5o] {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
    }
}
/* _content/Project2/Components/Pages/Paiement/Success.razor.rz.scp.css */
/* =========================================
   PAYMENT RESULT PAGE STYLES
   Hérite du CSS principal (app.css)
   ========================================= */

/* Variables spécifiques à la page de résultat */
:root[b-e8xvennrlj] {
    --success-color: #06d6a0;
    --success-light: #40e0d0;
    --success-bg: rgba(6, 214, 160, 0.1);
    --error-color: #ef4444;
    --error-light: #f87171;
    --error-bg: rgba(239, 68, 68, 0.1);
    --loading-color: var(--primary-blue);
    --result-max-width: 800px;
}

/* ========== CONTENEUR PRINCIPAL ========== */
.result-container[b-e8xvennrlj] {
    min-height: calc(100vh - 140px); /* Ajuste selon la hauteur header/footer */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    position: relative;
}

.result-box[b-e8xvennrlj] {
    width: 100%;
    max-width: var(--result-max-width);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
    animation: fadeInScale-b-e8xvennrlj 0.6s ease-out both;
}

/* Animation d'apparition avec scale */
@keyframes fadeInScale-b-e8xvennrlj {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

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

/* ========== ÉTATS DU RÉSULTAT ========== */

/* État de chargement */
.result-box.loading[b-e8xvennrlj] {
    padding: var(--spacing-3xl);
    text-align: center;
}

    .result-box.loading[b-e8xvennrlj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-primary);
        animation: loadingProgress-b-e8xvennrlj 2s ease-in-out infinite;
    }

@keyframes loadingProgress-b-e8xvennrlj {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

/* État de succès */
.result-box.success[b-e8xvennrlj] {
    padding: var(--spacing-3xl) var(--spacing-xl);
}

    .result-box.success[b-e8xvennrlj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--success-color), var(--success-light));
    }

/* État d'erreur */
.result-box.error[b-e8xvennrlj] {
    padding: var(--spacing-3xl) var(--spacing-xl);
}

    .result-box.error[b-e8xvennrlj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--error-color), var(--error-light));
    }

/* ========== ICÔNES DE RÉSULTAT ========== */
.result-icon[b-e8xvennrlj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.success-icon[b-e8xvennrlj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--success-color), var(--success-light));
    color: white;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(6, 214, 160, 0.3);
    animation: successPulse-b-e8xvennrlj 2s ease-in-out infinite;
}

@keyframes successPulse-b-e8xvennrlj {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgba(6, 214, 160, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(6, 214, 160, 0.4);
    }
}

.error-icon[b-e8xvennrlj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--error-color), var(--error-light));
    color: white;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
}

/* ========== SPINNER DE CHARGEMENT ========== */
.spinner[b-e8xvennrlj] {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-lg);
    border: 4px solid var(--gray-200);
    border-top: 4px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ========== TITRES ET MESSAGES ========== */
.result-box h1[b-e8xvennrlj] {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.result-box.success h1[b-e8xvennrlj] {
    color: var(--success-color);
}

.result-box.error h1[b-e8xvennrlj] {
    color: var(--error-color);
}

.result-message[b-e8xvennrlj] {
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.6;
}

/* ========== SECTIONS D'INFORMATION ========== */
.info-section[b-e8xvennrlj] {
    background: var(--bg-accent);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border: 1px solid rgba(0, 119, 182, 0.1);
}

    .info-section h2[b-e8xvennrlj] {
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        font-size: 1.5rem;
    }

    .info-section h3[b-e8xvennrlj] {
        color: var(--primary-blue);
        margin-bottom: var(--spacing-md);
        margin-top: var(--spacing-lg);
        font-size: 1.25rem;
    }

        .info-section h3:first-of-type[b-e8xvennrlj] {
            margin-top: 0;
        }

/* ========== DÉTAILS DE COMMANDE ========== */
.order-details[b-e8xvennrlj] {
    background: white;
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

    .order-details p[b-e8xvennrlj] {
        margin-bottom: var(--spacing-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--gray-100);
    }

        .order-details p:last-child[b-e8xvennrlj] {
            border-bottom: none;
            margin-bottom: 0;
        }

        .order-details p strong[b-e8xvennrlj] {
            color: var(--text-primary);
            font-weight: 600;
        }

/* ========== DÉTAILS ABONNEMENT ========== */
.subscription-details[b-e8xvennrlj] {
    background: rgba(0, 119, 182, 0.05);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    border-left: 4px solid var(--primary-blue);
}

    .subscription-details p[b-e8xvennrlj] {
        margin-bottom: var(--spacing-sm);
        border-bottom: 1px solid rgba(0, 119, 182, 0.1);
    }

        .subscription-details p:last-child[b-e8xvennrlj] {
            border-bottom: none;
            margin-bottom: 0;
        }

/* ========== DÉTAILS ÉQUIPEMENTS ========== */
.equipment-details[b-e8xvennrlj] {
    margin: var(--spacing-lg) 0;
}

.equipment-table[b-e8xvennrlj] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

    .equipment-table thead[b-e8xvennrlj] {
        background: var(--gradient-primary);
        color: white;
    }

    .equipment-table th[b-e8xvennrlj],
    .equipment-table td[b-e8xvennrlj] {
        padding: var(--spacing-md);
        text-align: left;
        border-bottom: 1px solid var(--gray-100);
    }

    .equipment-table th[b-e8xvennrlj] {
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .equipment-table tr:last-child td[b-e8xvennrlj] {
        border-bottom: none;
    }

    .equipment-table tbody tr:hover[b-e8xvennrlj] {
        background: var(--gray-50);
        transition: background-color var(--transition-fast);
    }

    .equipment-table td:last-child[b-e8xvennrlj] {
        font-weight: 600;
        color: var(--primary-blue);
    }

/* ========== MONTANT TOTAL ========== */
.total-amount[b-e8xvennrlj] {
    color: white;
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    text-align: center;
}

    .total-amount h3[b-e8xvennrlj] {
        margin-bottom: var(--spacing-sm);
        color: white;
    }

.total-price[b-e8xvennrlj] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ========== PROCHAINES ÉTAPES ========== */
.next-steps[b-e8xvennrlj] {
    background: var(--success-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    border: 1px solid rgba(6, 214, 160, 0.2);
}

    .next-steps h3[b-e8xvennrlj] {
        color: var(--success-color);
        margin-bottom: var(--spacing-lg);
    }

    .next-steps ul[b-e8xvennrlj] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .next-steps li[b-e8xvennrlj] {
        position: relative;
        padding: var(--spacing-md) 0 var(--spacing-md) var(--spacing-2xl);
        margin-bottom: var(--spacing-sm);
        background: white;
        border-radius: var(--radius);
        border: 1px solid rgba(6, 214, 160, 0.1);
        transition: transform var(--transition-fast);
    }

        .next-steps li:hover[b-e8xvennrlj] {
            transform: translateX(5px);
            box-shadow: var(--shadow-sm);
        }

        .next-steps li[b-e8xvennrlj]::before {
            content: '✓';
            position: absolute;
            left: var(--spacing-md);
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: var(--success-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: bold;
        }

        .next-steps li:last-child[b-e8xvennrlj] {
            margin-bottom: 0;
        }

/* ========== BOUTONS D'ACTION ========== */
.action-buttons[b-e8xvennrlj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

    .action-buttons .btn[b-e8xvennrlj] {
        min-width: 180px;
        flex: 1;
        max-width: 250px;
    }

    /* Bouton spécifique au portail */
    .action-buttons .btn-primary[b-e8xvennrlj] {
        background: var(--gradient-primary);
        position: relative;
        overflow: hidden;
    }

        .action-buttons .btn-primary[b-e8xvennrlj]::after {
            content: '→';
            margin-left: var(--spacing-sm);
            transition: transform var(--transition-fast);
        }

        .action-buttons .btn-primary:hover[b-e8xvennrlj]::after {
            transform: translateX(3px);
        }

/* Bouton light spécifique */
.btn-light[b-e8xvennrlj] {
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

    .btn-light:hover[b-e8xvennrlj] {
        background: var(--gray-200);
        color: var(--text-primary);
        border-color: var(--gray-300);
    }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .result-container[b-e8xvennrlj] {
        padding: var(--spacing-lg) var(--spacing-sm);
        min-height: calc(100vh - 120px);
    }

    .result-box.success[b-e8xvennrlj],
    .result-box.error[b-e8xvennrlj] {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .result-box.loading[b-e8xvennrlj] {
        padding: var(--spacing-xl);
    }

    .result-icon[b-e8xvennrlj] {
        width: 64px;
        height: 64px;
    }

    .success-icon[b-e8xvennrlj],
    .error-icon[b-e8xvennrlj] {
        font-size: 1.5rem;
    }

    .result-box h1[b-e8xvennrlj] {
        font-size: 1.75rem;
    }

    .info-section[b-e8xvennrlj] {
        padding: var(--spacing-lg);
    }

    .order-details p[b-e8xvennrlj] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .equipment-table[b-e8xvennrlj] {
        font-size: 0.875rem;
    }

        .equipment-table th[b-e8xvennrlj],
        .equipment-table td[b-e8xvennrlj] {
            padding: var(--spacing-sm);
        }

    .action-buttons[b-e8xvennrlj] {
        flex-direction: column;
    }

        .action-buttons .btn[b-e8xvennrlj] {
            min-width: auto;
            max-width: none;
            width: 100%;
        }

    .total-price[b-e8xvennrlj] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .result-container[b-e8xvennrlj] {
        padding: var(--spacing-md) var(--spacing-xs);
    }

    .result-box.success[b-e8xvennrlj],
    .result-box.error[b-e8xvennrlj],
    .result-box.loading[b-e8xvennrlj] {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .result-box h1[b-e8xvennrlj] {
        font-size: 1.5rem;
    }

    .result-message[b-e8xvennrlj] {
        font-size: 1rem;
    }

    .info-section[b-e8xvennrlj] {
        padding: var(--spacing-md);
    }

    .equipment-table[b-e8xvennrlj] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .next-steps li[b-e8xvennrlj] {
        padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-xl);
    }
}

/* ========== ANIMATIONS SUPPLÉMENTAIRES ========== */

/* Animation pour les équipements */
.equipment-details[b-e8xvennrlj] {
    animation: slideInFromLeft-b-e8xvennrlj 0.6s ease-out 0.3s both;
}

@keyframes slideInFromLeft-b-e8xvennrlj {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* Animation pour les prochaines étapes */
.next-steps li[b-e8xvennrlj] {
    animation: fadeInUp 0.4s ease-out both;
}

    .next-steps li:nth-child(1)[b-e8xvennrlj] {
        animation-delay: 0.1s;
    }

    .next-steps li:nth-child(2)[b-e8xvennrlj] {
        animation-delay: 0.2s;
    }

    .next-steps li:nth-child(3)[b-e8xvennrlj] {
        animation-delay: 0.3s;
    }

/* Animation pour les boutons d'action */
.action-buttons .btn[b-e8xvennrlj] {
    animation: fadeInUp 0.5s ease-out both;
}

    .action-buttons .btn:nth-child(1)[b-e8xvennrlj] {
        animation-delay: 0.4s;
    }

    .action-buttons .btn:nth-child(2)[b-e8xvennrlj] {
        animation-delay: 0.5s;
    }

    .action-buttons .btn:nth-child(3)[b-e8xvennrlj] {
        animation-delay: 0.6s;
    }

/* ========== ACCESSIBILITÉ ========== */
@media (prefers-reduced-motion: reduce) {
    .result-box[b-e8xvennrlj],
    .equipment-details[b-e8xvennrlj],
    .next-steps li[b-e8xvennrlj],
    .action-buttons .btn[b-e8xvennrlj] {
        animation: none;
    }

    .success-icon[b-e8xvennrlj] {
        animation: none;
    }

    .spinner[b-e8xvennrlj] {
        animation: spin 2s linear infinite;
    }

    .result-box.loading[b-e8xvennrlj]::before {
        animation: none;
    }
}

/* Focus states pour l'accessibilité */
.result-box .btn:focus-visible[b-e8xvennrlj] {
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.3);
    outline: none;
}

/* ========== PRINT STYLES ========== */
@media print {
    .result-container[b-e8xvennrlj] {
        background: white;
        box-shadow: none;
    }

    .result-box[b-e8xvennrlj] {
        box-shadow: none;
        border: 1px solid #000;
    }

    .action-buttons[b-e8xvennrlj] {
        display: none;
    }

    .result-box[b-e8xvennrlj]::before {
        display: none;
    }

    .spinner[b-e8xvennrlj] {
        display: none;
    }
}
/* _content/Project2/Components/Pages/PrinterSupport.razor.rz.scp.css */
/* ===== PAGE SUPPORT LOCAL AGENT PRINTER - CSS ===== */

/* Container principal */
.support-page[b-3eah83r9yg] {
    min-height: 100vh;
    background: var(--bg-primary);
}

/* ===== HERO SECTION ===== */
.support-hero[b-3eah83r9yg] {
    position: relative;
    padding: 4rem 0 3rem;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.03) 0%, rgba(0, 180, 216, 0.03) 100%);
    border-bottom: 1px solid var(--border-color);
}

.hero-content[b-3eah83r9yg] {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-icon[b-3eah83r9yg] {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-xl);
    font-size: 2rem;
    color: var(--white);
    box-shadow: var(--shadow-colored);
    animation: pulse-b-3eah83r9yg 2s ease-in-out infinite;
}

@keyframes pulse-b-3eah83r9yg {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-colored);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 119, 182, 0.25);
    }
}

.hero-title[b-3eah83r9yg] {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-3eah83r9yg] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.6;
}

.hero-badges[b-3eah83r9yg] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.badge-item[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
}

    .badge-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .badge-item i[b-3eah83r9yg] {
        color: var(--primary-blue);
        font-size: 1.125rem;
    }

/* ===== CONTENT SECTION ===== */
.support-content[b-3eah83r9yg] {
    padding: 4rem 0;
}

.intro-text[b-3eah83r9yg] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

    .intro-text h2[b-3eah83r9yg] {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
    }

    .intro-text p[b-3eah83r9yg] {
        font-size: 1.125rem;
        color: var(--text-secondary);
    }

/* ===== FAQ LIST ===== */
.faq-list[b-3eah83r9yg] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* FAQ Item */
.faq-item[b-3eah83r9yg] {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

    .faq-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-md);
    }

    .faq-item.active[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-lg);
    }

/* FAQ Header */
.faq-header[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    cursor: pointer;
    transition: all var(--transition);
}

    .faq-header:hover[b-3eah83r9yg] {
        background: var(--bg-accent);
    }

.faq-icon[b-3eah83r9yg] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    flex-shrink: 0;
    box-shadow: var(--shadow-colored);
}

    .faq-icon.error[b-3eah83r9yg] {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

.faq-title[b-3eah83r9yg] {
    flex: 1;
}

    .faq-title h3[b-3eah83r9yg] {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-xs);
        color: var(--text-primary);
    }

.faq-status[b-3eah83r9yg] {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-accent);
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 20px;
}

.faq-toggle[b-3eah83r9yg] {
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all var(--transition);
}

.faq-item.active .faq-toggle[b-3eah83r9yg] {
    background: var(--primary-blue);
    color: var(--white);
    transform: rotate(180deg);
}

/* FAQ Content */
.faq-content[b-3eah83r9yg] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

    .faq-content.show[b-3eah83r9yg] {
        max-height: 10000px;
        border-top: 1px solid var(--border-color);
    }

/* Solution Steps */
.solution-steps[b-3eah83r9yg] {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Step Card */
.step-card[b-3eah83r9yg] {
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all var(--transition);
}

    .step-card:hover[b-3eah83r9yg] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.step-header[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.step-number[b-3eah83r9yg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--gradient-primary);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-header h4[b-3eah83r9yg] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.step-content[b-3eah83r9yg] {
    margin-bottom: var(--spacing-lg);
}

    .step-content p[b-3eah83r9yg] {
        color: var(--text-secondary);
        line-height: 1.7;
        margin-bottom: var(--spacing-md);
    }

/* Numbered List */
.numbered-list[b-3eah83r9yg] {
    list-style: none;
    counter-reset: step-counter;
    padding-left: 0;
    margin: var(--spacing-md) 0;
}

    .numbered-list li[b-3eah83r9yg] {
        counter-increment: step-counter;
        padding-left: 3rem;
        position: relative;
        margin-bottom: var(--spacing-md);
        color: var(--text-secondary);
        line-height: 1.6;
    }

        .numbered-list li[b-3eah83r9yg]::before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
            background: var(--primary-blue);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.875rem;
        }

/* Checklist */
.checklist[b-3eah83r9yg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.checklist-item[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition);
}

    .checklist-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-sm);
    }

    .checklist-item i[b-3eah83r9yg] {
        color: var(--primary-blue);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .checklist-item span[b-3eah83r9yg] {
        color: var(--text-primary);
        font-weight: 500;
        line-height: 1.5;
    }

/* Info Boxes */
.info-box[b-3eah83r9yg],
.warning-box[b-3eah83r9yg],
.success-box[b-3eah83r9yg] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    margin: var(--spacing-lg) 0;
}

.info-box[b-3eah83r9yg] {
    background: rgba(0, 119, 182, 0.05);
    border-left: 4px solid var(--primary-blue);
}

.warning-box[b-3eah83r9yg] {
    background: rgba(255, 183, 3, 0.05);
    border-left: 4px solid #ffb703;
}

.success-box[b-3eah83r9yg] {
    background: rgba(6, 214, 160, 0.05);
    border-left: 4px solid #06d6a0;
}

    .info-box i[b-3eah83r9yg],
    .warning-box i[b-3eah83r9yg],
    .success-box i[b-3eah83r9yg] {
        font-size: 1.25rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

.info-box i[b-3eah83r9yg] {
    color: var(--primary-blue);
}

.warning-box i[b-3eah83r9yg] {
    color: #ffb703;
}

.success-box i[b-3eah83r9yg] {
    color: #06d6a0;
}

.warning-box div[b-3eah83r9yg],
.info-box span[b-3eah83r9yg],
.success-box span[b-3eah83r9yg] {
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
}

.warning-box strong[b-3eah83r9yg] {
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--spacing-xs);
}

/* Alert Cards */
.alert-card[b-3eah83r9yg] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    border: 2px solid;
}

    .alert-card.warning[b-3eah83r9yg] {
        background: rgba(255, 183, 3, 0.05);
        border-color: #ffb703;
    }

    .alert-card.error[b-3eah83r9yg] {
        background: rgba(239, 68, 68, 0.05);
        border-color: #ef4444;
    }

    .alert-card.info[b-3eah83r9yg] {
        background: rgba(0, 119, 182, 0.05);
        border-color: var(--primary-blue);
    }

.alert-icon[b-3eah83r9yg] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-card.warning .alert-icon[b-3eah83r9yg] {
    background: #ffb703;
    color: var(--white);
}

.alert-card.error .alert-icon[b-3eah83r9yg] {
    background: #ef4444;
    color: var(--white);
}

.alert-card.info .alert-icon[b-3eah83r9yg] {
    background: var(--primary-blue);
    color: var(--white);
}

.alert-content h4[b-3eah83r9yg] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.alert-content p[b-3eah83r9yg] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Cable Checklist */
.cable-checklist[b-3eah83r9yg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.cable-item[b-3eah83r9yg] {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

    .cable-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.cable-icon[b-3eah83r9yg] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    flex-shrink: 0;
}

.cable-info h5[b-3eah83r9yg] {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.cable-info p[b-3eah83r9yg] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Test Steps */
.test-steps[b-3eah83r9yg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.test-item[b-3eah83r9yg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition);
}

    .test-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
    }

.test-number[b-3eah83r9yg] {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.test-item p[b-3eah83r9yg] {
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Step Image */
.step-image[b-3eah83r9yg] {
    margin-top: var(--spacing-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

    .step-image img[b-3eah83r9yg] {
        width: 100%;
        height: auto;
        display: block;
    }

/* ===== SUPPORT CONTACT SECTION ===== */
.support-contact-section[b-3eah83r9yg] {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 2px solid var(--border-color);
}

.support-contact-card[b-3eah83r9yg] {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    box-shadow: var(--shadow-xl);
    color: var(--white);
    text-align: center;
}

.contact-icon[b-3eah83r9yg] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-xl);
    font-size: 2rem;
    backdrop-filter: blur(10px);
}

.contact-content h3[b-3eah83r9yg] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--white);
}

.contact-content p[b-3eah83r9yg] {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-2xl);
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-contact[b-3eah83r9yg] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--white);
    color: var(--primary-blue);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all var(--transition);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

    .btn-contact:hover[b-3eah83r9yg] {
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    }

.contact-features[b-3eah83r9yg] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    flex-wrap: wrap;
}

.feature-badge[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

    .feature-badge i[b-3eah83r9yg] {
        font-size: 1.125rem;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .hero-title[b-3eah83r9yg] {
        font-size: 2.5rem;
    }

    .hero-badges[b-3eah83r9yg] {
        flex-direction: column;
        align-items: center;
    }

    .test-steps[b-3eah83r9yg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-features[b-3eah83r9yg] {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .support-hero[b-3eah83r9yg] {
        padding: 3rem 0 2rem;
    }

    .hero-icon[b-3eah83r9yg] {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .hero-title[b-3eah83r9yg] {
        font-size: 2rem;
    }

    .hero-description[b-3eah83r9yg] {
        font-size: 1.125rem;
    }

    .intro-text h2[b-3eah83r9yg] {
        font-size: 2rem;
    }

    .faq-header[b-3eah83r9yg] {
        padding: var(--spacing-lg);
        flex-wrap: wrap;
    }

    .faq-icon[b-3eah83r9yg] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .faq-title h3[b-3eah83r9yg] {
        font-size: 1.25rem;
    }

    .solution-steps[b-3eah83r9yg] {
        padding: var(--spacing-lg);
    }

    .step-card[b-3eah83r9yg] {
        padding: var(--spacing-lg);
    }

    .step-header[b-3eah83r9yg] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .numbered-list li[b-3eah83r9yg] {
        padding-left: 2.5rem;
    }

        .numbered-list li[b-3eah83r9yg]::before {
            width: 28px;
            height: 28px;
            font-size: 0.75rem;
        }

    .cable-item[b-3eah83r9yg] {
        flex-direction: column;
    }

    .test-steps[b-3eah83r9yg] {
        grid-template-columns: 1fr;
    }

    .support-contact-card[b-3eah83r9yg] {
        padding: var(--spacing-2xl);
    }

    .contact-icon[b-3eah83r9yg] {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .contact-content h3[b-3eah83r9yg] {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .hero-title[b-3eah83r9yg] {
        font-size: 1.75rem;
    }

    .badge-item[b-3eah83r9yg] {
        width: 100%;
        justify-content: center;
    }

    .faq-title[b-3eah83r9yg] {
        width: 100%;
    }

    .faq-toggle[b-3eah83r9yg] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .step-number[b-3eah83r9yg] {
        min-width: auto;
    }

    .alert-card[b-3eah83r9yg] {
        flex-direction: column;
        padding: var(--spacing-lg);
    }

    .btn-contact[b-3eah83r9yg] {
        width: 100%;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp-b-3eah83r9yg {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-item[b-3eah83r9yg] {
    animation: fadeInUp-b-3eah83r9yg 0.6s ease-out;
}

    .faq-item:nth-child(1)[b-3eah83r9yg] {
        animation-delay: 0.1s;
    }

    .faq-item:nth-child(2)[b-3eah83r9yg] {
        animation-delay: 0.2s;
    }

    .faq-item:nth-child(3)[b-3eah83r9yg] {
        animation-delay: 0.3s;
    }

    .faq-item:nth-child(4)[b-3eah83r9yg] {
        animation-delay: 0.4s;
    }

    .faq-item:nth-child(5)[b-3eah83r9yg] {
        animation-delay: 0.5s;
    }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    *[b-3eah83r9yg] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-icon[b-3eah83r9yg] {
        animation: none;
    }

    .faq-item[b-3eah83r9yg] {
        animation: none;
    }
}
/* _content/Project2/Components/Shared/AboutSection.razor.rz.scp.css */
:root[b-k8axto6kjx] {
    --bg-dark: #0a0a0a;
    --bg-card: rgba(20, 20, 20, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --accent-orange: #ff5c00;
    --accent-purple: #9d2bfb;
    --border-color: rgba(255, 255, 255, 0.1);
    --primary-gradient: linear-gradient(135deg, #ff5c00, #9d2bfb);
}

*[b-k8axto6kjx] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-k8axto6kjx] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
}

/* Section principale de présentation */
.company-presentation[b-k8axto6kjx] {
    padding: 6rem 2rem;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

    /* Arrière-plan animé avec effet mesh */
    .company-presentation[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        top: -30%;
        left: -20%;
        width: 70%;
        height: 160%;
        background: radial-gradient(ellipse at center, rgba(255, 92, 0, 0.1), transparent 60%);
        border-radius: 50%;
        animation: meshFloat-b-k8axto6kjx 25s ease-in-out infinite;
        z-index: 1;
    }

    .company-presentation[b-k8axto6kjx]::after {
        content: '';
        position: absolute;
        bottom: -20%;
        right: -15%;
        width: 60%;
        height: 140%;
        background: radial-gradient(ellipse at center, rgba(157, 43, 251, 0.08), transparent 60%);
        border-radius: 50%;
        animation: meshFloat-b-k8axto6kjx 30s ease-in-out infinite reverse;
        z-index: 1;
    }

/* Grille de fond subtile */
.grid-overlay[b-k8axto6kjx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    animation: gridShift-b-k8axto6kjx 20s linear infinite;
}

/* Particules RFID flottantes */
.rfid-particles[b-k8axto6kjx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.rfid-chip[b-k8axto6kjx] {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--accent-orange);
    border: 2px solid var(--accent-purple);
    border-radius: 4px;
    opacity: 0.4;
    animation: chipFloat-b-k8axto6kjx 12s linear infinite;
}

    .rfid-chip[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        background: var(--accent-purple);
        border-radius: 2px;
        transform: translate(-50%, -50%);
    }

/* Conteneur principal */
.presentation-container[b-k8axto6kjx] {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* En-tête de présentation */
.company-header[b-k8axto6kjx] {
    text-align: center;
    margin-bottom: 4rem;
    animation: slideDown-b-k8axto6kjx 1s ease-out;
}

.company-logo[b-k8axto6kjx] {
    width: 80px;
    height: 80px;
    background: var(--primary-gradient);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2rem;
    color: white;
    position: relative;
    animation: logoSpin-b-k8axto6kjx 3s ease-in-out infinite;
}

    .company-logo[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        inset: -4px;
        background: var(--primary-gradient);
        border-radius: 24px;
        opacity: 0.3;
        animation: logoGlow-b-k8axto6kjx 2s ease-in-out infinite;
    }

.company-title[b-k8axto6kjx] {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    animation: titleGlow-b-k8axto6kjx 4s ease-in-out infinite;
}

.company-subtitle[b-k8axto6kjx] {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.company-location[b-k8axto6kjx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--accent-orange);
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}

/* Grille de contenu principal */
.presentation-grid[b-k8axto6kjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
}

/* Section mission/vision */
.mission-section[b-k8axto6kjx] {
    animation: slideInLeft-b-k8axto6kjx 1s ease-out 0.3s both;
}

.mission-title[b-k8axto6kjx] {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    position: relative;
}

    .mission-title[b-k8axto6kjx]::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--primary-gradient);
        border-radius: 2px;
    }

.mission-text[b-k8axto6kjx] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.key-benefits[b-k8axto6kjx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit-item[b-k8axto6kjx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInRight-b-k8axto6kjx 0.8s ease-out forwards;
}

    .benefit-item:nth-child(1)[b-k8axto6kjx] {
        animation-delay: 0.8s;
    }

    .benefit-item:nth-child(2)[b-k8axto6kjx] {
        animation-delay: 1s;
    }

    .benefit-item:nth-child(3)[b-k8axto6kjx] {
        animation-delay: 1.2s;
    }

    .benefit-item:hover[b-k8axto6kjx] {
        background: rgba(255, 92, 0, 0.1);
        border-color: var(--accent-orange);
        transform: translateX(10px);
    }

.benefit-icon[b-k8axto6kjx] {
    width: 50px;
    height: 50px;
    background: var(--primary-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.benefit-text[b-k8axto6kjx] {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Section fondateur */
.founder-section[b-k8axto6kjx] {
    animation: slideInRight-b-k8axto6kjx 1s ease-out 0.5s both;
}

.founder-card[b-k8axto6kjx] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

    .founder-card[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
    }

    .founder-card:hover[b-k8axto6kjx] {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 92, 0, 0.3);
    }

.founder-avatar[b-k8axto6kjx] {
    width: 120px;
    height: 120px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    margin: 0 auto 1.5rem;
    position: relative;
    animation: avatarFloat-b-k8axto6kjx 4s ease-in-out infinite;
}

    .founder-avatar[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        inset: -6px;
        background: var(--primary-gradient);
        border-radius: 50%;
        opacity: 0.3;
        animation: avatarGlow-b-k8axto6kjx 3s ease-in-out infinite;
    }

.founder-name[b-k8axto6kjx] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 0.5rem;
}

.founder-title[b-k8axto6kjx] {
    font-size: 1rem;
    color: var(--accent-orange);
    text-align: center;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.founder-quote[b-k8axto6kjx] {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: center;
    position: relative;
    padding: 1rem 0;
}

    .founder-quote[b-k8axto6kjx]::before,
    .founder-quote[b-k8axto6kjx]::after {
        content: '"';
        font-size: 2rem;
        color: var(--accent-orange);
        font-weight: bold;
    }

/* Section technologies */
.tech-showcase[b-k8axto6kjx] {
    margin-top: 3rem;
    animation: fadeInUp-b-k8axto6kjx 1s ease-out 0.7s both;
}

.tech-title[b-k8axto6kjx] {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.tech-comparison[b-k8axto6kjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.tech-card[b-k8axto6kjx] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .tech-card.old-tech[b-k8axto6kjx] {
        border-color: rgba(255, 0, 0, 0.3);
    }

    .tech-card.new-tech[b-k8axto6kjx] {
        border-color: rgba(0, 255, 0, 0.3);
        background: rgba(0, 255, 0, 0.05);
    }

    .tech-card:hover[b-k8axto6kjx] {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

.tech-icon[b-k8axto6kjx] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.old-tech .tech-icon[b-k8axto6kjx] {
    background: linear-gradient(135deg, #ff4444, #cc0000);
}

.new-tech .tech-icon[b-k8axto6kjx] {
    background: var(--primary-gradient);
}

.tech-name[b-k8axto6kjx] {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.tech-features[b-k8axto6kjx] {
    list-style: none;
    text-align: left;
}

    .tech-features li[b-k8axto6kjx] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

.old-tech .tech-features li[b-k8axto6kjx]::before {
    content: '✗';
    color: #ff4444;
    font-weight: bold;
}

.new-tech .tech-features li[b-k8axto6kjx]::before {
    content: '✓';
    color: #00ff88;
    font-weight: bold;
}

/* Animations keyframes */
@keyframes meshFloat-b-k8axto6kjx {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-30px) rotate(2deg) scale(1.05);
    }

    50% {
        transform: translateY(-15px) rotate(0deg) scale(1);
    }

    75% {
        transform: translateY(-40px) rotate(-2deg) scale(0.95);
    }
}

@keyframes gridShift-b-k8axto6kjx {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(40px, 40px);
    }
}

@keyframes chipFloat-b-k8axto6kjx {
    0% {
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-10vh) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes slideDown-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

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

@keyframes slideInRight-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

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

@keyframes fadeInUp-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoSpin-b-k8axto6kjx {
    0%, 100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }
}

@keyframes logoGlow-b-k8axto6kjx {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes titleGlow-b-k8axto6kjx {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

@keyframes avatarFloat-b-k8axto6kjx {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes avatarGlow-b-k8axto6kjx {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .company-presentation[b-k8axto6kjx] {
        padding: 3rem 1rem;
    }

    .company-title[b-k8axto6kjx] {
        font-size: 2.5rem;
    }

    .presentation-grid[b-k8axto6kjx] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .tech-comparison[b-k8axto6kjx] {
        grid-template-columns: 1fr;
    }

    .founder-card[b-k8axto6kjx] {
        padding: 2rem;
    }
}
/* _content/Project2/Components/Shared/Contact.razor.rz.scp.css */
/* ==========================================
   CONTACT PAGE - STYLES SPÉCIFIQUES
   ========================================== */

/* Section Contact - utilise les classes générales avec quelques surcharges */
.contact[b-ot8np61o95] {
    margin-top: 40px;
    padding-top:100px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .contact[b-ot8np61o95] {
        margin-top: 100px;
    }
}

/* Effets décoratifs spécifiques au contact */
.contact[b-ot8np61o95]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
    opacity: 0.6;
}

.contact[b-ot8np61o95]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 183, 3, 0.05) 0%, transparent 50%), 
                radial-gradient(circle at 80% 20%, rgba(94, 96, 206, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Grid Contact */
.contact-grid[b-ot8np61o95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
}

/* Contact Info - utilise le système de cards général */
.contact-info[b-ot8np61o95] {
    position: sticky;
    top: 2rem;
}

.contact-details[b-ot8np61o95] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.contact-details li[b-ot8np61o95] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    transition: all var(--transition);
    backdrop-filter: blur(10px);
}

.contact-details li:hover[b-ot8np61o95] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 183, 3, 0.3);
    transform: translateX(5px);
}

/* Contact Icons */
.contact-icon[b-ot8np61o95] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-colored);
}

.contact-detail-content h4[b-ot8np61o95] {
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
    font-weight: 600;
}

.contact-detail-content span[b-ot8np61o95] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Form spécifique - étend les styles généraux */
.contact-form[b-ot8np61o95] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    position: relative;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
}

.contact-form[b-ot8np61o95]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 183, 3, 0.5), transparent);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Form Row - grille pour les champs côte à côte */
.form-row[b-ot8np61o95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* Styles pour les inputs avec effet glassmorphism */
.contact-form input[b-ot8np61o95],
.contact-form select[b-ot8np61o95],
.contact-form textarea[b-ot8np61o95] {
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    color: var(--text-white);
    font-size: 0.9rem;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
    font-family: inherit;
    box-sizing: border-box;
}

.contact-form input:focus[b-ot8np61o95],
.contact-form select:focus[b-ot8np61o95],
.contact-form textarea:focus[b-ot8np61o95] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
}

/* Select spécifique */
.contact-form select[b-ot8np61o95] {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 20 20\'%3e%3cpath stroke=\'%23ffffff\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M6 8l4 4 4-4\'/%3e%3c/svg%3e');
    background-position: right var(--spacing-md) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 3rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.contact-form select option[b-ot8np61o95] {
    background-color: var(--gray-800);
    color: var(--text-white);
}

/* Textarea spécifique */
.contact-form textarea[b-ot8np61o95] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Checkbox groups */
.checkbox-group[b-ot8np61o95] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.checkbox-group input[type="checkbox"][b-ot8np61o95] {
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    accent-color: var(--accent-orange);
    flex-shrink: 0;
    cursor: pointer;
}

.checkbox-group label[b-ot8np61o95] {
    font-size: 0.8rem;
    line-height: 1.5;
    cursor: pointer;
    color: var(--text-secondary);
    margin: 0;
}

/* Submit button - étend le système de boutons général */
.submit-btn[b-ot8np61o95] {
    width: 100%;
    padding: 1.25rem var(--spacing-xl);
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-colored);
}

.submit-btn:hover[b-ot8np61o95] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.submit-btn:disabled[b-ot8np61o95] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Messages d'alerte - utilisent les couleurs du root */
.alert-danger[b-ot8np61o95] {
    background: rgba(255, 93, 143, 0.2);
    border: 2px solid rgba(255, 93, 143, 0.4);
    color: var(--accent-pink);
}

.alert-success[b-ot8np61o95] {
    background: rgba(6, 214, 160, 0.2);
    border: 2px solid rgba(6, 214, 160, 0.4);
    color: var(--accent-green);
}

/* Animation pour les alertes */
@keyframes slideIn-b-ot8np61o95 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section title - utilise les styles généraux */
.section-title[b-ot8np61o95] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-3xl);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-grid[b-ot8np61o95] {
        gap: var(--spacing-2xl);
    }
    
    .section-title[b-ot8np61o95] {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .contact-grid[b-ot8np61o95] {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .contact-info[b-ot8np61o95] {
        position: static;
    }
    
    .form-row[b-ot8np61o95] {
        grid-template-columns: 1fr;
    }
    
    .contact-details[b-ot8np61o95] {
        gap: var(--spacing-md);
    }
    
    .contact-details li[b-ot8np61o95] {
        padding: var(--spacing-md);
    }
    
    .contact-icon[b-ot8np61o95] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .section-title[b-ot8np61o95] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .contact[b-ot8np61o95] {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .contact-form[b-ot8np61o95] {
        padding: var(--spacing-lg);
    }
    
    .section-title[b-ot8np61o95] {
        font-size: 1.8rem;
    }
}

.subscription-hero[b-ot8np61o95] {
    position: relative;
    padding: 8rem 0 0rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.02) 0%, rgba(0, 180, 216, 0.02) 100%);
    border-bottom: 1px solid var(--border-color);
}

.hero-content[b-ot8np61o95] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title[b-ot8np61o95] {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-ot8np61o95] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
/* _content/Project2/Components/Shared/Croissance.razor.rz.scp.css */
/* CSS PRÉSENTATION PRODUIT UNIQUE - LECTURE VERTICALE - VERSION COMPLÈTE */
/* Utilise les variables et classes déjà définies dans app.css */

/* SECTION PRINCIPALE */
.product-presentation-section[b-jmnooi2e36] {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
    position: relative;
}

.presentation-container[b-jmnooi2e36] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

/* HEADER DE PRÉSENTATION */
.presentation-header[b-jmnooi2e36] {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.main-title[b-jmnooi2e36] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
}

.company-badge[b-jmnooi2e36] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-colored);
    margin-bottom: var(--spacing-lg);
}

.presentation-intro[b-jmnooi2e36] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* LAYOUT PRINCIPAL DEUX SECTIONS DISTINCTES */
.main-content-layout[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: var(--spacing-3xl);
    align-items: start;
}

/* SECTION FEATURES REGROUPÉE (GAUCHE) */
.features-section[b-jmnooi2e36] {
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.features-section-header[b-jmnooi2e36] {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    border-bottom: 1px solid rgba(0, 119, 182, 0.2);
    padding-bottom: var(--spacing-lg);
}

.features-title[b-jmnooi2e36] {
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-md);
}

.features-subtitle[b-jmnooi2e36] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.features-list[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* SECTION SHOWCASE PRODUIT (DROITE) */
.product-showcase-section[b-jmnooi2e36] {
    position: sticky;
    top: var(--spacing-xl);
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.product-showcase-header[b-jmnooi2e36] {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 119, 182, 0.2);
    padding-bottom: var(--spacing-lg);
}

.showcase-title[b-jmnooi2e36] {
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
}

.showcase-subtitle[b-jmnooi2e36] {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
}

/* ITEMS FEATURES */
.feature-item[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition);
    position: relative;
    border-left: 4px solid var(--primary-blue);
}

    .feature-item:hover[b-jmnooi2e36] {
        transform: translateX(15px);
        box-shadow: var(--shadow-lg);
        border-left-width: 6px;
    }

/* VISUEL FEATURE */
.feature-visual[b-jmnooi2e36] {
    position: relative;
}

.feature-image-container[b-jmnooi2e36] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.feature-image[b-jmnooi2e36] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition);
}

.feature-overlay[b-jmnooi2e36] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition);
    border-radius: var(--radius-lg);
}

.feature-item:hover .feature-overlay[b-jmnooi2e36] {
    opacity: 1;
}

.feature-overlay i[b-jmnooi2e36] {
    font-size: 2rem;
    color: var(--text-white);
}

/* CONTENU FEATURE */
.feature-content[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feature-header[b-jmnooi2e36] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .feature-header h3[b-jmnooi2e36] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-blue);
        margin: 0;
    }

.feature-number[b-jmnooi2e36] {
    background: var(--gradient-primary);
    color: var(--text-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
}

    .feature-number.featured[b-jmnooi2e36] {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    }

.feature-content p[b-jmnooi2e36] {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.feature-highlights[b-jmnooi2e36] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.highlight-tag[b-jmnooi2e36] {
    background: rgba(0, 119, 182, 0.1);
    color: var(--primary-blue);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(0, 119, 182, 0.2);
}

    .highlight-tag.featured[b-jmnooi2e36] {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
        color: #CC8400;
        border-color: rgba(255, 215, 0, 0.3);
    }

/* COLONNE VISUEL PRODUIT */
.main-product-showcase[b-jmnooi2e36] {
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
}

/* IMAGE PRINCIPALE PRODUIT */
.product-main-image[b-jmnooi2e36] {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.main-product-img[b-jmnooi2e36] {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.product-badge[b-jmnooi2e36] {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: var(--shadow-md);
}

/* STATISTIQUES PRODUIT */
.product-stats[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card[b-jmnooi2e36] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all var(--transition);
}

    .stat-card:hover[b-jmnooi2e36] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.stat-icon[b-jmnooi2e36] {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.stat-content[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-jmnooi2e36] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
}

.stat-label[b-jmnooi2e36] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* STACK TECHNOLOGIQUE */
.tech-stack[b-jmnooi2e36] {
    border-top: 1px solid rgba(0, 119, 182, 0.2);
    padding-top: var(--spacing-lg);
}

.tech-stack-header h4[b-jmnooi2e36] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.tech-items[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.tech-item[b-jmnooi2e36] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-accent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

    .tech-item i[b-jmnooi2e36] {
        color: var(--primary-blue);
        font-size: 1rem;
        flex-shrink: 0;
    }

    .tech-item span[b-jmnooi2e36] {
        color: var(--text-secondary);
        font-weight: 500;
    }

/* SECTION CTA AVEC IMAGE - MOBILE FRIENDLY */
.cta-section-with-image[b-jmnooi2e36] {
    margin-top: var(--spacing-3xl);
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.cta-content-grid[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.cta-text-content[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.cta-image-section[b-jmnooi2e36] {
    position: relative;
}

.cta-image-container[b-jmnooi2e36] {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.cta-image[b-jmnooi2e36] {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.success-badge[b-jmnooi2e36] {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-md);
}

.cta-title[b-jmnooi2e36] {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.cta-subtitle[b-jmnooi2e36] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.cta-buttons[b-jmnooi2e36] {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ANIMATIONS SPÉCIFIQUES À LA PAGE */
@keyframes fadeInRight-b-jmnooi2e36 {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

.feature-item:nth-child(1)[b-jmnooi2e36] {
    animation: fadeInRight-b-jmnooi2e36 0.6s ease-out 0.1s both;
}

.feature-item:nth-child(2)[b-jmnooi2e36] {
    animation: fadeInRight-b-jmnooi2e36 0.6s ease-out 0.2s both;
}

.feature-item:nth-child(3)[b-jmnooi2e36] {
    animation: fadeInRight-b-jmnooi2e36 0.6s ease-out 0.3s both;
}

@keyframes fadeInUp-b-jmnooi2e36 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE DESIGN COMPLET */

/* Large Desktop */
@media (max-width: 1200px) {
    .main-content-layout[b-jmnooi2e36] {
        grid-template-columns: 1fr 400px;
        gap: var(--spacing-2xl);
    }

    .product-stats[b-jmnooi2e36] {
        grid-template-columns: 1fr;
    }

    .tech-items[b-jmnooi2e36] {
        grid-template-columns: 1fr;
    }

    .cta-content-grid[b-jmnooi2e36] {
        gap: var(--spacing-2xl);
        max-width: 900px;
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 2.25rem;
    }

    .cta-image[b-jmnooi2e36] {
        height: 250px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .main-content-layout[b-jmnooi2e36] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .product-showcase-section[b-jmnooi2e36] {
        position: static;
        order: -1;
        max-width: 500px;
        margin: 0 auto var(--spacing-2xl);
    }

    .feature-item[b-jmnooi2e36] {
        grid-template-columns: 100px 1fr;
        gap: var(--spacing-lg);
    }

    .feature-image-container[b-jmnooi2e36] {
        width: 80px;
        height: 80px;
    }

    .cta-section-with-image[b-jmnooi2e36] {
        padding: var(--spacing-xl);
    }

    .cta-content-grid[b-jmnooi2e36] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
    }

    .cta-image-section[b-jmnooi2e36] {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 2rem;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 1rem;
    }

    .cta-buttons[b-jmnooi2e36] {
        justify-content: center;
    }

    .cta-image[b-jmnooi2e36] {
        height: 200px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .main-title[b-jmnooi2e36] {
        font-size: 2.5rem;
    }

    .feature-item[b-jmnooi2e36] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-md);
    }

    .feature-header[b-jmnooi2e36] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .feature-image-container[b-jmnooi2e36] {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .product-stats[b-jmnooi2e36] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .cta-section-with-image[b-jmnooi2e36] {
        margin-top: var(--spacing-2xl);
        padding: var(--spacing-lg);
        animation: fadeInUp-b-jmnooi2e36 0.6s ease-out;
    }

    .cta-content-grid[b-jmnooi2e36] {
        gap: var(--spacing-xl);
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 1.875rem;
        margin-bottom: var(--spacing-sm);
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-lg);
    }

    .cta-buttons[b-jmnooi2e36] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

        .cta-buttons .btn[b-jmnooi2e36] {
            width: 100%;
            justify-content: center;
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: 0.95rem;
        }

        .cta-buttons .btn-large[b-jmnooi2e36] {
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: 1rem;
        }

    .cta-image-section[b-jmnooi2e36] {
        max-width: 100%;
        animation: fadeInUp-b-jmnooi2e36 0.6s ease-out 0.2s both;
    }

    .cta-text-content[b-jmnooi2e36] {
        animation: fadeInUp-b-jmnooi2e36 0.6s ease-out 0.1s both;
    }

    .cta-image[b-jmnooi2e36] {
        height: 180px;
    }

    .success-badge[b-jmnooi2e36] {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.8rem;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .main-title[b-jmnooi2e36] {
        font-size: 2rem;
    }

    .presentation-container[b-jmnooi2e36] {
        padding: 0 var(--spacing-md);
    }

    .feature-item[b-jmnooi2e36] {
        padding: var(--spacing-lg);
    }

    .main-product-showcase[b-jmnooi2e36] {
        padding: var(--spacing-lg);
    }

    .product-stats[b-jmnooi2e36] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-jmnooi2e36] {
        padding: var(--spacing-sm);
    }

    .cta-section-with-image[b-jmnooi2e36] {
        padding: var(--spacing-md);
        margin-top: var(--spacing-xl);
    }

    .cta-content-grid[b-jmnooi2e36] {
        gap: var(--spacing-lg);
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 1.625rem;
        line-height: 1.3;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .cta-text-content[b-jmnooi2e36] {
        gap: var(--spacing-md);
    }

    .cta-buttons[b-jmnooi2e36] {
        gap: var(--spacing-sm);
    }

    .cta-image[b-jmnooi2e36] {
        height: 150px;
    }

    .success-badge[b-jmnooi2e36] {
        position: static;
        margin-bottom: var(--spacing-sm);
        align-self: flex-start;
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .cta-image-container[b-jmnooi2e36] {
        display: flex;
        flex-direction: column;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .cta-title[b-jmnooi2e36] {
        font-size: 1.5rem;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.8rem;
    }

    .cta-image[b-jmnooi2e36] {
        height: 120px;
    }

    .success-badge[b-jmnooi2e36] {
        font-size: 0.7rem;
        padding: 4px var(--spacing-xs);
    }
}

/* Very Small Mobile */
@media (max-width: 320px) {
    .cta-section-with-image[b-jmnooi2e36] {
        padding: var(--spacing-sm);
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 1.375rem;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.75rem;
    }

    .cta-image[b-jmnooi2e36] {
        height: 100px;
    }

    .cta-buttons .btn[b-jmnooi2e36] {
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* Accessibilité - Réduction des animations */
@media (prefers-reduced-motion: reduce) {
    .feature-item[b-jmnooi2e36] {
        animation: none !important;
    }

        .feature-item:hover[b-jmnooi2e36],
        .stat-card:hover[b-jmnooi2e36] {
            transform: none !important;
        }

    .cta-section-with-image[b-jmnooi2e36],
    .cta-image-section[b-jmnooi2e36],
    .cta-text-content[b-jmnooi2e36] {
        animation: none !important;
    }
}
/* _content/Project2/Components/Shared/Footer.razor.rz.scp.css */
/* Footer - Version Professionnelle */

.footer[b-dab5thiboo] {
    background: var(--bg-secondary);
    padding: var(--spacing-3xl) 0 var(--spacing-md);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

    .footer[b-dab5thiboo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
        opacity: 0.6;
    }

    .footer[b-dab5thiboo]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 80%, rgba(27, 112, 140, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(74, 144, 164, 0.04) 0%, transparent 50%);
        pointer-events: none;
        z-index: 1;
    }

/* Contenu principal */
.footer-content[b-dab5thiboo] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: var(--spacing-3xl);
    position: relative;
    z-index: 2;
    align-items: start;
}

/* Sections du footer */
.footer-section[b-dab5thiboo] {
    transition: all var(--transition);
    position: relative;
}

    .footer-section:hover[b-dab5thiboo] {
        transform: translateY(-2px);
    }

    /* Titres de section */
    .footer-section h3[b-dab5thiboo] {
        color: var(--text-primary);
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: var(--spacing-lg);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        position: relative;
        padding-bottom: var(--spacing-md);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

        .footer-section h3[b-dab5thiboo]::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background: var(--gradient-primary);
            border-radius: var(--radius-sm);
        }

/* Logo d'entreprise */
.company-logo[b-dab5thiboo] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

    .company-logo .logo[b-dab5thiboo] {
        display: flex;
        align-items: center;
        text-decoration: none;
        transition: all var(--transition);
    }

        .company-logo .logo img[b-dab5thiboo] {
            height: 85px;
            width: auto;
            transition: all var(--transition);
            /* Garde l'image originale - pas de filtre */
        }

        .company-logo .logo:hover img[b-dab5thiboo] {
            transform: scale(1.05);
        }

/* Texte de description */
.footer-section p[b-dab5thiboo] {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
    font-size: 1rem;
    transition: all var(--transition);
}

.footer-section:hover p[b-dab5thiboo] {
    color: var(--text-primary);
}

/* Liste de navigation */
.footer-section ul[b-dab5thiboo] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li[b-dab5thiboo] {
    margin-bottom: var(--spacing-sm);
}

.footer-section a[b-dab5thiboo] {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    transition: all var(--transition);
    position: relative;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
}

    .footer-section a[b-dab5thiboo]::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background: var(--gradient-primary);
        border-radius: var(--radius-sm);
        transition: all var(--transition);
    }

    .footer-section a:hover[b-dab5thiboo] {
        color: var(--primary-blue);
        transform: translateX(8px);
        padding-left: var(--spacing-md);
    }

        .footer-section a:hover[b-dab5thiboo]::before {
            height: 20px;
        }

    /* Icônes dans les liens de navigation */
    .footer-section a i[b-dab5thiboo] {
        font-size: 0.9rem;
        width: 16px;
        text-align: center;
        color: var(--primary-blue);
        transition: all var(--transition);
    }

    .footer-section a:hover i[b-dab5thiboo] {
        transform: scale(1.1);
        color: var(--primary-blue-dark);
    }

/* Liens sociaux */
.social-links[b-dab5thiboo] {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

    .social-links a[b-dab5thiboo] {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        border: 2px solid var(--border-color);
        color: var(--text-secondary);
        transition: all var(--transition);
        padding: 0 !important;
        font-size: 1.2rem;
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }

        .social-links a:hover[b-dab5thiboo] {
            background: var(--gradient-primary);
            border-color: transparent;
            color: var(--text-white);
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
            padding-left: 0 !important;
        }

        .social-links a i[b-dab5thiboo] {
            transition: all var(--transition);
            transform: scale(1);
        }

        .social-links a:hover i[b-dab5thiboo] {
            transform: scale(1.15);
        }

        /* Réinitialiser les styles par défaut des liens sociaux */
        .social-links a[b-dab5thiboo]::before {
            display: none !important;
        }

/* Informations de contact avec icônes */
.footer-section p i[b-dab5thiboo] {
    color: var(--primary-blue);
    margin-right: var(--spacing-sm);
    font-size: 1.1rem;
    transition: all var(--transition);
    width: 20px;
    text-align: center;
}

.footer-section:hover p i[b-dab5thiboo] {
    transform: scale(1.1);
}

.footer-section p strong[b-dab5thiboo] {
    color: var(--text-primary);
    font-weight: 600;
}

.footer-section p a[b-dab5thiboo] {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: all var(--transition);
    padding: 0 !important;
    gap: 0 !important;
}

    .footer-section p a:hover[b-dab5thiboo] {
        color: var(--primary-blue) !important;
        transform: none !important;
        padding-left: 0 !important;
    }

    .footer-section p a[b-dab5thiboo]::before {
        display: none !important;
    }

/* Footer bottom */
.footer-bottom[b-dab5thiboo] {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md);
    margin-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

    .footer-bottom[b-dab5thiboo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 1px;
        background: var(--gradient-primary);
    }

    .footer-bottom p[b-dab5thiboo] {
        color: var(--text-muted);
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        margin: 0;
        opacity: 0.9;
        font-weight: 300;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .footer-content[b-dab5thiboo] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-xl);
        max-width: 900px;
    }

    .footer[b-dab5thiboo] {
        padding: var(--spacing-2xl) 0 var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .footer[b-dab5thiboo] {
        padding: var(--spacing-xl) 0 var(--spacing-md);
    }

    .footer-content[b-dab5thiboo] {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-lg);
    }

    .footer-section[b-dab5thiboo] {
        text-align: center;
    }

        .footer-section h3[b-dab5thiboo] {
            justify-content: center;
            font-size: 1.2rem;
        }

            .footer-section h3[b-dab5thiboo]::after {
                left: 50%;
                transform: translateX(-50%);
                width: 40px;
            }

    .social-links[b-dab5thiboo] {
        justify-content: center;
    }

    .footer-section a[b-dab5thiboo] {
        justify-content: center;
        padding-left: 0;
    }

        .footer-section a:hover[b-dab5thiboo] {
            transform: translateY(-2px);
            padding-left: 0;
        }

        .footer-section a[b-dab5thiboo]::before {
            display: none;
        }

    .company-logo .logo img[b-dab5thiboo] {
        height: 70px;
    }
}

@media (max-width: 480px) {
    .footer[b-dab5thiboo] {
        padding: var(--spacing-lg) 0 var(--spacing-md);
    }

    .footer-content[b-dab5thiboo] {
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-md);
    }

    .footer-section h3[b-dab5thiboo] {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }

        .footer-section h3[b-dab5thiboo]::after {
            width: 30px;
            height: 2px;
        }

    .company-logo .logo img[b-dab5thiboo] {
        height: 60px;
    }

    .footer-section p[b-dab5thiboo],
    .footer-section a[b-dab5thiboo] {
        font-size: 0.9rem;
    }

    .social-links a[b-dab5thiboo] {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .footer-bottom[b-dab5thiboo] {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    }

        .footer-bottom p[b-dab5thiboo] {
            font-size: 0.85rem;
        }
}

/* Animation d'entrée subtile */
@keyframes fadeInUp-b-dab5thiboo {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-section[b-dab5thiboo] {
    animation: fadeInUp-b-dab5thiboo 0.6s ease-out;
}

    .footer-section:nth-child(1)[b-dab5thiboo] {
        animation-delay: 0.1s;
    }

    .footer-section:nth-child(2)[b-dab5thiboo] {
        animation-delay: 0.2s;
    }

    .footer-section:nth-child(3)[b-dab5thiboo] {
        animation-delay: 0.3s;
    }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .footer-section[b-dab5thiboo],
    .footer-section a[b-dab5thiboo],
    .social-links a[b-dab5thiboo],
    .social-links a i[b-dab5thiboo],
    .company-logo .logo img[b-dab5thiboo] {
        animation: none;
        transition: none;
    }

        .footer-section:hover[b-dab5thiboo],
        .footer-section a:hover[b-dab5thiboo],
        .social-links a:hover[b-dab5thiboo],
        .company-logo .logo:hover img[b-dab5thiboo] {
            transform: none;
        }
}

/* Focus states pour l'accessibilité */
.footer-section a:focus-visible[b-dab5thiboo],
.social-links a:focus-visible[b-dab5thiboo] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* Effet de survol global sur le footer */
.footer-section:hover h3[b-dab5thiboo] {
    color: var(--primary-blue);
}

    .footer-section:hover h3[b-dab5thiboo]::after {
        width: 60px;
        transition: width 0.4s ease;
    }
/* _content/Project2/Components/Shared/GlobalNavigation.razor.rz.scp.css */
/* Navigation - Version Professionnelle avec effet transparent */

.navbar[b-mnx9jgdq83] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(22, 22, 22, 0.4);
    backdrop-filter: blur(20px);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

    /* États de visibilité pour la navbar */
    .navbar.visible[b-mnx9jgdq83] {
        transform: translateY(0);
        opacity: 1;
    }

    .navbar.hidden[b-mnx9jgdq83] {
        transform: translateY(-100%);
        opacity: 0;
    }

    /* État scrollé - fond plus opaque mais toujours avec effet glass */
    .navbar.scrolled[b-mnx9jgdq83] {
        background-color: rgba(22, 22,22, 0.4);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }

        .navbar.scrolled.visible[b-mnx9jgdq83] {
            transform: translateY(0);
            opacity: 1;
        }

    /* Empêcher le masquage quand le menu mobile est ouvert */
    .navbar.menu-open[b-mnx9jgdq83] {
        transform: translateY(0) !important;
        opacity: 1 !important;
        background-color: rgba(255, 255, 255, 0.98);
    }

/* Conteneur principal */
.nav-container[b-mnx9jgdq83] {
    width: 100%;
    max-width: var(--max-width-site);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-xl);
    gap: var(--spacing-xl);
    min-height: 70px;
}

/* Section Logo */
.logo-section[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.logo[b-mnx9jgdq83] {
    color: var(--text-primary);
    font-size: 1.6rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all var(--transition);
    filter: invert(100%);
}

    .logo img[b-mnx9jgdq83] {
        height: 70px;
        vertical-align: middle;
        transition: all var(--transition);
        /* Pas de filtre par défaut - garde l'image originale */
    }

    .logo:hover[b-mnx9jgdq83] {
        color: var(--primary-blue);
        transform: scale(1.05);
    }

/* Navigation principale */
.nav-section[b-mnx9jgdq83] {
    background-color: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    position: relative;
    flex-grow: 1;
    max-width: 600px;
}

.nav-links[b-mnx9jgdq83] {
    display: flex;
    list-style: none;
    gap: var(--spacing-xl);
    margin: 0;
    padding: 0;
    align-items: center;
}

    .nav-links a[b-mnx9jgdq83] {
        color: white;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        padding: var(--spacing-sm) 0;
        cursor: pointer;
        transition: all var(--transition);
        white-space: nowrap;
    }

        .nav-links a[b-mnx9jgdq83]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: width var(--transition);
        }

        .nav-links a:hover[b-mnx9jgdq83]::after {
            width: 100%;
        }

        .nav-links a:hover[b-mnx9jgdq83] {
            color: var(--primary-blue);
            transform: translateY(-2px);
        }

        .nav-links a.active[b-mnx9jgdq83]::after {
            width: 100%;
            background: var(--primary-blue);
        }

        .nav-links a.active[b-mnx9jgdq83] {
            color: var(--primary-blue);
        }

/* Contrôles du header */
.header-controls[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    z-index: 1001;
    flex-shrink: 0;
}

/* Bouton Espace Client */
.client-area-btn[b-mnx9jgdq83] {
    background: var(--gradient-primary);
    color: var(--text-white);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
    border: 1px solid transparent;
    cursor: pointer;
}

    .client-area-btn:hover[b-mnx9jgdq83] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        filter: brightness(1.1);
    }

    .client-area-btn:active[b-mnx9jgdq83] {
        transform: translateY(-1px);
    }

.client-icon[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .client-icon svg[b-mnx9jgdq83] {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

/* Sélecteur de langue */
.language-selector[b-mnx9jgdq83] {
    position: relative;
}

.language-dropdown[b-mnx9jgdq83] {
    position: relative;
    display: inline-block;
}

.language-toggle[b-mnx9jgdq83] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

    .language-toggle:hover[b-mnx9jgdq83] {
        background: rgba(27, 112, 140, 0.2);
        border-color: var(--primary-blue);
        transform: translateY(-2px);
    }

    .language-toggle[b-mnx9jgdq83]::after {
        content: '▼';
        font-size: 0.6rem;
        transition: transform var(--transition);
    }

    .language-toggle.active[b-mnx9jgdq83]::after {
        transform: rotate(180deg);
    }

.language-menu[b-mnx9jgdq83] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-top: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition);
    box-shadow: var(--shadow-lg);
    z-index: 1002;
    min-width: 120px;
}

    .language-menu.active[b-mnx9jgdq83] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.language-option[b-mnx9jgdq83] {
    padding: var(--spacing-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

    .language-option:hover[b-mnx9jgdq83] {
        background: var(--accent-light);
        color: var(--primary-blue);
    }

    .language-option.selected[b-mnx9jgdq83] {
        background: var(--accent-light);
        color: var(--primary-blue);
    }

    .language-option:first-child[b-mnx9jgdq83] {
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .language-option:last-child[b-mnx9jgdq83] {
        border-radius: 0 0 var(--radius) var(--radius);
    }

/* Drapeaux */
.flag-icon[b-mnx9jgdq83] {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.flag-fr[b-mnx9jgdq83] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23002654"/><rect x="1" width="1" height="2" fill="%23fff"/><rect x="2" width="1" height="2" fill="%23ce1126"/></svg>');
}

.flag-de[b-mnx9jgdq83] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3"><rect width="5" height="1" fill="%23000"/><rect y="1" width="5" height="1" fill="%23dd0000"/><rect y="2" width="5" height="1" fill="%23ffce00"/></svg>');
}

.flag-en[b-mnx9jgdq83] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="s"><path d="M0,0 v30 h60 v-30 z"/></clipPath><clipPath id="t"><path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/></clipPath><g clip-path="url(%23s)"><path d="M0,0 v30 h60 v-30 z" fill="%23012169"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(%23t)" stroke="%23C8102E" stroke-width="4"/><path d="M30,0 v30 M0,15 h60" stroke="%23fff" stroke-width="10"/><path d="M30,0 v30 M0,15 h60" stroke="%23C8102E" stroke-width="6"/></g></svg>');
}

/* Menu toggle pour mobile - CORRIGÉ */
.menu-toggle[b-mnx9jgdq83] {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: 1030; /* Z-index élevé pour rester au-dessus */
    position: relative;
    background: rgba(255, 255, 255, 0.05); /* Fond léger pour la visibilité */
    backdrop-filter: blur(10px);
    border-radius: 8px;
    transition: all var(--transition);
}

    .menu-toggle span[b-mnx9jgdq83] {
        width: 20px;
        height: 2px;
        background-color: white; /* Couleur blanche par défaut */
        margin: 2px 0;
        transition: var(--transition);
        border-radius: 2px;
    }

    .menu-toggle.active span:nth-child(1)[b-mnx9jgdq83] {
        transform: rotate(-45deg) translate(-4px, 5px);
        background-color: var(--text-primary); /* Couleur sombre quand actif */
    }

    .menu-toggle.active span:nth-child(2)[b-mnx9jgdq83] {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3)[b-mnx9jgdq83] {
        transform: rotate(45deg) translate(-4px, -5px);
        background-color: var(--text-primary); /* Couleur sombre quand actif */
    }

/* Éléments mobiles cachés par défaut */
.mobile-client-area[b-mnx9jgdq83],
.mobile-language-selector[b-mnx9jgdq83] {
    display: none;
}

/* Animation pulse pour le bouton client */
@keyframes pulse-b-mnx9jgdq83 {
    0% {
        box-shadow: var(--shadow-md);
    }

    50% {
        box-shadow: var(--shadow-lg);
    }

    100% {
        box-shadow: var(--shadow-md);
    }
}

.client-area-btn[b-mnx9jgdq83] {
    animation: pulse-b-mnx9jgdq83 3s infinite;
}

    .client-area-btn:hover[b-mnx9jgdq83] {
        animation: none;
    }

/* Animation pour l'apparition des éléments du menu mobile */
@keyframes slideIn-b-mnx9jgdq83 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Amélioration des transitions */
.language-dropdown:hover .language-toggle[b-mnx9jgdq83] {
    background: rgba(27, 112, 140, 0.2);
    border-color: var(--primary-blue);
}

/* Responsive Design - CORRIGÉ */
@media screen and (max-width: 1078px) {
    .nav-container[b-mnx9jgdq83] {
        padding: var(--spacing-md) var(--spacing-md);
        gap: 0;
        justify-content: center;
        position: relative;
        min-height: 60px;
        z-index: 1020; /* Z-index pour le conteneur */
    }

    /* Logo centré */
    .logo-section[b-mnx9jgdq83] {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        z-index: 1025; /* Au-dessus du menu */
    }

    /* Menu toggle fixé à droite - SOLUTION PRINCIPALE */
    .menu-toggle[b-mnx9jgdq83] {
        display: flex;
        position: fixed !important; /* Position fixe pour éviter les problèmes */
        right: var(--spacing-md);
        top: 15px; /* Position fixe depuis le haut */
        transform: none;
        z-index: 1035 !important; /* Z-index très élevé */
        padding: var(--spacing-md);
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        visibility: visible !important; /* Force la visibilité */
        opacity: 1 !important; /* Force l'opacité */
    }

    /* État spécial quand le menu est ouvert */
    .navbar.menu-open .menu-toggle[b-mnx9jgdq83] {
        position: fixed !important;
        right: var(--spacing-md) !important;
        top: 15px !important;
        z-index: 1040 !important; /* Encore plus élevé */
        background: rgba(0, 0, 0, 0.1) !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
    }

        .navbar.menu-open .menu-toggle span[b-mnx9jgdq83] {
            background-color: var(--text-primary) !important;
        }

    /* Masquer les contrôles header sur mobile */
    .header-controls[b-mnx9jgdq83] {
        display: none;
    }

    /* Afficher les éléments mobile */
    .mobile-client-area[b-mnx9jgdq83],
    .mobile-language-selector[b-mnx9jgdq83] {
        display: block;
    }

    .logo img[b-mnx9jgdq83] {
        height: 60px;
    }

    /* Navigation mobile */
    .nav-section .nav-links[b-mnx9jgdq83] {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(25px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-2xl);
        transition: right var(--transition);
        z-index: 1010; /* En dessous du toggle */
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .nav-section .nav-links.active[b-mnx9jgdq83] {
            right: 0;
        }

        .nav-section .nav-links a[b-mnx9jgdq83] {
            font-size: 1.2rem;
            padding: var(--spacing-md) 0;
            color: var(--text-primary);
        }

        .nav-section .nav-links li[b-mnx9jgdq83] {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.5s ease;
        }

        .nav-section .nav-links.active li[b-mnx9jgdq83] {
            opacity: 1;
            transform: translateY(0);
            animation: slideIn-b-mnx9jgdq83 0.5s ease forwards;
        }

            .nav-section .nav-links.active li:nth-child(1)[b-mnx9jgdq83] {
                animation-delay: 0.1s;
            }

            .nav-section .nav-links.active li:nth-child(2)[b-mnx9jgdq83] {
                animation-delay: 0.2s;
            }

            .nav-section .nav-links.active li:nth-child(3)[b-mnx9jgdq83] {
                animation-delay: 0.3s;
            }

            .nav-section .nav-links.active li:nth-child(4)[b-mnx9jgdq83] {
                animation-delay: 0.4s;
            }

            .nav-section .nav-links.active li:nth-child(5)[b-mnx9jgdq83] {
                animation-delay: 0.5s;
            }

            .nav-section .nav-links.active li:nth-child(6)[b-mnx9jgdq83] {
                animation-delay: 0.6s;
            }

            .nav-section .nav-links.active li:nth-child(7)[b-mnx9jgdq83] {
                animation-delay: 0.7s;
            }

    /* Sélecteur de langue mobile */
    .mobile-language-selector[b-mnx9jgdq83] {
        margin-top: var(--spacing-xl);
        padding-top: var(--spacing-xl);
        border-top: 1px solid var(--border-color);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1020;
        position: relative;
    }

    .mobile-language-dropdown[b-mnx9jgdq83] {
        position: relative;
        width: 200px;
        z-index: 1020;
    }

    .mobile-language-toggle[b-mnx9jgdq83] {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        padding: var(--spacing-md) var(--spacing-lg);
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition);
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
        z-index: 1021;
        position: relative;
        box-shadow: var(--shadow);
    }

        .mobile-language-toggle:hover[b-mnx9jgdq83] {
            background: var(--accent-light);
            border-color: var(--primary-blue);
            transform: translateY(-2px);
        }

        .mobile-language-toggle[b-mnx9jgdq83]::after {
            content: '▼';
            font-size: 0.8rem;
            transition: transform var(--transition);
        }

        .mobile-language-toggle.active[b-mnx9jgdq83]::after {
            transform: rotate(180deg);
        }

        .mobile-language-toggle .flag-icon[b-mnx9jgdq83] {
            width: 20px;
            height: 15px;
        }

    .mobile-language-menu[b-mnx9jgdq83] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        margin-top: var(--spacing-sm);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all var(--transition);
        backdrop-filter: blur(20px);
        box-shadow: var(--shadow-lg);
        z-index: 1030;
        overflow: hidden;
    }

        .mobile-language-menu.active[b-mnx9jgdq83] {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            z-index: 1030;
        }

    .mobile-language-options[b-mnx9jgdq83] {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        z-index: 1031;
    }

    .mobile-language-option[b-mnx9jgdq83] {
        background: transparent;
        border: none;
        color: var(--text-primary);
        padding: var(--spacing-md) var(--spacing-lg);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition);
        text-decoration: none;
        border-bottom: 1px solid var(--border-color);
        z-index: 1031;
        position: relative;
    }

        .mobile-language-option:last-child[b-mnx9jgdq83] {
            border-bottom: none;
        }

        .mobile-language-option:hover[b-mnx9jgdq83] {
            background: var(--accent-light);
            color: var(--primary-blue);
            z-index: 1031;
        }

        .mobile-language-option.selected[b-mnx9jgdq83] {
            background: var(--accent-light);
            color: var(--primary-blue);
            z-index: 1031;
        }

        .mobile-language-option .flag-icon[b-mnx9jgdq83] {
            width: 20px;
            height: 15px;
            z-index: 1031;
        }

    /* Bouton client area mobile */
    .mobile-client-area[b-mnx9jgdq83] {
        margin-top: var(--spacing-xl);
        padding-top: var(--spacing-xl);
        border-top: 1px solid var(--border-color);
        z-index: 1015;
        position: relative;
    }

    .mobile-client-btn[b-mnx9jgdq83] {
        background: var(--gradient-primary) !important;
        color: var(--text-white) !important;
        padding: var(--spacing-md) var(--spacing-xl) !important;
        border-radius: 25px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--spacing-md) !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        box-shadow: var(--shadow-lg) !important;
        transition: all var(--transition) !important;
        text-decoration: none !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        z-index: 1015 !important;
        position: relative !important;
    }

        .mobile-client-btn:hover[b-mnx9jgdq83] {
            transform: translateY(-5px) !important;
            box-shadow: var(--shadow-xl) !important;
            filter: brightness(1.2) !important;
            z-index: 1015 !important;
        }

        .mobile-client-btn[b-mnx9jgdq83]::after {
            display: none !important;
        }

        .mobile-client-btn .client-icon svg[b-mnx9jgdq83] {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }
}

@media screen and (max-width: 480px) {
    .nav-container[b-mnx9jgdq83] {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 55px;
    }

    .logo img[b-mnx9jgdq83] {
        height: 50px;
    }

    .menu-toggle[b-mnx9jgdq83] {
        right: var(--spacing-md) !important;
        top: 12px !important;
        padding: var(--spacing-sm);
    }

    .nav-links a[b-mnx9jgdq83] {
        font-size: 1rem;
    }

    .mobile-language-dropdown[b-mnx9jgdq83] {
        width: 170px;
    }

    .mobile-language-toggle[b-mnx9jgdq83] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }

    .mobile-language-option[b-mnx9jgdq83] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.75rem;
        z-index: 1031;
    }
}

/* Media query pour iPhone SE et similaires */
@media screen and (max-width: 375px) and (max-height: 667px) {
    .nav-container[b-mnx9jgdq83] {
        padding: var(--spacing-sm);
        min-height: 50px;
    }

    .logo img[b-mnx9jgdq83] {
        height: 45px;
    }

    .menu-toggle[b-mnx9jgdq83] {
        right: var(--spacing-sm) !important;
        top: 10px !important;
        padding: var(--spacing-xs);
    }

        .menu-toggle span[b-mnx9jgdq83] {
            width: 18px;
            height: 2px;
        }

    .nav-links a[b-mnx9jgdq83] {
        font-size: 0.9rem;
        padding: var(--spacing-sm) 0;
    }

    .mobile-language-dropdown[b-mnx9jgdq83] {
        width: 150px;
    }

    .mobile-language-toggle[b-mnx9jgdq83] {
        padding: var(--spacing-sm);
        font-size: 0.8rem;
    }

    .mobile-language-option[b-mnx9jgdq83] {
        padding: var(--spacing-sm);
        font-size: 0.7rem;
    }

    .nav-section .nav-links[b-mnx9jgdq83] {
        gap: var(--spacing-xl);
    }

    .mobile-client-btn[b-mnx9jgdq83] {
        padding: var(--spacing-sm) var(--spacing-lg) !important;
        font-size: 1rem !important;
        gap: var(--spacing-sm) !important;
    }

        .mobile-client-btn .client-icon svg[b-mnx9jgdq83] {
            width: 16px;
            height: 16px;
        }
}

/* Media query pour écrans courts en mode paysage */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .nav-container[b-mnx9jgdq83] {
        padding: var(--spacing-xs) var(--spacing-md);
        min-height: 45px;
    }

    .logo img[b-mnx9jgdq83] {
        height: 40px;
    }

    .menu-toggle[b-mnx9jgdq83] {
        padding: var(--spacing-xs);
        top: 8px !important;
    }

        .menu-toggle span[b-mnx9jgdq83] {
            width: 16px;
            height: 1.5px;
            margin: 1.5px 0;
        }

    .nav-section .nav-links[b-mnx9jgdq83] {
        gap: var(--spacing-lg);
        padding: var(--spacing-md) 0;
    }

    .nav-links a[b-mnx9jgdq83] {
        font-size: 0.85rem;
        padding: var(--spacing-xs) 0;
    }

    .mobile-language-toggle[b-mnx9jgdq83] {
        padding: var(--spacing-sm);
        font-size: 0.75rem;
    }

    .mobile-language-option[b-mnx9jgdq83] {
        padding: var(--spacing-sm);
        font-size: 0.7rem;
    }

    .mobile-client-btn[b-mnx9jgdq83] {
        padding: var(--spacing-sm) !important;
        font-size: 0.9rem !important;
    }
}

/* Desktop - pas d'animation sur les éléments de menu */
@media screen and (min-width: 1079px) {
    .nav-links li[b-mnx9jgdq83] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .navbar[b-mnx9jgdq83],
    .language-toggle[b-mnx9jgdq83],
    .language-menu[b-mnx9jgdq83],
    .language-option[b-mnx9jgdq83],
    .client-area-btn[b-mnx9jgdq83],
    .nav-links a[b-mnx9jgdq83],
    .menu-toggle span[b-mnx9jgdq83] {
        transition: none;
    }

    .client-area-btn[b-mnx9jgdq83] {
        animation: none;
    }

    .nav-section .nav-links.active li[b-mnx9jgdq83] {
        animation: none;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus states pour l'accessibilité */
.nav-links a:focus-visible[b-mnx9jgdq83],
.client-area-btn:focus-visible[b-mnx9jgdq83],
.language-toggle:focus-visible[b-mnx9jgdq83],
.language-option:focus-visible[b-mnx9jgdq83] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}
/* _content/Project2/Components/Shared/MainHome.razor.rz.scp.css */
/* CSS pour la section Hero - Version Professionnelle */

.gradient-text[b-hrbvsb3gpy] {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--primary-blue); /* Fallback pour les navigateurs non compatibles */
}

/* Hero Section */
.hero[b-hrbvsb3gpy] {
    min-height: 100vh;
    height: 65vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 6rem 2rem 3rem;
    background-image: url('img/swipe_2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--bg-dark); /* Fallback */
}

    .hero[b-hrbvsb3gpy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        /* Overlay professionnel avec les couleurs du site */
    }

.hero-container[b-hrbvsb3gpy] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 var(--spacing-xl);
}

.hero-content h1[b-hrbvsb3gpy] {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: var(--text-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.hero-subtitle[b-hrbvsb3gpy] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    max-width: 600px;
}

.hero-stats[b-hrbvsb3gpy] {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
}

.stat-item[b-hrbvsb3gpy] {
    text-align: center;
}

.stat-number[b-hrbvsb3gpy] {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--white) 0%, rgba(255, 255, 255, 0.8) 100% );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--text-white); /* Fallback */
    line-height: 1.2;
}

.stat-label[b-hrbvsb3gpy] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.hero-actions[b-hrbvsb3gpy] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Styles spécifiques pour les boutons de la section hero */
.hero .btn[b-hrbvsb3gpy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    transition: all var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.hero .btn-primary[b-hrbvsb3gpy] {
    background: var(--gradient-primary);
    color: var(--text-white);
    border: 2px solid transparent;
}

    .hero .btn-primary:hover[b-hrbvsb3gpy] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(27, 112, 140, 0.4);
    }

.hero .btn-secondary[b-hrbvsb3gpy] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

    .hero .btn-secondary:hover[b-hrbvsb3gpy] {
        border-color: var(--text-white);
        background: rgba(255, 255, 255, 0.2);
        color: var(--text-white);
        transform: translateY(-2px);
    }

/* Indicateur de scroll (flèche vers le bas) */
.scroll-indicator[b-hrbvsb3gpy] {
    position: absolute;
    top: 28rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.scroll-arrow[b-hrbvsb3gpy] {
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all var(--transition);
    animation: scrollBounce-b-hrbvsb3gpy 2s ease-in-out infinite;
}

    .scroll-arrow:hover[b-hrbvsb3gpy] {
        background: rgba(255, 255, 255, 0.2);
        border-color: var(--text-white);
        transform: scale(1.1);
    }

    .scroll-arrow i[b-hrbvsb3gpy] {
        color: var(--text-white);
        font-size: 1.2rem;
        animation: arrowPulse-b-hrbvsb3gpy 2s ease-in-out infinite;
    }

/* Animations pour la flèche */
@keyframes scrollBounce-b-hrbvsb3gpy {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes arrowPulse-b-hrbvsb3gpy {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* BREAKPOINTS RESPONSIFS */

/* Large Desktop (1200px et plus) */
@media (min-width: 1200px) {
    .hero-container[b-hrbvsb3gpy] {
        max-width: var(--max-width-site);
        gap: 4rem;
        padding: 0 var(--spacing-2xl);
    }

    .hero-content h1[b-hrbvsb3gpy] {
        font-size: 3.8rem;
    }

    .hero-subtitle[b-hrbvsb3gpy] {
        font-size: 1.375rem;
    }
}

/* Desktop Standard (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .hero[b-hrbvsb3gpy] {
        min-height: 80vh;
        height: 80vh;
        padding: 5rem 2rem 2rem;
    }

    .hero-container[b-hrbvsb3gpy] {
        max-width: var(--max-width-content);
        gap: 3rem;
    }

    .hero-content h1[b-hrbvsb3gpy] {
        font-size: 3rem;
    }
}

/* Tablet Paysage (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .hero[b-hrbvsb3gpy] {
        padding: 4rem 1.5rem 2rem;
        min-height: 75vh;
        height: 75vh;
    }

    .hero-container[b-hrbvsb3gpy] {
        max-width: 750px;
        gap: 2.5rem;
        padding: 0 var(--spacing-lg);
    }

    .hero-content h1[b-hrbvsb3gpy] {
        font-size: 2.5rem;
    }

    .hero-subtitle[b-hrbvsb3gpy] {
        font-size: 1.125rem;
    }

    .hero-stats[b-hrbvsb3gpy] {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-number[b-hrbvsb3gpy] {
        font-size: 1.75rem;
    }
}

/* Tablet Portrait (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .hero[b-hrbvsb3gpy] {
        padding: 3rem 1rem 1.5rem;
        min-height: 70vh;
        height: 70vh;
    }

    .hero-container[b-hrbvsb3gpy] {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        margin-top: 1rem;
        padding: 0 var(--spacing-md);
    }

    .hero-content h1[b-hrbvsb3gpy] {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .hero-subtitle[b-hrbvsb3gpy] {
        font-size: 1rem;
        margin-bottom: 1.25rem;
        max-width: none;
    }

    .hero-stats[b-hrbvsb3gpy] {
        justify-content: center;
        gap: 2rem;
        margin-bottom: 1.5rem;
    }

    .stat-number[b-hrbvsb3gpy] {
        font-size: 1.5rem;
    }

    .stat-label[b-hrbvsb3gpy] {
        font-size: 0.8125rem;
    }

    .hero-actions[b-hrbvsb3gpy] {
        justify-content: center;
        gap: 0.75rem;
        margin: 0 auto;
    }

    .hero .btn[b-hrbvsb3gpy] {
        padding: 0.875rem 1.75rem;
        font-size: 0.9375rem;
    }

    .scroll-indicator[b-hrbvsb3gpy] {
        bottom: 1rem;
    }

    .scroll-arrow[b-hrbvsb3gpy] {
        width: 45px;
        height: 45px;
    }
}

/* Mobile Large (480px - 575px) */
@media (max-width: 575px) and (min-width: 480px) {
    .hero[b-hrbvsb3gpy] {
        padding: 4rem 1rem 2rem;
        min-height: 70vh;
    }

    .hero-container[b-hrbvsb3gpy] {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        margin-top: 1.5rem;
        padding: 0 var(--spacing-sm);
    }

    .hero-content h1[b-hrbvsb3gpy] {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .hero-subtitle[b-hrbvsb3gpy] {
        font-size: 0.9375rem;
        margin-bottom: 1.25rem;
    }

    .hero-stats[b-hrbvsb3gpy] {
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 1.75rem;
    }

    .stat-number[b-hrbvsb3gpy] {
        font-size: 1.375rem;
    }

    .stat-label[b-hrbvsb3gpy] {
        font-size: 0.75rem;
    }

    .hero-actions[b-hrbvsb3gpy] {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin: 0 auto;
    }

    .hero .btn[b-hrbvsb3gpy] {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* Mobile Small (moins de 480px) */
@media (max-width: 479px) {
    .hero[b-hrbvsb3gpy] {
        padding: 2rem 0.75rem 1rem;
        min-height: 60vh;
        height: 60vh;
    }

    .hero-container[b-hrbvsb3gpy] {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        text-align: center;
        margin-top: 0;
        padding: 0 var(--spacing-xs);
    }

    .hero-content h1[b-hrbvsb3gpy] {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }

    .hero-subtitle[b-hrbvsb3gpy] {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
        padding: 0 0.5rem;
    }

    .hero-stats[b-hrbvsb3gpy] {
        justify-content: center;
        gap: 1.25rem;
        margin-bottom: 1rem;
    }

    .stat-number[b-hrbvsb3gpy] {
        font-size: 1.125rem;
    }

    .stat-label[b-hrbvsb3gpy] {
        font-size: 0.6875rem;
    }

    .hero-actions[b-hrbvsb3gpy] {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin: 0 auto;
    }

    .hero .btn[b-hrbvsb3gpy] {
        padding: 0.75rem 1.25rem;
        font-size: 0.8125rem;
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }

    .scroll-indicator[b-hrbvsb3gpy] {
        bottom: 0.5rem;
    }

    .scroll-arrow[b-hrbvsb3gpy] {
        width: 38px;
        height: 38px;
    }

        .scroll-arrow i[b-hrbvsb3gpy] {
            font-size: 0.9rem;
        }
}

/* Améliorations pour les interactions */
@media (hover: hover) {
    .hero .btn:hover[b-hrbvsb3gpy] {
        transform: translateY(-2px);
    }
}

@media (hover: none) {
    .hero .btn:active[b-hrbvsb3gpy] {
        transform: translateY(-1px);
    }
}

/* Réduction des animations pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .hero .btn[b-hrbvsb3gpy] {
        transition: none;
    }

        .hero .btn:hover[b-hrbvsb3gpy] {
            transform: none;
        }

    .scroll-arrow[b-hrbvsb3gpy] {
        animation: none;
    }

        .scroll-arrow i[b-hrbvsb3gpy] {
            animation: none;
            opacity: 1;
        }
}

/* Optimisation pour l'orientation paysage sur mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .hero[b-hrbvsb3gpy] {
        padding: 1.5rem 1rem;
        min-height: 95vh;
        height: 95vh;
        background-attachment: scroll; /* Fix pour mobile landscape */
    }

    .hero-container[b-hrbvsb3gpy] {
        gap: 1.5rem;
        align-items: center;
        margin-top: 0;
    }

    .hero-content h1[b-hrbvsb3gpy] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .hero-subtitle[b-hrbvsb3gpy] {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }

    .hero-stats[b-hrbvsb3gpy] {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .stat-number[b-hrbvsb3gpy] {
        font-size: 1rem;
    }

    .hero-actions[b-hrbvsb3gpy] {
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
    }

    .hero .btn[b-hrbvsb3gpy] {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
        width: auto;
    }

    .scroll-indicator[b-hrbvsb3gpy] {
        bottom: 0.5rem;
    }

    .scroll-arrow[b-hrbvsb3gpy] {
        width: 35px;
        height: 35px;
    }
}

/* Optimisations supplémentaires pour les appareils mobiles */
@media (max-width: 768px) {
    .hero[b-hrbvsb3gpy] {
        background-attachment: scroll; /* Améliore les performances sur mobile */
    }
}

/* Styles spécifiques pour le focus et l'accessibilité */
.hero .btn:focus-visible[b-hrbvsb3gpy] {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.scroll-arrow:focus-visible[b-hrbvsb3gpy] {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Animation d'entrée pour le contenu hero */
@keyframes heroFadeIn-b-hrbvsb3gpy {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content[b-hrbvsb3gpy] {
    animation: heroFadeIn-b-hrbvsb3gpy 0.8s ease-out;
}

/* Amélioration visuelle pour les statistiques */
.stat-item[b-hrbvsb3gpy] {
    padding: var(--spacing-sm);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    transition: all var(--transition);
}

    .stat-item:hover[b-hrbvsb3gpy] {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }

/* Responsive pour les statistiques */
@media (max-width: 480px) {
    .hero-stats[b-hrbvsb3gpy] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .stat-item[b-hrbvsb3gpy] {
        flex: 1;
        min-width: 120px;
    }
}
/* _content/Project2/Components/Shared/Modal.razor.rz.scp.css */
/* MODAL SYSTEM - ADAPTÉ POUR COMPOSANT BLAZOR */

/* Overlay de la modal */
.modal-overlay[b-15wpiypbx0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 13, 13, 0.4);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

    /* État visible de la modal */
    .modal-overlay.visible[b-15wpiypbx0] {
        opacity: 1;
        visibility: visible;
        animation: modalFadeIn-b-15wpiypbx0 var(--transition) ease-out forwards;
    }

/* Animation d'entrée pour l'overlay */
@keyframes modalFadeIn-b-15wpiypbx0 {
    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}

/* Container principal de la modal */
.modal-container[b-15wpiypbx0] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    transform: translateY(30px) scale(0.95);
    transition: all var(--transition);
}

/* Animation pour le container quand la modal devient visible */
.modal-overlay.visible .modal-container[b-15wpiypbx0] {
    transform: translateY(0) scale(1);
    animation: modalSlideIn-b-15wpiypbx0 var(--transition) ease-out forwards;
}

/* Animation d'entrée pour le container */
@keyframes modalSlideIn-b-15wpiypbx0 {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0.8;
    }

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

/* Effet glassmorphism pour la modal */
.modal-container[b-15wpiypbx0] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Header de la modal */
.modal-header[b-15wpiypbx0] {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.02), rgba(0, 180, 216, 0.02));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    /* Accent coloré en haut de la modal */
    .modal-header[b-15wpiypbx0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-primary);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    /* Titre de la modal */
    .modal-header h3[b-15wpiypbx0] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

/* Bouton de fermeture */
.modal-close[b-15wpiypbx0] {
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
}

    .modal-close:hover[b-15wpiypbx0] {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: var(--text-white);
        transform: scale(1.05);
        box-shadow: var(--shadow-colored);
    }

    .modal-close:active[b-15wpiypbx0] {
        transform: scale(0.95);
    }

/* Corps de la modal */
.modal-body[b-15wpiypbx0] {
    padding: var(--spacing-xl);
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.6;
}

    /* Styles pour le contenu du ChildContent */
    .modal-body p[b-15wpiypbx0] {
        margin: 0;
        font-size: 1rem;
        line-height: 1.7;
        color: var(--text-primary);
        white-space: pre-line; /* Permet les retours à la ligne dans le message */
    }

    /* Scrollbar personnalisé pour le contenu */
    .modal-body[b-15wpiypbx0]::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body[b-15wpiypbx0]::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 3px;
    }

    .modal-body[b-15wpiypbx0]::-webkit-scrollbar-thumb {
        background: var(--primary-blue);
        border-radius: 3px;
    }

        .modal-body[b-15wpiypbx0]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-blue-dark);
        }

/* Footer de la modal */
.modal-footer[b-15wpiypbx0] {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    background: rgba(249, 249, 249, 0.5);
}

    /* Boutons dans le footer - utilisent les classes existantes */
    .modal-footer .btn[b-15wpiypbx0] {
        min-width: 100px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: var(--radius);
        cursor: pointer;
        transition: all var(--transition);
        border: 2px solid transparent;
    }

    /* Bouton de retour/annuler */
    .modal-footer .btn-back[b-15wpiypbx0] {
        background: transparent;
        color: var(--text-secondary);
        border-color: var(--border-color);
    }

        .modal-footer .btn-back:hover[b-15wpiypbx0] {
            background: var(--bg-accent);
            border-color: var(--primary-blue);
            color: var(--primary-blue);
            transform: translateY(-2px);
        }

    /* Bouton de confirmation */
    .modal-footer .btn-confirm[b-15wpiypbx0] {
        background: var(--gradient-primary);
        color: var(--text-white);
        box-shadow: var(--shadow-colored);
    }

        .modal-footer .btn-confirm:hover[b-15wpiypbx0] {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

        .modal-footer .btn-confirm:active[b-15wpiypbx0] {
            transform: translateY(-1px);
        }

/* Styles pour différents types de modals selon le titre */

/* Modal d'erreur */
.modal-container[data-type="error"] .modal-header[b-15wpiypbx0]::before,
.modal-header:has(h3:contains("Erreur"))[b-15wpiypbx0]::before {
    background: linear-gradient(135deg, #f44336, #e53935);
}

/* Modal de succès */
.modal-container[data-type="success"] .modal-header[b-15wpiypbx0]::before,
.modal-header:has(h3:contains("Succès"))[b-15wpiypbx0]::before {
    background: linear-gradient(135deg, #4caf50, #43a047);
}

/* Modal d'avertissement */
.modal-container[data-type="warning"] .modal-header[b-15wpiypbx0]::before,
.modal-header:has(h3:contains("Attention"))[b-15wpiypbx0]::before,
.modal-header:has(h3:contains("Avertissement"))[b-15wpiypbx0]::before {
    background: linear-gradient(135deg, #ff9800, #fb8c00);
}

/* Responsive design */
@media (max-width: 768px) {
    .modal-overlay[b-15wpiypbx0] {
        padding: var(--spacing-md);
    }

    .modal-container[b-15wpiypbx0] {
        max-width: 95%;
        margin: var(--spacing-md);
    }

    .modal-header[b-15wpiypbx0] {
        padding: var(--spacing-lg);
    }

    .modal-body[b-15wpiypbx0] {
        padding: var(--spacing-lg);
        max-height: 50vh;
    }

    .modal-footer[b-15wpiypbx0] {
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
        flex-direction: column-reverse;
    }

        .modal-footer .btn[b-15wpiypbx0] {
            width: 100%;
            min-width: auto;
        }

    .modal-header h3[b-15wpiypbx0] {
        font-size: 1.25rem;
        padding-right: var(--spacing-md);
    }

    .modal-close[b-15wpiypbx0] {
        width: 28px;
        height: 28px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .modal-container[b-15wpiypbx0] {
        max-width: 100%;
        margin: var(--spacing-sm);
        border-radius: var(--radius-lg);
    }

    .modal-header[b-15wpiypbx0] {
        padding: var(--spacing-md);
    }

    .modal-body[b-15wpiypbx0] {
        padding: var(--spacing-md);
    }

    .modal-footer[b-15wpiypbx0] {
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    }

    .modal-header h3[b-15wpiypbx0] {
        font-size: 1.125rem;
    }

    .modal-close[b-15wpiypbx0] {
        width: 26px;
        height: 26px;
        font-size: 1.1rem;
    }
}

/* Animation pour les modals sur mobile */
@media (max-width: 768px) {
    @keyframes modalSlideIn-b-15wpiypbx0 {
        from {
            transform: translateY(100px) scale(0.95);
            opacity: 0.8;
        }

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

/* Styles pour les préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay[b-15wpiypbx0],
    .modal-container[b-15wpiypbx0] {
        animation: none !important;
        transition: opacity var(--transition-fast) !important;
    }

        .modal-overlay.visible .modal-container[b-15wpiypbx0] {
            transform: none !important;
        }

    .modal-close:hover[b-15wpiypbx0],
    .modal-footer .btn:hover[b-15wpiypbx0] {
        transform: none !important;
    }
}

/* Focus pour l'accessibilité */
.modal-close:focus[b-15wpiypbx0],
.modal-footer .btn:focus[b-15wpiypbx0] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
}

/* État de la modal ouverte sur le body */
body.modal-open[b-15wpiypbx0] {
    overflow: hidden;
}

/* Effet de flou sur le contenu en arrière-plan quand modal ouverte */
.blur-background[b-15wpiypbx0] {
    filter: blur(2px);
    transition: filter var(--transition);
}

/* Styles pour les modals en plein écran sur mobile */
@media (max-width: 480px) and (max-height: 600px) {
    .modal-container[b-15wpiypbx0] {
        max-height: 95vh;
        margin: 2.5vh auto;
    }

    .modal-body[b-15wpiypbx0] {
        max-height: 45vh;
    }
}

/* Animation de pulsation pour le bouton de confirmation important */
.modal-footer .btn-confirm.pulse[b-15wpiypbx0] {
    animation: buttonPulse-b-15wpiypbx0 2s infinite;
}

@keyframes buttonPulse-b-15wpiypbx0 {
    0% {
        box-shadow: var(--shadow-colored);
    }

    50% {
        box-shadow: var(--shadow-lg), 0 0 0 4px rgba(0, 119, 182, 0.1);
    }

    100% {
        box-shadow: var(--shadow-colored);
    }
}

/* Gestion du z-index pour s'assurer que la modal est au-dessus de tout */
.modal-overlay[b-15wpiypbx0] {
    z-index: 9999;
}

/* Style spécial pour les messages avec listes (comme dans votre cas d'usage) */
.modal-body .missing-fields-list[b-15wpiypbx0] {
    background: var(--bg-accent);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-left: 3px solid var(--primary-blue);
}

    .modal-body .missing-fields-list p[b-15wpiypbx0] {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

/* Amélioration de l'apparence du texte dans la modal */
.modal-body strong[b-15wpiypbx0] {
    color: var(--text-primary);
    font-weight: 600;
}
/* _content/Project2/Components/Shared/Popup.razor.rz.scp.css */
/* Popup Styles for Orion System - Style Professionnel */
:root[b-lzn96v4yay] {
    --pop-primary-color: #1a237e;
    --pop-secondary-color: #2196F3;
    --pop-accent-color: #ff4b2b;
    --pop-accent-gradient: linear-gradient(135deg, #ff4b2b, #ff416c);
    --pop-dark-bg: #0a1020;
    --pop-dark-bg-alt: #1a2035;
    --pop-light-text: #fff;
    --pop-light-text-muted: rgba(255, 255, 255, 0.8);
    --pop-border-color: rgba(255, 75, 43, 0.3);
    /* Type-specific colors */
    --pop-success-color: #2e7d32;
    --pop-error-color: #c62828;
    --pop-warning-color: #f39c12;
    --pop-info-color: #0277bd;
}

/* Overlay backdrop */
.pop-overlay[b-lzn96v4yay] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .pop-overlay.pop-visible[b-lzn96v4yay] {
        opacity: 1;
        visibility: visible;
    }

/* Popup container - Style plus professionnel */
.pop-container[b-lzn96v4yay] {
    position: relative;
    width: 90%;
    max-width: 500px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    border-top: 3px solid var(--pop-accent-color);
}

    .pop-container.pop-visible[b-lzn96v4yay] {
        transform: translateY(0);
        opacity: 1;
    }

/* Popup header */
.pop-header[b-lzn96v4yay] {
    padding: 20px 25px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    background-color: #f9f9f9;
}

.pop-title[b-lzn96v4yay] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
}

/* Close button */
.pop-close[b-lzn96v4yay] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 22px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    transition: color 0.2s ease;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

    .pop-close:hover[b-lzn96v4yay] {
        color: var(--pop-accent-color);
        background-color: rgba(0, 0, 0, 0.1);
    }

/* Popup body */
.pop-body[b-lzn96v4yay] {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Popup footer */
.pop-footer[b-lzn96v4yay] {
    padding: 15px 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: #f9f9f9;
}

/* Buttons */
.pop-button[b-lzn96v4yay] {
    background: var(--pop-accent-gradient);
    color: white;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .pop-button:hover[b-lzn96v4yay] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    .pop-button.pop-secondary[b-lzn96v4yay] {
        background: #f2f2f2;
        color: #333;
    }

        .pop-button.pop-secondary:hover[b-lzn96v4yay] {
            background: #e5e5e5;
        }

/* Type-specific styling */
.pop-success[b-lzn96v4yay] {
    border-top-color: var(--pop-success-color);
}

    .pop-success .pop-title[b-lzn96v4yay] {
        color: var(--pop-success-color);
    }

.pop-error[b-lzn96v4yay] {
    border-top-color: var(--pop-error-color);
}

    .pop-error .pop-title[b-lzn96v4yay] {
        color: var(--pop-error-color);
    }

.pop-warning[b-lzn96v4yay] {
    border-top-color: var(--pop-warning-color);
}

    .pop-warning .pop-title[b-lzn96v4yay] {
        color: var(--pop-warning-color);
    }

.pop-info[b-lzn96v4yay] {
    border-top-color: var(--pop-info-color);
}

    .pop-info .pop-title[b-lzn96v4yay] {
        color: var(--pop-info-color);
    }

/* Icons pour les différents types */
.pop-icon[b-lzn96v4yay] {
    font-size: 2.5rem;
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

.pop-success .pop-icon[b-lzn96v4yay] {
    color: var(--pop-success-color);
}

.pop-error .pop-icon[b-lzn96v4yay] {
    color: var(--pop-error-color);
}

.pop-warning .pop-icon[b-lzn96v4yay] {
    color: var(--pop-warning-color);
}

.pop-info .pop-icon[b-lzn96v4yay] {
    color: var(--pop-info-color);
}

/* Content styling */
.pop-content[b-lzn96v4yay] {
    text-align: center;
}

    .pop-content p[b-lzn96v4yay] {
        margin: 0 0 12px 0;
        color: #555;
        font-size: 1rem;
        line-height: 1.5;
    }

        .pop-content p:last-child[b-lzn96v4yay] {
            margin-bottom: 0;
        }

    .pop-content .error-details[b-lzn96v4yay] {
        margin-top: 15px;
        font-size: 0.9rem;
        color: #c62828;
        background-color: rgba(198, 40, 40, 0.05);
        padding: 10px;
        border-radius: 4px;
        text-align: left;
    }

/* Responsivité */
@media screen and (max-width: 768px) {
    .pop-container[b-lzn96v4yay] {
        width: 95%;
    }

    .pop-title[b-lzn96v4yay] {
        font-size: 1.2rem;
    }

    .pop-body[b-lzn96v4yay] {
        padding: 20px;
    }
}
/* _content/Project2/Components/Shared/ProductModal.razor.rz.scp.css */
/* Modal Produit - Version Professionnelle */

.product-modal-overlay[b-k9ad81jxzj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-k9ad81jxzj 0.3s ease;
    padding: var(--spacing-md);
}

.product-modal-container[b-k9ad81jxzj] {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: min(95vw, 1400px);
    height: min(95vh, 900px);
    overflow: hidden;
    animation: slideIn-b-k9ad81jxzj 0.3s ease;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
}

/* Header de la modal */
.modal-header[b-k9ad81jxzj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

    .modal-header h2[b-k9ad81jxzj] {
        color: var(--text-primary);
        font-size: 1.8rem;
        font-weight: 700;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.close-button[b-k9ad81jxzj] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition);
}

    .close-button:hover[b-k9ad81jxzj] {
        background: rgba(27, 112, 140, 0.2);
        color: var(--primary-blue);
        transform: rotate(90deg);
    }

/* Corps de la modal */
.modal-body[b-k9ad81jxzj] {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    flex: 1;
    overflow: hidden;
}

/* Section média */
.media-section[b-k9ad81jxzj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    height: 100%;
}

.media-viewer[b-k9ad81jxzj] {
    position: relative;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border-color);
}

.main-media[b-k9ad81jxzj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--gray-200);
}

.video-iframe-container[b-k9ad81jxzj] {
    width: 100%;
    height: 100%;
    background: var(--gray-800);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

    .video-iframe-container iframe[b-k9ad81jxzj] {
        border: none;
        border-radius: var(--radius-lg);
    }

/* Navigation média */
.media-navigation[b-k9ad81jxzj] {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

.nav-btn[b-k9ad81jxzj] {
    background: var(--gradient-primary);
    border: none;
    color: var(--text-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

    .nav-btn:hover:not(:disabled)[b-k9ad81jxzj] {
        transform: scale(1.1);
        box-shadow: var(--shadow-lg);
    }

    .nav-btn:disabled[b-k9ad81jxzj] {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--gray-400);
    }

.media-counter[b-k9ad81jxzj] {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Miniatures */
.media-thumbnails[b-k9ad81jxzj] {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    padding: var(--spacing-sm) 0;
    flex-shrink: 0;
}

.thumbnail[b-k9ad81jxzj] {
    width: 80px;
    height: 60px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    position: relative;
    flex-shrink: 0;
}

    .thumbnail.active[b-k9ad81jxzj] {
        border-color: var(--primary-blue);
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(27, 112, 140, 0.4);
    }

    .thumbnail img[b-k9ad81jxzj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.video-thumbnail[b-k9ad81jxzj] {
    position: relative;
    width: 100%;
    height: 100%;
}

.play-icon[b-k9ad81jxzj] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-white);
    font-size: 1.2rem;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Détails du produit */
.product-details[b-k9ad81jxzj] {
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.description-container[b-k9ad81jxzj] {
    flex-shrink: 0;
    margin-bottom: var(--spacing-lg);
}

.product-description[b-k9ad81jxzj] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Section des fonctionnalités */
.features-section[b-k9ad81jxzj] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .features-section h3[b-k9ad81jxzj] {
        color: var(--text-primary);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 var(--spacing-md) 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex-shrink: 0;
    }

.features-grid[b-k9ad81jxzj] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    overflow-y: auto;
    padding-right: var(--spacing-sm);
    flex: 1;
}

    .features-grid[b-k9ad81jxzj]::-webkit-scrollbar {
        width: 4px;
    }

    .features-grid[b-k9ad81jxzj]::-webkit-scrollbar-track {
        background: var(--gray-200);
        border-radius: 2px;
    }

    .features-grid[b-k9ad81jxzj]::-webkit-scrollbar-thumb {
        background: var(--primary-blue);
        border-radius: 2px;
    }

.feature-item[b-k9ad81jxzj] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.feature-icon[b-k9ad81jxzj] {
    color: var(--primary-blue);
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.feature-text[b-k9ad81jxzj] {
    color: var(--text-secondary);
    line-height: 1.4;
    font-size: 0.9rem;
}

/* Section démo */
.demo-section[b-k9ad81jxzj] {
    margin-top: auto;
    padding-top: var(--spacing-md);
    flex-shrink: 0;
}

.demo-link[b-k9ad81jxzj] {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

    .demo-link:hover[b-k9ad81jxzj] {
        color: var(--primary-blue-dark);
        text-decoration: underline;
    }

/* Footer de la modal */
.modal-footer[b-k9ad81jxzj] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.contact-button[b-k9ad81jxzj],
.demo-button[b-k9ad81jxzj] {
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow);
}

    .contact-button:hover[b-k9ad81jxzj],
    .demo-button:hover[b-k9ad81jxzj] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* Animations */
@keyframes fadeIn-b-k9ad81jxzj {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-k9ad81jxzj {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

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

/* Responsive Design */
@media (max-width: 1200px) {
    .product-modal-container[b-k9ad81jxzj] {
        width: 95vw;
        height: 90vh;
    }
}

@media (max-width: 768px) {
    .product-modal-overlay[b-k9ad81jxzj] {
        padding: var(--spacing-sm);
    }

    .product-modal-container[b-k9ad81jxzj] {
        width: 100%;
        height: 100%;
        border-radius: var(--radius-lg);
    }

    .modal-body[b-k9ad81jxzj] {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .modal-header[b-k9ad81jxzj] {
        padding: var(--spacing-md);
    }

        .modal-header h2[b-k9ad81jxzj] {
            font-size: 1.4rem;
        }

    .modal-footer[b-k9ad81jxzj] {
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .contact-button[b-k9ad81jxzj],
    .demo-button[b-k9ad81jxzj] {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 0.9rem;
    }

    .features-grid[b-k9ad81jxzj] {
        grid-template-columns: 1fr;
    }

    .feature-text[b-k9ad81jxzj] {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .thumbnail[b-k9ad81jxzj] {
        width: 60px;
        height: 45px;
    }

    .media-thumbnails[b-k9ad81jxzj] {
        gap: var(--spacing-xs);
    }

    .nav-btn[b-k9ad81jxzj] {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .media-navigation[b-k9ad81jxzj] {
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .media-counter[b-k9ad81jxzj] {
        font-size: 0.8rem;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .product-modal-overlay[b-k9ad81jxzj],
    .product-modal-container[b-k9ad81jxzj],
    .nav-btn[b-k9ad81jxzj],
    .thumbnail[b-k9ad81jxzj],
    .close-button[b-k9ad81jxzj] {
        animation: none;
        transition: none;
    }

        .nav-btn:hover:not(:disabled)[b-k9ad81jxzj],
        .thumbnail.active[b-k9ad81jxzj],
        .close-button:hover[b-k9ad81jxzj] {
            transform: none;
        }
}

/* Focus states pour l'accessibilité */
.close-button:focus-visible[b-k9ad81jxzj],
.nav-btn:focus-visible[b-k9ad81jxzj],
.thumbnail:focus-visible[b-k9ad81jxzj],
.contact-button:focus-visible[b-k9ad81jxzj],
.demo-button:focus-visible[b-k9ad81jxzj],
.demo-link:focus-visible[b-k9ad81jxzj] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}
/* _content/Project2/Components/Shared/Products.razor.rz.scp.css */
/* Section Produits - Version Professionnelle */

.products-section[b-mpwlwvhsez] {
    padding: var(--spacing-3xl) 0;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

    .products-section[b-mpwlwvhsez]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 25% 25%, rgba(27, 112, 140, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(74, 144, 164, 0.04) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(42, 139, 168, 0.02) 0%, transparent 70%);
        pointer-events: none;
    }

    .products-section[b-mpwlwvhsez]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
        opacity: 0.4;
    }

/* Contenu principal */
.products-content[b-mpwlwvhsez] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    position: relative;
    z-index: 2;
    text-align:center;
}

    .products-content h2[b-mpwlwvhsez] {
        text-align: center;
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        font-weight: 700;
        margin-bottom: var(--spacing-2xl);
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-primary);
        position: relative;
        line-height: 1.2;

    }

        .products-content h2[b-mpwlwvhsez]::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--gradient-primary);
            border-radius: var(--radius-sm);
        }

/* Section CTA */
.cta-content[b-mpwlwvhsez] {
    text-align: center;
    padding: var(--spacing-2xl) 0;
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

    .cta-content[b-mpwlwvhsez]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 1px;
        background: var(--gradient-primary);
        opacity: 0.6;
    }

    .cta-content h3[b-mpwlwvhsez] {
        font-size: clamp(1.75rem, 4vw, 2.2rem);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        letter-spacing: 0.5px;
    }

    .cta-content p[b-mpwlwvhsez] {
        margin: var(--spacing-lg) auto;
        color: var(--text-secondary);
        font-size: 1.125rem;
        max-width: 700px;
        line-height: 1.6;
        font-weight: 400;
    }

/* Grid des produits */
.product-grid[b-mpwlwvhsez] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

/* Cards produits */
.product-card[b-mpwlwvhsez] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

    .product-card[b-mpwlwvhsez]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }

    .product-card:hover[b-mpwlwvhsez]::before {
        transform: scaleX(1);
    }

    .product-card:hover[b-mpwlwvhsez] {
        transform: translateY(-8px);
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-lg);
        background: var(--bg-card);
    }

/* Image du produit */
.product-image[b-mpwlwvhsez] {
    margin-bottom: var(--spacing-xl);
    text-align: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--gray-100);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

    .product-image img[b-mpwlwvhsez] {
        max-width: 100%;
        max-height: 180px;
        object-fit: contain;
        transition: all var(--transition);
    }

.product-card:hover .product-image img[b-mpwlwvhsez] {
    transform: scale(1.05);
}

/* Contenu du produit */
.product-card h3[b-mpwlwvhsez] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-align: center;
}

.product-card p[b-mpwlwvhsez] {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
    font-size: 1rem;
    text-align: center;
    flex-grow: 1;
}

    .product-card p .links[b-mpwlwvhsez] {
        color: var(--primary-blue);
        font-weight: 600;
        transition: all var(--transition);
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid transparent;
    }

        .product-card p .links:hover[b-mpwlwvhsez] {
            border-bottom-color: var(--primary-blue);
        }

/* Boutons dans les cartes */
.product-card .btn[b-mpwlwvhsez] {
    width: 100%;
    margin: 0;
    align-self: flex-end;
    justify-content: center;
}

    .product-card .btn:hover[b-mpwlwvhsez] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* Animations d'entrée */
@keyframes fadeInUp-b-mpwlwvhsez {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card[b-mpwlwvhsez] {
    animation: fadeInUp-b-mpwlwvhsez 0.6s ease-out;
}

    .product-card:nth-child(1)[b-mpwlwvhsez] {
        animation-delay: 0.1s;
    }

    .product-card:nth-child(2)[b-mpwlwvhsez] {
        animation-delay: 0.2s;
    }

    .product-card:nth-child(3)[b-mpwlwvhsez] {
        animation-delay: 0.3s;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .product-grid[b-mpwlwvhsez] {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--spacing-lg);
    }

    .products-content h2[b-mpwlwvhsez] {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .cta-content h3[b-mpwlwvhsez] {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
}

@media (max-width: 768px) {
    .products-section[b-mpwlwvhsez] {
        padding: var(--spacing-2xl) 0;
    }

    .products-content[b-mpwlwvhsez] {
        padding: 0 var(--spacing-md);
    }

        .products-content h2[b-mpwlwvhsez] {
            margin-bottom: var(--spacing-lg);
            letter-spacing: 0.5px;
        }

            .products-content h2[b-mpwlwvhsez]::after {
                width: 60px;
                height: 2px;
                bottom: -10px;
            }

    .cta-content[b-mpwlwvhsez] {
        padding: var(--spacing-lg) 0;
        margin-bottom: var(--spacing-xl);
    }

        .cta-content h3[b-mpwlwvhsez] {
            margin-bottom: var(--spacing-md);
        }

        .cta-content p[b-mpwlwvhsez] {
            font-size: 1rem;
            margin: var(--spacing-md) auto;
        }

    .product-grid[b-mpwlwvhsez] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin-top: var(--spacing-xl);
    }

    .product-card[b-mpwlwvhsez] {
        padding: var(--spacing-lg);
        margin: 0 var(--spacing-sm);
    }

        .product-card h3[b-mpwlwvhsez] {
            font-size: 1.375rem;
        }

        .product-card p[b-mpwlwvhsez] {
            font-size: 0.95rem;
        }

    .product-image[b-mpwlwvhsez] {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

        .product-image img[b-mpwlwvhsez] {
            max-height: 150px;
        }
}

@media (max-width: 480px) {
    .products-section[b-mpwlwvhsez] {
        padding: var(--spacing-xl) 0;
    }

    .products-content[b-mpwlwvhsez] {
        padding: 0 var(--spacing-sm);
    }

        .products-content h2[b-mpwlwvhsez] {
            letter-spacing: 0.25px;
        }

            .products-content h2[b-mpwlwvhsez]::after {
                width: 50px;
                height: 2px;
            }

    .cta-content[b-mpwlwvhsez] {
        padding: var(--spacing-md) 0;
        margin-bottom: var(--spacing-lg);
    }

        .cta-content h3[b-mpwlwvhsez] {
            font-size: 1.5rem;
        }

        .cta-content p[b-mpwlwvhsez] {
            font-size: 0.95rem;
        }

    .product-card[b-mpwlwvhsez] {
        padding: var(--spacing-md);
        margin: 0;
        border-radius: var(--radius-lg);
    }

        .product-card h3[b-mpwlwvhsez] {
            font-size: 1.25rem;
        }

        .product-card p[b-mpwlwvhsez] {
            font-size: 0.9rem;
        }

    .product-image[b-mpwlwvhsez] {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

        .product-image img[b-mpwlwvhsez] {
            max-height: 120px;
        }

    .product-card .btn[b-mpwlwvhsez] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .product-card[b-mpwlwvhsez],
    .product-card[b-mpwlwvhsez]::before,
    .product-image img[b-mpwlwvhsez] {
        animation: none;
        transition: none;
    }

        .product-card:hover[b-mpwlwvhsez],
        .product-card:hover .product-image img[b-mpwlwvhsez] {
            transform: none;
        }
}

/* Focus states pour l'accessibilité */
.product-card:focus-within[b-mpwlwvhsez] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.product-card .btn:focus-visible[b-mpwlwvhsez] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* États actifs */
.product-card:active[b-mpwlwvhsez] {
    transform: translateY(-4px);
}
/* _content/Project2/Components/Shared/RfidAdvantages.razor.rz.scp.css */
/* Variables RFID isolées */
.rfid-services[b-lltukhlxdv] {
    --rfid-primary-gradient: linear-gradient(135deg, #FF5C00, #FF2D88, #9D2BFB, #542EFF);
    --rfid-bg-dark: #0A0E23;
    --rfid-bg-overlay: rgba(10, 14, 35, 0.9);
    --rfid-bg-card: rgba(255, 255, 255, 0.05);
    --rfid-border-color: rgba(255, 92, 0, 0.2);
    --rfid-text-primary: #ffffff;
    --rfid-text-secondary: rgba(255, 255, 255, 0.8);
    --rfid-accent-orange: #FF5C00;
    --rfid-success: #22c55e;
    --rfid-error: #ef4444;
    --rfid-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --rfid-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --rfid-shadow-hover: 0 12px 40px rgba(255, 92, 0, 0.2);
}

/* Section principale */
.rfid-services[b-lltukhlxdv] {
    background: var(--rfid-bg-dark);
    padding: 2rem 0;
}

.rfid-service-block[b-lltukhlxdv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 2rem;
    position: relative;
}

    .rfid-service-block[b-lltukhlxdv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 50%, rgba(255, 92, 0, 0.03) 0%, transparent 60%);
        pointer-events: none;
        z-index: 1;
    }

    .rfid-service-block.reverse[b-lltukhlxdv] {
        grid-template-columns: 1fr 1fr;
    }

        .rfid-service-block.reverse .rfid-service-content[b-lltukhlxdv] {
            order: 2;
        }

        .rfid-service-block.reverse .rfid-service-image-box[b-lltukhlxdv] {
            order: 1;
        }

/* Contenu des services */
.rfid-service-content[b-lltukhlxdv] {
    padding: 3rem;
    background: var(--rfid-bg-overlay);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rfid-border-color);
    border-radius: 20px;
    box-shadow: var(--rfid-shadow);
    position: relative;
    z-index: 2;
    transition: var(--rfid-transition);
}

    .rfid-service-content:hover[b-lltukhlxdv] {
        box-shadow: var(--rfid-shadow-hover);
        transform: translateY(-5px);
        border-color: var(--rfid-accent-orange);
    }

/* Boîte d'image séparée */
.rfid-service-image-box[b-lltukhlxdv] {
    position: relative;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--rfid-shadow);
    transition: var(--rfid-transition);
    height: 400px;
}

    .rfid-service-image-box:hover[b-lltukhlxdv] {
        box-shadow: var(--rfid-shadow-hover);
        transform: translateY(-5px);
        border-color: var(--rfid-accent-orange);
    }

.rfid-service-img[b-lltukhlxdv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--rfid-transition);
}

.rfid-service-image-box:hover .rfid-service-img[b-lltukhlxdv] {
    transform: scale(1.05);
}

/* Overlay sur l'image avec badge - TOUJOURS VISIBLE */
.rfid-image-overlay[b-lltukhlxdv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 92, 0, 0.05) 0%, rgba(157, 43, 251, 0.05) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    opacity: 1; /* Toujours visible */
    transition: var(--rfid-transition);
}

.rfid-service-image-box:hover .rfid-image-overlay[b-lltukhlxdv] {
    background: linear-gradient(135deg, rgba(255, 92, 0, 0.15) 0%, rgba(157, 43, 251, 0.15) 100%);
}

.rfid-tech-badge[b-lltukhlxdv] {
    background: var(--rfid-primary-gradient);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: var(--rfid-transition);
}

.rfid-service-image-box:hover .rfid-tech-badge[b-lltukhlxdv] {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.rfid-tech-badge i[b-lltukhlxdv] {
    font-size: 1.2rem;
}

/* Titres */
.rfid-service-content h2[b-lltukhlxdv] {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--rfid-text-primary);
    line-height: 1.2;
    margin-bottom: 2rem;
    position: relative;
}

    .rfid-service-content h2[b-lltukhlxdv]::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--rfid-primary-gradient);
        border-radius: 2px;
    }

/* Descriptions */
.rfid-section-description[b-lltukhlxdv],
.rfid-intro-text[b-lltukhlxdv] {
    color: var(--rfid-text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.rfid-intro-text[b-lltukhlxdv] {
    font-size: 1.15rem;
    font-weight: 500;
}

/* Définition RFID */
.rfid-definition[b-lltukhlxdv] {
    margin-bottom: 2.5rem;
}

.rfid-key-features[b-lltukhlxdv] {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.rfid-feature[b-lltukhlxdv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    color: var(--rfid-text-secondary);
    font-size: 1rem;
    border-left: 3px solid transparent;
    padding-left: 1rem;
    transition: var(--rfid-transition);
}

    .rfid-feature:hover[b-lltukhlxdv] {
        border-left-color: var(--rfid-accent-orange);
        transform: translateX(5px);
    }

    .rfid-feature i[b-lltukhlxdv] {
        color: var(--rfid-success);
        font-size: 1.2rem;
        flex-shrink: 0;
    }

/* Composants */
.rfid-components-list[b-lltukhlxdv] {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.rfid-component-item[b-lltukhlxdv] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 12px;
    transition: var(--rfid-transition);
}

    .rfid-component-item:hover[b-lltukhlxdv] {
        border-color: var(--rfid-accent-orange);
        background: rgba(255, 92, 0, 0.05);
        transform: translateX(8px);
    }

.rfid-component-icon[b-lltukhlxdv] {
    width: 50px;
    height: 50px;
    background: var(--rfid-primary-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.rfid-component-details h4[b-lltukhlxdv] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rfid-text-primary);
    margin-bottom: 0.5rem;
}

.rfid-component-details p[b-lltukhlxdv] {
    color: var(--rfid-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* Comparaison */
.rfid-comparison-container[b-lltukhlxdv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.rfid-comparison-column[b-lltukhlxdv] {
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid transparent;
    background: var(--rfid-bg-card);
    transition: var(--rfid-transition);
}

    .rfid-comparison-column:first-child[b-lltukhlxdv] {
        border-color: var(--rfid-error);
    }

    .rfid-comparison-column:last-child[b-lltukhlxdv] {
        border-color: var(--rfid-success);
    }

.rfid-old-tech-title[b-lltukhlxdv],
.rfid-new-tech-title[b-lltukhlxdv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.rfid-old-tech-title[b-lltukhlxdv] {
    color: var(--rfid-error);
}

.rfid-new-tech-title[b-lltukhlxdv] {
    color: var(--rfid-success);
}

.rfid-limitations-list[b-lltukhlxdv],
.rfid-advantages-list[b-lltukhlxdv] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

    .rfid-limitations-list li[b-lltukhlxdv],
    .rfid-advantages-list li[b-lltukhlxdv] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.95rem;
        color: var(--rfid-text-secondary);
        padding: 0.5rem 0;
    }

    .rfid-limitations-list i[b-lltukhlxdv] {
        color: var(--rfid-error);
        font-size: 1rem;
    }

    .rfid-advantages-list i[b-lltukhlxdv] {
        color: var(--rfid-success);
        font-size: 1rem;
    }

/* Statistiques */
.rfid-performance-stats[b-lltukhlxdv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.rfid-stat-item[b-lltukhlxdv] {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 12px;
    transition: var(--rfid-transition);
}

    .rfid-stat-item:hover[b-lltukhlxdv] {
        border-color: var(--rfid-accent-orange);
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(255, 92, 0, 0.1);
    }

.rfid-stat-number[b-lltukhlxdv] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--rfid-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.rfid-stat-label[b-lltukhlxdv] {
    font-size: 0.875rem;
    color: var(--rfid-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Résultats */
.rfid-results-grid[b-lltukhlxdv] {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.rfid-result-item[b-lltukhlxdv] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 12px;
    transition: var(--rfid-transition);
}

    .rfid-result-item:hover[b-lltukhlxdv] {
        border-color: var(--rfid-accent-orange);
        background: rgba(255, 92, 0, 0.05);
        transform: translateX(8px);
    }

.rfid-result-icon[b-lltukhlxdv] {
    width: 48px;
    height: 48px;
    background: var(--rfid-primary-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.rfid-result-content h4[b-lltukhlxdv] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rfid-text-primary);
    margin-bottom: 0.25rem;
}

.rfid-result-content p[b-lltukhlxdv] {
    font-size: 0.95rem;
    color: var(--rfid-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Boutons RFID */
.rfid-details-button[b-lltukhlxdv],
.rfid-cta-button[b-lltukhlxdv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    background: var(--rfid-primary-gradient);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--rfid-transition);
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
}

    .rfid-details-button[b-lltukhlxdv]::before,
    .rfid-cta-button[b-lltukhlxdv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
        z-index: 0;
    }

    .rfid-details-button:hover[b-lltukhlxdv]::before,
    .rfid-cta-button:hover[b-lltukhlxdv]::before {
        left: 100%;
    }

    .rfid-details-button span[b-lltukhlxdv],
    .rfid-cta-button span[b-lltukhlxdv],
    .rfid-details-button i[b-lltukhlxdv],
    .rfid-cta-button i[b-lltukhlxdv] {
        position: relative;
        z-index: 1;
    }

    .rfid-details-button:hover[b-lltukhlxdv],
    .rfid-cta-button:hover[b-lltukhlxdv] {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 35px rgba(255, 92, 0, 0.3);
    }

.rfid-cta-button[b-lltukhlxdv] {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    font-size: 1rem;
    padding: 1.2rem 3rem;
    font-weight: 700;
}

    .rfid-cta-button:hover[b-lltukhlxdv] {
        box-shadow: 0 12px 35px rgba(255, 75, 43, 0.4);
    }

    /* Focus states pour l'accessibilité */
    .rfid-details-button:focus[b-lltukhlxdv],
    .rfid-cta-button:focus[b-lltukhlxdv] {
        outline: 2px solid var(--rfid-accent-orange);
        outline-offset: 2px;
    }

/* Responsive Design Amélioré */

/* Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .rfid-service-block[b-lltukhlxdv] {
        max-width: 1600px;
        gap: 4rem;
        padding: 5rem 2rem;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 4rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2.5rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 450px;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        gap: 2rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 2.5rem 1.5rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 3rem;
    }
}

/* Large Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .rfid-service-block[b-lltukhlxdv] {
        gap: 3rem;
        padding: 4rem 2rem;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 3rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2.25rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 400px;
    }
}

/* Desktop Standard (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
    .rfid-service-block[b-lltukhlxdv] {
        gap: 2.5rem;
        padding: 3.5rem 1.5rem;
        grid-template-columns: 1fr 1fr; /* Garde 2 colonnes sur desktop */
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 2.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 350px;
    }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 1.05rem;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        gap: 1.5rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1.75rem 1rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 2.25rem;
    }
}

/* POINT DE RUPTURE CRITIQUE - TOUT EN DESSOUS = 1 COLONNE */
@media (max-width: 1023px) {
    .rfid-service-block[b-lltukhlxdv] {
        grid-template-columns: 1fr !important; /* Force 1 colonne sur tous les écrans < 1024px */
        gap: 2rem;
        text-align: center;
        padding: 2.5rem 1rem;
        display: grid;
    }

        /* Images TOUJOURS au-dessus */
        .rfid-service-block .rfid-service-image-box[b-lltukhlxdv] {
            order: 1 !important;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            height: 280px;
        }

        /* Contenu TOUJOURS en dessous */
        .rfid-service-block .rfid-service-content[b-lltukhlxdv] {
            order: 2 !important;
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }

        /* Annule TOUS les effets reverse */
        .rfid-service-block.reverse .rfid-service-image-box[b-lltukhlxdv] {
            order: 1 !important;
        }

        .rfid-service-block.reverse .rfid-service-content[b-lltukhlxdv] {
            order: 2 !important;
        }

    .rfid-service-content h2[b-lltukhlxdv] {
        font-size: 1.75rem;
        text-align: center;
    }

        .rfid-service-content h2[b-lltukhlxdv]::after {
            left: 50%;
            transform: translateX(-50%);
        }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .rfid-comparison-container[b-lltukhlxdv] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Tablet Portrait spécifique (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 3rem 1.5rem;
        gap: 2.5rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 300px;
        max-width: 600px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 2.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.875rem;
        }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        flex-direction: row;
        text-align: left;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Mobile Portrait (480px - 767px) */
@media (max-width: 767px) and (min-width: 480px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 2rem 1rem;
        gap: 1.5rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 250px;
        max-width: 500px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.75rem 1.25rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.95rem;
    }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.25rem;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1rem 0.5rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 1.75rem;
    }

    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv] {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.6rem 0.875rem;
        font-size: 0.8rem;
    }
}

/* Mobile Small (moins de 480px) - Votre téléphone 430x932 */
@media (max-width: 479px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 1.5rem 0.75rem;
        gap: 1.25rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 200px;
        max-width: 380px; /* Adapté à votre largeur 430px */
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.5rem 1rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.375rem;
            line-height: 1.3;
            margin-bottom: 1rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1rem 0.75rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 1.5rem;
    }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .rfid-component-icon[b-lltukhlxdv],
    .rfid-result-icon[b-lltukhlxdv] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv] {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.25rem;
        font-size: 0.8rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.375rem;
    }

    .rfid-feature[b-lltukhlxdv] {
        font-size: 0.85rem;
        padding: 0.5rem 0;
        padding-left: 0.75rem;
    }
}

/* Extra Small (moins de 380px) */
@media (max-width: 379px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 1rem 0.5rem;
        gap: 1rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 180px;
        max-width: 320px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.25rem 0.75rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.25rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.85rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
        gap: 0.25rem;
    }
}

/* Orientation landscape sur mobile */
@media (max-height: 600px) and (orientation: landscape) and (max-width: 1023px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 2rem 1rem;
        gap: 1.5rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 200px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1rem 0.5rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 1.5rem;
    }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        padding: 1rem;
        flex-direction: row;
        text-align: left;
    }

    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv] {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
        width: auto;
        display: inline-flex;
    }
}

/* Très grand écran (1600px+) */
@media (min-width: 1600px) {
    .rfid-service-block[b-lltukhlxdv] {
        max-width: 1800px;
        gap: 5rem;
        padding: 6rem 2rem;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 4.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2.75rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 500px;
    }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 1.2rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 1.25rem 2rem;
        font-size: 1rem;
    }
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .rfid-service-content[b-lltukhlxdv],
    .rfid-service-image-box[b-lltukhlxdv],
    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv],
    .rfid-feature[b-lltukhlxdv],
    .rfid-stat-item[b-lltukhlxdv],
    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv],
    .rfid-service-img[b-lltukhlxdv] {
        transition: none;
    }

        .rfid-service-content:hover[b-lltukhlxdv],
        .rfid-service-image-box:hover[b-lltukhlxdv],
        .rfid-component-item:hover[b-lltukhlxdv],
        .rfid-result-item:hover[b-lltukhlxdv],
        .rfid-feature:hover[b-lltukhlxdv],
        .rfid-stat-item:hover[b-lltukhlxdv],
        .rfid-details-button:hover[b-lltukhlxdv],
        .rfid-cta-button:hover[b-lltukhlxdv],
        .rfid-service-image-box:hover .rfid-service-img[b-lltukhlxdv] {
            transform: none;
        }

        .rfid-details-button[b-lltukhlxdv]::before,
        .rfid-cta-button[b-lltukhlxdv]::before {
            display: none;
        }
}

/* Animation smooth scroll */
html[b-lltukhlxdv] {
    scroll-behavior: smooth;
}

/* Animation d'entrée pour les sections */
@keyframes rfidFadeInUp-b-lltukhlxdv {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rfid-service-block[b-lltukhlxdv] {
    animation: rfidFadeInUp-b-lltukhlxdv 0.8s ease-out;
}

/* Styles pour les liens dans les boutons */
.rfid-details-button[b-lltukhlxdv],
.rfid-cta-button[b-lltukhlxdv] {
    text-decoration: none !important;
}

    .rfid-details-button:visited[b-lltukhlxdv],
    .rfid-cta-button:visited[b-lltukhlxdv] {
        color: white;
    }

    .rfid-details-button:active[b-lltukhlxdv],
    .rfid-cta-button:active[b-lltukhlxdv] {
        transform: translateY(-1px) scale(1.01);
    }
/* _content/Project2/Components/Shared/Section_video.razor.rz.scp.css */
/* Section Vidéo - Version Professionnelle */

.video-section[b-2ohrsoulgs] {
    position: relative;
    background: var(--bg-secondary);
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
    min-height: 100vh;
}

/* Fond animé subtil et professionnel */
.mesh-gradient[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(27, 112, 140, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(27, 112, 140, 0.05) 0%, transparent 60%), radial-gradient(circle at 40% 80%, rgba(74, 144, 164, 0.06) 0%, transparent 45%);
    animation: meshFloat-b-2ohrsoulgs 25s ease-in-out infinite;
    z-index: 1;
}

.grid-pattern[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 80px 80px;
    animation: gridMove-b-2ohrsoulgs 40s linear infinite;
    z-index: 1;
}

/* Orbes flottants professionnels */
.floating-orbs[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.orb[b-2ohrsoulgs] {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27, 112, 140, 0.15) 0%, rgba(27, 112, 140, 0.05) 40%, transparent 70%);
    filter: blur(2px);
    animation: orbFloat-b-2ohrsoulgs 20s ease-in-out infinite;
}

    .orb:nth-child(1)[b-2ohrsoulgs] {
        width: 250px;
        height: 250px;
        top: 15%;
        left: 10%;
        animation-delay: 0s;
        animation-duration: 30s;
    }

    .orb:nth-child(2)[b-2ohrsoulgs] {
        width: 180px;
        height: 180px;
        top: 65%;
        right: 15%;
        background: radial-gradient(circle, rgba(74, 144, 164, 0.12) 0%, rgba(74, 144, 164, 0.04) 40%, transparent 70%);
        animation-delay: -8s;
        animation-duration: 25s;
    }

    .orb:nth-child(3)[b-2ohrsoulgs] {
        width: 120px;
        height: 120px;
        top: 35%;
        right: 8%;
        animation-delay: -15s;
        animation-duration: 22s;
    }

    .orb:nth-child(4)[b-2ohrsoulgs] {
        width: 140px;
        height: 140px;
        bottom: 25%;
        left: 8%;
        background: radial-gradient(circle, rgba(42, 139, 168, 0.1) 0%, rgba(42, 139, 168, 0.03) 40%, transparent 70%);
        animation-delay: -20s;
        animation-duration: 28s;
    }

/* Particules discrètes */
.advanced-particles[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.particle[b-2ohrsoulgs] {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--primary-blue);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloat-b-2ohrsoulgs 25s linear infinite;
}

    .particle:nth-child(2n)[b-2ohrsoulgs] {
        background: var(--secondary-blue);
        animation-duration: 30s;
    }

    .particle:nth-child(3n)[b-2ohrsoulgs] {
        width: 1.5px;
        height: 1.5px;
        animation-duration: 35s;
    }

/* Lignes connectées subtiles */
.connection-lines[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.line[b-2ohrsoulgs] {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(27, 112, 140, 0.2), transparent);
    animation: lineGlow-b-2ohrsoulgs 12s ease-in-out infinite;
}

    .line:nth-child(1)[b-2ohrsoulgs] {
        top: 30%;
        left: 15%;
        width: 200px;
        animation-delay: 0s;
    }

    .line:nth-child(2)[b-2ohrsoulgs] {
        top: 70%;
        right: 20%;
        width: 150px;
        background: linear-gradient(90deg, transparent, rgba(74, 144, 164, 0.2), transparent);
        animation-delay: -4s;
    }

    .line:nth-child(3)[b-2ohrsoulgs] {
        top: 50%;
        left: 25%;
        width: 100px;
        transform: rotate(30deg);
        animation-delay: -8s;
    }

/* Contenu principal */
.video-container[b-2ohrsoulgs] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    position: relative;
    z-index: 10;
}

.video-header[b-2ohrsoulgs] {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    max-width: var(--max-width-text);
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp-b-2ohrsoulgs 1s ease-out;
}

    .video-header h2[b-2ohrsoulgs] {
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
        line-height: 1.2;
        color: var(--text-primary);
    }

.video-highlight[b-2ohrsoulgs] {
    color: var(--primary-blue);
    font-weight: 800;
    position: relative;
}

.video-subtitle[b-2ohrsoulgs] {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--text-secondary);
    line-height: 1.6;
}

    .video-subtitle strong[b-2ohrsoulgs] {
        color: var(--primary-blue);
        font-weight: 600;
    }

/* Zone vidéo */
.video-hero[b-2ohrsoulgs] {
    margin: 0 auto var(--spacing-3xl);
    max-width: 900px;
    animation: fadeInUp-b-2ohrsoulgs 1s ease-out 0.3s both;
}

.video-player-container[b-2ohrsoulgs] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
}

    .video-player-container[b-2ohrsoulgs]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-subtle);
        opacity: 0;
        transition: opacity 0.6s ease;
        z-index: 1;
        pointer-events: none;
    }

    .video-player-container:hover[b-2ohrsoulgs]::before {
        opacity: 0.3;
    }

    .video-player-container:hover[b-2ohrsoulgs] {
        transform: translateY(-8px) scale(1.01);
        box-shadow: var(--shadow-xl), 0 0 50px rgba(27, 112, 140, 0.15);
        border-color: var(--primary-blue);
    }

.video-player[b-2ohrsoulgs] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    background: var(--gray-800);
}

.video-overlay[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    z-index: 2;
}

.video-player:hover .video-overlay[b-2ohrsoulgs] {
    background: rgba(0, 0, 0, 0.5);
}

.play-button[b-2ohrsoulgs] {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 3;
    animation: playButtonPulse-b-2ohrsoulgs 4s ease-in-out infinite;
}

    .play-button:hover[b-2ohrsoulgs] {
        transform: scale(1.15);
        box-shadow: var(--shadow-xl), 0 0 30px rgba(27, 112, 140, 0.3);
    }

    .play-button i[b-2ohrsoulgs] {
        color: var(--text-white);
        font-size: 2rem;
        margin-left: 0.2rem;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

/* Container iframe pour vidéo */
.video-iframe-container[b-2ohrsoulgs] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

    .video-iframe-container iframe[b-2ohrsoulgs] {
        width: 100%;
        height: 100%;
        border: none;
    }

/* Section d'informations */
.video-info-section[b-2ohrsoulgs] {
    margin-top: var(--spacing-3xl);
    animation: fadeInUp-b-2ohrsoulgs 1s ease-out 0.6s both;
}

.video-features-grid[b-2ohrsoulgs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.video-feature-item[b-2ohrsoulgs] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .video-feature-item[b-2ohrsoulgs]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .video-feature-item:hover[b-2ohrsoulgs]::before {
        transform: scaleX(1);
    }

    .video-feature-item:hover[b-2ohrsoulgs] {
        transform: translateY(-5px);
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-lg);
        background: var(--bg-card);
    }

.video-feature-icon[b-2ohrsoulgs] {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}

.video-feature-item:hover .video-feature-icon[b-2ohrsoulgs] {
    transform: scale(1.05) rotate(3deg);
    box-shadow: var(--shadow-lg);
}

.video-feature-content h4[b-2ohrsoulgs] {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.video-feature-content p[b-2ohrsoulgs] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Statistiques */
.video-stats[b-2ohrsoulgs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.video-stat[b-2ohrsoulgs] {
    text-align: center;
    padding: var(--spacing-md);
    transition: all var(--transition);
}

    .video-stat:hover[b-2ohrsoulgs] {
        transform: translateY(-4px);
    }

.stat-number-large[b-2ohrsoulgs] {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.stat-label-large[b-2ohrsoulgs] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Animations */
@keyframes meshFloat-b-2ohrsoulgs {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(0.5deg);
    }

    50% {
        transform: translateY(-8px) rotate(0deg);
    }

    75% {
        transform: translateY(-20px) rotate(-0.5deg);
    }
}

@keyframes gridMove-b-2ohrsoulgs {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(80px, 80px);
    }
}

@keyframes orbFloat-b-2ohrsoulgs {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
    }

    25% {
        transform: translateY(-20px) translateX(15px) scale(1.05);
    }

    50% {
        transform: translateY(-8px) translateX(-10px) scale(0.95);
    }

    75% {
        transform: translateY(-25px) translateX(8px) scale(1.02);
    }
}

@keyframes particleFloat-b-2ohrsoulgs {
    0% {
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-10vh) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes lineGlow-b-2ohrsoulgs {
    0%, 100% {
        opacity: 0.2;
        transform: scaleX(1);
    }

    50% {
        opacity: 0.4;
        transform: scaleX(1.1);
    }
}

@keyframes fadeInUp-b-2ohrsoulgs {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes playButtonPulse-b-2ohrsoulgs {
    0%, 100% {
        box-shadow: var(--shadow-lg), 0 0 0 0 rgba(27, 112, 140, 0.4);
    }

    50% {
        box-shadow: var(--shadow-lg), 0 0 0 15px rgba(27, 112, 140, 0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .video-features-grid[b-2ohrsoulgs] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .video-section[b-2ohrsoulgs] {
        padding: var(--spacing-2xl) 0;
    }

    .video-container[b-2ohrsoulgs] {
        padding: 0 var(--spacing-md);
    }

    .video-header[b-2ohrsoulgs] {
        margin-bottom: var(--spacing-xl);
    }

    .video-hero[b-2ohrsoulgs] {
        margin-bottom: var(--spacing-xl);
    }

    .video-info-section[b-2ohrsoulgs] {
        margin-top: var(--spacing-xl);
    }

    .orb[b-2ohrsoulgs] {
        display: none;
    }

    .line[b-2ohrsoulgs] {
        display: none;
    }

    .play-button[b-2ohrsoulgs] {
        width: 60px;
        height: 60px;
    }

        .play-button i[b-2ohrsoulgs] {
            font-size: 1.5rem;
        }

    .video-feature-item[b-2ohrsoulgs] {
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .video-stats[b-2ohrsoulgs] {
        padding: var(--spacing-lg);
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .video-features-grid[b-2ohrsoulgs] {
        grid-template-columns: 1fr;
    }

    .video-feature-item[b-2ohrsoulgs] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .video-stats[b-2ohrsoulgs] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .mesh-gradient[b-2ohrsoulgs],
    .grid-pattern[b-2ohrsoulgs],
    .orb[b-2ohrsoulgs],
    .particle[b-2ohrsoulgs],
    .line[b-2ohrsoulgs],
    .play-button[b-2ohrsoulgs],
    .video-feature-item[b-2ohrsoulgs],
    .video-stat[b-2ohrsoulgs] {
        animation: none;
    }

        .video-player-container:hover[b-2ohrsoulgs],
        .video-feature-item:hover[b-2ohrsoulgs],
        .video-stat:hover[b-2ohrsoulgs] {
            transform: none;
        }
}
/* _content/Project2/Components/Shared/SubscribePage/ComparatifSection.razor.rz.scp.css */
/* ===== SECTION COMPARAISON - CSS DÉDIÉ ===== */

.comparison-section[b-ve6n9a9h13] {
    padding: 5rem 0;
}

.comparison-title[b-ve6n9a9h13] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.comparison-description[b-ve6n9a9h13] {
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-3xl);
}

/* ===== UTILITAIRES D'AFFICHAGE ===== */
.desktop-only[b-ve6n9a9h13] {
    display: block;
}

.mobile-only[b-ve6n9a9h13] {
    display: none;
}

/* ===== TABLEAU DE COMPARAISON DESKTOP ===== */
.comparison-table-wrapper[b-ve6n9a9h13] {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.comparison-table-container[b-ve6n9a9h13] {
    overflow-x: auto;
}

.comparison-table[b-ve6n9a9h13] {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

    /* En-têtes du tableau */
    .comparison-table thead th[b-ve6n9a9h13] {
        background: var(--gradient-primary);
        color: var(--white);
        padding: var(--spacing-xl);
        text-align: center;
        font-weight: 600;
        border-bottom: 2px solid var(--primary-blue-dark);
        position: sticky;
        top: 0;
        z-index: 10;
    }

.feature-column[b-ve6n9a9h13] {
    width: 300px;
    text-align: left !important;
    background: var(--primary-blue-dark);
}

.plan-column[b-ve6n9a9h13] {
    min-width: 180px;
    border-left: 2px solid var(--primary-blue-dark);
    background: var(--plan-color, var(--primary-blue));
}

.th-content[b-ve6n9a9h13] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.feature-column .th-content[b-ve6n9a9h13] {
    align-items: flex-start;
    flex-direction: row;
}

.plan-name[b-ve6n9a9h13] {
    font-size: 1.125rem;
    font-weight: 700;
}

.plan-price[b-ve6n9a9h13] {
    font-size: 1.5rem;
    font-weight: 800;
    opacity: 0.9;
}

    .plan-price small[b-ve6n9a9h13] {
        font-size: 0.8rem;
        opacity: 0.8;
    }

/* ===== LIGNES DU TABLEAU ===== */
.feature-row[b-ve6n9a9h13] {
    transition: background-color var(--transition);
}

    .feature-row:nth-child(even)[b-ve6n9a9h13] {
        background: var(--gray-50);
    }

    .feature-row:hover[b-ve6n9a9h13] {
        background: var(--bg-accent);
    }

.feature-name[b-ve6n9a9h13] {
    padding: var(--spacing-lg);
    border-right: 2px solid var(--border-color);
    background: var(--white);
}

.sticky-column[b-ve6n9a9h13] {
    position: sticky;
    left: 0;
    z-index: 5;
    border-right: 2px solid var(--border-color);
}

.feature-info[b-ve6n9a9h13] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.feature-icon[b-ve6n9a9h13] {
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-details strong[b-ve6n9a9h13] {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.feature-details small[b-ve6n9a9h13] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ===== STATUTS ET VALEURS DES FONCTIONNALITÉS ===== */
.feature-status[b-ve6n9a9h13],
.feature-value[b-ve6n9a9h13] {
    padding: var(--spacing-lg);
    text-align: center;
    border-left: 1px solid var(--border-color);
}

.status-badge[b-ve6n9a9h13] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 100px;
    justify-content: center;
}

    .status-badge.included[b-ve6n9a9h13] {
        background: var(--gradient-primary);
        color: var(--white);
    }

    .status-badge.excluded[b-ve6n9a9h13] {
        background: var(--gray-200);
        color: var(--gray-600);
    }

.value-badge[b-ve6n9a9h13] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    min-width: 100px;
}

    .value-badge.has-value[b-ve6n9a9h13] {
        background: var(--gradient-primary);
        color: var(--white);
    }

    .value-badge.no-value[b-ve6n9a9h13] {
        background: var(--gray-200);
        color: var(--gray-600);
    }

.value-number[b-ve6n9a9h13] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.value-unit[b-ve6n9a9h13] {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: var(--spacing-xs);
}

/* ===== VERSION MOBILE DES CARTES ===== */
.comparison-mobile[b-ve6n9a9h13] {
    display: grid;
    gap: var(--spacing-xl);
}

.mobile-plan-card[b-ve6n9a9h13] {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    border: 2px solid var(--border-color);
    overflow: hidden;
    border-top: 4px solid var(--plan-color, var(--primary-blue));
}

.mobile-plan-header[b-ve6n9a9h13] {
    background: linear-gradient(135deg, var(--plan-color, var(--primary-blue)), rgba(0, 119, 182, 0.8));
    color: var(--white);
    padding: var(--spacing-xl);
    text-align: center;
}

.mobile-plan-name[b-ve6n9a9h13] {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.mobile-plan-price[b-ve6n9a9h13] {
    font-size: 2rem;
    font-weight: 800;
    opacity: 0.95;
}

    .mobile-plan-price small[b-ve6n9a9h13] {
        font-size: 0.9rem;
        opacity: 0.8;
    }

.mobile-features-list[b-ve6n9a9h13] {
    padding: var(--spacing-xl);
}

.mobile-feature-item[b-ve6n9a9h13] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

    .mobile-feature-item:last-child[b-ve6n9a9h13] {
        border-bottom: none;
    }

.mobile-feature-info[b-ve6n9a9h13] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-primary);
    font-weight: 500;
}

    .mobile-feature-info i[b-ve6n9a9h13] {
        width: 24px;
        color: var(--primary-blue);
    }

.mobile-feature-status[b-ve6n9a9h13] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .mobile-feature-status.included[b-ve6n9a9h13] {
        background: var(--gradient-primary);
        color: var(--white);
    }

    .mobile-feature-status.excluded[b-ve6n9a9h13] {
        background: var(--gray-200);
        color: var(--gray-600);
    }

.mobile-feature-value[b-ve6n9a9h13] {
    background: var(--primary-blue);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

.mobile-plan-actions[b-ve6n9a9h13] {
    padding: var(--spacing-xl);
    background: var(--bg-accent);
    border-top: 1px solid var(--border-color);
}

.mobile-subscribe-btn[b-ve6n9a9h13] {
    width: 100%;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

    .mobile-subscribe-btn:hover[b-ve6n9a9h13] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .comparison-table[b-ve6n9a9h13] {
        min-width: 900px;
    }
}

@media (max-width: 992px) {
    .desktop-only[b-ve6n9a9h13] {
        display: none;
    }
    .comparison-section[b-ve6n9a9h13]{
        display:none;
    }
    .mobile-only[b-ve6n9a9h13] {
        display: block;
    }

    .comparison-mobile[b-ve6n9a9h13] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .comparison-section[b-ve6n9a9h13] {
        padding: 4rem 0;
    }

    .comparison-title[b-ve6n9a9h13] {
        font-size: 2rem;
    }

    .comparison-description[b-ve6n9a9h13] {
        font-size: 1rem;
    }

    .mobile-plan-header[b-ve6n9a9h13],
    .mobile-features-list[b-ve6n9a9h13],
    .mobile-plan-actions[b-ve6n9a9h13] {
        padding: var(--spacing-lg);
    }

    .mobile-plan-name[b-ve6n9a9h13] {
        font-size: 1.25rem;
    }

    .mobile-plan-price[b-ve6n9a9h13] {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .comparison-section[b-ve6n9a9h13] {
        padding: 3rem 0;
    }

    .comparison-title[b-ve6n9a9h13] {
        font-size: 1.75rem;
    }

    .mobile-feature-item[b-ve6n9a9h13] {
        padding: var(--spacing-sm) 0;
    }

    .mobile-feature-info[b-ve6n9a9h13] {
        gap: var(--spacing-sm);
    }

        .mobile-feature-info i[b-ve6n9a9h13] {
            width: 20px;
        }

    .mobile-feature-status[b-ve6n9a9h13] {
        width: 28px;
        height: 28px;
    }

    .mobile-feature-value[b-ve6n9a9h13] {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8rem;
        min-width: 50px;
    }
}

/* ===== AMÉLIORATIONS D'ACCESSIBILITÉ ===== */
.mobile-subscribe-btn:focus[b-ve6n9a9h13] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-subscribe-btn:hover[b-ve6n9a9h13] {
        transform: none;
    }

    .feature-row[b-ve6n9a9h13] {
        transition: none;
    }
}

/* ===== ÉTATS DE SURVOL AMÉLIORÉS ===== */
.comparison-table tbody tr:hover .feature-name[b-ve6n9a9h13] {
    background: var(--bg-accent);
}

.mobile-plan-card:hover[b-ve6n9a9h13] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.mobile-plan-card[b-ve6n9a9h13] {
    transition: all var(--transition);
}
/* _content/Project2/Components/Shared/SubscribePage/Subscribe.razor.rz.scp.css */
/* ===== PAGE SUBSCRIBE - CSS COMPLET ===== */

/* Container principal de la page */
.subscription-page[b-sb05gmrnwp] {
    min-height: 100vh;
}

/* ===== HERO SECTION ===== */
.subscription-hero[b-sb05gmrnwp] {
    position: relative;
    padding: 2rem 0 0rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.02) 0%, rgba(0, 180, 216, 0.02) 100%);
    border-bottom: 1px solid var(--border-color);
}

.hero-content[b-sb05gmrnwp] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.hero-title[b-sb05gmrnwp] {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-sb05gmrnwp] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.6;
}

.hero-features[b-sb05gmrnwp] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.hero-feature[b-sb05gmrnwp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 150px;
}

.hero-icon[b-sb05gmrnwp] {
    width: 64px;
    height: 64px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    box-shadow: var(--shadow-colored);
}

.hero-feature span[b-sb05gmrnwp] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: center;
}

/* ===== SECTION TARIFICATION ===== */
.subscription-content[b-sb05gmrnwp] {
    padding: 5rem 0;
    background: var(--white);
}

.plans-section-title[b-sb05gmrnwp] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.plans-section-description[b-sb05gmrnwp] {
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-3xl);
}

/* Toggle de prix */
.pricing-controls[b-sb05gmrnwp] {
    margin-bottom: var(--spacing-3xl);
}

.pricing-toggle[b-sb05gmrnwp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.toggle-container[b-sb05gmrnwp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background: var(--gray-100);
    padding: var(--spacing-sm);
    border-radius: 50px;
    box-shadow: var(--shadow-sm);
}

.toggle-label[b-sb05gmrnwp] {
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--transition);
}

    .toggle-label.active[b-sb05gmrnwp] {
        color: var(--primary-blue);
    }

.price-switch[b-sb05gmrnwp] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

    .price-switch input[b-sb05gmrnwp] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switch-slider[b-sb05gmrnwp] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gray-300);
    transition: var(--transition);
    border-radius: 28px;
}

    .switch-slider[b-sb05gmrnwp]:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background: var(--white);
        transition: var(--transition);
        border-radius: 50%;
        box-shadow: var(--shadow-sm);
    }

input:checked + .switch-slider[b-sb05gmrnwp] {
    background: var(--primary-blue);
}

    input:checked + .switch-slider[b-sb05gmrnwp]:before {
        transform: translateX(24px);
    }

.savings-badge[b-sb05gmrnwp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--gradient-primary);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-colored);
}

/* ===== GRILLE DES PLANS ===== */
.plans-grid[b-sb05gmrnwp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

/* Cartes de plan */
.plan-card[b-sb05gmrnwp] {
    position: relative;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    transition: all var(--transition);
    box-shadow: var(--shadow);
    height: fit-content;
}

    .plan-card:hover[b-sb05gmrnwp] {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--plan-color, var(--primary-blue));
    }

    .plan-card.recommended[b-sb05gmrnwp] {
        border-color: var(--plan-color, var(--primary-blue));
        box-shadow: 0 20px 40px rgba(0, 119, 182, 0.15);
        transform: scale(1.02);
    }

        .plan-card.recommended:hover[b-sb05gmrnwp] {
            transform: scale(1.02) translateY(-8px);
        }

.recommended-badge[b-sb05gmrnwp] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--plan-color, var(--primary-blue));
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-lg);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: var(--shadow-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* En-tête du plan */
.plan-header[b-sb05gmrnwp] {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.plan-name[b-sb05gmrnwp] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.plan-pricing[b-sb05gmrnwp] {
    margin-bottom: var(--spacing-sm);
}

.price-display[b-sb05gmrnwp] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.price-value[b-sb05gmrnwp] {
    font-size: 3rem;
    font-weight: 800;
    color: var(--plan-color, var(--primary-blue));
    line-height: 1;
}

.price-currency[b-sb05gmrnwp] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--plan-color, var(--primary-blue));
}

.price-period[b-sb05gmrnwp] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.price-discount[b-sb05gmrnwp] {
    background: var(--gradient-primary);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-top: var(--spacing-sm);
}

/* Description du plan */
.plan-description[b-sb05gmrnwp] {
    margin-bottom: var(--spacing-xl);
}

    .plan-description p[b-sb05gmrnwp] {
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
    }

/* Fonctionnalités */
.plan-features[b-sb05gmrnwp] {
    margin-bottom: var(--spacing-xl);
}

.features-title[b-sb05gmrnwp] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.features-list[b-sb05gmrnwp] {
    list-style: none;
    margin: 0 0 var(--spacing-lg) 0;
    padding: 0;
}

.feature-item[b-sb05gmrnwp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.feature-icon[b-sb05gmrnwp] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.feature-item.included .feature-icon[b-sb05gmrnwp] {
    background: var(--gradient-primary);
    color: var(--white);
}

.feature-item.excluded .feature-icon[b-sb05gmrnwp] {
    background: var(--gray-200);
    color: var(--gray-500);
}

.feature-item.included span[b-sb05gmrnwp] {
    color: var(--text-primary);
    font-weight: 500;
}

.feature-item.excluded span[b-sb05gmrnwp] {
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Informations additionnelles */
.additional-info[b-sb05gmrnwp] {
    background: var(--bg-accent);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    margin-top: var(--spacing-lg);
}

.info-item[b-sb05gmrnwp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

    .info-item:last-child[b-sb05gmrnwp] {
        margin-bottom: 0;
    }

.info-icon[b-sb05gmrnwp] {
    width: 32px;
    height: 32px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.info-item span[b-sb05gmrnwp] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Actions du plan */
.plan-actions[b-sb05gmrnwp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.subscribe-btn[b-sb05gmrnwp] {
    width: 100%;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-colored);
}

    .subscribe-btn:hover[b-sb05gmrnwp] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

.details-btn[b-sb05gmrnwp] {
    width: 100%;
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

    .details-btn:hover[b-sb05gmrnwp] {
        background: var(--primary-blue);
        color: var(--white);
        transform: translateY(-2px);
    }

/* ===== ÉTATS DE CHARGEMENT ET D'ERREUR ===== */
.loading-section[b-sb05gmrnwp],
.error-section[b-sb05gmrnwp] {
    text-align: center;
    padding: var(--spacing-3xl);
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    margin: var(--spacing-2xl) 0;
}

.loading-spinner[b-sb05gmrnwp] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-sb05gmrnwp 1s linear infinite;
    margin: 0 auto var(--spacing-lg);
}

.error-icon[b-sb05gmrnwp] {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-blue);
}

.retry-button[b-sb05gmrnwp] {
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

    .retry-button:hover[b-sb05gmrnwp] {
        background: var(--primary-blue-dark);
        transform: translateY(-2px);
    }

/* ===== MODAL DE DÉTAILS ===== */
.detail-modal-overlay[b-sb05gmrnwp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-lg);
    backdrop-filter: blur(5px);
}

.detail-modal-content[b-sb05gmrnwp] {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 2px solid var(--plan-color, var(--primary-blue));
}

.detail-header[b-sb05gmrnwp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 119, 182, 0.02);
}

.detail-title[b-sb05gmrnwp] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.close-button[b-sb05gmrnwp] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

    .close-button:hover[b-sb05gmrnwp] {
        background: var(--gray-100);
        color: var(--text-primary);
    }

.detail-body[b-sb05gmrnwp] {
    padding: var(--spacing-xl);
}

    .detail-body h4[b-sb05gmrnwp] {
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-sm);
        border-bottom: 2px solid var(--plan-color, var(--primary-blue));
        font-size: 1.25rem;
    }

.pricing-breakdown[b-sb05gmrnwp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.pricing-option[b-sb05gmrnwp] {
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition);
}

    .pricing-option.highlighted[b-sb05gmrnwp] {
        border-color: var(--plan-color, var(--primary-blue));
        background: rgba(0, 119, 182, 0.02);
    }

.option-header[b-sb05gmrnwp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.option-period[b-sb05gmrnwp] {
    font-weight: 600;
    color: var(--text-primary);
}

.option-price[b-sb05gmrnwp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--plan-color, var(--primary-blue));
}

.option-savings[b-sb05gmrnwp] {
    font-size: 0.875rem;
    color: var(--plan-color, var(--primary-blue));
    font-weight: 600;
}

.features-breakdown[b-sb05gmrnwp] {
    margin-bottom: var(--spacing-xl);
}

.feature-category[b-sb05gmrnwp] {
    margin-bottom: var(--spacing-lg);
}

    .feature-category h5[b-sb05gmrnwp] {
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
        font-size: 1.125rem;
    }

.feature-list[b-sb05gmrnwp] {
    background: var(--bg-accent);
    padding: var(--spacing-md);
    border-radius: var(--radius);
}

.feature-row[b-sb05gmrnwp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

    .feature-row:last-child[b-sb05gmrnwp] {
        border-bottom: none;
    }

.feature-label[b-sb05gmrnwp] {
    color: var(--text-primary);
    font-weight: 500;
}

.feature-status[b-sb05gmrnwp] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

    .feature-status.check[b-sb05gmrnwp] {
        background: var(--gradient-primary);
        color: var(--white);
    }

    .feature-status.cross[b-sb05gmrnwp] {
        background: var(--gray-200);
        color: var(--gray-500);
    }

.resource-list[b-sb05gmrnwp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.resource-item[b-sb05gmrnwp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.resource-icon[b-sb05gmrnwp] {
    width: 40px;
    height: 40px;
    background: var(--plan-color, var(--primary-blue));
    color: var(--white);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.resource-info[b-sb05gmrnwp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.resource-label[b-sb05gmrnwp] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.resource-value[b-sb05gmrnwp] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.description-detail[b-sb05gmrnwp] {
    margin-bottom: var(--spacing-xl);
}

.full-description[b-sb05gmrnwp] {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.detail-actions[b-sb05gmrnwp] {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.subscribe-btn.large[b-sb05gmrnwp] {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: 1.125rem;
}

/* ===== FAQ SECTION ===== */
.faq-section[b-sb05gmrnwp] {
    padding: 5rem 0;
    background: var(--white);
    text-align: center;
}

.faq-title[b-sb05gmrnwp] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-3xl);
    justify-content: center;
    justify-self: center;
}

.faq-accordion[b-sb05gmrnwp] {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item[b-sb05gmrnwp] {
    background: var(--white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all var(--transition);
}

    .faq-item:hover[b-sb05gmrnwp] {
        box-shadow: var(--shadow-md);
    }

.faq-question[b-sb05gmrnwp] {
    padding: var(--spacing-xl);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition);
}

    .faq-question:hover[b-sb05gmrnwp] {
        background: var(--bg-accent);
    }

    .faq-question h4[b-sb05gmrnwp] {
        margin: 0;
        color: var(--text-primary);
        font-size: 1.125rem;
        font-weight: 600;
    }

.faq-toggle[b-sb05gmrnwp] {
    color: var(--primary-blue);
    font-size: 1.25rem;
    transition: transform var(--transition);
}

.faq-answer[b-sb05gmrnwp] {
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition);
}

    .faq-answer.open[b-sb05gmrnwp] {
        max-height: 1000px;
        padding: 0 var(--spacing-xl) var(--spacing-xl);
    }

    .faq-answer p[b-sb05gmrnwp] {
        color: var(--text-secondary);
        line-height: 1.7;
        margin: 0;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .plans-grid[b-sb05gmrnwp] {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--spacing-xl);
    }

    .comparison-table[b-sb05gmrnwp] {
        min-width: 900px;
    }
}

@media (max-width: 992px) {
    .desktop-only[b-sb05gmrnwp] {
        display: none;
    }

    .mobile-only[b-sb05gmrnwp] {
        display: block;
    }
}

@media (max-width: 768px) {
    .subscription-hero[b-sb05gmrnwp] {
        padding: 4rem 0 3rem;
    }

    .hero-title[b-sb05gmrnwp] {
        font-size: 2.5rem;
    }

    .hero-description[b-sb05gmrnwp] {
        font-size: 1.125rem;
    }

    .hero-features[b-sb05gmrnwp] {
        gap: var(--spacing-lg);
    }

    .hero-feature[b-sb05gmrnwp] {
        min-width: 120px;
    }

    .hero-icon[b-sb05gmrnwp] {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }

    .plans-grid[b-sb05gmrnwp] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .plan-card.recommended[b-sb05gmrnwp] {
        transform: none;
    }

        .plan-card.recommended:hover[b-sb05gmrnwp] {
            transform: translateY(-4px);
        }

    .pricing-breakdown[b-sb05gmrnwp] {
        gap: var(--spacing-sm);
    }

    .pricing-option[b-sb05gmrnwp] {
        padding: var(--spacing-md);
    }

    .toggle-container[b-sb05gmrnwp] {
        gap: var(--spacing-md);
    }

    .detail-modal-overlay[b-sb05gmrnwp] {
        padding: var(--spacing-md);
    }

    .detail-header[b-sb05gmrnwp] {
        padding: var(--spacing-lg);
    }

    .detail-body[b-sb05gmrnwp] {
        padding: var(--spacing-lg);
    }

    .comparison-mobile[b-sb05gmrnwp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .subscription-hero[b-sb05gmrnwp] {
        padding: 3rem 0 2rem;
    }

    .hero-title[b-sb05gmrnwp] {
        font-size: 2rem;
    }

    .hero-features[b-sb05gmrnwp] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .plan-card[b-sb05gmrnwp] {
        padding: var(--spacing-lg);
    }

    .price-value[b-sb05gmrnwp] {
        font-size: 2.5rem;
    }

    .price-currency[b-sb05gmrnwp] {
        font-size: 1.25rem;
    }

    .plan-actions[b-sb05gmrnwp] {
        gap: var(--spacing-sm);
    }

    .subscribe-btn[b-sb05gmrnwp],
    .details-btn[b-sb05gmrnwp] {
        padding: var(--spacing-md);
        font-size: 0.9rem;
    }

    .faq-question[b-sb05gmrnwp] {
        padding: var(--spacing-lg);
    }

    .faq-answer.open[b-sb05gmrnwp] {
        padding: 0 var(--spacing-lg) var(--spacing-lg);
    }

    .mobile-plan-header[b-sb05gmrnwp],
    .mobile-features-list[b-sb05gmrnwp],
    .mobile-plan-actions[b-sb05gmrnwp] {
        padding: var(--spacing-lg);
    }

    .comparison-title[b-sb05gmrnwp],
    .faq-title[b-sb05gmrnwp] {
        font-size: 2rem;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes spin-b-sb05gmrnwp {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Focus states pour l'accessibilité */
.subscribe-btn:focus[b-sb05gmrnwp],
.details-btn:focus[b-sb05gmrnwp],
.mobile-subscribe-btn:focus[b-sb05gmrnwp],
.retry-button:focus[b-sb05gmrnwp],
.close-button:focus[b-sb05gmrnwp],
.faq-question:focus[b-sb05gmrnwp] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Améliorations d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    *[b-sb05gmrnwp] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .plan-card:hover[b-sb05gmrnwp],
    .subscribe-btn:hover[b-sb05gmrnwp],
    .details-btn:hover[b-sb05gmrnwp] {
        transform: none;
    }
}
/* _content/Project2/Components/Shared/Test.razor.rz.scp.css */
/* Variables CSS - Thème Professionnel */
:root[b-1t4o9xweqg] {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #3b82f6;
    --success-color: #10b981;
    --success-hover: #059669;
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    --info-color: #06b6d4;
    --info-hover: #0891b2;
    /* Grays */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
}

/* Thème sombre */
[data-theme="dark"][b-1t4o9xweqg] {
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
}

/* Reset et base */
*[b-1t4o9xweqg] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-1t4o9xweqg] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.5;
    font-size: 14px;
    overflow-x: hidden;
}

/* Layout principal */
.app-container[b-1t4o9xweqg] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--gray-50);
}

/* Sidebar - Catalogue de tâches */
.sidebar[b-1t4o9xweqg] {
    width: 320px;
    background: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    z-index: 100;
}

.sidebar-header[b-1t4o9xweqg] {
    padding: var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

    .sidebar-header h2[b-1t4o9xweqg] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: var(--space-xs);
    }

.sidebar-subtitle[b-1t4o9xweqg] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
}

.task-catalog[b-1t4o9xweqg] {
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    scroll-behavior: smooth;
}

    .task-catalog[b-1t4o9xweqg]::-webkit-scrollbar {
        width: 6px;
    }

    .task-catalog[b-1t4o9xweqg]::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 3px;
    }

    .task-catalog[b-1t4o9xweqg]::-webkit-scrollbar-thumb {
        background: var(--gray-300);
        border-radius: 3px;
    }

        .task-catalog[b-1t4o9xweqg]::-webkit-scrollbar-thumb:hover {
            background: var(--gray-400);
        }

/* Task Items */
.task-item[b-1t4o9xweqg] {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .task-item:hover[b-1t4o9xweqg] {
        background: var(--gray-50);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        border-color: var(--gray-300);
    }

    .task-item.selected[b-1t4o9xweqg] {
        background: #eff6ff;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
    }

.task-header[b-1t4o9xweqg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.task-title[b-1t4o9xweqg] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    flex: 1;
}

.task-actions[b-1t4o9xweqg] {
    display: flex;
    gap: var(--space-xs);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.task-item:hover .task-actions[b-1t4o9xweqg],
.task-item.selected .task-actions[b-1t4o9xweqg] {
    opacity: 1;
}

.task-action-btn[b-1t4o9xweqg] {
    background: transparent;
    border: 1px solid var(--gray-300);
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: all var(--transition-fast);
}

    .task-action-btn:hover[b-1t4o9xweqg] {
        background: var(--gray-100);
        border-color: var(--gray-400);
        transform: scale(1.05);
    }

.task-meta[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: 0.875rem;
}

.task-duration[b-1t4o9xweqg] {
    color: var(--gray-600);
    font-weight: 500;
}

.task-category[b-1t4o9xweqg] {
    color: var(--gray-500);
}

.task-description[b-1t4o9xweqg] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.4;
    margin-top: var(--space-sm);
}

.add-task-btn[b-1t4o9xweqg] {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.975rem;
    transition: all var(--transition-normal);
    margin: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

    .add-task-btn:hover[b-1t4o9xweqg] {
        background: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .add-task-btn:active[b-1t4o9xweqg] {
        transform: translateY(0);
        box-shadow: var(--shadow-sm);
    }

.btn-icon[b-1t4o9xweqg] {
    font-size: 1.1rem;
}

/* Main content */
.main-content[b-1t4o9xweqg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--gray-50);
}

/* Header */
.header[b-1t4o9xweqg] {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 50;
}

.header-left[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.header-right[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* View Selector */
.view-selector[b-1t4o9xweqg] {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 4px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
}

.view-btn[b-1t4o9xweqg] {
    background: transparent;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-weight: 500;
    font-size: 0.925rem;
    color: var(--gray-700);
    position: relative;
}

    .view-btn.active[b-1t4o9xweqg] {
        background: white;
        color: var(--primary-color);
        box-shadow: var(--shadow-sm);
        font-weight: 600;
    }

    .view-btn:hover:not(.active)[b-1t4o9xweqg] {
        background: var(--gray-200);
        color: var(--gray-800);
    }

/* Navigation */
.navigation[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.nav-btn[b-1t4o9xweqg] {
    background: white;
    border: 1px solid var(--gray-300);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    font-weight: 500;
    color: var(--gray-700);
    min-width: 44px;
    height: 44px;
}

    .nav-btn:hover[b-1t4o9xweqg] {
        background: var(--gray-50);
        border-color: var(--gray-400);
        color: var(--gray-800);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.current-date[b-1t4o9xweqg] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 var(--space-lg);
    min-width: 200px;
    text-align: center;
    color: var(--gray-900);
}

/* Toolbar */
.toolbar[b-1t4o9xweqg] {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-md) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.toolbar-section[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.toolbar-btn[b-1t4o9xweqg] {
    background: white;
    border: 1px solid var(--gray-300);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 500;
    font-size: 0.925rem;
    transition: all var(--transition-normal);
    color: var(--gray-700);
}

    .toolbar-btn:hover[b-1t4o9xweqg] {
        background: var(--gray-50);
        border-color: var(--gray-400);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .toolbar-btn.primary[b-1t4o9xweqg] {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

        .toolbar-btn.primary:hover[b-1t4o9xweqg] {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
        }

    .toolbar-btn.secondary[b-1t4o9xweqg] {
        background: var(--info-color);
        color: white;
        border-color: var(--info-color);
    }

        .toolbar-btn.secondary:hover[b-1t4o9xweqg] {
            background: var(--info-hover);
            border-color: var(--info-hover);
        }

/* Search */
.search-box[b-1t4o9xweqg] {
    position: relative;
}

.search-input[b-1t4o9xweqg] {
    padding: var(--space-sm) var(--space-md) var(--space-sm) 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
    width: 280px;
    transition: all var(--transition-normal);
    font-size: 0.925rem;
}

    .search-input:focus[b-1t4o9xweqg] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
    }

.search-icon[b-1t4o9xweqg] {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 1rem;
}

/* Theme Toggle */
.theme-toggle[b-1t4o9xweqg] {
    background: white;
    border: 1px solid var(--gray-300);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

    .theme-toggle:hover[b-1t4o9xweqg] {
        background: var(--gray-50);
        border-color: var(--gray-400);
        transform: scale(1.05);
    }

/* Calendar Container */
.calendar-container[b-1t4o9xweqg] {
    flex: 1;
    overflow: hidden;
    background: white;
    margin: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-200);
}

/* Vue Mois */
.month-view[b-1t4o9xweqg] {
    display: none;
    height: 100%;
    flex-direction: column;
}

    .month-view.active[b-1t4o9xweqg] {
        display: flex;
    }

.month-header[b-1t4o9xweqg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.month-day-header[b-1t4o9xweqg] {
    padding: var(--space-lg);
    text-align: center;
    font-weight: 700;
    font-size: 0.925rem;
    color: var(--gray-700);
    border-right: 1px solid var(--gray-200);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .month-day-header:last-child[b-1t4o9xweqg] {
        border-right: none;
    }

.month-grid[b-1t4o9xweqg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
}

.month-day[b-1t4o9xweqg] {
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-sm);
    min-height: 120px;
    position: relative;
    background: white;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}

    .month-day:last-child[b-1t4o9xweqg] {
        border-right: none;
    }

    .month-day:hover[b-1t4o9xweqg] {
        background: var(--gray-50);
    }

    .month-day.selected[b-1t4o9xweqg] {
        background: #eff6ff;
        border-color: var(--primary-color);
        box-shadow: inset 0 0 0 1px var(--primary-color);
    }

    .month-day.other-month[b-1t4o9xweqg] {
        background: var(--gray-50);
        color: var(--gray-400);
    }

        .month-day.other-month:hover[b-1t4o9xweqg] {
            background: var(--gray-100);
        }

    .month-day.today[b-1t4o9xweqg] {
        background: #fef3c7;
        border-color: var(--warning-color);
    }

        .month-day.today.selected[b-1t4o9xweqg] {
            background: #eff6ff;
            border-color: var(--primary-color);
        }

.month-day-header-content[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.month-day-number[b-1t4o9xweqg] {
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
}

.quick-add-btn[b-1t4o9xweqg] {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

    .quick-add-btn:hover[b-1t4o9xweqg] {
        background: var(--primary-hover);
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
    }

.month-events[b-1t4o9xweqg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.month-event[b-1t4o9xweqg] {
    background: var(--primary-color);
    color: white;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 20px;
    position: relative;
    overflow: hidden;
}

    .month-event:hover[b-1t4o9xweqg] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .month-event.selected[b-1t4o9xweqg] {
        outline: 2px solid var(--gray-800);
        outline-offset: 1px;
        z-index: 10;
    }

.event-time[b-1t4o9xweqg] {
    font-size: 0.7rem;
    opacity: 0.9;
    font-weight: 400;
}

.event-title[b-1t4o9xweqg] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-actions[b-1t4o9xweqg] {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.event-action-btn[b-1t4o9xweqg] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.7rem;
    color: white;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
}

    .event-action-btn:hover[b-1t4o9xweqg] {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    .event-action-btn.danger:hover[b-1t4o9xweqg] {
        background: var(--danger-color);
    }

/* Vue Semaine */
.week-view[b-1t4o9xweqg] {
    display: none;
    height: 100%;
    flex-direction: column;
}

    .week-view.active[b-1t4o9xweqg] {
        display: flex;
    }

.week-header[b-1t4o9xweqg] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.week-time-header[b-1t4o9xweqg] {
    border-right: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.week-day-header[b-1t4o9xweqg] {
    padding: var(--space-lg) var(--space-sm);
    text-align: center;
    border-right: 1px solid var(--gray-200);
    transition: all var(--transition-normal);
}

    .week-day-header:last-child[b-1t4o9xweqg] {
        border-right: none;
    }

    .week-day-header.today[b-1t4o9xweqg] {
        background: #fef3c7;
        color: var(--warning-color);
        font-weight: 700;
    }

.week-day-name[b-1t4o9xweqg] {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.week-day-number[b-1t4o9xweqg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.week-content[b-1t4o9xweqg] {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.week-grid[b-1t4o9xweqg] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    min-height: 1440px;
}

.week-time-column[b-1t4o9xweqg] {
    border-right: 2px solid var(--gray-200);
    background: var(--gray-50);
    position: sticky;
    left: 0;
    z-index: 10;
}

.week-time-slot[b-1t4o9xweqg] {
    height: 60px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--space-xs);
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

.week-day-column[b-1t4o9xweqg] {
    border-right: 1px solid var(--gray-200);
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

    .week-day-column:last-child[b-1t4o9xweqg] {
        border-right: none;
    }

    .week-day-column:hover[b-1t4o9xweqg] {
        background: rgba(37, 99, 235, 0.02);
    }

    .week-day-column.selected[b-1t4o9xweqg] {
        background: rgba(37, 99, 235, 0.05);
    }

.week-hour-slot[b-1t4o9xweqg] {
    height: 60px;
    border-bottom: 1px solid var(--gray-100);
    position: relative;
    transition: background-color var(--transition-fast);
}

    .week-hour-slot:hover[b-1t4o9xweqg] {
        background: rgba(37, 99, 235, 0.05);
    }

.week-event[b-1t4o9xweqg] {
    position: absolute;
    background: var(--primary-color);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 20;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    left: 4px;
    right: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .week-event:hover[b-1t4o9xweqg] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        z-index: 30;
    }

    .week-event.selected[b-1t4o9xweqg] {
        outline: 3px solid var(--gray-800);
        outline-offset: 2px;
        z-index: 40;
    }

.event-content[b-1t4o9xweqg] {
    position: relative;
    z-index: 1;
}

.event-actions-overlay[b-1t4o9xweqg] {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: var(--space-xs);
    border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
    display: flex;
    gap: var(--space-xs);
}

/* Vue Jour */
.day-view[b-1t4o9xweqg] {
    display: none;
    height: 100%;
    flex-direction: column;
}

    .day-view.active[b-1t4o9xweqg] {
        display: flex;
    }

.day-content[b-1t4o9xweqg] {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.day-grid[b-1t4o9xweqg] {
    display: grid;
    grid-template-columns: 80px 1fr;
    min-height: 1440px;
}

.day-time-column[b-1t4o9xweqg] {
    border-right: 2px solid var(--gray-200);
    background: var(--gray-50);
    position: sticky;
    left: 0;
    z-index: 10;
}

.day-content-column[b-1t4o9xweqg] {
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

    .day-content-column:hover[b-1t4o9xweqg] {
        background: rgba(37, 99, 235, 0.02);
    }

    .day-content-column.selected[b-1t4o9xweqg] {
        background: rgba(37, 99, 235, 0.05);
    }

.day-hour-slot[b-1t4o9xweqg] {
    height: 60px;
    border-bottom: 1px solid var(--gray-100);
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
    transition: all var(--transition-fast);
}

    .day-hour-slot:hover[b-1t4o9xweqg] {
        background: rgba(37, 99, 235, 0.05);
    }

        .day-hour-slot:hover .hour-add-btn[b-1t4o9xweqg] {
            opacity: 1;
            transform: scale(1);
        }

.hour-slot-content[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.hour-label[b-1t4o9xweqg] {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

.hour-add-btn[b-1t4o9xweqg] {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    opacity: 0;
    transform: scale(0.8);
    box-shadow: var(--shadow-sm);
}

    .hour-add-btn:hover[b-1t4o9xweqg] {
        background: var(--primary-hover);
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
    }

.day-event[b-1t4o9xweqg] {
    position: absolute;
    background: var(--primary-color);
    color: white;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    z-index: 20;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    left: var(--space-md);
    right: var(--space-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .day-event:hover[b-1t4o9xweqg] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        z-index: 30;
    }

    .day-event.selected[b-1t4o9xweqg] {
        outline: 3px solid var(--gray-800);
        outline-offset: 2px;
        z-index: 40;
    }

.event-location[b-1t4o9xweqg] {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: var(--space-xs);
}

/* Modales */
.modal-overlay[b-1t4o9xweqg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-1t4o9xweqg 0.2s ease;
}

    .modal-overlay.active[b-1t4o9xweqg] {
        display: flex;
    }

.modal[b-1t4o9xweqg] {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-1t4o9xweqg 0.3s ease;
    border: 1px solid var(--gray-200);
}

.modal-header[b-1t4o9xweqg] {
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gray-50);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-title[b-1t4o9xweqg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.modal-close[b-1t4o9xweqg] {
    background: transparent;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: var(--gray-500);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

    .modal-close:hover[b-1t4o9xweqg] {
        background: var(--gray-200);
        color: var(--gray-700);
        transform: scale(1.1);
    }

.modal-body[b-1t4o9xweqg] {
    padding: var(--space-xl);
}

.modal-footer[b-1t4o9xweqg] {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Formulaires */
.form-group[b-1t4o9xweqg] {
    margin-bottom: var(--space-lg);
}

.form-label[b-1t4o9xweqg] {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--gray-700);
    font-size: 0.925rem;
}

.form-input[b-1t4o9xweqg],
.form-select[b-1t4o9xweqg],
.form-textarea[b-1t4o9xweqg] {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    font-size: 0.925rem;
    background: white;
    color: var(--gray-900);
}

    .form-input:focus[b-1t4o9xweqg],
    .form-select:focus[b-1t4o9xweqg],
    .form-textarea:focus[b-1t4o9xweqg] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
        transform: translateY(-1px);
    }

    .form-input:disabled[b-1t4o9xweqg] {
        background: var(--gray-100);
        color: var(--gray-500);
        cursor: not-allowed;
    }

.form-textarea[b-1t4o9xweqg] {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

.form-row[b-1t4o9xweqg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.checkbox-group[b-1t4o9xweqg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

    .checkbox-group input[type="checkbox"][b-1t4o9xweqg] {
        width: 18px;
        height: 18px;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

    .checkbox-group label[b-1t4o9xweqg] {
        cursor: pointer;
        font-weight: 500;
        color: var(--gray-700);
        margin: 0;
    }

/* Color Picker */
.color-picker[b-1t4o9xweqg] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.color-option[b-1t4o9xweqg] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all var(--transition-normal);
    position: relative;
    box-shadow: var(--shadow-sm);
}

    .color-option:hover[b-1t4o9xweqg] {
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
    }

    .color-option.selected[b-1t4o9xweqg] {
        border-color: var(--gray-800);
        transform: scale(1.15);
        box-shadow: var(--shadow-lg);
    }

        .color-option.selected[b-1t4o9xweqg]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 1rem;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

/* Boutons */
.btn[b-1t4o9xweqg] {
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    font-size: 0.925rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn:disabled[b-1t4o9xweqg] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-primary[b-1t4o9xweqg] {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-sm);
}

    .btn-primary:hover:not(:disabled)[b-1t4o9xweqg] {
        background: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

.btn-secondary[b-1t4o9xweqg] {
    background: var(--gray-200);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

    .btn-secondary:hover:not(:disabled)[b-1t4o9xweqg] {
        background: var(--gray-300);
        color: var(--gray-800);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.btn-danger[b-1t4o9xweqg] {
    background: var(--danger-color);
    color: white;
    box-shadow: var(--shadow-sm);
}

    .btn-danger:hover:not(:disabled)[b-1t4o9xweqg] {
        background: var(--danger-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

.btn-success[b-1t4o9xweqg] {
    background: var(--success-color);
    color: white;
    box-shadow: var(--shadow-sm);
}

    .btn-success:hover:not(:disabled)[b-1t4o9xweqg] {
        background: var(--success-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

/* Messages de validation */
.validation-message[b-1t4o9xweqg] {
    color: var(--danger-color);
    font-size: 0.825rem;
    margin-top: var(--space-xs);
    font-weight: 500;
}

/* Notifications (Toast) */
.notification[b-1t4o9xweqg] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success-color);
    color: white;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    animation: slideInRight-b-1t4o9xweqg 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    font-weight: 500;
    max-width: 400px;
}

    .notification.error[b-1t4o9xweqg] {
        background: var(--danger-color);
    }

    .notification.warning[b-1t4o9xweqg] {
        background: var(--warning-color);
    }

    .notification.info[b-1t4o9xweqg] {
        background: var(--info-color);
    }

/* Animations */
@keyframes fadeIn-b-1t4o9xweqg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-1t4o9xweqg {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

@keyframes slideInRight-b-1t4o9xweqg {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

@keyframes slideOutRight-b-1t4o9xweqg {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes pulse-b-1t4o9xweqg {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Loading States */
.loading[b-1t4o9xweqg] {
    opacity: 0.7;
    pointer-events: none;
}

    .loading[b-1t4o9xweqg]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin-b-1t4o9xweqg 1s linear infinite;
    }

@keyframes spin-b-1t4o9xweqg {
    to {
        transform: rotate(360deg);
    }
}

/* États focus pour l'accessibilité */
button:focus-visible[b-1t4o9xweqg],
input:focus-visible[b-1t4o9xweqg],
select:focus-visible[b-1t4o9xweqg],
textarea:focus-visible[b-1t4o9xweqg],
.task-item:focus-visible[b-1t4o9xweqg],
.month-day:focus-visible[b-1t4o9xweqg] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sidebar[b-1t4o9xweqg] {
        width: 280px;
    }

    .header[b-1t4o9xweqg] {
        padding: var(--space-md) var(--space-lg);
    }

    .calendar-container[b-1t4o9xweqg] {
        margin: var(--space-md) var(--space-lg);
    }

    .search-input[b-1t4o9xweqg] {
        width: 220px;
    }
}

@media (max-width: 1024px) {
    .sidebar[b-1t4o9xweqg] {
        width: 250px;
    }

    .header-left[b-1t4o9xweqg] {
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }

    .current-date[b-1t4o9xweqg] {
        margin: 0;
        min-width: auto;
        text-align: left;
        font-size: 1.1rem;
    }

    .form-row[b-1t4o9xweqg] {
        grid-template-columns: 1fr;
    }

    .toolbar[b-1t4o9xweqg] {
        padding: var(--space-sm) var(--space-md);
    }

    .toolbar-section[b-1t4o9xweqg] {
        gap: var(--space-sm);
    }
}

@media (max-width: 768px) {
    .app-container[b-1t4o9xweqg] {
        flex-direction: column;
        height: 100vh;
    }

    .sidebar[b-1t4o9xweqg] {
        width: 100%;
        height: 240px;
        order: 2;
        border-right: none;
        border-top: 1px solid var(--gray-200);
    }

    .main-content[b-1t4o9xweqg] {
        order: 1;
        flex: 1;
    }

    .header[b-1t4o9xweqg] {
        padding: var(--space-md);
        flex-direction: column;
        gap: var(--space-md);
        align-items: stretch;
    }

    .header-left[b-1t4o9xweqg],
    .header-right[b-1t4o9xweqg] {
        flex-direction: column;
        gap: var(--space-md);
        align-items: stretch;
    }

    .view-selector[b-1t4o9xweqg] {
        justify-content: center;
    }

    .navigation[b-1t4o9xweqg] {
        justify-content: center;
    }

    .current-date[b-1t4o9xweqg] {
        text-align: center;
        margin: 0;
    }

    .search-input[b-1t4o9xweqg] {
        width: 100%;
    }

    .calendar-container[b-1t4o9xweqg] {
        margin: var(--space-sm);
        border-radius: var(--radius-lg);
    }

    .month-day[b-1t4o9xweqg] {
        min-height: 80px;
        padding: var(--space-xs);
    }

    .month-day-number[b-1t4o9xweqg] {
        font-size: 0.875rem;
    }

    .month-event[b-1t4o9xweqg] {
        font-size: 0.7rem;
        padding: 1px 4px;
    }

    .week-grid[b-1t4o9xweqg],
    .day-grid[b-1t4o9xweqg] {
        grid-template-columns: 60px 1fr;
    }

    .week-time-column[b-1t4o9xweqg],
    .day-time-column[b-1t4o9xweqg] {
        border-right: 1px solid var(--gray-200);
    }

    .week-time-slot[b-1t4o9xweqg] {
        font-size: 0.7rem;
    }

    .modal[b-1t4o9xweqg] {
        width: 95%;
        max-height: 85vh;
        margin: var(--space-md);
    }

    .modal-header[b-1t4o9xweqg],
    .modal-body[b-1t4o9xweqg],
    .modal-footer[b-1t4o9xweqg] {
        padding: var(--space-md);
    }

    .modal-title[b-1t4o9xweqg] {
        font-size: 1.25rem;
    }

    .toolbar[b-1t4o9xweqg] {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: stretch;
    }

    .toolbar-section[b-1t4o9xweqg] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .task-catalog[b-1t4o9xweqg] {
        padding: var(--space-sm);
    }

    .task-item[b-1t4o9xweqg] {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
}

@media (max-width: 480px) {
    .header[b-1t4o9xweqg] {
        padding: var(--space-sm);
    }

    .view-btn[b-1t4o9xweqg] {
        padding: var(--space-sm);
        font-size: 0.825rem;
    }

    .nav-btn[b-1t4o9xweqg] {
        min-width: 36px;
        height: 36px;
        padding: var(--space-xs);
    }

    .current-date[b-1t4o9xweqg] {
        font-size: 1rem;
    }

    .month-header[b-1t4o9xweqg] {
        font-size: 0.8rem;
    }

    .month-day[b-1t4o9xweqg] {
        min-height: 60px;
        padding: 2px;
    }

    .month-day-number[b-1t4o9xweqg] {
        font-size: 0.8rem;
    }

    .month-event[b-1t4o9xweqg] {
        font-size: 0.65rem;
        padding: 1px 3px;
    }

    .toolbar-btn[b-1t4o9xweqg] {
        padding: var(--space-sm);
        font-size: 0.825rem;
    }

    .btn[b-1t4o9xweqg] {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.825rem;
    }

    .form-input[b-1t4o9xweqg],
    .form-select[b-1t4o9xweqg],
    .form-textarea[b-1t4o9xweqg] {
        padding: var(--space-sm);
        font-size: 0.875rem;
    }

    .sidebar-header h2[b-1t4o9xweqg] {
        font-size: 1.1rem;
    }

    .task-title[b-1t4o9xweqg] {
        font-size: 0.925rem;
    }

    .task-meta[b-1t4o9xweqg] {
        font-size: 0.8rem;
    }
}

/* Préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    *[b-1t4o9xweqg] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mode sombre automatique */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"])[b-1t4o9xweqg] {
        --gray-50: #111827;
        --gray-100: #1f2937;
        --gray-200: #374151;
        --gray-300: #4b5563;
        --gray-400: #6b7280;
        --gray-500: #9ca3af;
        --gray-600: #d1d5db;
        --gray-700: #e5e7eb;
        --gray-800: #f3f4f6;
        --gray-900: #f9fafb;
    }
}

/* Mode impression */
@media print {
    .sidebar[b-1t4o9xweqg],
    .header[b-1t4o9xweqg],
    .toolbar[b-1t4o9xweqg],
    .modal-overlay[b-1t4o9xweqg],
    .notification[b-1t4o9xweqg] {
        display: none !important;
    }

    .main-content[b-1t4o9xweqg] {
        margin: 0;
        box-shadow: none;
    }

    .calendar-container[b-1t4o9xweqg] {
        margin: 0;
        box-shadow: none;
        border: 1px solid #000;
    }

    .month-day[b-1t4o9xweqg],
    .week-day-column[b-1t4o9xweqg],
    .day-content-column[b-1t4o9xweqg] {
        break-inside: avoid;
    }

    body[b-1t4o9xweqg] {
        background: white;
        color: black;
    }
}

/* Mode contraste élevé */
@media (prefers-contrast: high) {
    :root[b-1t4o9xweqg] {
        --gray-100: #f0f0f0;
        --gray-200: #d0d0d0;
        --gray-300: #b0b0b0;
        --gray-400: #808080;
        --gray-500: #606060;
        --gray-600: #404040;
        --gray-700: #202020;
        --gray-800: #101010;
    }

    .month-day[b-1t4o9xweqg],
    .week-day-column[b-1t4o9xweqg],
    .task-item[b-1t4o9xweqg],
    .btn[b-1t4o9xweqg],
    .form-input[b-1t4o9xweqg],
    .form-select[b-1t4o9xweqg],
    .form-textarea[b-1t4o9xweqg] {
        border-width: 2px;
    }

    .month-event[b-1t4o9xweqg],
    .week-event[b-1t4o9xweqg],
    .day-event[b-1t4o9xweqg] {
        border: 2px solid rgba(255, 255, 255, 0.8);
    }
}

/* États de chargement et erreur */
.error-state[b-1t4o9xweqg] {
    padding: var(--space-xl);
    text-align: center;
    color: var(--danger-color);
}

.empty-state[b-1t4o9xweqg] {
    padding: var(--space-xl);
    text-align: center;
    color: var(--gray-500);
}

    .empty-state h3[b-1t4o9xweqg] {
        margin-bottom: var(--space-md);
        color: var(--gray-700);
    }

    .empty-state p[b-1t4o9xweqg] {
        margin-bottom: var(--space-lg);
        line-height: 1.6;
    }

/* Utilities */
.sr-only[b-1t4o9xweqg] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center[b-1t4o9xweqg] {
    text-align: center;
}

.text-left[b-1t4o9xweqg] {
    text-align: left;
}

.text-right[b-1t4o9xweqg] {
    text-align: right;
}

.font-bold[b-1t4o9xweqg] {
    font-weight: 700;
}

.font-semibold[b-1t4o9xweqg] {
    font-weight: 600;
}

.text-sm[b-1t4o9xweqg] {
    font-size: 0.875rem;
}

.text-xs[b-1t4o9xweqg] {
    font-size: 0.75rem;
}

.opacity-50[b-1t4o9xweqg] {
    opacity: 0.5;
}

.opacity-75[b-1t4o9xweqg] {
    opacity: 0.75;
}

.cursor-pointer[b-1t4o9xweqg] {
    cursor: pointer;
}

.cursor-not-allowed[b-1t4o9xweqg] {
    cursor: not-allowed;
}

.select-none[b-1t4o9xweqg] {
    user-select: none;
}

/* Scrollbars personnalisées */
[b-1t4o9xweqg]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-1t4o9xweqg]::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 4px;
}

[b-1t4o9xweqg]::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

    [b-1t4o9xweqg]::-webkit-scrollbar-thumb:hover {
        background: var(--gray-400);
    }

[b-1t4o9xweqg]::-webkit-scrollbar-corner {
    background: var(--gray-100);
}

/* Support pour Firefox */
*[b-1t4o9xweqg] {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) var(--gray-100);
}