/* Royal BBQ — Accueil. */

/* ================= HERO ================= */
.rb-hero {
	position: relative; min-height: 94vh; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 0 var(--sp-4) 90px; overflow: hidden;
	background: var(--ink); /* repli si le CSS/JS échoue à charger -- normalement invisible, couvert par .rb-hero-tint */
}
/* Vidéo d'arrière-plan (optionnelle, voir royalbbq_hero_video_url()) -- tant
   qu'aucun fichier n'est fourni, cet élément reste vide/invisible et .rb-hero-tint
   (même dégradé qu'avant, opacité 1) rend le hero visuellement identique à avant. */
.rb-hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.rb-hero-tint {
	position: absolute; inset: 0; z-index: 0; opacity: var(--rb-hero-tint-opacity, 1);
	background:
		linear-gradient(0deg, rgba(11,10,8,.97) 0%, rgba(11,10,8,.35) 46%, rgba(11,10,8,.12) 100%),
		radial-gradient(circle at 80% 30%, rgba(217,196,138,.14), transparent 55%),
		linear-gradient(158deg, #1b160f 0%, #241608 45%, #0B0A08 100%);
}
/* Une fois une vidéo en place, réduire la teinte pour la laisser transparaître
   (valeur à ajuster à l'œil avec le vrai contenu de JF -- ~.55 est un bon point de départ). */
.rb-hero.has-video .rb-hero-tint { --rb-hero-tint-opacity: .55; }
.rb-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rb-hero canvas[data-rb-smoke] { z-index: 1; }
.rb-hero canvas[data-rb-embers] { z-index: 2; }
.rb-hero-engrave { position: absolute; top: 0; right: -4%; height: 100%; width: 62%; z-index: 1; opacity: .14; pointer-events: none; }
.rb-hero-content { position: relative; z-index: 3; max-width: 1360px; margin: 0 auto; width: 100%; }
.rb-hero-eyebrow { font-family: var(--font-body); font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.rb-hero-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--champagne); }
.rb-hero h1 { font-size: clamp(3.2rem, 8.6vw, 8.2rem); line-height: .92; letter-spacing: -.015em; max-width: 17ch; }
.rb-hero h1 em { font-style: italic; color: var(--champagne); }
.rb-hero-foot { margin-top: 42px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.rb-hero-foot p { max-width: 32ch; color: var(--champagne-dim); font-size: 1.02rem; }
.rb-scroll-cue { position: absolute; bottom: 26px; right: var(--sp-4); z-index: 3; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(248,244,236,.5); writing-mode: vertical-rl; display: flex; align-items: center; gap: 10px; }
.rb-scroll-cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--champagne), transparent); animation: rb-scrollpulse 2.4s ease-in-out infinite; }
@keyframes rb-scrollpulse { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rb-scroll-cue::after { animation: none; opacity: .6; } }
@media (max-width: 720px) {
	/* min-height:94vh ne tenait pas compte de la hauteur (en flux, position:sticky)
	   de l'en-tête mobile -- header + hero dépassaient 100% de l'écran, ce qui
	   poussait le CTA hors du cadre visible sans défiler. */
	.rb-hero { min-height: calc(100svh - 72px); padding: 0 22px 48px; }
	.rb-hero-foot { align-items: flex-start; flex-direction: column; gap: 24px; }
}

/* Variante réduite (page À propos) : même traitement, hauteur moindre. */
.rb-hero--compact { min-height: 72vh; }
@media (max-width: 720px) { .rb-hero--compact { min-height: 60vh; } }

.rb-about-hero-tags { display: flex; gap: 14px; flex-wrap: wrap; }
.rb-about-hero-tags span {
	font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
	color: var(--champagne-dim); border: 1px solid var(--hairline-strong); padding: 8px 16px;
}

/* ================= MISSION ================= */
.rb-mission { position: relative; padding: var(--sp-7) 0; overflow: hidden; background: var(--ink); }
.rb-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), var(--glow), transparent 62%); }
.rb-mission:hover .rb-glow { opacity: 1; }
.rb-mission-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .4fr .9fr; gap: var(--sp-5); align-items: end; }
.rb-mission-label { font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.rb-mission-quote { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.85rem); line-height: 1.3; }
.rb-mission-quote em { font-style: italic; color: var(--champagne); }
.rb-mission-foot { margin-top: 38px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.rb-mission-foot p { color: var(--champagne-dim); max-width: 38ch; font-size: .95rem; }
@media (max-width: 880px) { .rb-mission-grid { grid-template-columns: 1fr; } }

/* ================= CATÉGORIES (bento) ================= */
.rb-cats { padding: var(--sp-6) 0 var(--sp-7); background: var(--ink); }
.rb-cats-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-5); gap: 20px; flex-wrap: wrap; }
.rb-cats-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.rb-cats-link { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--champagne); }

.rb-bento { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2px; background: var(--hairline); }
.rb-bento-main, .rb-bento-cell { position: relative; overflow: hidden; display: flex; align-items: flex-end; cursor: pointer; }
.rb-bento-main { min-height: 600px; padding: 48px; }
.rb-bento-side { display: flex; flex-direction: column; gap: 2px; }
.rb-bento-cell { flex: 1; min-height: 195px; padding: 28px; }
.rb-bento-cell.is-soon { cursor: default; }

.rb-bento-bg { position: absolute; inset: 0; background: radial-gradient(circle at 76% 20%, rgba(217,196,138,.14), transparent 55%), linear-gradient(150deg, #2c261c, #14120F 62%); }
.rb-bento-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.rb-bento-main:hover .rb-bento-bg img, .rb-bento-cell:hover .rb-bento-bg img { transform: scale(1.06); }
.rb-bento-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,10,8,.94), rgba(11,10,8,.2) 55%); }

