/* FIXES - Corrections des bugs visuels */

/* Correction de l'overflow horizontal */
body, html {
    overflow-x: hidden !important;
    max-width: 100vw;
}

.app {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Espacement cohérent entre sections */
section,
[class*="section__"] {
    margin-bottom: 0;
}
/* Exception: laisser un espace avant le footer fixé */
.section__reviews { margin-bottom: 280px !important; }

/* Correction de la section header */
.section__header {
    overflow: visible;
}

/* S'assurer que l'image de fond ne cause pas de scroll horizontal */
.header__circle {
    overflow: visible;
}

.circle-image {
    max-width: none;
    display: block;
}

/* Perspective 3D optimale sur grands écrans */
@media only screen and (min-width: 1600px) {
    .circle-image {
        width: 600px;
    }
    
    .header__circle {
        right: 8%;
    }
}

/* Ajustement pour écrans moyens */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .header__circle {
        right: 2%;
    }
}

/* Correction du positionnement du badge "Safe and checked" */
.header__info {
    display: inline-flex !important;
    white-space: nowrap;
}

/* Correction de la flèche "To next section" */
.header__arrow {
    display: flex !important;
}

/* Amélioration de la lisibilité du gradient text */
.header__title span {
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

/* Fix pour éviter que les animations ne causent de décalage */
.animation {
    will-change: transform, opacity;
}

/* Correction du z-index global */
.section__navbar {
    z-index: 1000;
}

.header__circle {
    z-index: 0;
}

.header__content {
    z-index: 10;
}

/* Amélioration des cards pour éviter les débordements */
.shop__card,
.about__info,
.reviews__card {
    overflow: hidden;
}
/* Laisse un overflow contrôlé pour éviter les artefacts visuels */
.faq__card { overflow: hidden; }

/* Uniformisation des hauteurs de cards */
.shop__cards .row,
.about__cards .row {
    align-items: stretch;
}

/* Pour reviews, on passe en CSS Grid donc on neutralise les réglages flex précédents */
.reviews__cards .col-lg-4 { display: block; }
.reviews__cards .reviews__card { height: 100%; display: flex; flex-direction: column; }

.shop__cards .col-lg-4,
.about__cards .col-lg-2 {
    display: flex;
    flex-direction: column;
}

.shop__cards .shop__card,
.about__cards .about__info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Correction des images qui dépassent */
img {
    max-width: 100%;
    height: auto;
}

/* Fix pour mobile */
@media only screen and (max-width: 768px) {
    .circle-image {
        display: none;
    }
    
    .header__content {
        width: 100%;
    }
}

/* Smooth scroll avec offset pour la navbar sticky */
html {
    scroll-padding-top: 100px;
}

/* Correction du logo dans la navbar qui pourrait être buggé */
.navbar__logo {
    z-index: 1001;
}

/* Footer layout helpers (app removed) */
/* .app wrapper removed intentionally */
.section__footer { margin-top: 0 !important; }

/* Restore visible borders for about cards (overrides no-outline) */
.about__cards .about__info{
    background: var(--glassBackground) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), var(--shadowSm) !important;
}
.about__cards .about__info:hover{
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20), var(--shadowMd) !important;
}

/* Same visible borders for FAQ cards */
.section__faq .faq__card{
    background: var(--glassBackground) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), var(--shadowSm) !important;
}
.section__faq .faq__card:hover{
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20), var(--shadowMd) !important;
}

/* Same visible borders for Reviews cards */
.section__reviews .reviews__card{
    background: var(--glassBackground) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), var(--shadowSm) !important;
}
.section__reviews .reviews__card:hover{
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20), var(--shadowMd) !important;
}

/* Same visible borders for Shop cards */
.section__shop .shop__card{
    background: var(--glassBackground) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), var(--shadowSm) !important;
}
.section__shop .shop__card:hover{
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20), var(--shadowMd) !important;
}