/* =====================================================================
 * Fichier : assets/css/pages/ueber-uns.css
 * Projet  : Brennholz Shop24
 * Rôle    : Styles propres à la page « À propos » (ueber-uns.php) :
 *           bandeau avec mots animés et visuels gris, histoire et mission,
 *           chiffres animés, valeurs (cartes à effet de lumière), timeline
 *           « du bois à votre porte » avec ligne de progression, galerie
 *           équipe / entrepôt, engagements et appel à l'action.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Bandeau
 * ------------------------------------------------------------------- */
.ab-hero { padding-bottom: clamp(4rem, 8vw, 6rem); overflow-x: clip; }
.ab-hero-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ab-hero-inner { position: relative; z-index: 2; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: 1rem; }
.ab-hero-text h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.1; animation: hfk-fade-up .7s var(--hfk-ease) both; }
.ab-hero-accent { background: var(--hfk-grad-fire-h); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hfk-gradient-pan 5s linear infinite; }
.ab-hero-text p { animation: hfk-fade-up .7s .12s var(--hfk-ease) both; }
.ab-hero-lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 500; color: #fff !important; }
.ab-rotator { position: relative; display: inline-grid; vertical-align: bottom; min-width: 9.5em; height: 1.45em; overflow: hidden; color: var(--hfk-amber); font-family: var(--hfk-font-head); font-weight: 700; }
.ab-rotator span { grid-area: 1 / 1; opacity: 0; transform: translateY(100%); transition: opacity .45s, transform .55s var(--hfk-ease); white-space: nowrap; }
.ab-rotator span.is-active { opacity: 1; transform: none; }
.ab-rotator span.is-leaving { opacity: 0; transform: translateY(-100%); }
.ab-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; animation: hfk-fade-up .7s .22s var(--hfk-ease) both; }

