/* =============================================================
   01 - BASE
   Design tokens conformes à la charte BeRanked v2.4+
   - Palette crème + indigo
   - Outfit (display + body) + JetBrains Mono (chiffres)
   - Italique → indigo automatique dans H1/H2
   ============================================================= */

:root {
	/* Fonds clairs */
	--bg:  #FAFAF9;
	--bg2: #F2F2EF;
	--bg3: #E8E8E4;

	/* Texte */
	--t:  #141413;
	--t2: #5C5C56;
	--tm: #9C9C95;

	/* Surfaces & bordures */
	--s:  rgba(0, 0, 0, 0.02);
	--b:  rgba(0, 0, 0, 0.07);
	--bh: rgba(0, 0, 0, 0.12);

	/* Accent principal : INDIGO */
	--a:  #4F46E5;
	--ad: rgba(79, 70, 229, 0.08);
	--ag: rgba(79, 70, 229, 0.04);

	/* Couleurs sémantiques */
	--r:  #DC2626;   /* rouge — erreur / négatif */
	--bl: #2563EB;   /* bleu — info */
	--v:  #7C3AED;   /* violet — IA / premium */
	--g:  #059669;   /* vert — succès */
	--o:  #D97706;   /* orange — Knowledge Base / "Bientôt" */

	/* Rayons */
	--R:  14px;      /* rayon standard cartes */
	--Rs: 8px;       /* petit rayon boutons / inputs */
	--Rf: 100px;     /* pill / fully rounded */

	/* Familles de polices */
	--fd: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fb: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fm: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

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

body {
	font-family: var(--fb);
	font-weight: 400;
	background: var(--bg);
	color: var(--t);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Grain noise subtil par-dessus tout (signature visuelle BeRanked) */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.015'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 99999;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

input,
textarea,
select {
	font-family: inherit;
}

/* Italique en indigo dans H1/H2 — règle automatique de la charte */
h1 em,
h2 em,
.ac {
	font-style: normal;
	color: var(--a);
	font-weight: 800;
}

/* Helper monospace */
.mn {
	font-family: var(--fm);
}

/* Helper screen-reader only */
.br-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus visible cohérent */
*:focus-visible {
	outline: 2px solid var(--a);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Sélection texte */
::selection {
	background: var(--a);
	color: #fff;
}

/* ====================== KEYFRAMES ====================== */

@keyframes fU {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pu {
	0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.3); }
	50%      { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
}

@keyframes fl {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@keyframes sc {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

/* Reveal au scroll */
.rv {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.rv.vi {
	opacity: 1;
	transform: translateY(0);
}

.rd1 { transition-delay: 0.1s; }
.rd2 { transition-delay: 0.2s; }
.rd3 { transition-delay: 0.3s; }

/* Respect des préférences utilisateurs */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.rv {
		opacity: 1;
		transform: none;
	}
}