/* =========================================================
Fabrice Willot — Theme
Bootstrap 5 semantic remap + signature éditoriale + WCAG
+ Article long (confort de lecture)
Charge this AFTER bootstrap.min.css and bootstrap-icons.css
========================================================= */
@font-face {
	font-family: "Fullmoon";
	src: url("../font/fmom.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/* =========================================================
1) PALETTE — variables métier
========================================================= */
:root {
	/* --- BLEUS --- */
	--fw-blue-policy: #1B365D;   /* Titres, navbar */
	--fw-blue-action: #2E5DA0;   /* Actions, liens */
	--fw-blue-focus: #E8F0FA;   /* Fonds légers */

	/* --- JAUNES --- */
	--fw-yellow-signal: #F2B134; /* Signal fort */
	--fw-yellow-hover: #FFD580; /* Hover */
	--fw-yellow-highlight: #FFF4D1; /* Surligneur */

	/* --- GRIS / TEXTE --- */
	--fw-text-main: #34495E;
	--fw-text-muted: #7F8C8D;
	--fw-border: #E0E4E8;
	--fw-surface: #F8F9FB;
}

/* =========================================================
2) BOOTSTRAP — remapping sémantique
Notes:
- primary = action
- secondary = muted
- warning = signal
- info = focus
- dark = policy
- light = surface
========================================================= */
:root {
	/* Core */
	--bs-primary: #2E5DA0;
	--bs-primary-rgb: 46, 93, 160;

	--bs-secondary: #7F8C8D;
	--bs-secondary-rgb: 127, 140, 141;

	--bs-warning: #F2B134;
	--bs-warning-rgb: 242, 177, 52;

	--bs-info: #E8F0FA;
	--bs-info-rgb: 232, 240, 250;

	--bs-light: #F8F9FB;
	--bs-light-rgb: 248, 249, 251;

	--bs-dark: #1B365D;
	--bs-dark-rgb: 27, 54, 93;

	/* Status */
	--bs-success: #4E7C6A; /* vert sobre, froid */
	--bs-success-rgb: 78, 124, 106;

	--bs-danger: #B84A3A;  /* rouge brique, non agressif */
	--bs-danger-rgb: 184, 74, 58;

	/* Link variables (important) */
	--bs-link-color: var(--fw-blue-action);
	--bs-link-hover-color: var(--fw-blue-policy);
}

/* =========================================================
3) TYPOGRAPHIE — grande, lisible, éditoriale
========================================================= */

html {
	font-size: 100%; /* respecte les réglages utilisateur */
}

/* Base */
body {
	font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont,
	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-size: 1.125rem;        /* 18px */
	line-height: 1.75;

	color: var(--fw-text-main);
	background-color: #ffffff;

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Desktop confortable */
@media (min-width: 992px) {
	body {
		font-size: 1.1875rem;     /* 19px */
	}
}

/* Titres */
h1, h2, h3, h4 {
	color: var(--fw-blue-policy);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

h1 {
	font-size: 2.6rem;
}
h2 {
	font-size: 2rem;
	margin-top: 2em;
}
h3 {
	font-size: 1.55rem;
	margin-top: 1.6em;
}
h4 {
	font-size: 1.25rem;
	margin-top: 1.4em;
}

/* Paragraphes */
p {
	margin-bottom: 1.2em;
}

/* Métadonnées */
.text-muted,
.meta,
.article-meta {
	font-size: 0.95rem;
	color: var(--fw-text-muted) !important;
}

/* =========================================================
4) BASE UI — surfaces & bordures
========================================================= */
.bg-light {
	background-color: var(--fw-surface) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
	border-color: var(--fw-border) !important;
}

/* =========================================================
5) NAVBAR (important)
- Ajoute la classe "navbar-dark" dans layout.php
========================================================= */
.navbar {
	background-color: var(--fw-blue-policy);
}

.navbar .navbar-brand,
.navbar .nav-link {
	color: #ffffff;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
	color: var(--fw-yellow-hover);
}

/* Make burger icon visible on dark navbar */
.navbar .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.35);
}
.navbar .navbar-toggler-icon {
	filter: invert(1);
}
/* =========================================================
NAVBAR — fix visibilité texte (critique)
========================================================= */
.navbar,
.navbar * {
	color: #ffffff;
}


.navbar .nav-link {
	color: #ffffff !important;
	font-size: 1.05rem; /* légèrement plus grand */
}


.navbar .nav-link:hover,
.navbar .nav-link:focus {
	color: var(--fw-yellow-hover) !important;
}


.navbar-brand {
	font-weight: 600;
	font-size: 1.1rem;
}

/* =========================================================
6) LINKS
========================================================= */
a {
	color: var(--fw-blue-action);
	text-decoration-color: var(--fw-yellow-hover);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--fw-blue-policy);
	text-decoration-thickness: 0.12em;
}

/* Optional: ensure Bootstrap utility keeps your intent */
.link-primary {
	color: var(--fw-blue-action) !important;
}
.link-primary:hover {
	color: var(--fw-blue-policy) !important;
}

/* =========================================================
7) BUTTONS
========================================================= */
.btn-primary {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--fw-yellow-hover);
	border-color: var(--fw-yellow-hover);
	color: var(--fw-blue-policy);
}

.btn-outline-primary {
	color: var(--fw-blue-action);
	border-color: var(--fw-blue-action);
}

