/*
Theme Name: MLV Theme
Theme URI: https://myluxuryvoyage.com
Author: My Luxury Voyage
Description: Thème classique PHP pour My Luxury Voyage — destinations d'abord, Polylang FR/EN/AR, Meta Box, Rank Math.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: mlv-theme
*/

/* ------------------------------------------------------------------
 * Variables (palette + typo — extraites de la maquette)
 * ------------------------------------------------------------------ */
 :root {
	--mlv-nuit:      #1B233E;
	--mlv-nuit-2:    #2A3352;
	--mlv-nuit-3:    #2E3858;
	--mlv-or:        #A98D57;
	--mlv-or-2:      #8A6F3E;
	--mlv-or-clair:  #D9C39A;
	--mlv-sable:     #F7F4EE;
	--mlv-sable-2:   #F1ECE3;
	--mlv-creme:     #ECE7DD;
	--mlv-creme-2:   #DCCFB6;
	--mlv-creme-3:   #DDD5C6;
	--mlv-texte:     #3D4356;
	--mlv-texte-2:   #5E6372;
	--mlv-blanc:     #FFFFFF;

	--mlv-font-serif:    'Cormorant Garamond', Georgia, serif;
	--mlv-font-sans:     'Jost', system-ui, -apple-system, sans-serif;
	--mlv-font-label:    'Josefin Sans', 'Jost', sans-serif;
	--mlv-font-ar-serif: 'Amiri', 'Cormorant Garamond', serif;
	--mlv-font-ar-sans:  'Tajawal', 'Jost', sans-serif;

	--mlv-max: 1392px;
	--mlv-radius-sm: 12px;
	--mlv-radius-md: 18px;
	--mlv-radius-lg: 22px;
	--mlv-radius-xl: 24px;
	--mlv-radius-pill: 999px;

	--mlv-shadow-sm: 0 8px 24px rgba(27, 35, 62, 0.06);
	--mlv-shadow-md: 0 16px 48px rgba(27, 35, 62, 0.08);
	--mlv-shadow-lg: 0 18px 50px rgba(18, 24, 43, 0.28);

	--mlv-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------
 * Polices locales (déposer les .woff2 dans assets/css/fonts/)
 * Si un fichier manque, le fallback système prend le relais.
 * ------------------------------------------------------------------ */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('assets/css/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('assets/css/fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
	src: url('assets/css/fonts/cormorant-garamond-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('assets/css/fonts/josefin-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('assets/css/fonts/josefin-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('assets/css/fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('assets/css/fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('assets/css/fonts/amiri-400.woff2') format('woff2'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('assets/css/fonts/tajawal-400.woff2') format('woff2'); }

/* ------------------------------------------------------------------
 * Base (le reste du CSS de la maquette va dans assets/css/main.css)
 * ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--mlv-blanc);
	font-family: var(--mlv-font-sans);
	color: var(--mlv-nuit);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
:lang(ar) body,
body[dir="rtl"] {
	font-family: var(--mlv-font-ar-sans);
}
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4,
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3, body[dir="rtl"] h4 {
	font-family: var(--mlv-font-ar-serif);
}
a { color: var(--mlv-nuit); text-decoration: none; }
a:hover { color: var(--mlv-or-2); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--mlv-or); outline-offset: 3px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}