/* ============================================================
   THÈME VISUEL — couche style (mockup)
   Chargée en dernier (après theme-colors.css).
   Toutes les surcharges de mise en forme sont ici.
   ============================================================ */

/* ============ HERO EN CARTE (split contenu / image) ============ */
.eco-hero-wrap { padding: 24px 0 6px; }

.eco-hero {
    height: 470px;
    max-height: 72vh;
    min-height: 420px;
    border-radius: 24px;
    background: #faf3ef; /* fond clair chaud */
}

/* Forme diagonale douce côté texte */
.eco-hero::before {
    content: ''; position: absolute; z-index: 0;
    left: -8%; top: -40%; width: 52%; height: 180%;
    background: linear-gradient(135deg, rgba(80,32,19,.05), rgba(211,186,31,.10));
    transform: rotate(-8deg);
    border-radius: 60px;
    pointer-events: none;
}

.eco-hero-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    height: 100%;
}

/* Texte : sur fond clair → texte foncé */
.eco-hero-content {
    position: static;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0 32px 0 52px;
    color: var(--eco-text, #3a150b);
}
.eco-hero-title { color: var(--eco-text, #3a150b); text-shadow: none; }
.eco-hero-subtitle { color: rgba(58,21,11,.72); text-shadow: none; }

/* Image : colonne droite */
.eco-hero-media { position: relative; height: 100%; }
.eco-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dots foncés sur fond clair */
.eco-hero-dot { background: rgba(80,32,19,.22); }
.eco-hero-dot.eco-active { background: var(--eco-accent, #502013); transform: scale(1.15); }

/* ============ RÉASSURANCE EN PILULE ============ */
.eco-reassurance { background: transparent; border-bottom: 0; padding: 14px 0 10px; }
.eco-reassurance-grid {
    background: rgba(80,32,19,.05);
    border-radius: 22px;
    padding: 18px 28px;
    position: relative;
}
@media (min-width: 783px) {
    .eco-reassurance-item:not(:first-child) { border-left: 1px solid rgba(80,32,19,.12); }
}

/* ============ ICÔNES DES CATÉGORIES ============ */
.eco-cat-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--eco-accent, #502013); color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.eco-cat-icon svg { width: 20px; height: 20px; }
.eco-cat-card:hover .eco-cat-icon {
    transform: scale(1.1) rotate(-5deg);
    background: var(--eco-gold, #d3ba1f);
    color: var(--eco-accent, #502013);
}

/* ============ ICÔNE PANIER SUR LES BOUTONS ============ */
.eco-pcart-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.eco-pcart-btn.add_to_cart_button::before,
ul.products li.product .button.add_to_cart_button::before {
    content: ''; width: 16px; height: 16px; flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='9' cy='21' r='1.5'/><circle cx='19' cy='21' r='1.5'/><path d='M2 3h3l2.6 12.5a1.5 1.5 0 0 0 1.5 1.2h8.9a1.5 1.5 0 0 0 1.4-1.1L21.5 7H6'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='9' cy='21' r='1.5'/><circle cx='19' cy='21' r='1.5'/><path d='M2 3h3l2.6 12.5a1.5 1.5 0 0 0 1.5 1.2h8.9a1.5 1.5 0 0 0 1.4-1.1L21.5 7H6'/></svg>") center/contain no-repeat;
}
ul.products li.product .button {
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Cartes produit : arrondi légèrement accentué */
.eco-product { border-radius: 14px; }

/* ============ MENU ACTIF (page courante) ============ */
.eco-menu > li.current-menu-item > a,
.eco-menu > li.current-page-ancestor > a,
.eco-menu > li.current-product-cat-ancestor > a {
    color: var(--eco-accent, #502013);
}
.eco-menu > li.current-menu-item > a { position: relative; }
.eco-menu > li.current-menu-item > a::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px;
    height: 3px; border-radius: 3px;
    background: var(--eco-gold, #d3ba1f);
}

/* ============ FORMES DÉCORATIVES (cercles / anneaux) ============ */
.eco-cats, .eco-products, .eco-about { position: relative; }
.eco-cats::before, .eco-cats::after,
.eco-bycat::before, .eco-bycat::after,
.eco-about::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
/* Catégories : disque doux + anneau doré pointillé */
.eco-cats::before {
    top: 46px; right: 4%; width: 120px; height: 120px;
    background: rgba(80,32,19,.045);
}
.eco-cats::after {
    bottom: 24px; left: 3%; width: 80px; height: 80px;
    border: 2px dashed rgba(211,186,31,.4);
}
/* Parcourir par catégorie : grand disque + disque doré pâle */
.eco-bycat::before {
    top: 90px; left: 2%; width: 170px; height: 170px;
    background: rgba(80,32,19,.04);
}
.eco-bycat::after {
    bottom: 46px; right: 3%; width: 120px; height: 120px;
    background: rgba(211,186,31,.10);
}
/* À propos : disque doré discret */
.eco-about::after {
    bottom: 34px; right: 3%; width: 100px; height: 100px;
    background: rgba(211,186,31,.09);
}
/* Les contenus passent au-dessus des décorations */
.eco-cats .eco-container,
.eco-products .eco-container,
.eco-about .eco-container { position: relative; z-index: 1; }

/* Anneau doré dans la carte Deal (clipée par l'overflow) */
.eco-deal-card::before {
    content: ''; position: absolute; z-index: 0;
    bottom: -70px; left: -50px; width: 210px; height: 210px;
    border-radius: 50%;
    border: 2px solid rgba(211,186,31,.25);
    pointer-events: none;
}

/* ============ FOOTER EN DÉGRADÉ ============ */
.eco-footer {
    background: linear-gradient(180deg, var(--eco-accent, #502013) 0%, var(--eco-deep-2, #2b1108) 85%);
}
.eco-footer-bottom { border-top-color: rgba(255,255,255,.10); }

/* ============ RESPONSIVE ============ */
@media (max-width: 782px) {
    .eco-hero-wrap { padding: 14px 0 4px; }
    .eco-hero { height: auto; min-height: 520px; max-height: none; border-radius: 18px; }
    .eco-hero-inner { grid-template-columns: 1fr; }
    .eco-hero-content { padding: 26px 22px 20px; }
    .eco-hero-media { height: 210px; }
    .eco-hero-title { font-size: 26px; }
    .eco-hero-subtitle { font-size: 15px; margin-bottom: 18px; }
    .eco-hero-arrow { display: none; }

    .eco-reassurance-grid { padding: 14px 18px; border-radius: 16px; }

    /* Décorations plus discrètes */
    .eco-cats::before, .eco-bycat::before { width: 70px; height: 70px; }
    .eco-cats::after { width: 52px; height: 52px; }
    .eco-bycat::after, .eco-about::after { width: 64px; height: 64px; }
}