.btn-outline-primary:hover {
	background-color: var(--fw-blue-action);
	color: #ffffff;
}

/* =========================================================
8) BADGES & ALERTS
========================================================= */

/* Replace classic warning background with highlighter tone */
.badge.bg-warning {
	background-color: var(--fw-yellow-highlight);
	color: var(--fw-blue-policy);
}

/* Soft info alert (Focus background) */
.alert-info {
	background-color: var(--fw-blue-focus);
	color: var(--fw-blue-policy);
	border-left: 4px solid var(--fw-blue-action);
}

/* =========================================================
9) SIGNATURE ÉDITORIALE
========================================================= */

/* Lettrine en Fullmoon */
.drop-cap::first-letter {
	font-family: "Fullmoon", serif;
	float: left;


	font-size: 3.8rem;
	line-height: 0.95; /* moins écrasé */
	padding-right: 0.12em; /* <<< clé : beaucoup plus serré */
	margin-right: -0.04em; /* micro-chevauchement optique */
	margin-top: 0.04em;


	font-weight: 400;
	color: var(--fw-yellow-signal);
}


/* Mobile */
@media (max-width: 576px) {
	.drop-cap::first-letter {
		font-size: 3rem;
		margin-right: 0;
	}
}

/* Editorial box */
.fw-box {
	background-color: var(--fw-blue-focus);
	border-left: 4px solid var(--fw-blue-action);
	padding: 1rem;
	border-radius: 0.5rem;
}

/* =========================================================
10) ARTICLE LONG — confort de lecture
Usage: <article class="article-content">…</article>
========================================================= */
.article-content {
	max-width: 70ch;
	margin-inline: auto;
}

.article-content p,
.article-content ul,
.article-content ol,
.article-content blockquote,
.article-content pre,
.article-content figure {
	margin-bottom: 1.1em;
}

.article-content h1 {
	margin-top: 0;
}
.article-content h2 {
	margin-top: 1.8em;
}
.article-content h3 {
	margin-top: 1.5em;
}
.article-content h4 {
	margin-top: 1.3em;
}

.article-content ul,
.article-content ol {
	padding-left: 1.25em;
}

.article-content li {
	margin-bottom: 0.45em;
}

.article-content blockquote {
	margin-left: 0;
	padding: 0.75rem 1rem;
	background: var(--fw-surface);
	border-left: 4px solid var(--fw-blue-action);
	border-radius: 0.5rem;
	color: var(--fw-blue-policy);
}

.article-content a {
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.18em;
}

.article-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
	"Liberation Mono", "Courier New", monospace;


	font-size: 0.95em;
	padding: 0.15em 0.4em;


	background-color: var(--fw-yellow-highlight);
	color: var(--fw-blue-policy);


	border: 1px solid var(--fw-border);
	border-radius: 0.4rem;


	white-space: nowrap;
}

.article-content pre {
	font-size: 0.95rem;
	line-height: 1.6;
	padding: 1rem;
	border-radius: 0.75rem;
	background: #0f172a;
	color: #e5e7eb;
	overflow-x: auto;
}
/* --- Inline code (dans le texte) : clair, discret --- */
.article-content :not(pre) > code {
	padding: 0.1em 0.35em;
	border-radius: 0.35rem;
	background: var(--fw-surface);
	border: 1px solid var(--fw-border);
	color: var(--fw-blue-policy);
}


/* --- Code block : fond sombre + texte bleu ciel --- */
.article-content pre {
	padding: 1rem;
	border-radius: 0.75rem;
	background: #0f172a; /* sombre */
	color: #bfe3ff; /* bleu ciel lisible */
	overflow-x: auto;
	border: 1px solid rgba(255,255,255,0.08);
}


/* IMPORTANT : empêcher le style "inline code" de s'appliquer dans <pre> */
.article-content pre code {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: inherit !important;
}
.article-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
}

.article-content th,
.article-content td {
	border: 1px solid var(--fw-border);
	padding: 0.6rem 0.7rem;
	vertical-align: top;
}

.article-content thead th {
	background: var(--fw-surface);
	color: var(--fw-blue-policy);
}

.article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
	border: 1px solid var(--fw-border);
}

.article-content figcaption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--fw-text-muted);
}

.article-meta {
	max-width: 70ch;
	margin-inline: auto;
	color: var(--fw-text-muted);
	font-size: 0.95rem;
}

@media (min-width: 1200px) {
	.article-content {
		max-width: 72ch;
	}
}

@media (max-width: 575.98px) {
	.article-content {
		max-width: 100%;
	}
}

/* =========================================================
Footer social icons — lisibles & accessibles
========================================================= */
.footer-social a {
	font-size: 1.35rem;          /* taille icône */
	line-height: 1;
	padding: 0.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.4rem;
}

.footer-social a:hover {
	background-color: var(--fw-blue-focus);
}

.footer-social a:focus-visible {
	outline: 3px solid var(--fw-yellow-signal);
	outline-offset: 2px;
}
/* =========================================================
11) WCAG / ACCESSIBILITY BASELINE
========================================================= */

/* Visible keyboard focus */
:focus-visible {
	outline: 3px solid var(--fw-yellow-signal);
	outline-offset: 2px;
}

/* Skip-link visible when focused */
.visually-hidden-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--fw-yellow-highlight);
	color: var(--fw-blue-policy);
	border-radius: 0.5rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}