/* =====================================================================
 * ASTRA Agency — global.css
 * Reset léger, variables CSS de la charte, typographie de base, layout.
 * ===================================================================== */

/* --- Variables de la charte graphique ASTRA --- */
:root {
	--color-bg:         #F7F5F0; /* Blanc cassé chaud, fond principal */
	--color-surface:    #FFFFFF; /* Cartes, blocs */
	--color-dark:       #0D0D0D; /* Noir profond, sections contrastées */
	--color-dark-mid:   #1A1A2E; /* Bleu nuit, accents sombres */
	--color-accent:     #C8A96E; /* Or mat / ambre — touche premium */
	--color-accent-alt: #4A90D9; /* Bleu électrique doux — technologie / AR */
	--color-text:       #1C1C1C; /* Texte principal */
	--color-text-light: #6B6B6B; /* Texte secondaire */
	--color-border:     #E0DDD6; /* Bordures discrètes */

	/* Typographies */
	--font-display: "Cormorant Garamond", Georgia, serif; /* Titres */
	--font-body:    "DM Sans", system-ui, sans-serif;      /* Corps / interface */
	--font-mono:    "Space Mono", ui-monospace, monospace; /* Labels techniques */
	--font-label:   "Bebas Neue", Impact, sans-serif;      /* Chiffres / tags */

	/* Rythme & largeurs */
	--container:    1180px;
	--container-wide: 1440px;
	--space-section: clamp(4rem, 9vw, 8rem);
	--radius:       4px;
	--transition:   0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset léger --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.astra-agency {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }

/* --- Titres : Cormorant Garamond, théâtral --- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	color: var(--color-text);
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

/* --- Conteneurs --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.container--wide { max-width: var(--container-wide); }

/* --- Sections (alternance clair / sombre) --- */
.section { padding-block: var(--space-section); position: relative; }
.section--dark {
	background-color: var(--color-dark);
	color: var(--color-bg);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-bg); }
.section--dark .eyebrow { color: var(--color-accent); }
.section--midnight { background-color: var(--color-dark-mid); color: var(--color-bg); }
.section--midnight h2, .section--midnight h3 { color: var(--color-bg); }

/* --- Labels techniques (Space Mono / Bebas) --- */
.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-light);
	display: inline-block;
	margin-bottom: 1rem;
}

.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--color-text-light); max-width: 60ch; }
.section--dark .lead { color: rgba(247, 245, 240, 0.75); }

/* --- Accessibilité : lien d'évitement --- */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--color-dark); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --- Visuellement masqué mais lisible par lecteur d'écran --- */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* =====================================================================
 * Responsive — breakpoints 375 / 768 / 1280
 * ===================================================================== */
@media (max-width: 768px) {
	body.astra-agency { font-size: 17px; }
	.section { padding-block: clamp(3rem, 12vw, 5rem); }
}
@media (max-width: 375px) {
	body.astra-agency { font-size: 16px; }
}