.rb-cat-icon { position: absolute; z-index: 1; opacity: .5; transition: opacity .5s ease, transform .7s var(--ease); }
.rb-bento-main .rb-cat-icon { top: 44px; right: 48px; width: 112px; height: 64px; }
.rb-bento-cell .rb-cat-icon { top: 22px; right: 26px; width: 48px; height: 48px; }
.rb-bento-main:hover .rb-cat-icon, .rb-bento-cell:hover .rb-cat-icon { opacity: .8; transform: scale(1.04); }

.rb-bento-edge { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; background: linear-gradient(105deg, transparent 46%, rgba(217,196,138,.85) 50%, transparent 54%); }
.rb-bento-main:not(.is-soon):hover .rb-bento-edge, .rb-bento-cell:not(.is-soon):hover .rb-bento-edge { animation: rb-edgepass .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .rb-bento-main:hover .rb-bento-edge, .rb-bento-cell:hover .rb-bento-edge { animation: none; } }

.rb-bento-copy { position: relative; z-index: 3; }
.rb-bento-kicker { font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
.rb-bento-main h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin-top: 12px; max-width: 10ch; }
.rb-bento-cell h3 { font-size: 1.28rem; margin-top: 6px; }
.rb-bento-copy p { margin-top: 14px; color: var(--champagne-dim); font-size: .92rem; max-width: 34ch; }
.rb-bento-cell .rb-bento-copy p { margin-top: 6px; max-width: 26ch; font-size: .82rem; }
.rb-bento-copy p em { font-style: normal; color: var(--champagne-dim); }
@media (max-width: 880px) {
	.rb-bento { grid-template-columns: 1fr; }
	.rb-bento-main { min-height: 340px; padding: 32px; }
	.rb-bento-cell { padding: 26px; min-height: 170px; }
	.rb-bento-main h3 { font-size: 1.9rem; max-width: 12ch; }
	.rb-bento-main .rb-cat-icon { width: 76px; height: 44px; top: 28px; right: 28px; }
}

/* ================= VALEURS (marquee) ================= */
.rb-values { padding: var(--sp-5) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); overflow: hidden; }
.rb-marquee { display: flex; white-space: nowrap; }
.rb-marquee-track { display: flex; gap: 60px; animation: rb-scroll-left 26s linear infinite; padding-right: 60px; }
@media (prefers-reduced-motion: reduce) { .rb-marquee-track { animation: none; } }
.rb-values:hover .rb-marquee-track { animation-play-state: paused; }
@keyframes rb-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rb-marquee-item { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 3rem); color: var(--champagne-dim); display: flex; align-items: center; gap: 60px; }
.rb-marquee-item em { font-style: italic; color: var(--champagne); }
.rb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); opacity: .6; }

/* ================= ENGAGEMENTS ================= */
.rb-commit { padding: var(--sp-7) 0; background: var(--ink); }
.rb-commit-head { max-width: 640px; }
.rb-eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 20px; }
.rb-commit-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.rb-commit-list { margin-top: 70px; display: flex; flex-direction: column; }
.rb-commit-row { display: grid; grid-template-columns: 80px 1fr 1.4fr; gap: 36px; align-items: center; padding: 38px 0; border-top: 1px solid var(--hairline); }
.rb-commit-list .rb-commit-row:last-child { border-bottom: 1px solid var(--hairline); }
.rb-commit-icon { width: 44px; height: 44px; }
.rb-commit-row h3 { font-size: 1.42rem; }
.rb-commit-row p { color: var(--champagne-dim); font-size: .95rem; max-width: 52ch; }
@media (max-width: 780px) { .rb-commit-row { grid-template-columns: 48px 1fr; } .rb-commit-row p { grid-column: 2; } .rb-commit-icon { width: 34px; height: 34px; } }

/* ================= PRODUIT VEDETTE ================= */
.rb-feature { position: relative; min-height: 82vh; display: flex; align-items: center; overflow: hidden;
	background:
		linear-gradient(100deg, rgba(11,10,8,.96) 0%, rgba(11,10,8,.6) 42%, rgba(11,10,8,.18) 100%),
		radial-gradient(circle at 84% 40%, rgba(217,196,138,.14), transparent 55%),
		linear-gradient(200deg, #1a1512, #241608 55%, #0e0a06);
}
.rb-feature canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rb-feature canvas[data-rb-smoke] { z-index: 1; }
.rb-feature canvas[data-rb-embers] { z-index: 2; }
.rb-feature-blade { position: absolute; top: 50%; right: -6%; transform: translateY(-50%); width: 56%; max-width: 640px; z-index: 1; opacity: .9; }
.rb-feature-inner { position: relative; z-index: 3; max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-4); width: 100%; }
.rb-feature-eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 24px; }
.rb-feature h2 { font-size: clamp(2.2rem, 5vw, 4.1rem); max-width: 15ch; line-height: 1.04; }
.rb-feature-inner > p { margin-top: 26px; max-width: 44ch; color: var(--champagne-dim); font-size: 1.03rem; }
.rb-feature-meta { margin-top: 22px; display: flex; align-items: center; gap: 18px; font-size: .82rem; color: var(--champagne-dim); }
.rb-feature-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--champagne); }
.rb-feature-price ins { text-decoration: none; }
.rb-feature-price del { opacity: .5; margin-right: 8px; }
.rb-feature-cta { margin-top: 38px; }
@media (max-width: 900px) { .rb-feature-blade { opacity: .35; width: 80%; } }

/* ================= CTA FINAL ================= */
.rb-final { position: relative; padding: 150px 0; background: var(--ink); overflow: hidden; }
.rb-final-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.rb-final h2 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); max-width: 16ch; line-height: 1.08; }