/*
Theme Name: Cheese Nan
Theme URI: https://lecheesenaancnc.fr
Author: Le Cheese Nan & Co
Description: Thème WordPress sur-mesure pour Le Cheese Nan & Co — street food gourmande, naans et burgers naan.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cheese-nan
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
	/* Couleurs de marque */
	--cn-violet: #78178B;
	--cn-violet-dark: #5A1168;
	--cn-jaune: #F5B51B;
	--cn-noir: #121014;
	--cn-ivoire: #FFF8EE;
	--cn-sunset: #FF7A5C;
	--cn-sunset-dark: #E85A3C;

	/* Texte — variantes garantissant un contraste AA sur fond clair/sombre */
	--cn-text-on-ivoire: #201A22;
	--cn-text-on-noir: #FFF8EE;
	--cn-text-muted-on-ivoire: #5B5460;
	--cn-text-muted-on-noir: #C9BFC9;

	/* Rôles sémantiques */
	--cn-bg: var(--cn-ivoire);
	--cn-bg-inverse: var(--cn-noir);
	--cn-text: var(--cn-text-on-ivoire);
	--cn-text-inverse: var(--cn-text-on-noir);
	--cn-accent: var(--cn-violet);
	--cn-accent-2: var(--cn-jaune);

	/* Typographie */
	--cn-font-display: 'Titan One', 'Arial Rounded MT Bold', sans-serif;
	--cn-font-text: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--cn-fs-body: 1rem;
	--cn-fs-small: 0.875rem;
	--cn-fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
	--cn-fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--cn-fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
	--cn-fs-h4: 1.125rem;
	--cn-lh-body: 1.55;
	--cn-lh-heading: 1.08;

	/* Espacements (échelle 4px) */
	--cn-space-1: 0.25rem;
	--cn-space-2: 0.5rem;
	--cn-space-3: 0.75rem;
	--cn-space-4: 1rem;
	--cn-space-5: 1.5rem;
	--cn-space-6: 2rem;
	--cn-space-7: 3rem;
	--cn-space-8: 4rem;
	--cn-space-9: 6rem;

	/* Rayons / ombres */
	--cn-radius-s: 8px;
	--cn-radius-m: 16px;
	--cn-radius-l: 28px;
	--cn-radius-pill: 999px;
	--cn-shadow-s: 0 2px 8px rgba(18, 16, 20, 0.12);
	--cn-shadow-m: 0 8px 24px rgba(18, 16, 20, 0.18);
	--cn-shadow-l: 0 16px 48px rgba(18, 16, 20, 0.28);

	/* Mise en page */
	--cn-container: 1240px;
	--cn-header-height: 76px;
	--cn-gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cn-header-height) + 12px); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--cn-bg);
	color: var(--cn-text);
	font-family: var(--cn-font-text);
	font-size: var(--cn-fs-body);
	line-height: var(--cn-lh-body);
	-webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--cn-lh-heading); font-weight: 800; }

h1, .cn-display {
	font-family: var(--cn-font-display);
	font-weight: 400; /* Titan One n'a qu'une seule graisse, déjà très grasse */
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
h1 { font-size: var(--cn-fs-h1); }

/* Traitement "grand slogan" blanc contour noir + ombre, pour les titres posés
   sur fond sombre/coloré (hero, bandeaux) — pas sur fond clair où le texte
   plein suffit et reste plus lisible. */
.cn-display--outlined {
	color: #fff;
	-webkit-text-stroke: 2px var(--cn-noir);
	paint-order: stroke fill;
	text-shadow: 3px 3px 0 var(--cn-noir);
}
h2 { font-size: var(--cn-fs-h2); font-family: var(--cn-font-display); font-weight: 400; text-transform: uppercase; }
h3 { font-size: var(--cn-fs-h3); font-family: var(--cn-font-text); font-weight: 700; }
h4 { font-size: var(--cn-fs-h4); font-family: var(--cn-font-text); font-weight: 700; }
p { margin: 0 0 var(--cn-space-4); }

/* Focus clavier toujours visible */
:focus-visible {
	outline: 3px solid var(--cn-jaune);
	outline-offset: 2px;
}
a:focus-visible, button:focus-visible { border-radius: var(--cn-radius-s); }

/* Lien d'évitement */
.cn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--cn-jaune);
	color: var(--cn-noir);
	padding: var(--cn-space-3) var(--cn-space-5);
	border-radius: 0 0 var(--cn-radius-s) 0;
	font-weight: 700;
}
.cn-skip-link:focus {
	left: 0;
}

/* Images décoratives masquées aux lecteurs d'écran via alt="" déjà géré côté markup */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* =========================================================
   3. LAYOUT UTILITIES
   ========================================================= */
.cn-container {
	max-width: var(--cn-container);
	margin-inline: auto;
	padding-inline: var(--cn-gutter);
}

.cn-section { padding-block: var(--cn-space-9); }
.cn-section--tight { padding-block: var(--cn-space-7); }
.cn-section--dark { background: var(--cn-bg-inverse); color: var(--cn-text-inverse); }
.cn-section--violet { background: var(--cn-violet); color: var(--cn-text-inverse); }

@media (max-width: 600px) {
	.cn-section { padding-block: var(--cn-space-7); }
}