/*
Theme Name: Fatal and Friends
Theme URI: https://fatalandfriends.com
Description: Thème du site Fatal and Friends, La Christmas Pure Soirée. Charte chrome et or.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: fatal-and-friends
*/

:root {
	--ff-noir: #0D0E10;
	--ff-graphite: #2A2C30;
	--ff-chrome: #C9CDD1;
	--ff-or: #DEB658;
	--ff-clair: #F4F3F0;
	--ff-halo: radial-gradient(70% 80% at 62% 30%, #5b5e65 0%, #3b3d42 28%, #2A2C30 48%, #0D0E10 100%);
	--ff-gold-grad: linear-gradient(180deg, #fbe6a2 0%, #DEB658 42%, #b2852c 62%, #f0cd6e 100%);
	--ff-chrome-grad: linear-gradient(180deg, #ffffff 0%, #eef0f2 32%, #a3a8ae 52%, #e4e7ea 68%, #C9CDD1 100%);
}

/* Base */
.wp-site-blocks > * { margin-block-start: 0; }
h1, h2, h3, h4, h5, h6 { font-stretch: 125%; overflow-wrap: break-word; }
p { max-width: 68ch; }
.has-text-align-center p, p.has-text-align-center { margin-inline: auto; }
:focus-visible { outline: 2px solid var(--ff-or); outline-offset: 3px; }
::selection { background: var(--ff-or); color: var(--ff-noir); }
img { height: auto; }

/* Matières de la charte */
.is-chrome, .is-gold {
	-webkit-background-clip: text; background-clip: text; color: transparent !important;
	background-size: 100% 1lh; background-repeat: repeat-y;
}
.is-chrome { background-image: var(--ff-chrome-grad); }
.is-gold { background-image: var(--ff-gold-grad); }
.ff-studio { background: var(--ff-halo); }

/* Accroche : 800 espacé, en or */
.ff-accroche {
	color: var(--ff-or); font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.3em; font-size: 0.8125rem; line-height: 1.5;
}
/* Plaque : info encadrée or */
.ff-plaque {
	display: inline-block; border: 1.5px solid var(--ff-or); color: var(--ff-or);
	font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
	font-size: 0.875rem; padding: 0.3em 0.7em; line-height: 1.2;
}
.ff-lead { font-size: 1.1875rem; color: var(--ff-clair); }
.ff-label {
	color: var(--ff-or) !important; font-size: 0.875rem !important; font-weight: 800;
	letter-spacing: 0.18em; font-stretch: 100%; line-height: 1.3; margin-bottom: 0.5rem;
}

/* Boutons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--ff-clair); border: 2px solid var(--ff-chrome);
	padding: calc(0.95em - 2px) calc(1.6em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--ff-or); color: var(--ff-or); background: transparent; }

/* Sections */
.ff-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.ff-section--dark { background: #000; }
.ff-section h2 { margin-bottom: 0.4em; }
.ff-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ff-or); padding-bottom: 1rem; margin-bottom: 2.5rem !important; }
.ff-section-head h2 { margin: 0; }

/* En-tête */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
.ff-header { background: rgba(13, 14, 16, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: 0.7rem; }
.ff-header__bar { gap: 1.5rem; }
.ff-header .wp-block-site-logo img { display: block; }
.ff-nav { font-weight: 700; font-size: 0.9375rem; color: var(--ff-clair); }
.ff-nav a:hover { color: var(--ff-or); }
.ff-header__right { gap: 2rem; }
.ff-header__cta .wp-block-button__link { padding: 0.7em 1.2em; font-size: 0.8125rem; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 5rem 2rem 2rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; font-stretch: 125%; }

/* Hero */
.ff-hero { padding-top: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; }
.ff-hero__cols { align-items: flex-end !important; gap: 2rem; margin-bottom: 0 !important; }
.ff-hero__text { padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.ff-hero__text > * { margin-block: 0; }
.ff-hero__text > * + * { margin-top: 1.25rem; }
.ff-hero__logo { margin-top: 1.25rem !important; }
.ff-hero__logo img { width: min(100%, 560px); }
.ff-hero__edition { font-size: clamp(1.25rem, 2.6vw, 2rem) !important; letter-spacing: 0; }
.ff-hero__portrait { margin: 0; text-align: center; }
.ff-hero__portrait img { display: block; margin-inline: auto; max-height: min(calc(100vh - 260px), 720px); width: auto; max-width: 100%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)); }
.ff-hero .wp-block-buttons { gap: 0.75rem; margin-top: 2rem !important; }

/* Compte à rebours */
.ff-countdown-wrap { background: #000; border-top: 1px solid var(--ff-or); padding-block: 1rem; }
.ff-countdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.ff-countdown__time { display: flex; gap: 1.75rem; margin: 0; }
.ff-countdown__time span { display: flex; align-items: baseline; gap: 0.4rem; color: var(--ff-or); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.ff-countdown__time b { font-size: 1.875rem; font-weight: 900; font-stretch: 125%; letter-spacing: 0; background-image: var(--ff-chrome-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ff-countdown__msg { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; font-stretch: 125%; color: var(--ff-clair); }
.ff-countdown__info { margin: 0; color: var(--ff-clair); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

/* Artistes */
.ff-artists { gap: clamp(1rem, 2.5vw, 2rem) !important; }
.ff-artist__img { margin: 0 0 1rem; background: var(--ff-halo); aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.ff-artist__img img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.ff-artist h3 { margin: 0 0 0.35rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.ff-artist p { margin: 0; }
.ff-artist-row { align-items: center !important; gap: clamp(1.5rem, 5vw, 4rem) !important; padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid rgba(201, 205, 209, 0.15); }
.ff-artist-row:last-child { border-bottom: 0; }
.ff-artist-row h2 { font-size: clamp(2.2rem, 6vw, 4.5rem); margin: 0 0 0.5rem; }

/* Billetterie */
.ff-ticket { border: 1.5px solid var(--ff-or); padding: clamp(1.5rem, 4vw, 2.5rem); background: linear-gradient(180deg, rgba(222, 182, 88, 0.07), rgba(222, 182, 88, 0)); }
.ff-ticket > * { margin-block: 0; }
.ff-ticket > * + * { margin-top: 1rem; }
.ff-price { font-size: clamp(4rem, 11vw, 7rem) !important; font-weight: 900; font-stretch: 125%; line-height: 0.9 !important; }
.ff-ticket .wp-block-buttons { margin-top: 1.75rem !important; }
.ff-ticket .wp-block-button, .ff-ticket .wp-block-button__link { width: 100%; text-align: center; }

/* Infos pratiques */
.ff-infos { gap: 2.5rem 2rem !important; }
.ff-info { border-top: 1px solid rgba(222, 182, 88, 0.5); padding-top: 1.25rem; }
.ff-info h3 { margin-top: 0; }
.ff-info p { margin: 0.25rem 0 0; }
.ff-info strong { color: var(--ff-clair); }

/* FAQ */
.wp-block-details { border-bottom: 1px solid rgba(201, 205, 209, 0.2); padding-block: 0.25rem; margin: 0 !important; }
.wp-block-details summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; color: var(--ff-clair); font-weight: 800; font-size: 1.0625rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); color: var(--ff-or); font-size: 1.5rem; font-weight: 700; }
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details > :not(summary) { margin: 0 0 1.25rem; }

/* Emplacement à compléter (formulaires, widgets) */
.ff-slot { border: 1.5px dashed rgba(222, 182, 88, 0.6); padding: 2rem; color: var(--ff-or); }

/* Bandeau final */
.ff-final { text-align: center; }
.ff-final h2 { font-size: clamp(2.2rem, 6vw, 4.75rem); margin: 0 auto 2rem; max-width: 20ch; }
.ff-final .wp-block-buttons { justify-content: center; }

/* Tête de page (pages intérieures) */
.ff-page-head { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.ff-page-head h1 { margin: 0; }

/* Pied de page */
.ff-footer { background: #000; border-top: 1px solid var(--ff-or); padding-block: 3rem; font-size: 0.875rem; }
.ff-footer__cols { gap: 2rem !important; }
.ff-footer .ff-accroche { margin-top: 1rem; }
.ff-footer-nav { font-weight: 700; color: var(--ff-clair); gap: 0.5rem 1.5rem; }
.ff-footer__legal { color: rgba(201, 205, 209, 0.7); margin-top: 2rem; }

/* Bouton billetterie fixe (mobile) */
.ff-sticky-cta { display: none; }

@media (max-width: 781px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
	.ff-header__cta { display: none !important; }
	.ff-header .wp-block-site-logo img { width: 200px !important; }
	.ff-sticky-cta {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		background: var(--ff-or); color: var(--ff-noir) !important; text-align: center; text-decoration: none;
		font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9375rem;
		padding: 1.05rem 1rem calc(1.05rem + env(safe-area-inset-bottom));
	}
	body { padding-bottom: 3.6rem; }
	.ff-hero__cols > .wp-block-column:last-child { order: -1; }
	.ff-hero__portrait img { max-height: 56vh; -webkit-mask-image: linear-gradient(#000 62%, transparent 98%); mask-image: linear-gradient(#000 62%, transparent 98%); }
	.ff-hero__text { position: relative; z-index: 2; margin-top: -4.5rem; text-align: center; }
	.ff-hero__text .wp-block-buttons { justify-content: center; }
	.ff-hero__text .wp-block-image { display: flex; justify-content: center; }
	.ff-hero__text p { margin-inline: auto; }
	.ff-countdown { justify-content: center; text-align: center; }
	.ff-countdown__time { gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Première section après la tête de page : espace réduit */
.ff-page-head + .wp-block-post-content > .ff-section:first-child { padding-top: clamp(2rem, 4vw, 3rem); }