/* B&Y CREATIONS — accueil éditorial inspiré du modèle validé. */
.byc-reference-topbar { min-height: 52px; padding: 0 max(26px, calc((100vw - 1240px) / 2)); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; background: #131719; color: #fff; }
.byc-reference-topbar > div { min-height: 38px; padding: 0 34px; display: flex; align-items: center; justify-content: center; gap: 14px; border-right: 1px solid rgba(255,255,255,.45); }
.byc-reference-topbar > div:last-child { border-right: 0; }
.byc-reference-topbar span { color: #ffc400; font-size: 28px; line-height: 1; }
.byc-reference-topbar p { margin: 0; color: #f8f8f8; font-size: 12px; line-height: 1.25; }
.byc-reference-topbar strong { display: block; }
.site-header.byc-reference-header { position: relative; top: auto; min-height: 82px; height: auto; padding: 0 max(28px, calc((100vw - 1240px) / 2)); gap: 32px; background: #fff; color: #0b0d0f; border-bottom: 1px solid #eeeae1; backdrop-filter: none; }
.byc-reference-header .brand { width: 112px; height: 78px; padding: 2px; flex: 0 0 auto; }
.byc-reference-header .brand img { width: 100%; height: 100%; object-fit: contain; }
.byc-reference-header .main-nav { gap: clamp(18px, 3vw, 42px); }
.byc-reference-header .main-nav > a { padding: 30px 0; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.byc-reference-header .main-nav > a::after { bottom: 20px; }
.byc-reference-header .header-actions { gap: 6px; }
.byc-reference-header .icon-button, .byc-reference-header .menu-button { width: 36px; height: 36px; border: 0; color: #0b0d0f; font-size: 22px; }
.byc-reference-home { --byc-ref-cream: #f7f4ed; background: var(--byc-ref-cream); color: #0b0d0f; }
.byc-reference-hero { min-height: 580px; display: grid; grid-template-columns: minmax(380px, .83fr) minmax(0, 1.35fr); background: #fff; }
.byc-reference-hero-copy { padding: 58px clamp(32px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg, #fff 0%, #faf8f2 84%, #f2eee4 100%); }
.byc-reference-eyebrow { display: block; color: #555; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.byc-reference-eyebrow::after { content: ""; display: block; width: 38px; height: 3px; margin-top: 10px; background: #ffc400; }
.byc-reference-hero h1 { max-width: 520px; margin: 23px 0 0; font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(44px, 5.2vw, 73px); line-height: .93; letter-spacing: -.065em; text-transform: uppercase; }
.byc-reference-hero h1 em { color: #e8af00; font-style: normal; }
.byc-reference-hero-copy > p:not(.byc-reference-signature) { max-width: 450px; margin: 22px 0 27px; color: #525252; font-size: 14px; line-height: 1.55; }
.byc-reference-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.byc-reference-actions a { min-height: 47px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid #0b0d0f; font-size: 10px; font-weight: 900; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease; }
.byc-reference-actions a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.byc-reference-primary { border-color: #ffc400 !important; background: #ffc400; }
.byc-reference-signature { margin: 33px 0 0; font-family: "Bradley Hand", "Segoe Print", cursive; font-size: 23px; line-height: 1.15; transform: rotate(-3deg); }
.byc-reference-hero-image { min-height: 580px; overflow: hidden; background: #17191b; }
.byc-reference-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.byc-reference-reassurance { min-height: 82px; padding: 15px max(20px, calc((100vw - 1240px) / 2)); display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; }
.byc-reference-reassurance > div { padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 14px; border-right: 1px solid #c9c5bc; color: #4d4d4d; font-size: 11px; line-height: 1.4; }
.byc-reference-reassurance > div:last-child { border-right: 0; }
.byc-reference-reassurance i { color: #eab200; font-size: 28px; font-style: normal; }
.byc-reference-routes { max-width: 1240px; margin: 0 auto; padding: 27px 28px 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.byc-reference-routes article { min-width: 0; overflow: hidden; border: 1px solid #ded8cc; border-radius: 14px; background: #fff; box-shadow: 0 12px 35px rgba(40,35,24,.08); }
.byc-reference-route-image { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: #e8e2d6; }
.byc-reference-route-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
.byc-reference-route-copy { padding: 15px 18px 20px; }
.byc-reference-route-copy .byc-reference-eyebrow::after { width: 26px; margin-top: 7px; }
.byc-reference-route-copy h2 { margin: 8px 0 5px; font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(19px, 2.1vw, 27px); line-height: 1; letter-spacing: -.045em; }
.byc-reference-route-copy p { min-height: 44px; margin: 0 0 15px; color: #5e5e5e; font-size: 12px; line-height: 1.4; }
.byc-reference-route-copy > a { min-height: 41px; padding: 0 15px; display: inline-flex; align-items: center; gap: 22px; border: 1px solid #0b0d0f; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.byc-reference-universes { max-width: 1240px; margin: 0 auto; padding: 4px 28px 50px; }
.byc-reference-section-head { margin-bottom: 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.byc-reference-section-head h2 { margin: 11px 0 0; font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(27px, 3.5vw, 42px); line-height: 1; letter-spacing: -.05em; }
.byc-reference-section-head > a { padding: 0 0 7px; border-bottom: 3px solid #ffc400; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.byc-reference-universe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.byc-reference-universe-grid > a { overflow: hidden; display: flex; flex-direction: column; border: 1px solid #ded8cc; border-radius: 12px; background: #fff; color: #0b0d0f; box-shadow: 0 10px 28px rgba(40,35,24,.07); }
.byc-reference-universe-grid img { position: static; display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; object-position: center; transition: filter .25s ease; }
.byc-reference-universe-grid a:hover img { filter: saturate(1.05) contrast(1.02); }
.byc-reference-universe-grid strong { padding: 14px 16px 16px; font-size: 15px; text-transform: uppercase; }
.byc-reference-universe-grid strong::after { content: ""; display: block; width: 34px; height: 4px; margin-top: 8px; background: #ffc400; }
.byc-reference-final { min-height: 250px; padding: 48px max(28px, calc((100vw - 1240px) / 2)); display: grid; grid-template-columns: 1.05fr 2fr 1fr; align-items: center; gap: 30px; background: radial-gradient(circle at 30% -45%, #323638, #111416 50%, #090b0c 100%); color: #fff; }
.byc-reference-final-intro { padding-right: 28px; border-right: 1px solid #626567; font-size: 21px; line-height: 1.15; }
.byc-reference-final-intro strong { display: block; font-size: 24px; }
.byc-reference-final-intro::after { content: ""; display: block; width: 52px; height: 5px; margin-top: 13px; background: #ffc400; }
.byc-reference-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.byc-reference-values div { font-size: 10px; line-height: 1.35; }
.byc-reference-values i { width: 57px; height: 57px; margin: 0 auto 9px; display: grid; place-items: center; border: 2px solid #ffc400; border-radius: 50%; font-size: 25px; font-style: normal; }
.byc-reference-final > a { min-height: 51px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; background: #ffc400; color: #0b0d0f; font-size: 10px; font-weight: 900; text-transform: uppercase; }
@media (max-width: 760px) {
	.site-header.byc-reference-header .main-nav { top: 82px; max-height: calc(100dvh - 82px); background: #111416; color: #fff; }
	.byc-reference-hero { grid-template-columns: 1fr 1fr; }
	.byc-reference-routes { grid-template-columns: 1fr 1fr; }
	.byc-reference-routes article:last-child { grid-column: 1 / -1; }
	.byc-reference-universe-grid { grid-template-columns: repeat(2, 1fr); }
	.byc-reference-final { grid-template-columns: 1fr; text-align: center; }
	.byc-reference-final-intro { padding: 0; border-right: 0; }
	.byc-reference-final-intro::after { margin-left: auto; margin-right: auto; }
}
@media (min-width: 701px) and (max-width: 1050px) {
	.site-header.byc-reference-header .main-nav { position: static; max-height: none; overflow: visible; display: flex; flex-direction: row; align-items: center; padding: 0; background: transparent; color: #0b0d0f; }
	.site-header.byc-reference-header .main-nav > a { padding: 28px 0; border-bottom: 0; }
	.site-header.byc-reference-header .menu-button { display: none; }
}
@media (max-width: 700px) {
	.byc-reference-topbar { grid-template-columns: 1fr; padding: 5px 18px; }
	.byc-reference-topbar > div { min-height: 36px; padding: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
	.byc-reference-topbar > div:last-child { border-bottom: 0; }
	.byc-reference-topbar span { font-size: 22px; }
	.site-header.byc-reference-header { min-height: 70px; padding: 0 14px; gap: 8px; }
	.byc-reference-header .brand { width: 92px; height: 66px; margin-left: 0; }
	.byc-reference-hero { grid-template-columns: 1fr; }
	.byc-reference-hero-copy { padding: 40px 21px 44px; }
	.byc-reference-hero h1 { font-size: clamp(39px, 12vw, 56px); }
	.byc-reference-actions { display: grid; }
	.byc-reference-hero-image { min-height: 430px; }
	.byc-reference-reassurance { grid-template-columns: 1fr 1fr; padding: 12px; }
	.byc-reference-reassurance > div { min-height: 68px; padding: 8px; border-bottom: 1px solid #ddd8ce; font-size: 10px; }
	.byc-reference-reassurance > div:nth-child(2) { border-right: 0; }
	.byc-reference-reassurance > div:nth-child(n+3) { border-bottom: 0; }
	.byc-reference-routes { grid-template-columns: 1fr; padding: 18px 14px 34px; }
	.byc-reference-routes article:last-child { grid-column: auto; }
	.byc-reference-route-copy p { min-height: 0; }
	.byc-reference-universes { padding: 5px 14px 38px; }
	.byc-reference-section-head { align-items: flex-start; flex-direction: column; }
	.byc-reference-universe-grid { gap: 8px; }
	.byc-reference-universe-grid strong { padding: 11px 12px 13px; font-size: 12px; }
	.byc-reference-final { padding: 46px 22px; }
	.byc-reference-values { grid-template-columns: 1fr; gap: 22px; }
}

/* Héros HD : le décor, le texte et les actions restent indépendants. */
.byc-reference-hero.byc-reference-hero-art { position: relative; display: block; width: min(calc(100% - clamp(28px, 4vw, 64px)), 1680px); min-height: clamp(500px, 47vw, 680px); margin: clamp(14px, 2vw, 24px) auto 0; aspect-ratio: 16 / 9; overflow: hidden; box-sizing: border-box; border: 1px solid #ded8cc; border-radius: 18px; background: #f7f4ed; box-shadow: 0 18px 44px rgba(39,33,22,.1); }
.byc-reference-hero-artwork { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center; }
.byc-reference-hero-overlay { position: absolute; z-index: 2; top: 0; bottom: 0; left: clamp(24px, 4.2vw, 74px); width: min(37%, 480px); display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 62px) 0; }
.byc-reference-hero-overlay h1 { max-width: 470px; margin: 21px 0 0; font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(39px, 4.5vw, 67px); line-height: .93; letter-spacing: -.065em; text-transform: uppercase; }
.byc-reference-hero-overlay h1 em { color: #e8af00; font-style: normal; }
.byc-reference-hero-overlay > p:not(.byc-reference-signature) { max-width: 390px; margin: 20px 0 25px; color: #4d4d4d; font-size: 14px; line-height: 1.55; }
.byc-reference-hero-overlay .byc-reference-signature { margin: 28px 0 0; }
@media (max-width: 700px) {
	.byc-reference-hero.byc-reference-hero-art { width: calc(100% - 24px); min-height: 670px; margin: 12px auto 0; aspect-ratio: auto; border-radius: 14px; background: #f7f4ed; }
	.byc-reference-hero-artwork { object-position: 64% center; }
	.byc-reference-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247,244,237,.98) 0%, rgba(247,244,237,.88) 58%, rgba(247,244,237,.16) 100%); }
	.byc-reference-hero-overlay { position: relative; z-index: 2; left: 0; width: min(86%, 430px); min-height: 670px; padding: 48px 22px; display: flex; flex-direction: column; justify-content: center; }
	.byc-reference-hero-overlay h1 { max-width: 400px; margin: 22px 0 0; font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(40px, 12vw, 58px); line-height: .94; letter-spacing: -.06em; text-transform: uppercase; }
	.byc-reference-hero-overlay > p:not(.byc-reference-signature) { margin: 22px 0 27px; }
}