/*
 * Feuille de style commune aux outils de la boîte à outils.
 *
 * Elle est recopiée à l'identique dans chaque dossier de module : seules les
 * deux variables --accent et --accent-fort changent, pour donner sa couleur à
 * chaque outil. Les pages d'outil sont servies une par dossier
 * (/boite-a-outils/<dossier>/style.css), il n'y a donc pas de fichier partagé
 * possible sans compliquer la route — et la duplication d'un fichier de style
 * se relit sans difficulté.
 *
 * La palette est celle du site (src/app.css), y compris le thème sombre.
 */

* {
	box-sizing: border-box;
}

:root {
	--rubrique: #58277e;
	--accent: #b8334a;
	--accent-fort: #9c1e33;

	--ink: #2a1f36;
	--ink-soft: #4d4459;
	--ink-faint: #6f6679;
	--surface: #f4eefb;
	--carte: #fdfbff;
	--surface-alt: #e9dff6;
	--line: #e1dbe8;
	--line-forte: #918799;
	--sur-accent: #ffffff;
	--ombre: 0 1px 2px rgba(42, 31, 54, 0.06), 0 8px 24px rgba(42, 31, 54, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root {
		--rubrique: #c1a0ef;
		--accent: #ff6d80;
		--accent-fort: #ff9aa7;

		--ink: #f3eff8;
		--ink-soft: #bbb2c8;
		--ink-faint: #9a92a6;
		--surface: #130f1a;
		--carte: #1d1629;
		--surface-alt: #271e36;
		--line: #2f2740;
		--line-forte: #6d6280;
		/* En thème sombre l'accent devient clair : le texte posé dessus passe
		   au sombre, exactement comme --color-sur-brand sur le site. */
		--sur-accent: #130f1a;
		--ombre: none;
	}
}

html {
	background: var(--surface);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0 0 4rem;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--surface);
}

.page {
	width: min(100%, 52rem);
	margin: 0 auto;
	padding: 0 1rem;
}

a {
	color: var(--accent-fort);
}

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

/* --- En-tête ------------------------------------------------------------ */

.retour-site {
	padding: 1rem 0 0;
	margin: 0;
	font-size: 0.9rem;
}

.retour-site a {
	color: var(--ink-soft);
	text-decoration: none;
}

.retour-site a:hover {
	text-decoration: underline;
}

.entete {
	padding: 1.5rem 0 0.5rem;
}

.sur-titre {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rubrique);
}

