/* =========================================================
Fabrice Willot — Brands / Platforms / AI / EU Tools
Usage examples:
- text:  class="brand-linkedin"
- bg:    class="badge bg-brand bg-brand-linkedin"
- icon:  <i class="bi bi-linkedin brand-linkedin" aria-hidden="true"></i>
Notes:
- "brand-*" = couleurs de plateformes (externes)
- "eu-*"    = acteurs / outils européens (peut être marque OU catégorie interne)
- "ai-*"    = écosystèmes IA / LLM
========================================================= */

/* =========================================================
0) TOKENS (variables)
========================================================= */
:root {
	/* ---------- Social networks ---------- */
	--brand-linkedin: #0A66C2;
	--brand-x: #000000;
	--brand-mastodon: #6364FF;
	--brand-bluesky: #1185FE;
	--brand-youtube: #FF0000;
	--brand-github: #181717;
	--brand-gitlab: #FC6D26;
	--brand-medium: #000000;
	--brand-substack: #FF6719;
	--brand-rss: #FFA500;
	--brand-email: #7F8C8D; /* neutre */
	--brand-telegram: #26A5E4;

	/* ---------- EU / European tech tools (approximate / “category colors”) ---------- */
	--eu-eu: #003399;        /* bleu UE */
	--eu-edps: #0055A4;
	--eu-enisa: #005A9C;
	--eu-eurostack: #1B365D; /* réutilise policy */
	--eu-gaiax: #2E5DA0;     /* action */
	--eu-ovhcloud: #123F6D;
	--eu-scaleway: #6B5BFF;
	--eu-hetzner: #D50C2D;
	--eu-nextcloud: #0082C9;
	--eu-matrix: #0DBD8B;
	--eu-element: #0DBD8B;
	--eu-proton: #6D4AFF;

	/* ---------- AI / LLM ecosystems ---------- */
	--ai-openai: #10A37F;
	--ai-anthropic: #111111;
	--ai-mistral: #FF4A1A;
	--ai-huggingface: #FFD21E;
	--ai-google: #4285F4;
	--ai-microsoft: #00A4EF;
	--ai-meta: #0668E1;
	--ai-aws: #FF9900;
	--ai-nvidia: #76B900;
}

/* =========================================================
1) TEXT HELPERS (texte ou icônes)
========================================================= */
.brand-linkedin {
	color: var(--brand-linkedin) !important;
}
.brand-x        {
	color: var(--brand-x) !important;
}
.brand-mastodon {
	color: var(--brand-mastodon) !important;
}
.brand-bluesky  {
	color: var(--brand-bluesky) !important;
}
.brand-youtube  {
	color: var(--brand-youtube) !important;
}
.brand-github   {
	color: var(--brand-github) !important;
}
.brand-gitlab   {
	color: var(--brand-gitlab) !important;
}
.brand-medium   {
	color: var(--brand-medium) !important;
}
.brand-substack {
	color: var(--brand-substack) !important;
}
.brand-rss      {
	color: var(--brand-rss) !important;
}
.brand-email    {
	color: var(--brand-email) !important;
}
.brand-telegram {
	color: var(--brand-telegram) !important;
}

.eu-eu        {
	color: var(--eu-eu) !important;
}
.eu-edps      {
	color: var(--eu-edps) !important;
}
.eu-enisa     {
	color: var(--eu-enisa) !important;
}
.eu-eurostack {
	color: var(--eu-eurostack) !important;
}
.eu-gaiax     {
	color: var(--eu-gaiax) !important;
}
.eu-ovhcloud  {
	color: var(--eu-ovhcloud) !important;
}
.eu-scaleway  {
	color: var(--eu-scaleway) !important;
}
.eu-hetzner   {
	color: var(--eu-hetzner) !important;
}
.eu-nextcloud {
	color: var(--eu-nextcloud) !important;
}
.eu-matrix,
.eu-element   {
	color: var(--eu-matrix) !important;
}
.eu-proton    {
	color: var(--eu-proton) !important;
}

.ai-openai      {
	color: var(--ai-openai) !important;
}
.ai-anthropic   {
	color: var(--ai-anthropic) !important;
}
.ai-mistral     {
	color: var(--ai-mistral) !important;
}
.ai-huggingface {
	color: var(--ai-huggingface) !important;
}
.ai-google      {
	color: var(--ai-google) !important;
}
.ai-microsoft   {
	color: var(--ai-microsoft) !important;
}
.ai-meta        {
	color: var(--ai-meta) !important;
}
.ai-aws         {
	color: var(--ai-aws) !important;
}
.ai-nvidia      {
	color: var(--ai-nvidia) !important;
}

