/* =====================================================================
 * Fichier : assets/css/pages/entsorgung.css
 * Projet  : Brennholz Shop24
 * Rôle    : Styles propres à la page Entsorgung (entsorgung.php) :
 *           badges du bandeau, sélecteur de thème, pictogrammes SVG de la
 *           poubelle barrée (dessin animé), tuiles des matériaux,
 *           étapes « cendres », carte de contact.
 *           Mise en page commune : assets/css/components/legal.css
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Bandeau
 * ------------------------------------------------------------------- */
.eg-hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 0; padding: 0; list-style: none; animation: hfk-fade-up .7s .25s var(--hfk-ease) both; }
.eg-hero-badges li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; background: rgba(255, 255, 255, .08); border-bottom: 2px solid var(--hfk-forest); color: #F3EAE1; font-size: .86rem; font-weight: 700; letter-spacing: .03em; }
.eg-hero-badges li i { color: #7FD6C8; }

/* ---------------------------------------------------------------------
 * 2. Sélecteur
 * ------------------------------------------------------------------- */
.eg-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: 1rem 0 .4rem; }
.eg-picker button { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1rem .7rem; background: #fff; border: 1px solid var(--hfk-border); border-bottom: 4px solid var(--hfk-forest); font-weight: 700; font-size: .9rem; line-height: 1.3; color: var(--hfk-charcoal); text-align: center; transition: transform .35s var(--hfk-ease), box-shadow .35s, border-color .3s, background .3s; }
.eg-picker button i { display: grid; place-items: center; width: 50px; height: 50px; background: #E8F6EC; color: var(--hfk-forest-dark); font-size: 1.25rem; transition: background .3s, color .3s, transform .45s var(--hfk-ease-bounce); }
.eg-picker button:hover, .eg-picker button.is-active { transform: translateY(-5px); box-shadow: var(--hfk-shadow); border-color: var(--hfk-forest); }
.eg-picker button:hover i, .eg-picker button.is-active i { background: var(--hfk-forest); color: #fff; transform: rotate(-8deg) scale(1.06); }

/* ---------------------------------------------------------------------
 * 3. Pictogrammes
 * ------------------------------------------------------------------- */
.eg-symbols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: .4rem 0 1.4rem; }
.eg-symbols figure { margin: 0; padding: .9rem .5rem .7rem; background: #fff; border: 1px solid var(--hfk-border); text-align: center; transition: transform .35s var(--hfk-ease), box-shadow .35s; }
.eg-symbols figure:hover { transform: translateY(-4px); box-shadow: var(--hfk-shadow-sm); }
.eg-symbols figcaption { margin-top: .4rem; font-size: .8rem; font-weight: 600; color: var(--hfk-muted); }
.eg-bin { width: 64px; height: 80px; overflow: visible; }
.eg-bin-can rect, .eg-bin-can path, .eg-bin-can circle { fill: none; stroke: var(--hfk-charcoal); stroke-width: 4; stroke-linejoin: miter; }
.eg-bin-cross { fill: none; stroke: var(--hfk-ember); stroke-width: 6; stroke-linecap: square; }
.js .eg-bin-cross { stroke-dasharray: 90; stroke-dashoffset: 90; }
.eg-bin-bar { fill: var(--hfk-charcoal); }
.eg-bin text { font-family: var(--hfk-font-head); font-size: 15px; font-weight: 800; fill: var(--hfk-charcoal); }
.js .eg-bin.is-drawn .eg-bin-cross { animation: eg-draw .7s var(--hfk-ease) forwards; }
@keyframes eg-draw { to { stroke-dashoffset: 0; } }

.eg-split { display: flex; align-items: flex-start; gap: 1.2rem; }
.eg-split-icon { flex: 0 0 auto; padding: .7rem; background: var(--hfk-cream); }
.eg-split p { margin-bottom: 0; }
.eg-reg { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; background: var(--hfk-cream); border-left: 4px solid var(--hfk-forest); }
.eg-reg i { color: var(--hfk-forest); }

/* ---------------------------------------------------------------------
 * 4. Tuiles des matériaux
 * ------------------------------------------------------------------- */
.eg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0 1.2rem; }
.eg-item { --eg-c: var(--hfk-forest); display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .8rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--hfk-border); border-left: 4px solid var(--eg-c); transition: transform .3s var(--hfk-ease), box-shadow .3s; }
.eg-item:hover { transform: translateY(-3px); box-shadow: var(--hfk-shadow-sm); }
.eg-item.is-warn { --eg-c: var(--hfk-amber); }
.eg-item > i { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; background: var(--eg-c); color: #fff; font-size: 1.05rem; }
.eg-item strong { color: var(--hfk-charcoal); line-height: 1.35; }
.eg-item span { font-size: .88rem; line-height: 1.45; color: var(--hfk-muted); }

/* ---------------------------------------------------------------------
 * 5. Étapes « cendres »
 * ------------------------------------------------------------------- */
.lx-content .eg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 1.2rem; padding: 0; list-style: none; counter-reset: egstep; }
.lx-content .eg-steps > li { position: relative; display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 2.9rem 1rem 1rem; background: var(--hfk-charcoal); color: #E9DFD5; counter-increment: egstep; overflow: hidden; transition: transform .35s var(--hfk-ease); }
.lx-content .eg-steps > li::before { content: counter(egstep); position: absolute; left: 1rem; top: .8rem; display: grid; place-items: center; width: 30px; height: 30px; background: var(--hfk-grad-fire); color: #fff; font-family: var(--hfk-font-head); font-weight: 800; }
.lx-content .eg-steps > li::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 166, 75, .35), transparent 70%); animation: hfk-glow 4s ease-in-out infinite; }
.lx-content .eg-steps > li:hover { transform: translateY(-4px); }
.eg-steps strong { color: #fff; font-family: var(--hfk-font-head); }
.eg-steps span { position: relative; z-index: 1; font-size: .88rem; line-height: 1.5; }

.eg-contact { max-width: 560px; }

/* ---------------------------------------------------------------------
 * 6. Adaptation aux écrans
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .eg-symbols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eg-grid, .lx-content .eg-steps { grid-template-columns: minmax(0, 1fr); }
    .eg-split { flex-direction: column; }
    .eg-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .js .eg-bin-cross { stroke-dashoffset: 0; animation: none !important; }
    .lx-content .eg-steps > li::after { animation: none; }
}
@media print {
    .eg-picker { display: none; }
    .js .eg-bin-cross { stroke-dashoffset: 0; }
    .lx-content .eg-steps > li { background: #fff; color: #000; border: 1px solid #777; }
    .eg-steps strong { color: #000; }
}