.ab-hero-visual { position: relative; min-height: 420px; animation: hfk-fade-up .8s .2s var(--hfk-ease) both; }
.ab-hero-ph { position: absolute; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.ab-hero-ph .img-ph { min-height: 0; }
.ab-hero-ph-main { top: 0; right: 0; width: 78%; height: 340px; border-bottom: 5px solid var(--hfk-flame); }
.ab-hero-ph-small { left: 0; bottom: 0; width: 46%; height: 200px; border: 6px solid var(--hfk-charcoal-2); animation: hfk-float 7s ease-in-out infinite; }
.ab-hero-badge { position: absolute; right: 6%; bottom: 8px; display: flex; flex-direction: column; max-width: 220px; padding: 1rem 1.2rem; background: var(--hfk-grad-fire); color: #fff; box-shadow: var(--hfk-shadow-fire); animation: hfk-bounce-in .8s .6s var(--hfk-ease-bounce) both; }
.ab-hero-badge strong { font-family: var(--hfk-font-head); font-size: 2rem; line-height: 1; }
.ab-hero-badge span { margin-top: .3rem; font-size: .84rem; line-height: 1.35; }

/* ---------------------------------------------------------------------
 * 2. Histoire & mission
 * ------------------------------------------------------------------- */
.ab-story { overflow-x: clip; }
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ab-story-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.ab-story-text p { color: var(--hfk-text); line-height: 1.75; }
.ab-mission { position: relative; padding: clamp(1.5rem, 3vw, 2.3rem); background: var(--hfk-grad-night); color: #E6E9EC; overflow: hidden; box-shadow: var(--hfk-shadow-lg); }
.ab-mission::before { content: ''; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 166, 75, .45), transparent 65%); animation: hfk-glow 6s ease-in-out infinite; }
.ab-mission > * { position: relative; }
.ab-mission-icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--hfk-grad-fire); color: #fff; font-size: 1.3rem; box-shadow: var(--hfk-shadow-fire); }
.ab-mission h3 { margin: 1rem 0 .7rem; color: #fff; }
.ab-mission blockquote { margin: 0 0 1.3rem; padding-left: 1rem; border-left: 4px solid var(--hfk-amber); font-size: 1.08rem; font-style: italic; line-height: 1.65; color: #fff; }
.ab-mission-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ab-mission-list li { display: flex; gap: .6rem; align-items: flex-start; color: #D5DADF; transition: transform .35s var(--hfk-ease), color .25s; }
.ab-mission-list li:hover { transform: translateX(6px); color: #fff; }
.ab-mission-list i { width: 16px; flex: 0 0 16px; margin-top: .3rem; color: var(--hfk-amber); }

/* ---------------------------------------------------------------------
 * 3. Chiffres
 * ------------------------------------------------------------------- */
.ab-stats { position: relative; z-index: 2; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.ab-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; box-shadow: var(--hfk-shadow-lg); border-top: 5px solid transparent; border-image: var(--hfk-grad-fire-h) 1; }
.ab-stats-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-stats-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-stats-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.ab-stat { --ab-c: var(--hfk-flame); position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.3rem, 2.5vw, 2rem); border-right: 1px solid var(--hfk-border); transition: background .3s; }
.ab-stat:last-child { border-right: 0; }
.ab-stat:hover { background: var(--hfk-cream); }
.ab-stat.is-forest { --ab-c: var(--hfk-forest); }
.ab-stat.is-sky { --ab-c: var(--hfk-sky); }
.ab-stat.is-amber { --ab-c: #D99A00; }
.ab-stat-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: .8rem; background: var(--ab-c); color: #fff; font-size: 1.1rem; transition: transform .45s var(--hfk-ease-bounce); }
.ab-stat:hover .ab-stat-icon { transform: rotate(-10deg) scale(1.1); }
.ab-stat strong { font-family: var(--hfk-font-head); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--hfk-charcoal); font-variant-numeric: tabular-nums; }
.ab-stat-label { margin-top: .35rem; font-family: var(--hfk-font-head); font-weight: 700; color: var(--ab-c); }
.ab-stat small { margin-top: .2rem; color: var(--hfk-muted); font-size: .86rem; line-height: 1.4; }

/* ---------------------------------------------------------------------
 * 4. Valeurs
 * ------------------------------------------------------------------- */
.ab-values { scroll-margin-top: var(--hfk-header-h, 76px); }
.ab-values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.ab-value { --ab-c: var(--hfk-flame); --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.4rem 1.5rem; background: #fff; border: 1px solid var(--hfk-border); border-bottom: 4px solid var(--ab-c); overflow: hidden; transition: transform .45s var(--hfk-ease), box-shadow .45s var(--hfk-ease); }
.ab-value::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--ab-c) 14%, transparent), transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.ab-value:hover { transform: translateY(-6px); box-shadow: var(--hfk-shadow-lg); }
.ab-value:hover::before { opacity: 1; }
.ab-value > * { position: relative; }
.ab-value.is-forest { --ab-c: var(--hfk-forest); }
.ab-value.is-sky { --ab-c: var(--hfk-sky); }
.ab-value.is-plum { --ab-c: var(--hfk-plum); }
.ab-value-num { position: absolute !important; right: 1rem; top: .6rem; font-family: var(--hfk-font-head); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--ab-c); opacity: .12; transition: opacity .3s, transform .45s var(--hfk-ease); }
.ab-value:hover .ab-value-num { opacity: .25; transform: translateY(-4px); }
.ab-value-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 1rem; background: var(--ab-c); color: #fff; font-size: 1.35rem; transition: transform .5s var(--hfk-ease-bounce); }
.ab-value:hover .ab-value-icon { transform: rotate(-8deg) scale(1.08); }
.ab-value h3 { margin: 0 0 .6rem; font-size: 1.3rem; }
.ab-value p { margin: 0 0 1rem; color: var(--hfk-text); font-size: .95rem; line-height: 1.65; }
.ab-value ul { display: grid; gap: .4rem; margin: auto 0 0; padding: .9rem 0 0; list-style: none; border-top: 1px dashed var(--hfk-border); }
.ab-value li { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; font-weight: 600; color: var(--hfk-charcoal); }
.ab-value li i { width: 14px; flex: 0 0 14px; margin-top: .25rem; color: var(--ab-c); }

/* ---------------------------------------------------------------------
 * 5. Timeline
 * ------------------------------------------------------------------- */
.ab-journey { overflow-x: clip; }
.ab-timeline { position: relative; margin: 0 auto; padding: 0; list-style: none; max-width: 1040px; }
.ab-timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--hfk-ash); }
.ab-timeline-line span { display: block; width: 100%; height: 0; background: var(--hfk-grad-fire); box-shadow: 0 0 12px rgba(34, 166, 75, .55); transition: height .15s linear; }
.ab-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; margin-bottom: 1.6rem; }
.ab-step:last-child { margin-bottom: 0; }
.ab-step-dot { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; background: #fff; border: 3px solid var(--hfk-border); color: var(--hfk-muted); font-size: 1.2rem; transition: background .45s, border-color .45s, color .45s, transform .5s var(--hfk-ease-bounce), box-shadow .45s; }
.ab-step.is-reached .ab-step-dot { background: var(--hfk-flame); border-color: var(--hfk-flame); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 7px rgba(34, 166, 75, .15); }
.ab-step-card { grid-row: 1; padding: 1.3rem 1.4rem; background: #fff; border: 1px solid var(--hfk-border); box-shadow: var(--hfk-shadow-sm); transition: transform .4s var(--hfk-ease), box-shadow .4s, border-color .3s; }
.ab-step.is-left .ab-step-card { grid-column: 1; border-right: 4px solid var(--hfk-border); }
.ab-step.is-right .ab-step-card { grid-column: 3; border-left: 4px solid var(--hfk-border); }
.ab-step.is-reached .ab-step-card { border-right-color: var(--hfk-flame); border-left-color: var(--hfk-flame); }
.ab-step.is-left.is-reached .ab-step-card { border-left-color: var(--hfk-border); }
.ab-step.is-right.is-reached .ab-step-card { border-right-color: var(--hfk-border); }
.ab-step-card:hover { transform: translateY(-4px); box-shadow: var(--hfk-shadow); }
.ab-step-card small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hfk-flame-dark); }
.ab-step-card h3 { margin: .25rem 0 .45rem; font-size: 1.18rem; }
.ab-step-card p { margin: 0; color: var(--hfk-muted); font-size: .94rem; line-height: 1.6; }

