/* ============================================================
   VARIABLES GLOBALES  –  Western City
   ============================================================
   Base : 16px (1rem = 16px)
   ============================================================ */

/* Police des titres – "Rye" (Google Fonts), hébergée en local
   pour éviter tout appel externe à Google au chargement */
@font-face {
	font-family: 'Rye';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/rye/rye-v17-latin-400.woff2') format('woff2');
}

:root {

	/* ──────────────────────────────────────────────────────
	   COULEURS – Western (palette principale)
	   ────────────────────────────────────────────────────── */

	/* Brun – couleur signature du site */
	--c-brown-900: #2b1a0e;
	--c-brown-800: #3d2009;
	--c-brown-700: #592a16;
	--c-brown-600: #5a2f15;
	--c-brown-500: #6b3a1f;
	--c-brown-400: #6b4226;
	--c-brown-300: #997e68;
	--c-brown-200: #a07850;
	--c-brown-100: #b89f82;
	--c-brown-50 : #c9b99a;

	/* Vert – CTA et accents */
	--c-green-900: #4a6a10;
	--c-green-700: #6a7634;
	--c-green-500: #859342;
	--c-green-300: #c1cf82;

	/* Fond de page global (continuité avec le footer) */
	--c-page-bg: #F3EBDD;

	/* Crème / parchemin – fonds */
	--c-cream-900: #d4bc91;
	--c-cream-800: #dac6a7;
	--c-cream-700: #e3cfa3;
	--c-cream-600: #fee5c7;
	--c-cream-500: #f4ede2;
	--c-cream-400: #f5edd6;
	--c-cream-300: #faf3e6;
	--c-cream-200: #fdf6ed;
	--c-cream-100: #ede6db;

	/* Or – accent western optionnel */
	--c-gold: #c4a44a;

	/* Neutres */
	--c-white: #ffffff;
	--c-black: #000000;
	--c-grey-500: #999999;
	--c-grey-700: #555555;

	/* État */
	--c-error: #c0392b;

	/* ──────────────────────────────────────────────────────
	   COULEURS – Variante "Marine" (salles spécifiques)
	   ────────────────────────────────────────────────────── */

	--c-marine-900: #0d2137;
	--c-marine-800: #1a3a5c;
	--c-marine-700: #1f6090;
	--c-marine-600: #2563a0;
	--c-marine-500: #2e7db5;
	--c-marine-400: #4a7fa0;
	--c-marine-300: #5a8ab0;
	--c-marine-200: #7aa5c8;
	--c-marine-100: #7ab5d8;
	--c-marine-50 : #b8d8ed;
	--c-marine-25 : #c0d8ed;
	--c-marine-15 : #cce0f0;
	--c-marine-10 : #d0e8f5;
	--c-marine-5  : #e3f0fa;
	--c-marine-2  : #f0f6fb;
	--c-marine-1  : #f3f8fd;

	/* ──────────────────────────────────────────────────────
	   ALIASES SÉMANTIQUES (à utiliser de préférence)
	   ────────────────────────────────────────────────────── */

	--c-primary       : var(--c-green-500);
	--c-primary-hover : var(--c-green-700);
	--c-primary-light : var(--c-green-300);

	--c-text          : var(--c-brown-800);
	--c-text-soft     : var(--c-brown-600);
	--c-text-muted    : var(--c-brown-300);
	--c-text-inverse  : var(--c-white);

	--c-bg            : var(--c-cream-200);
	--c-bg-soft       : var(--c-cream-400);
	--c-bg-section    : var(--c-cream-800);
	--c-bg-card       : var(--c-cream-800);
	--c-bg-card-alt   : var(--c-brown-300);

	--c-border        : var(--c-brown-400);
	--c-border-soft   : var(--c-cream-100);

	/* ──────────────────────────────────────────────────────
	   TYPOGRAPHIE – familles
	   ────────────────────────────────────────────────────── */

	--ff-body    : 'Rye', Georgia, 'Times New Roman', serif;
	--ff-heading : 'Rye', Georgia, 'Times New Roman', serif;
	--ff-mono    : ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Le Kit global Elementor (post-{kit_id}.css) définit ses propres
	   variables de typo ("Candal" par défaut) consommées par tous les
	   widgets Titre/Heading, sur toutes les pages, présentes et futures.
	   On les neutralise ici pour qu'ils héritent de notre police plutôt
	   que de rajouter des !important au cas par cas par page/widget.
	   font-weight à 400 : Rye n'existe qu'en regular, un poids 700 ferait
	   du faux-gras (distorsion) plutôt qu'un vrai bold. */
	--e-global-typography-primary-font-family   : var(--ff-heading) !important;
	--e-global-typography-primary-font-weight   : var(--fw-regular) !important;
	--e-global-typography-secondary-font-family : var(--ff-heading) !important;
	--e-global-typography-secondary-font-weight : var(--fw-regular) !important;

	/* ──────────────────────────────────────────────────────
	   TYPOGRAPHIE – tailles fluides (clamp)
	   Format clamp(min, preferred, max) — fluid sizing
	   ────────────────────────────────────────────────────── */

	--fs-h1    : clamp(2rem,    1.4rem + 2.4vw, 3.5rem);    /* 32px → 56px */
	--fs-h2    : clamp(1.625rem, 1.2rem + 1.7vw, 2.625rem); /* 26px → 42px */
	--fs-h3    : clamp(1.375rem, 1.05rem + 1.3vw, 2rem);    /* 22px → 32px */
	--fs-h4    : clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);  /* 18px → 24px */
	--fs-h5    : clamp(1rem,     0.9rem + 0.4vw, 1.25rem);  /* 16px → 20px */

	--fs-body  : clamp(0.9rem,   0.85rem + 0.2vw, 1rem);    /* 14.4px → 16px */
	--fs-small : clamp(0.75rem,  0.7rem + 0.15vw, 0.875rem);/* 12px → 14px */
	--fs-tiny  : 0.6875rem;                                  /* 11px */

	--fs-button: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem); /* 13px → 15px */

	/* Poids */
	--fw-regular  : 400;
	--fw-medium   : 500;
	--fw-semibold : 600;
	--fw-bold     : 700;
	--fw-black    : 800;

	/* Interlignages */
	--lh-tight    : 1.15;
	--lh-snug     : 1.35;
	--lh-normal   : 1.55;
	--lh-loose    : 1.75;

	/* Letter-spacing */
	--ls-tight    : -0.01em;
	--ls-normal   : 0;
	--ls-wide     : 0.05em;
	--ls-wider    : 0.1em;
	--ls-widest   : 0.18em;

	/* ──────────────────────────────────────────────────────
	   SPACING – rem (base 16px)
	   ────────────────────────────────────────────────────── */

	--s-xs  : 0.25rem;   /*  4px */
	--s-sm  : 0.5rem;    /*  8px */
	--s-md  : 0.75rem;   /* 12px */
	--s-ld  : 1rem;      /* 16px – base par défaut */
	--s-xl  : 1.5rem;    /* 24px */
	--s-2xl : 2rem;      /* 32px */
	--s-3xl : 2.5rem;    /* 40px */
	--s-4xl : 3rem;      /* 48px */
	--s-5xl : 4rem;      /* 64px */
	--s-6xl : 5rem;      /* 80px */
	--s-7xl : 6rem;      /* 96px */

	/* ──────────────────────────────────────────────────────
	   BORDER-RADIUS
	   ────────────────────────────────────────────────────── */

	--br-xs    : 2px;
	--br-sm    : 4px;
	--br-md    : 6px;
	--br-lg    : 8px;
	--br-xl    : 12px;
	--br-2xl   : 16px;
	--br-3xl   : 24px;
	--br-pill  : 9999px;
	--br-circle: 50%;

	/* ──────────────────────────────────────────────────────
	   OMBRES
	   ────────────────────────────────────────────────────── */

	--sh-sm : 0 2px 6px rgba(0, 0, 0, 0.08);
	--sh-md : 0 4px 12px rgba(0, 0, 0, 0.12);
	--sh-lg : 0 8px 24px rgba(0, 0, 0, 0.18);
	--sh-xl : 0 14px 36px rgba(0, 0, 0, 0.24);

	/* ──────────────────────────────────────────────────────
	   TRANSITIONS
	   ────────────────────────────────────────────────────── */

	--tr-fast   : 0.15s ease;
	--tr-base   : 0.25s ease;
	--tr-slow   : 0.4s ease;

	/* ──────────────────────────────────────────────────────
	   LAYOUT
	   ────────────────────────────────────────────────────── */

	--header-h     : 6.875rem;  /* 110px */
	--container-w  : 75rem;     /* 1200px */
	--z-header     : 1000;
	--z-drawer     : 1100;
	--z-floating   : 9999;

}