/**
 * Matière à Vivre — Design tokens
 *
 * Source : source-design/Guide de style.dc.html
 * Toutes les valeurs sont normatives : ne pas les modifier sans validation
 * du design.
 */

:root {

	/* ------------------------------------------------------------------
	 * Couleurs
	 * ------------------------------------------------------------------ */
	--mav-cream: #F5F1EA;          /* Fond principal */
	--mav-sand: #EDE6DA;           /* Fond alternatif — section Matières */
	--mav-espresso: #2E1C13;       /* Fond sombre — Atelier, palette, CTA */
	--mav-ink: #1E110B;            /* Fond vidéo, base des dégradés */
	--mav-brown: #3B241A;          /* Texte principal */
	--mav-brown-hover: #55382A;    /* Hover du bouton primaire */
	--mav-text-light: #EFE7DB;     /* Texte sur fond sombre */
	--mav-text-muted: #6B564A;     /* Texte secondaire */
	--mav-accent: #8A6F5C;         /* Sur-titres, liens survolés */
	--mav-accent-light: #A08B78;   /* Numéros, légendes, footer */
	--mav-accent-dark-1: #B99F87;  /* Accent sur fond sombre */
	--mav-accent-dark-2: #CDBBA9;  /* Texte accent sur fond sombre */
	--mav-rule: #C8BBAA;           /* Traits fins sur fond clair */
	--mav-border: #DDD2C2;         /* Bordures et séparateurs */
	--mav-image-fallback: #E4DBCD; /* Fond de repli des cadres d'image */

	/* Couleurs à opacité */
	--mav-header-bg: rgba(245, 241, 234, 0.92);
	--mav-header-shadow: 0 1px 0 rgba(59, 36, 26, 0.08);
	--mav-on-dark-95: rgba(245, 241, 234, 0.95);
	--mav-on-dark-92: rgba(245, 241, 234, 0.92);
	--mav-on-dark-90: rgba(245, 241, 234, 0.9);
	--mav-on-dark-85: rgba(245, 241, 234, 0.85);
	--mav-on-dark-75: rgba(245, 241, 234, 0.75);
	--mav-on-dark-60: rgba(245, 241, 234, 0.6);
	--mav-outline-dark: rgba(239, 231, 219, 0.55);
	--mav-lightbox-bg: rgba(20, 12, 8, 0.94);

	/* Dégradés */
	--mav-overlay-hero: linear-gradient(180deg,
		rgba(30, 17, 11, 0.38) 0%,
		rgba(30, 17, 11, 0.10) 35%,
		rgba(30, 17, 11, 0.16) 78%,
		rgba(30, 17, 11, 0) 94%);

	--mav-overlay-card: linear-gradient(180deg,
		rgba(30, 17, 11, 0.14) 0%,
		rgba(30, 17, 11, 0) 30%,
		rgba(30, 17, 11, 0) 55%,
		rgba(30, 17, 11, 0.52) 88%,
		rgba(30, 17, 11, 0.10) 100%);

	--mav-overlay-project: linear-gradient(180deg,
		rgba(30, 17, 11, 0.42) 0%,
		rgba(30, 17, 11, 0.08) 40%,
		rgba(30, 17, 11, 0.20) 82%,
		rgba(30, 17, 11, 0) 96%);

	/* ------------------------------------------------------------------
	 * Typographie
	 * ------------------------------------------------------------------ */
	--mav-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--mav-font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--mav-weight-light: 300;
	--mav-weight-regular: 400;
	--mav-weight-medium: 500;

	/* Échelle des titres (T1 → T10 de l'audit) */
	--mav-h1-manifeste: clamp(38px, 5.2vw, 72px);
	--mav-h1-page: clamp(38px, 5vw, 68px);
	--mav-h1-archive: clamp(40px, 5vw, 76px);
	--mav-h1-project: clamp(44px, 6.5vw, 96px);
	--mav-h2-section: clamp(32px, 3.6vw, 52px);
	--mav-h2-intention: clamp(32px, 4vw, 56px);
	--mav-h2-cta: clamp(34px, 4.4vw, 64px);
	--mav-h2-banner: clamp(32px, 4.2vw, 58px);
	--mav-h3-stack: clamp(38px, 4.6vw, 72px);
	--mav-h3-card: clamp(26px, 2.4vw, 36px);
	--mav-h3-sequence: clamp(28px, 2.8vw, 42px);

	/* Corps */
	--mav-body-size: 16px;
	--mav-body-line: 2;
	--mav-body-small: 15px;
	--mav-body-large: 17px;

	/* Interlignes */
	--mav-lh-tight: 1.05;
	--mav-lh-title: 1.15;
	--mav-lh-title-loose: 1.22;
	--mav-lh-body: 1.85;

	/* Interlettrages */
	--mav-track-nav: 0.22em;
	--mav-track-button: 0.26em;
	--mav-track-label: 0.2em;
	--mav-track-eyebrow: 0.34em;
	--mav-track-meta: 0.3em;
	--mav-track-caption: 0.26em;

	/* ------------------------------------------------------------------
	 * Espacements
	 * ------------------------------------------------------------------ */
	--mav-space-4: 4px;
	--mav-space-8: 8px;
	--mav-space-12: 12px;
	--mav-space-14: 14px;
	--mav-space-20: 20px;
	--mav-space-24: 24px;
	--mav-space-28: 28px;
	--mav-space-32: 32px;
	--mav-space-40: 40px;
	--mav-space-48: 48px;
	--mav-space-56: 56px;
	--mav-space-72: 72px;
	--mav-space-80: 80px;
	--mav-space-96: 96px;

	/* Rythme vertical des sections */
	--mav-section-y: 160px;
	--mav-section-y-lg: 180px;
	--mav-section-y-sm: 140px;

	/* Gouttières horizontales */
	--mav-gutter: 48px;
	--mav-gutter-narrow: 24px;

	/* Conteneurs */
	--mav-container-wide: 1440px;
	--mav-container: 1240px;
	--mav-container-form: 1200px;
	--mav-measure-wide: 880px;
	--mav-measure: 760px;
	--mav-measure-narrow: 560px;
	--mav-measure-short: 420px;

	/* ------------------------------------------------------------------
	 * Mouvement
	 * ------------------------------------------------------------------ */
	--mav-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
	--mav-duration-fast: 0.35s;
	--mav-duration: 0.4s;
	--mav-duration-slow: 0.6s;
	--mav-duration-reveal: 1.1s;
	--mav-duration-enter: 1.6s;

	/* Header */
	--mav-header-height: 86px;
	--mav-header-py: 26px;

	/* Z-index */
	--mav-z-header: 50;
	--mav-z-offcanvas: 80;
	--mav-z-lightbox: 100;
}

/**
 * Ni arrondis ni ombres portées : l'esthétique est nette, plate, éditoriale.
 * Cette règle est structurante — elle est rappelée ici volontairement.
 */