/* =====================================================================
 * ASTRA Agency - global.css
 * Système de design : tokens (couleurs, espacements, typo), reset,
 * typographie de base, conteneurs et sections.
 * Palette conservée ; refonte de la cohérence (échelle d'espacement 8pt,
 * hiérarchie typographique, contrastes).
 * ===================================================================== */

:root {
	/* --- Palette (conservée) --- */
	--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 (traits, bordures, fonds) */
	--color-accent-text:#8A6D2F; /* Or assombri pour le TEXTE sur fond clair (contraste AA ~4.6:1) */
	--color-accent-alt: #4A90D9; /* Bleu électrique doux - AR / techno */
	--color-text:       #1C1C1C; /* Texte principal */
	--color-text-light: #595959; /* Texte secondaire (assombri pour le contraste) */
	--color-text-mute:  #8A8A85; /* Texte tertiaire (labels discrets) */
	--color-border:     #E0DDD6; /* Bordures discrètes */
	--color-border-strong: #C9C5BC;

	/* Variantes sur fond sombre */
	--on-dark:          #F7F5F0;
	--on-dark-mute:     rgba(247, 245, 240, 0.66);
	--on-dark-border:   rgba(247, 245, 240, 0.16);

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

	/* --- Échelle d'espacement (base 8) --- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;

	/* --- Largeurs & divers --- */
	--container:      1200px;
	--container-wide: 1400px;
	--container-text: 70ch;
	--space-section:  clamp(3.5rem, 8vw, 7.5rem);
	--radius:    6px;
	--radius-lg: 12px;
	--transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	--ease:       cubic-bezier(0.16, 1, 0.3, 1);
	--shadow-sm: 0 2px 8px rgba(13, 13, 13, 0.04);
	--shadow-md: 0 14px 40px rgba(13, 13, 13, 0.10);
}

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

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

body.astra-agency {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1.0625rem;          /* 17px */
	line-height: 1.65;
	font-weight: 400;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* `clip` (et non `hidden`) : empêche le débordement horizontal SANS créer de
	   conteneur de défilement, ce qui casserait position:sticky (hero-zoom). */
	overflow-x: clip;
}

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

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

ul, ol { list-style: none; padding: 0; }

button { font-family: inherit; }

/* =====================================================================
 * Typographie - hiérarchie nette (Cormorant pour les titres)
 * ===================================================================== */
h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--color-text);
	text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 5.5vw, 4.75rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.12; }
h4 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.2; }

p { line-height: 1.7; }
strong { font-weight: 700; }

/* Paragraphe d'introduction */
.lead {
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	line-height: 1.55;
	color: var(--color-text-light);
	max-width: 56ch;
	font-weight: 400;
}
.section--dark .lead,
.section--midnight .lead { color: var(--on-dark-mute); }

/* Sur-titre / label de section */
.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent-text);
	margin-bottom: var(--s-4);
}
/* Sur fond sombre, l'or clair passe (contraste suffisant) */
.section--dark .eyebrow,
.section--midnight .eyebrow,
.site-footer .eyebrow { color: var(--color-accent); }

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

.section { padding-block: var(--space-section); position: relative; }
.section + .section { padding-top: 0; } /* évite les doubles espacements quand deux .section claires se suivent */

.section--dark { background-color: var(--color-dark); color: var(--on-dark); padding-block: var(--space-section); }
.section--midnight { background-color: var(--color-dark-mid); color: var(--on-dark); padding-block: var(--space-section); }
.section--dark + .section,
.section--midnight + .section { padding-top: var(--space-section); }

.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--midnight h1, .section--midnight h2, .section--midnight h3, .section--midnight h4 { color: var(--on-dark); }

/* En-tête de section réutilisable */
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { margin-bottom: var(--s-4); }

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

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; }

/* Utilitaires */
.text-center { text-align: center; }
.mt-section { margin-top: clamp(2rem, 4vw, 3rem); }

/* =====================================================================
 * Responsive - base
 * ===================================================================== */
@media (max-width: 768px) {
	body.astra-agency { font-size: 1rem; }
	.section, .section--dark, .section--midnight { padding-block: clamp(3rem, 11vw, 4.5rem); }
}