/* =========================================================
2) BACKGROUND HELPERS (badges, chips, tags)
Convention:
- always add .bg-brand + .bg-xxx-yyy
Example:
<span class="badge bg-brand bg-brand-linkedin">LinkedIn</span>
========================================================= */
.bg-brand {
	background-color: var(--brand-bg, transparent);
	color: var(--brand-fg, #ffffff);
	border: 1px solid transparent;
}

/* If you need an outline chip (optional) */
.bg-brand-outline {
	background-color: transparent;
	color: var(--brand-bg, currentColor);
	border: 1px solid var(--brand-bg, currentColor);
}

/* Social bg mappings */
.bg-brand-linkedin {
	--brand-bg: var(--brand-linkedin);
}
.bg-brand-x        {
	--brand-bg: var(--brand-x);
}
.bg-brand-mastodon {
	--brand-bg: var(--brand-mastodon);
}
.bg-brand-bluesky  {
	--brand-bg: var(--brand-bluesky);
}
.bg-brand-youtube  {
	--brand-bg: var(--brand-youtube);
}
.bg-brand-github   {
	--brand-bg: var(--brand-github);
}
.bg-brand-gitlab   {
	--brand-bg: var(--brand-gitlab);
}
.bg-brand-medium   {
	--brand-bg: var(--brand-medium);
}
.bg-brand-substack {
	--brand-bg: var(--brand-substack);
}
.bg-brand-rss      {
	--brand-bg: var(--brand-rss);
}
.bg-brand-email    {
	--brand-bg: var(--brand-email);
}
.bg-brand-telegram {
	--brand-bg: var(--brand-telegram);
}

/* EU bg mappings */
.bg-eu-eu        {
	--brand-bg: var(--eu-eu);
}
.bg-eu-edps      {
	--brand-bg: var(--eu-edps);
}
.bg-eu-enisa     {
	--brand-bg: var(--eu-enisa);
}
.bg-eu-eurostack {
	--brand-bg: var(--eu-eurostack);
}
.bg-eu-gaiax     {
	--brand-bg: var(--eu-gaiax);
}
.bg-eu-ovhcloud  {
	--brand-bg: var(--eu-ovhcloud);
}
.bg-eu-scaleway  {
	--brand-bg: var(--eu-scaleway);
}
.bg-eu-hetzner   {
	--brand-bg: var(--eu-hetzner);
}
.bg-eu-nextcloud {
	--brand-bg: var(--eu-nextcloud);
}
.bg-eu-matrix,
.bg-eu-element   {
	--brand-bg: var(--eu-matrix);
}
.bg-eu-proton    {
	--brand-bg: var(--eu-proton);
}

/* AI bg mappings */
.bg-ai-openai      {
	--brand-bg: var(--ai-openai);
}
.bg-ai-anthropic   {
	--brand-bg: var(--ai-anthropic);
}
.bg-ai-mistral     {
	--brand-bg: var(--ai-mistral);
}
.bg-ai-huggingface {
	--brand-bg: var(--ai-huggingface);
}
.bg-ai-google      {
	--brand-bg: var(--ai-google);
}
.bg-ai-microsoft   {
	--brand-bg: var(--ai-microsoft);
}
.bg-ai-meta        {
	--brand-bg: var(--ai-meta);
}
.bg-ai-aws         {
	--brand-bg: var(--ai-aws);
}
.bg-ai-nvidia      {
	--brand-bg: var(--ai-nvidia);
}

/* =========================================================
3) CONTRASTE (WCAG pragmatique)
- Certains fonds sont trop clairs pour du texte blanc.
- On force un texte sombre sur ces fonds.
========================================================= */

/* Jaunes / oranges clairs */
.bg-brand-rss,
.bg-ai-huggingface,
.bg-ai-aws {
	--brand-fg: #1B365D; /* Policy, bon contraste */
}

/* Cas “clair” / pastel potentiellement limite */
.bg-brand-bluesky {
	--brand-fg: #0b1b2a;
}

/* =========================================================
4) LINK STYLE "brand" (hover sobre, accessible)
Usage: <a class="brand-link brand-linkedin" href="...">LinkedIn</a>
========================================================= */
a.brand-link {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
a.brand-link:hover {
	opacity: 0.85;
}

/* =========================================================
5) OPTIONAL: Brand button (si tu veux des boutons "plateforme")
Usage: <a class="btn btn-brand bg-brand bg-brand-linkedin" ...>…</a>
========================================================= */
.btn-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 500;
	text-decoration: none;
}

/* Focus visible (si fw-theme.css est chargé, ça suffira déjà)
On le remet ici au cas où un élément brand est hors flux */
.btn-brand:focus-visible,
.bg-brand:focus-visible {
	outline: 3px solid var(--fw-yellow-signal, #F2B134);
	outline-offset: 2px;
}
/* =========================================================
EU button (UE) — fond bleu + bord jaune, états complets
Utilise le système bg-brand (variables) -> fiable
========================================================= */

.btn.btn-brand.bg-brand.bg-eu-eu {
	--brand-bg: var(--eu-eu);
	--brand-fg: #ffffff;

	border: 2px solid var(--fw-yellow-signal, #F2B134);
	font-weight: 600;

	transition: transform 0.05s ease,
	filter 0.15s ease,
	box-shadow 0.15s ease;
}

/* Hover */
.btn.btn-brand.bg-brand.bg-eu-eu:hover {
	filter: brightness(1.08);
	text-decoration: none;
}

/* Focus clavier (WCAG) */
.btn.btn-brand.bg-brand.bg-eu-eu:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--fw-yellow-highlight, #FFF4D1),
	0 0 0 5px var(--fw-yellow-signal, #F2B134);
}

/* Active (clic) */
.btn.btn-brand.bg-brand.bg-eu-eu:active {
	transform: translateY(1px);
	filter: brightness(0.92);
}