/*
 * Blocs de la page d'accueil Equivalent (reprise de l'ancien site, 2026-10-25).
 * Le contenu vit dans l'éditeur de page (Sites web › Pages › Accueil), semé par Database\Seeders\EquivalentHomepageSeeder ;
 * ces classes eqh-* en donnent la mise en forme (l'ancien site utilisait Tailwind complet, absent de la boutique KRM).
 * Comportements (vidéo qui démarre à N s, carrousels) : attributs data-eqh-*, animés par public/js/pages/front/cms/homepage.js.
 * Mode nuit : scripts/storefront/build-dark-css.py relit ce fichier.
 */
.eqh-video, .eqh-video *, .eqh-slider, .eqh-slider *, .eqh-intro *, .eqh-about *, .eqh-works * { box-sizing: border-box; }
.eqh-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.eqh-kicker { display: inline-block; color: var(--primary, #c5a174); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.eqh-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; margin: .4rem 0 0; color: #1a1a1a; text-wrap: balance; }
.eqh-lead { font-size: 1.05rem; line-height: 1.7; color: #4b5563; margin: 0; }
.eqh-lead strong { color: #1a1a1a; }
.eqh-ic { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; display: inline-block; white-space: nowrap; direction: ltr; vertical-align: middle; font-size: 1.35em; }

/* Boutons */
.eqh-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.75rem; }
.eqh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.5rem; border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background-color .2s, box-shadow .2s, transform .2s; border: 1.5px solid transparent; cursor: pointer; }
.eqh-btn-primary { background: var(--primary, #c5a174); color: #fff; box-shadow: 0 0 20px color-mix(in srgb, var(--primary, #c5a174) 40%, transparent); }
.eqh-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 30px color-mix(in srgb, var(--primary, #c5a174) 60%, transparent); }
.eqh-btn-glass { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eqh-btn-glass:hover { background: rgba(255,255,255,.2); color: #fff; }
.eqh-btn-light { background: rgba(255,255,255,.92); color: #0f172a; }
.eqh-btn-outline { background: transparent; color: #1a1a1a; border-color: #d1d5db; }
.eqh-btn-outline:hover { border-color: var(--primary, #c5a174); color: var(--primary, #c5a174); }

/* ── Vidéo héros ─────────────────────────────────────────────────── */
.eqh-video { position: relative; height: 70vh; min-height: 500px; overflow: hidden; background: #0b0f14; }
.eqh-video-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eqh-video-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.4) 45%, transparent); }
.eqh-video-body { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 4rem; }
.eqh-video-text { max-width: 48rem; }
.eqh-video h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; text-wrap: balance; }
.eqh-video p { color: rgba(255,255,255,.9); font-size: 1.1rem; line-height: 1.65; margin: 0; }

/* ── Notre boutique en ligne (image + texte + atouts) ─────────────── */
.eqh-intro { padding: 4.5rem 0; }
.eqh-intro-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 3.5rem; align-items: center; }
.eqh-intro-media { position: relative; }
.eqh-intro-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 24px 48px rgba(0,0,0,.14); }
.eqh-badge { position: absolute; right: -1.25rem; bottom: -1.25rem; background: var(--primary, #c5a174); color: #fff; border-radius: 16px; padding: 1rem 1.25rem; display: flex; flex-direction: column; box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.eqh-badge strong { font-size: 2rem; font-weight: 800; line-height: 1; }
.eqh-badge span { font-size: .8rem; font-weight: 600; opacity: .92; }
.eqh-intro-body { display: flex; flex-direction: column; gap: 1.4rem; }
.eqh-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.eqh-feature { display: flex; gap: .9rem; align-items: flex-start; }
.eqh-feature-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary, #c5a174) 14%, #fff); color: var(--primary, #c5a174); }
.eqh-feature h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; color: #1a1a1a; }
.eqh-feature p { font-size: .9rem; line-height: 1.5; color: #6b7280; margin: 0; }
@media (max-width: 900px) {
    .eqh-intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .eqh-intro-media { max-width: 420px; margin: 0 auto; width: 100%; }
    .eqh-badge { right: .75rem; bottom: -1rem; }
}
@media (max-width: 560px) { .eqh-features { grid-template-columns: 1fr; } }

/* ── Carrousels (bandeau des gammes, réalisations) ────────────────── */
.eqh-slider { position: relative; overflow: hidden; background: #0b0f14; }
.eqh-slider-hero { height: 65vh; min-height: 500px; }
.eqh-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .7s ease-in-out; text-decoration: none; color: #fff; }
.eqh-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.eqh-slide-bg, .eqh-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.eqh-slide-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.45) 28%, transparent 68%); }
.eqh-slide-body { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding-bottom: 4rem; }
.eqh-slide-text { max-width: 42rem; }
.eqh-slide h1, .eqh-slide h3 { color: #fff; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
.eqh-slide h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.eqh-slide h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.01em; }
.eqh-slide p { color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.55; margin: .9rem 0 0; }
.eqh-slide .eqh-actions { margin-top: 1.9rem; }
.eqh-dots { position: absolute; z-index: 2; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: flex; gap: .6rem; }
.eqh-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: transform .3s, background-color .3s; }
.eqh-dot:hover { transform: scale(1.2); background: rgba(255,255,255,.75); }
.eqh-dot.is-active { background: rgba(255,255,255,1); } /* rgba : sur la photo, pas repris par le mode nuit */
.eqh-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.42); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s; }
.eqh-arrow:hover { background: rgba(0,0,0,.62); }
.eqh-arrow-prev { left: 1.25rem; }
.eqh-arrow-next { right: 1.25rem; }
.eqh-counter { position: absolute; z-index: 2; right: 1.5rem; top: 1.25rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .eqh-slide .eqh-btn-light, .eqh-arrow { display: none; } }

/* ── Ce que nous faisons ──────────────────────────────────────────── */
.eqh-about { padding: 4.5rem 0; }
.eqh-about-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: center; }
.eqh-about-body { display: flex; flex-direction: column; gap: 1rem; }
.eqh-about h3 { font-size: 1.25rem; font-weight: 700; margin: .6rem 0 0; color: #1a1a1a; }
.eqh-about h4 { font-size: 1rem; font-weight: 700; margin: .6rem 0 0; color: #374151; }
.eqh-about p { margin: 0; color: #4b5563; line-height: 1.7; }
.eqh-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.eqh-checks li { position: relative; padding-left: 1.9rem; color: #374151; line-height: 1.55; }
.eqh-checks li::before { content: 'check_circle'; font-family: 'Material Symbols Outlined'; position: absolute; left: 0; top: -.05rem; font-size: 1.25rem; color: var(--primary, #c5a174); }
.eqh-about-media img { width: 100%; border-radius: 18px; display: block; box-shadow: 0 24px 48px rgba(0,0,0,.12); }
@media (max-width: 900px) { .eqh-about-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── Nos réalisations ─────────────────────────────────────────────── */
.eqh-works { padding: 3rem 0 4.5rem; background: #f9fafb; }
.eqh-works-head { text-align: center; margin-bottom: 2.5rem; padding: 0 1rem; }
.eqh-works-head p { margin: .8rem 0 0; color: #4b5563; font-size: 1.05rem; }
.eqh-works .eqh-slider { height: 60vh; min-height: 460px; max-height: 700px; }
.eqh-works .eqh-slide-body { padding-bottom: 2.5rem; }