/* ==========================================================================
   Bridge YasCrea × Bootstrap 5.3
   Bootstrap (CDN) gère la grille, les cards, boutons de base, formulaires,
   carousel, accordion. Ce fichier applique l'identité de marque YasCrea
   par-dessus (couleurs bois/rose, hero, cercles catégories).
   ========================================================================== */

:root {
    --wood: #b8895f;
    --wood-dark: #8a6142;
    --cream: #fdf6ec;
    --pink: #f4b8c1;
    --pink-dark: #ec9aa6;
    --text: #3d332b;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--text);
    background: var(--cream);
}

a { text-decoration: none; }

/* Couleurs de marque réutilisables */
.text-wood { color: var(--wood-dark) !important; }
.bg-wood { background-color: var(--wood) !important; color: #fff; }
.bg-pink { background-color: var(--pink) !important; color: #fff; }

.btn-wood { background-color: var(--wood); color: #fff; border: none; }
.btn-wood:hover { background-color: var(--wood-dark); color: #fff; }
.btn-pink { background-color: var(--pink); color: #fff; border: none; }
.btn-pink:hover { background-color: var(--pink-dark); color: #fff; }

.brand-logo { color: var(--wood-dark) !important; }
.brand-logo span { color: var(--pink); }
.text-pink { color: var(--pink) !important; }

/* Bandeau annonce */
.announcement-bar { background: var(--wood-dark); color: #fff; }

/* Navbar */
.navbar .nav-link:hover { color: var(--wood-dark) !important; }

/* Hero carousel */
.hero-carousel { background: var(--wood-dark); }

/* Flèches du carrousel : repositionnées en bas (loin du texte aligné à gauche),
   sous forme de petits boutons ronds plutôt que la bande pleine hauteur par défaut. */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    top: auto;
    bottom: 24px;
    height: 42px;
    width: 42px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    opacity: 1;
    transition: background 0.15s ease;
}
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
    background: rgba(255,255,255,0.4);
}
.hero-carousel .carousel-control-prev { left: 24px; }
.hero-carousel .carousel-control-next { right: 24px; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    width: 18px;
    height: 18px;
}
.hero-carousel .carousel-indicators { margin-bottom: 12px; }

@media (max-width: 767px) {
    /* Sur mobile, le slide est plus bas et le swipe tactile suffit :
       les flèches ajoutent surtout de l'encombrement visuel. */
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        display: none;
    }
}
.hero-slide {
    min-height: 420px;
    background-size: cover;
    background-position: center;
    color: #fff;
}
@media (max-width: 767px) {
    .hero-slide { min-height: 320px; padding: 24px 0; }
    .hero-slide h1 { font-size: 1.6rem; }
    .hero-slide .lead { font-size: 0.95rem; }
    .hero-slide .btn-lg { padding: 10px 20px; font-size: 0.95rem; }
}
@media (max-width: 480px) {
    .hero-slide { min-height: 280px; }
    .hero-slide h1 { font-size: 1.35rem; }
}

/* Section titles */
.section-title { font-size: 1.6rem; color: var(--wood-dark); font-weight: 700; }

/* Cercles catégories */
.category-circle {
    width: 90px; height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #e8dcc9;
}
.category-circle img { width: 100%; height: 100%; object-fit: cover; }

/* Cartes produits */
.product-card { transition: transform 0.15s ease; border-radius: 14px; overflow: hidden; }
.product-card:hover { transform: translateY(-4px); }
.product-image { aspect-ratio: 1/1; background: #e8dcc9; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }

/* Newsletter */
.newsletter-section { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); }

/* Footer */
.site-footer { background: var(--wood-dark); }

/* Product detail page */
.product-detail-image img { width: 100%; border-radius: 14px; }
.stock-info { font-size: 0.9rem; }

/* Compte client / formulaires légers (classes maison conservées) */
.account-page { max-width: 900px; margin: 40px auto 80px; padding: 0 16px; }

/* Tableau des commandes (utilisé sur plusieurs pages du dashboard client) —
   n'avait aucun style : cassait sur mobile. */
.cart-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cart-table th, .cart-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #eee; white-space: nowrap; }
.cart-table th { font-size: 0.8rem; text-transform: uppercase; color: #8a7a6a; }
@media (max-width: 576px) {
    .cart-table { font-size: 0.8rem; }
    .cart-table th, .cart-table td { padding: 8px 4px; }
}
.account-form { max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.account-form label { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.account-form input,
.account-form select,
.account-form textarea {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
    font-family: inherit;
}
.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus {
    outline: none;
    border-color: var(--wood);
    box-shadow: 0 0 0 0.2rem rgba(184, 137, 95, 0.2);
}
.account-form input:disabled { background: var(--cream); opacity: 0.7; }
.account-form .form-row { display: flex; gap: 12px; }
.account-form .form-row > div { flex: 1; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9rem; }
.checkbox-label input { width: auto; }
.account-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; }

/* Dashboard client : navigation latérale */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; }
.account-nav {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background 0.15s ease;
}
.account-nav a i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.account-nav a:hover { background: var(--cream); }
.account-nav a.active {
    background: var(--cream);
    color: var(--wood-dark);
    font-weight: 600;
    border-left-color: var(--wood);
}
.account-content { min-width: 0; }

/* Badges de statut de commande (repris du back-office pour cohérence visuelle) */
.badge-pending { background-color: #fdf1d6 !important; color: #b8860b !important; }
.badge-paid, .badge-completed { background-color: #e3f5e6 !important; color: #2b7a3f !important; }
.badge-processing, .badge-shipped { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.badge-cancelled, .badge-refunded { background-color: #fde3e3 !important; color: #c0392b !important; }

/* Les menus déroulants (notifications, compte...) doivent toujours passer
   au-dessus de la barre de catégories collante. On baisse directement le
   z-index de la barre elle-même (plus fiable que de monter celui du menu,
   qui peut se retrouver dans un contexte d'empilement différent). */
.main-category-nav { z-index: 900 !important; }
.dropdown-menu { z-index: 1060 !important; }
@media (max-width: 768px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-nav { flex-direction: row; overflow-x: auto; white-space: nowrap; }
    .account-nav a { border-left: none; border-bottom: 3px solid transparent; }
    .account-nav a.active { border-bottom-color: var(--wood); }
}
.address-card { border: 1px solid #e8dcc9; border-radius: 10px; padding: 14px; margin-bottom: 12px; font-size: 0.9rem; }
.address-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.badge-default { background: var(--pink); color: #fff; font-size: 0.7rem; }
.address-actions { display: flex; gap: 12px; margin-top: 8px; font-size: 0.85rem; }
.address-actions a { text-decoration: underline; }

@media (max-width: 768px) {
    .account-grid { grid-template-columns: 1fr; }
}

.confirmation-page { text-align: center; margin: 80px auto; }
.confirmation-page h1 { margin-bottom: 20px; }
.confirmation-page p { margin-bottom: 12px; }

/* Menu mobile bottom bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid #e8dcc9;
    display: flex;
    justify-content: space-around;
    padding: 6px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text);
    font-size: 0.68rem;
    padding: 4px 10px;
    text-decoration: none;
}
.mobile-nav-item i { font-size: 1.3rem; }
.mobile-nav-item.active { color: var(--wood-dark); font-weight: 600; }
.mobile-nav-badge {
    position: absolute;
    top: -2px;
    right: 4px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    padding: 1px 5px;
}

@media (max-width: 991.98px) {
    body { padding-bottom: 64px; }
}

/* Suggestions de recherche (autocomplétion) */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e8dcc9;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
}
.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    border-bottom: 1px solid #f4f1ec;
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover { background: var(--cream); }
.search-suggestion-item img {
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 6px;
    background: #e8dcc9;
    flex-shrink: 0;
}

/* Choix du moyen de paiement au checkout */
.payment-method-choice { display: flex; gap: 12px; margin-top: 6px; }
.payment-method-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px solid #e8dcc9;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.15s ease;
}
.payment-method-option input { width: auto; margin: 0; }
.payment-method-option:has(input:checked) {
    border-color: var(--wood);
    background: var(--cream);
}

/* Icône burger : forcée en dehors du contexte .navbar (sinon invisible) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(61, 51, 43, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
    border: 1px solid #dee2e6 !important;
    border-radius: 6px;
    padding: 6px 10px !important;
}

/* Galerie photo produit */
.gallery-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: all 0.15s ease;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--wood); opacity: 1; }

/* Badge stock (catalogue) */
.badge-out-of-stock { background-color: #6c757d; }

/* Contenu CMS (pages légales, contact...) */
.cms-content h2 { font-size: 1.2rem; color: var(--wood-dark); margin-top: 24px; margin-bottom: 10px; }
.cms-content p { margin-bottom: 12px; line-height: 1.6; }
.cms-content ul { margin-bottom: 12px; padding-left: 20px; }

/* Footer style 3 : bloc newsletter */
.newsletter-footer-block { background: rgba(255,255,255,0.06); }

/* Bandeau cookies RGPD */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #2f2620;
    color: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}

/* Header entier collant (logo, recherche, icônes + menu catégories ensemble) */
.site-header-sticky { position: sticky; top: 0; z-index: 1030; }

/* Mini-panier latéral (offcanvas) */
.mini-cart-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; background: #e8dcc9; flex-shrink: 0; }

/* Sélecteur de variantes produit : pastilles de couleur + boutons texte */
.variant-swatch {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid var(--border-color, #dee2e6);
    cursor: pointer; padding: 0;
}
.variant-swatch.active {
    border-color: var(--wood-dark);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--wood-dark);
}
.variant-pill {
    padding: 8px 16px; border-radius: 30px;
    border: 1px solid #dee2e6; background: #fff;
    cursor: pointer; font-size: 0.9rem;
}
.variant-pill.active {
    border-color: var(--wood-dark); background: var(--wood-dark); color: #fff;
}

/* Liens dans le texte de copyright du footer (HTML libre saisi en admin) :
   même couleur que le texte autour, juste souligné pour rester repérable. */
.footer-copyright a {
    color: inherit;
    text-decoration: underline;
}
.footer-copyright a:hover {
    opacity: 0.8;
}