/* ---------------------------------------------------------------------
 * 6. Équipe / entrepôt
 * ------------------------------------------------------------------- */
.ab-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 1rem; }
.ab-shot { position: relative; margin: 0; overflow: hidden; background: var(--hfk-placeholder); }
.ab-shot.is-wide { grid-row: span 2; }
.ab-shot-media { position: absolute; inset: 0; transition: transform .8s var(--hfk-ease); }
.ab-shot-media .img-ph { min-height: 0; }
.ab-shot:hover .ab-shot-media { transform: scale(1.05); }
.ab-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: .2rem; padding: 2.5rem 1.2rem 1.1rem; background: linear-gradient(to top, rgba(20, 30, 40, .88), rgba(20, 30, 40, 0)); color: #fff; }
.ab-shot figcaption strong { font-family: var(--hfk-font-head); font-size: 1.15rem; }
.ab-shot figcaption span { font-size: .88rem; line-height: 1.45; color: #E6E9EC; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--hfk-ease), opacity .4s; }
.ab-shot:hover figcaption span, .ab-shot:focus-within figcaption span { max-height: 6em; opacity: 1; }
.ab-shot::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--hfk-grad-fire-h); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--hfk-ease); }
.ab-shot:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------
 * 7. Engagements
 * ------------------------------------------------------------------- */
