/* ===== AMÉLIORATIONS SIMPLES ET COMPATIBLES ===== */

/* Animations douces au scroll */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation des cartes au scroll */
.shop__card, .about__info {
    animation: slideUp 0.8s ease-out;
    animation-fill-mode: both;
}

.shop__card:nth-child(1) { animation-delay: 0.1s; }
.shop__card:nth-child(2) { animation-delay: 0.2s; }
.shop__card:nth-child(3) { animation-delay: 0.3s; }
.shop__card:nth-child(4) { animation-delay: 0.4s; }

.about__info:nth-child(1) { animation-delay: 0.1s; }
.about__info:nth-child(2) { animation-delay: 0.2s; }
.about__info:nth-child(3) { animation-delay: 0.3s; }

/* Effets de survol élégants */
.shop__card, .about__info {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.shop__card:hover, .about__info:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(207, 22, 22, 0.15);
}

/* Amélioration des boutons */
.shop__card__purchase, .header__arrow {
    transition: all 0.3s ease;
    border-radius: 8px;
}

/* Suppression de l'outline de focus pour la flèche header */
.header__arrow:focus,
.header__arrow:focus-visible,
.header__arrow:focus-within,
.header__arrow:active,
.header__arrow:visited {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Suppression globale de l'outline pour tous les liens header__arrow */
a.header__arrow,
a.header__arrow:focus,
a.header__arrow:focus-visible,
a.header__arrow:focus-within,
a.header__arrow:active,
a.header__arrow:visited {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Suppression de l'outline pour les sections about__info et about__square */
.about__info:focus,
.about__info:focus-visible,
.about__info:focus-within,
.about__info:active,
.about__info:visited {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.about__square:focus,
.about__square:focus-visible,
.about__square:focus-within,
.about__square:active,
.about__square:visited {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Suppression de l'outline pour tous les éléments about */
.about__info *:focus,
.about__info *:focus-visible,
.about__info *:focus-within,
.about__info *:active,
.about__info *:visited {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Suppression de l'outline pour toutes les sections principales */
.section__about:focus,
.section__shop:focus,
.section__faq:focus,
.section__reviews:focus,
.section__footer:focus,
.section__navbar:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Suppression de l'outline pour tous les titres et descriptions */
.about__title:focus,
.about__description:focus,
.shop__title:focus,
.shop__description:focus,
.faq__title:focus,
.faq__description:focus,
.reviews__title:focus,
.reviews__description:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Suppression de l'outline pour tous les éléments de cartes */
.shop__card:focus,
.shop__card:focus-visible,
.shop__card:focus-within,
.faq__card:focus,
.faq__card:focus-visible,
.faq__card:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.shop__card__purchase:hover, .header__arrow:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(207, 22, 22, 0.2);
}

/* Amélioration des images */
.shop__icon, .circle-image {
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.shop__icon:hover, .circle-image:hover {
    transform: scale(1.05);
}

/* Amélioration de la navigation */
.navbar__link {
    position: relative;
    transition: color 0.3s ease;
}

.navbar__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--colorMain);
    transition: width 0.3s ease;
}

.navbar__link:hover::after {
    width: 100%;
}

.navbar__link:hover {
    color: var(--colorMain);
}

/* Amélioration des catégories */
.shop__category {
    transition: all 0.3s ease;
    border-radius: 20px;
}

.shop__category:hover {
    transform: translateY(-2px);
    background: rgba(255, 0, 0, 0.017);
}

/* Animation d'entrée de la page */
.header__title, .header__description {
    animation: slideUp 1s ease-out;
}

.header__description {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.header__circle {
    animation: slideUp 1s ease-out 0.4s both;
}

/* Amélioration des sections */
.section__about, .section__shop {
    animation: slideUp 0.8s ease-out;
    animation-fill-mode: both;
}

.section__about {
    animation-delay: 0.1s;
}

.section__shop {
    animation-delay: 0.2s;
}

/* Amélioration du footer */
.footer {
    animation: slideUp 0.8s ease-out 0.3s both;
}

/* Responsive et accessibilité */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Focus states pour l'accessibilité */
.shop__card__purchase:focus,
.navbar__link:focus {
    outline: 2px solid var(--colorMain);
    outline-offset: 2px;
}

/* Suppression COMPLÈTE de tous les outlines de focus sur toute la page */
*:focus,
*:focus-visible,
*:focus-within,
*:active,
*:visited {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Règles spécifiques pour les éléments qui doivent garder leur focus */
.shop__card__purchase:focus,
.navbar__link:focus {
    outline: 2px solid var(--colorMain) !important;
    outline-offset: 2px !important;
}

/* Amélioration de la sélection de texte */
::selection {
    background: rgba(207, 22, 22, 0.3);
    color: white;
}

::-moz-selection {
    background: rgba(207, 22, 22, 0.3);
    color: white;
}