h1 {
	margin: 0.5rem 0 0;
	font-size: clamp(1.9rem, 6vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.chapeau {
	margin: 1rem 0 0;
	font-size: 1.1rem;
	color: var(--ink-soft);
}

h2 {
	margin: 0 0 0.25rem;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}

/* --- Cartes ------------------------------------------------------------- */

.carte {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: var(--carte);
	border: 1px solid var(--line);
	border-radius: 1rem;
	box-shadow: var(--ombre);
}

.carte-accent {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--sur-accent);
}

.carte-accent h2,
.carte-accent h3 {
	color: var(--sur-accent);
}

.legende {
	margin: 0 0 1rem;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.carte-accent .legende {
	color: var(--sur-accent);
	opacity: 0.85;
}

/* --- Commandes ---------------------------------------------------------- */

.champ {
	margin-top: 1.25rem;
}

.champ:first-child {
	margin-top: 0;
}

.champ > label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
}

.champ-ligne {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

input[type="range"] {
	flex: 1 1 14rem;
	min-width: 10rem;
	accent-color: var(--accent);
	height: 1.75rem;
}

input[type="number"] {
	width: 7.5rem;
	padding: 0.5rem 0.65rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	background: var(--carte);
	border: 1px solid var(--line-forte);
	border-radius: 0.5rem;
}

.unite {
	color: var(--ink-faint);
	font-size: 0.9rem;
}

.onglets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.onglets button {
	padding: 0.45rem 1rem;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--carte);
	border: 1px solid var(--line-forte);
	border-radius: 999px;
	cursor: pointer;
}

.onglets button[aria-pressed="true"] {
	color: var(--sur-accent);
	background: var(--accent);
	border-color: var(--accent);
}

button.bouton {
	padding: 0.55rem 1.25rem;
	font: inherit;
	font-weight: 700;
	color: var(--sur-accent);
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 999px;
	cursor: pointer;
}

/* --- Résultats ---------------------------------------------------------- */

.grand-chiffre {
	font-size: clamp(2.2rem, 9vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.sous-chiffre {
	margin: 0.5rem 0 0;
	font-size: 1rem;
}

.grille-chiffres {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	margin-top: 1.25rem;
}

.chiffre-boite {
	padding: 0.9rem 1rem;
	background: var(--surface-alt);
	border-radius: 0.75rem;
}

.chiffre-boite .etiquette {
	display: block;
	font-size: 0.8rem;
	color: var(--ink-soft);
}

.chiffre-boite .valeur {
	display: block;
	margin-top: 0.15rem;
	font-size: 1.4rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* --- Barres ------------------------------------------------------------- */

.barres {
	list-style: none;
	margin: 0;
	padding: 0;
}

.barres li {
	margin-top: 1rem;
}

.barres li:first-child {
	margin-top: 0;
}

.barre-entete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: 0.95rem;
}

.barre-entete .titre {
	font-weight: 600;
}

.barre-entete .valeur {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.barre-piste {
	margin-top: 0.35rem;
	height: 0.85rem;
	background: var(--surface-alt);
	border-radius: 999px;
	overflow: hidden;
}

.barre-remplissage {
	height: 100%;
	background: var(--accent);
	border-radius: 999px;
	transition: width 0.35s ease;
}

.barre-detail {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/* --- Sources ------------------------------------------------------------ */

.sources {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.sources h2 {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 0.75rem;
}

.sources ul {
	margin: 0;
	padding-left: 1.1rem;
}

.sources li {
	margin-top: 0.4rem;
}

.avertissement {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	background: var(--surface-alt);
	border-left: 3px solid var(--accent);
	border-radius: 0 0.5rem 0.5rem 0;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.a-partager {
	margin-top: 1.5rem;
	font-size: 0.95rem;
}

/*
 * Le pied de page : de quoi enchaîner sur un autre outil, et de quoi faire
 * quelque chose de ce qu'on vient de lire. Il est écrit par
 * `scripts/pieds-outils.js` — voir la note dans `src/lib/boite-a-outils.ts`.
 *
 * Il est volontairement sobre : après les sources et les avertissements, une
 * grande surface colorée ferait publicité. Un filet, deux liens en cartes, une
 * ligne de liens.
 */
.suite {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.suite h2 {
	margin: 0;
	font-size: 1.15rem;
}

.suite-intro {
	margin: 0.5rem 0 0;
	max-width: 44rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.suite-liste {
	display: grid;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.suite-liste {
		grid-template-columns: 1fr 1fr;
	}
}

.suite-liste a {
	display: block;
	height: 100%;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	border-radius: 0.625rem;
	background: var(--carte);
	text-decoration: none;
	color: inherit;
}

.suite-liste a:hover {
	border-color: var(--accent);
}

.suite-titre {
	display: block;
	font-weight: 800;
	color: var(--ink);
}

.suite-note {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/* Les liens vers le reste du site, séparés par un point médian tracé en CSS :
   rien à écrire dans le HTML généré, et rien à lire pour un lecteur d'écran. */
.suite-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	margin: 1.25rem 0 0;
	font-size: 0.9rem;
}

.suite-liens a {
	color: var(--rubrique);
	font-weight: 600;
	text-decoration: none;
}

.suite-liens a:hover {
	text-decoration: underline;
}

.suite-liens a + a::before {
	content: '·';
	margin-right: 0.9rem;
	color: var(--ink-faint);
	font-weight: 400;
}