/* ============================================================
   ecommerce.css — Overrides thème DaisyUI pour ElectroSphère
   Tailwind CSS (Play CDN) + DaisyUI v4
   ============================================================ */

/* ----------------------------------------------------------
   Thème DaisyUI : map couleurs brand → variables oklch
   ---------------------------------------------------------- */
:root,
[data-theme="light"] {
    /* Primary : bleu #04488e */
    --p: 35% 0.12 259;
    --pf: 30% 0.12 259;
    --pc: 100% 0 0;

    /* Secondary : or #ddb300 */
    --s: 75% 0.15 87;
    --sf: 70% 0.15 87;
    --sc: 15% 0.05 87;

    /* Accent : amber #fda707 */
    --a: 77% 0.16 72;
    --af: 72% 0.16 72;
    --ac: 15% 0.05 72;

    /* Neutral : gris sombre #333 */
    --n: 25% 0.01 0;
    --nf: 20% 0.01 0;
    --nc: 95% 0 0;

    /* Base */
    --b1: 100% 0 0;
    --b2: 96.7% 0 0;
    --b3: 93% 0 0;
    --bc: 25% 0.01 260;

    /* States */
    --su: 60% 0.17 145;
    --suc: 98% 0 0;
    --wa: 75% 0.15 83;
    --wac: 15% 0.05 83;
    --er: 44% 0.20 26;
    --erc: 100% 0 0;

    --rounded-btn: 0.5rem;
    --rounded-box: 0.75rem;
}

/* ----------------------------------------------------------
   Utilitaires globaux
   ---------------------------------------------------------- */
.price-color {
    color: #d90000;
}

.site-header {
    background: #fda707;
}

/* Navigation active */
.nav-link-active {
    background: rgba(253, 167, 7, .25);
    color: #fda707 !important;
    font-weight: 600;
}

/* ----------------------------------------------------------
   Skeletons
   ---------------------------------------------------------- */
.ec-skeleton {
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: .5rem;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

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

/* ----------------------------------------------------------
   Badges grade
   ---------------------------------------------------------- */
.badge-grade-a {
    background: #27ae60;
    color: #fff;
}

.badge-grade-b {
    background: #3498db;
    color: #fff;
}

.badge-grade-c {
    background: #e67e22;
    color: #fff;
}

/* ----------------------------------------------------------
   Galerie produit
   ---------------------------------------------------------- */
.gallery-main-img {
    transition: opacity .2s ease;
}

.gallery-thumb {
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
    border: 2px solid transparent;
    border-radius: .375rem;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    opacity: 1;
    border-color: #04488e;
}

/* ----------------------------------------------------------
   Filtre catalogue
   ---------------------------------------------------------- */
.filter-count {
    font-size: .75rem;
    color: #999;
    margin-left: auto;
}

/* Mobile nav toggle (checkbox hack) */
#mobile-nav-toggle {
    display: none;
}

#mobile-nav-toggle:checked~#mobile-nav {
    display: block;
}

/* ----------------------------------------------------------
   Mobile Optimizations
   ---------------------------------------------------------- */

/* Amélioration du header sur responsive */
@media (max-width: 639px) {
    .site-header {
        height: 3.5rem;
    }

    .site-header img {
        max-height: 2.25rem;
    }

    /* Texte plus lisible sur mobile */
    body {
        font-size: 15px;
    }

    /* Padding réduit sur mobile */
    .max-w-7xl,
    .max-w-4xl,
    .max-w-3xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Galerie responsive */
    .gallery-thumb {
        width: 60px !important;
        height: 60px !important;
    }

    /* Cards plus lisibles */
    .card {
        border-radius: 0.5rem;
    }

    /* Boutons fulll width sur mobile */
    .btn-group-vertical {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Grille tableau responsive */
    table {
        font-size: 13px;
    }

    /* Espaces réservés pour images */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Contenu TinyMCE (pages dynamiques) */
.prose img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Paragraphes avec texte centré */
.prose p[style*="text-align:center"],
.prose p[style*="text-align: center"] {
    text-align: center;
}

/* Divs avec texte centré */
.prose div[style*="text-align:center"],
.prose div[style*="text-align: center"] {
    text-align: center;
}

/* Images centrées dans leurs parents */
.prose div[style*="text-align:center"] img,
.prose div[style*="text-align: center"] img,
.prose p[style*="text-align:center"] img,
.prose p[style*="text-align: center"] img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

/* Tablettes */
@media (min-width: 640px) and (max-width: 1023px) {
    .site-header img {
        max-height: 2.75rem;
    }
}

/* Touches plus grandes sur mobile */
@media (max-width: 767px) {
    .btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    .btn-sm {
        min-height: 2rem;
        min-width: 2rem;
    }
}