.ab-promises { overflow-x: clip; }
.ab-promises-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ab-promises-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.ab-promises-head p { color: var(--hfk-muted); line-height: 1.7; }
.ab-promises-links { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.2rem; }
.ab-promise-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ab-promise-list li { display: flex; gap: .9rem; align-items: flex-start; padding: 1.2rem; background: var(--hfk-cream); border-left: 4px solid var(--hfk-amber); transition: transform .4s var(--hfk-ease), background .3s, border-color .3s, box-shadow .4s; }
.ab-promise-list li:hover { transform: translateY(-4px); background: #fff; border-left-color: var(--hfk-flame); box-shadow: var(--hfk-shadow); }
.ab-promise-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; background: #fff; color: var(--hfk-flame-dark); font-size: 1.1rem; box-shadow: var(--hfk-shadow-xs); transition: background .3s, color .3s, transform .45s var(--hfk-ease-bounce); }
.ab-promise-list li:hover .ab-promise-icon { background: var(--hfk-flame); color: #fff; transform: rotate(-8deg); }
.ab-promise-list strong { display: block; font-family: var(--hfk-font-head); color: var(--hfk-charcoal); }
.ab-promise-list p { margin: .2rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--hfk-muted); }

/* ---------------------------------------------------------------------
 * 8. Appel à l'action
 * ------------------------------------------------------------------- */
.ab-cta { position: relative; padding: clamp(3rem, 6vw, 5rem) 0; background: var(--hfk-grad-fire); background-size: 200% 200%; animation: hfk-gradient-pan 10s ease infinite; overflow: hidden; }
.ab-cta-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ab-cta .container-xxl { position: relative; z-index: 1; }
.ab-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.ab-cta-inner > div:first-child { flex: 1 1 480px; min-width: 0; }
.ab-cta h2 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.ab-cta p { margin: 0; max-width: 640px; color: rgba(255, 255, 255, .92); font-size: 1.05rem; }
.ab-cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------------------------------------------------------------------
 * 9. Adaptation aux écrans
 * ------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ab-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .ab-hero-grid, .ab-story-grid, .ab-promises-grid { grid-template-columns: minmax(0, 1fr); }
    .ab-hero-visual { min-height: 360px; max-width: 620px; width: 100%; }
    .ab-stats-grid, .ab-stats-grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-stat:nth-child(2n) { border-right: 0; }
    .ab-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hfk-border); }
    .ab-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-shot.is-wide { grid-column: span 2; grid-row: span 1; }
    .ab-shot figcaption span { max-height: 6em; opacity: 1; }
    /* Timeline : une colonne, ligne à gauche */
    .ab-timeline-line { left: 29px; }
    .ab-step { grid-template-columns: 58px minmax(0, 1fr); column-gap: 1rem; }
    .ab-step-dot { grid-column: 1; }
    .ab-step.is-left .ab-step-card, .ab-step.is-right .ab-step-card { grid-column: 2; border-right: 1px solid var(--hfk-border); border-left: 4px solid var(--hfk-border); }
    .ab-step.is-reached .ab-step-card, .ab-step.is-left.is-reached .ab-step-card { border-left-color: var(--hfk-flame); border-right-color: var(--hfk-border); }
}
@media (max-width: 575.98px) {
    .ab-hero-actions .btn, .ab-cta-actions .btn { width: 100%; }
    .ab-cta-actions { width: 100%; }
    .ab-hero-visual { min-height: 300px; }
    .ab-hero-ph-main { width: 88%; height: 230px; }
    .ab-hero-ph-small { width: 52%; height: 140px; }
    .ab-hero-badge { right: 0; max-width: 180px; padding: .8rem 1rem; }
    .ab-hero-badge strong { font-size: 1.6rem; }
    .ab-rotator { min-width: 8em; }
    .ab-values-grid, .ab-promise-list, .ab-gallery { grid-template-columns: minmax(0, 1fr); }
    .ab-gallery { grid-auto-rows: 220px; }
    .ab-shot.is-wide { grid-column: auto; }
    .ab-stat { padding: 1.1rem; }
    .ab-stat strong { font-size: 2rem; }
    .ab-step-dot { width: 48px; height: 48px; font-size: 1rem; }
    .ab-timeline-line { left: 24px; }
    .ab-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-hero-ph-small, .ab-cta, .ab-hero-accent { animation: none; }
    .ab-rotator span { transition: none; }
}