/*
 * Metronomi Design System – CSS
 * Basé sur le calque Design System Figma (couleurs, typo, boutons).
 * Actif quand body a la classe .header-style-metronomi ou .metronomi-design-system
 */

/* ==========================================================================
   Polices – Basis Grotesque Pro & Bauziet-wide (fonts-metronomi.zip)
   ========================================================================== */

@font-face {
	font-family: "Basis Grotesque Pro";
	src: url("fonts/BasisGrotesquePro-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Basis Grotesque Pro";
	src: url("fonts/BasisGrotesquePro-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Basis Grotesque Pro";
	src: url("fonts/BasisGrotesquePro-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bauziet-wide";
	src: url("fonts/BauzietWide-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Variables (couleurs, typo, espacements)
   ========================================================================== */

:root {
	/* Couleurs primaires (Figma) */
	--metronomi-yellow: #FBEB33;   /* SUPER GLOW YELLOW */
	--metronomi-mist: #EFEFEF;     /* MIST */
	--metronomi-dark-forest: #132125; /* DARK FOREST */
	--metronomi-ink-black: #0B1315;   /* SECONDAIRES/INK BLACK – navbar bar */

	/* Couleurs dérivées */
	--metronomi-yellow-hover: #f5e01f;
	--metronomi-yellow-active: #e8d61a;
	--metronomi-text: #132125;
	--metronomi-text-muted: rgba(19, 33, 37, 0.7);
	--metronomi-bg: #0B1315;   /* fond body par défaut (INK BLACK) */
	--metronomi-bg-alt: #EFEFEF;

	/* Typographie – familles */
	--metronomi-font-body: "Basis Grotesque Pro", system-ui, -apple-system, sans-serif;
	--metronomi-font-display: "Bauziet-wide", "Basis Grotesque Pro", system-ui, sans-serif;

	/* Body – desktop (Figma: Body - desktop) */
	--metronomi-font-size-body: 18px;
	--metronomi-line-height-body: 24px;
	--metronomi-letter-spacing-body: 2px;
	--metronomi-font-weight-body: 300;

	/* Body lead – desktop (Figma: Body lead - desktop) */
	--metronomi-font-size-lead: 24px;
	--metronomi-line-height-lead: 28px;
	--metronomi-font-weight-lead: 700;

	/* H2 – desktop (Figma: H2 - desktop) */
	--metronomi-font-size-h2: 50px;
	--metronomi-line-height-h2: 52px;
	--metronomi-font-weight-h2: 400;

	/* Échelle titre (dérivée) */
	--metronomi-font-size-h1: 64px;
	--metronomi-line-height-h1: 68px;
	--metronomi-font-size-h3: 32px;
	--metronomi-line-height-h3: 38px;
	--metronomi-font-size-h4: 24px;
	--metronomi-line-height-h4: 30px;
	--metronomi-font-size-small: 14px;
	--metronomi-line-height-small: 20px;
	--metronomi-font-size-caption: 12px;
	--metronomi-line-height-caption: 16px;

	/* Espacements */
	--metronomi-space-xs: 4px;
	--metronomi-space-sm: 8px;
	--metronomi-space-md: 16px;
	--metronomi-space-lg: 24px;
	--metronomi-space-xl: 32px;
	--metronomi-space-2xl: 48px;
	--metronomi-space-3xl: 64px;

	/* Boutons */
	--metronomi-btn-padding-y: 14px;
	--metronomi-btn-padding-x: 28px;
	--metronomi-btn-font-size: 14px;
	--metronomi-btn-letter-spacing: 0.1em;
	--metronomi-btn-border-radius: 0;
	--metronomi-btn-border-width: 2px;

	/* -------------------------------------------------------------------
	   Navbar Metronomi (Figma – panneau Inspect, pixel perfect)
	   ------------------------------------------------------------------- */
	--metronomi-navbar-bg: rgba(255, 255, 255, 0.2);  /* Figma SVG: rect fill-opacity="0.2" */
	--metronomi-navbar-bg-blur: 10px;                  /* Figma: backdrop-filter blur(10px) */
	--metronomi-navbar-text: #FFFFFF;                  /* Figma: texte blanc sur la barre */
	--metronomi-navbar-text-muted: rgba(255, 255, 255, 0.75);
	--metronomi-navbar-fill: rgba(255, 255, 255, 0.15); /* bande scroll sur logo (clair sur barre) */
	--metronomi-navbar-icon: #FBEB33;                  /* SUPER GLOW YELLOW – Figma */
	--metronomi-navbar-icon-stroke: #0B1315;
	--metronomi-navbar-line: rgba(11, 19, 21, 0.2);
	--metronomi-navbar-radius: 10px;                   /* Figma: border-radius 10px */
	--metronomi-navbar-padding-y: 20px;                /* Figma: padding 20px 26px */
	--metronomi-navbar-padding-x: 26px;
	--metronomi-navbar-min-height: 56px;               /* min-height barre */
	--metronomi-navbar-padding-left-cell: 0;
	--metronomi-navbar-logo-size: 18px;
	--metronomi-navbar-logo-line-height: 24px;
	--metronomi-navbar-logo-spacing: 0.02em;
	--metronomi-navbar-logo-weight: 600;
	--metronomi-navbar-nav-size: 12px;
	--metronomi-navbar-nav-spacing: 0.12em;
	--metronomi-navbar-nav-weight: 500;
	--metronomi-navbar-lines-gap: 6px;
	--metronomi-navbar-lines-margin-top: 8px;
	/* Desktop uniquement */
	--metronomi-navbar-desktop-margin-top: 26px;
	--metronomi-navbar-desktop-margin-left: 23px;
	--metronomi-navbar-desktop-width: 33.333vw;
	--metronomi-navbar-desktop-min-width: 280px;

	/* Menu au survol (mêmes dimensions que la navbar – Figma) */
	--metronomi-hover-menu-bg: rgba(255, 255, 255, 0.2);
	--metronomi-hover-menu-blur: 10px;
	--metronomi-hover-menu-padding: 26px;
	--metronomi-hover-menu-title-size: 32px;
	--metronomi-hover-menu-title-weight: 600;
	--metronomi-hover-menu-subtitle-size: 12px;
	--metronomi-hover-menu-subtitle-color: rgba(255, 255, 255, 0.6);
	--metronomi-hover-menu-cta-color: #FBEB33;
	--metronomi-hover-menu-play-size: 48px;

	/* -------------------------------------------------------------------
	   Overlay menu (Figma)
	   ------------------------------------------------------------------- */
	--metronomi-overlay-bg: rgba(11, 19, 21, 0.98);    /* INK BLACK + alpha */
	--metronomi-overlay-text: #FFFFFF;
	--metronomi-overlay-text-muted: rgba(255, 255, 255, 0.75);
	--metronomi-overlay-max-width: 480px;
	--metronomi-overlay-close-size: 48px;
	--metronomi-overlay-transition: 0.3s ease;
}

/* ==========================================================================
   Typographie – classes utilitaires
   ========================================================================== */

.header-style-metronomi .metronomi-body,
.metronomi-design-system .metronomi-body {
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-font-size-body);
	line-height: var(--metronomi-line-height-body);
	letter-spacing: var(--metronomi-letter-spacing-body);
	font-weight: var(--metronomi-font-weight-body);
	color: var(--metronomi-text);
}

.header-style-metronomi .metronomi-lead,
.metronomi-design-system .metronomi-lead {
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-font-size-lead);
	line-height: var(--metronomi-line-height-lead);
	font-weight: var(--metronomi-font-weight-lead);
	color: var(--metronomi-text);
}

.header-style-metronomi .metronomi-h1,
.metronomi-design-system .metronomi-h1 {
	font-family: var(--metronomi-font-display);
	font-size: var(--metronomi-font-size-h1);
	line-height: var(--metronomi-line-height-h1);
	font-weight: var(--metronomi-font-weight-h2);
	color: var(--metronomi-text);
	margin: 0 0 var(--metronomi-space-md);
}

.header-style-metronomi .metronomi-h2,
.metronomi-design-system .metronomi-h2 {
	font-family: var(--metronomi-font-display);
	font-size: var(--metronomi-font-size-h2);
	line-height: var(--metronomi-line-height-h2);
	font-weight: var(--metronomi-font-weight-h2);
	color: var(--metronomi-text);
	margin: 0 0 var(--metronomi-space-md);
}

.header-style-metronomi .metronomi-h3,
.metronomi-design-system .metronomi-h3 {
	font-family: var(--metronomi-font-display);
	font-size: var(--metronomi-font-size-h3);
	line-height: var(--metronomi-line-height-h3);
	font-weight: 400;
	color: var(--metronomi-text);
	margin: 0 0 var(--metronomi-space-sm);
}

.header-style-metronomi .metronomi-h4,
.metronomi-design-system .metronomi-h4 {
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-font-size-h4);
	line-height: var(--metronomi-line-height-h4);
	font-weight: 700;
	color: var(--metronomi-text);
	margin: 0 0 var(--metronomi-space-sm);
}

.header-style-metronomi .metronomi-small,
.metronomi-design-system .metronomi-small {
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-font-size-small);
	line-height: var(--metronomi-line-height-small);
	font-weight: 400;
	color: var(--metronomi-text-muted);
}

.header-style-metronomi .metronomi-caption,
.metronomi-design-system .metronomi-caption {
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-font-size-caption);
	line-height: var(--metronomi-line-height-caption);
	font-weight: 400;
	color: var(--metronomi-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ==========================================================================
   Boutons Metronomi
   ========================================================================== */

.header-style-metronomi .metronomi-btn,
.metronomi-design-system .metronomi-btn {
	display: inline-block;
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-btn-font-size);
	font-weight: 600;
	letter-spacing: var(--metronomi-btn-letter-spacing);
	text-transform: uppercase;
	text-decoration: none;
	padding: var(--metronomi-btn-padding-y) var(--metronomi-btn-padding-x);
	border-radius: var(--metronomi-btn-border-radius);
	border: var(--metronomi-btn-border-width) solid transparent;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Primaire : fond jaune, texte dark forest */
.header-style-metronomi .metronomi-btn--primary,
.metronomi-design-system .metronomi-btn--primary {
	background-color: var(--metronomi-yellow);
	color: var(--metronomi-dark-forest);
	border-color: var(--metronomi-yellow);
}

.header-style-metronomi .metronomi-btn--primary:hover,
.metronomi-design-system .metronomi-btn--primary:hover {
	background-color: var(--metronomi-yellow-hover);
	border-color: var(--metronomi-yellow-hover);
	color: var(--metronomi-dark-forest);
}

.header-style-metronomi .metronomi-btn--primary:active,
.metronomi-design-system .metronomi-btn--primary:active {
	background-color: var(--metronomi-yellow-active);
	border-color: var(--metronomi-yellow-active);
}

/* Secondaire : contour dark forest, fond transparent */
.header-style-metronomi .metronomi-btn--secondary,
.metronomi-design-system .metronomi-btn--secondary {
	background-color: transparent;
	color: var(--metronomi-dark-forest);
	border-color: var(--metronomi-dark-forest);
}

.header-style-metronomi .metronomi-btn--secondary:hover,
.metronomi-design-system .metronomi-btn--secondary:hover {
	background-color: var(--metronomi-dark-forest);
	color: var(--metronomi-mist);
}

/* Ghost / Mist : fond gris clair */
.header-style-metronomi .metronomi-btn--ghost,
.metronomi-design-system .metronomi-btn--ghost {
	background-color: var(--metronomi-mist);
	color: var(--metronomi-dark-forest);
	border-color: var(--metronomi-mist);
}

.header-style-metronomi .metronomi-btn--ghost:hover,
.metronomi-design-system .metronomi-btn--ghost:hover {
	background-color: #e0e0e0;
	border-color: #e0e0e0;
}

/* Bouton petit */
.header-style-metronomi .metronomi-btn--sm,
.metronomi-design-system .metronomi-btn--sm {
	padding: 10px 20px;
	font-size: 12px;
}

/* Bouton grand */
.header-style-metronomi .metronomi-btn--lg,
.metronomi-design-system .metronomi-btn--lg {
	padding: 18px 36px;
	font-size: 16px;
}

/* ==========================================================================
   Application globale (optionnel) : si vous voulez que tout le contenu
   principal utilise le design system, décommentez ou utilisez .metronomi-design-system sur body
   ========================================================================== */

.metronomi-design-system .entry-content,
.metronomi-design-system .w-blog-post-body {
	font-family: var(--metronomi-font-body);
	font-size: var(--metronomi-font-size-body);
	line-height: var(--metronomi-line-height-body);
	letter-spacing: var(--metronomi-letter-spacing-body);
	font-weight: var(--metronomi-font-weight-body);
	color: var(--metronomi-text);
}

.metronomi-design-system .entry-content h1,
.metronomi-design-system .w-blog-post-body h1 {
	font-family: var(--metronomi-font-display);
	font-size: var(--metronomi-font-size-h1);
	line-height: var(--metronomi-line-height-h1);
	font-weight: 400;
}

.metronomi-design-system .entry-content h2,
.metronomi-design-system .w-blog-post-body h2 {
	font-family: var(--metronomi-font-display);
	font-size: var(--metronomi-font-size-h2);
	line-height: var(--metronomi-line-height-h2);
	font-weight: 400;
}

.metronomi-design-system .entry-content h3,
.metronomi-design-system .w-blog-post-body h3 {
	font-family: var(--metronomi-font-display);
	font-size: var(--metronomi-font-size-h3);
	line-height: var(--metronomi-line-height-h3);
}

.metronomi-design-system .entry-content p {
	margin-bottom: var(--metronomi-space-md);
}

.metronomi-design-system a {
	color: var(--metronomi-dark-forest);
	text-decoration: underline;
}

.metronomi-design-system a:hover {
	color: var(--metronomi-yellow);
}

/* Sections sombres de la page Metronomi (fond #132125) – texte blanc, liens jaunes */
#hero, #approche, #partition, #mesures, #realisations, #tempo, #articles, #social, #footer-metronomi {
	color: #fff;
}
#hero h1, #hero h2, #hero .metronomi-lead, #hero .metronomi-body, #hero .metronomi-small,
#approche h2, #approche .metronomi-body,
#partition h2, #partition .metronomi-body, #partition .metronomi-h3,
#mesures h2, #mesures .metronomi-body,
#realisations .metronomi-caption, #realisations .metronomi-h2, #realisations .metronomi-h4,
#tempo .metronomi-h2,
#articles .metronomi-caption, #articles .metronomi-h2, #articles .metronomi-h4, #articles .metronomi-small,
#social .metronomi-caption, #social .metronomi-h2,
#footer-metronomi .metronomi-caption, #footer-metronomi .metronomi-body, #footer-metronomi .metronomi-h2 {
	color: inherit;
}
#hero a, #approche a, #partition a, #mesures a, #realisations a, #tempo a, #articles a, #social a, #footer-metronomi a {
	color: var(--metronomi-yellow);
}
#hero a:hover, #approche a:hover, #footer-metronomi a:hover {
	color: #fff;
}