/* Use the same theme variables and background style as `tool.css` */
@import url("./tool.css");

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    /* Prefer theme variable if available, fallback to white */
    color: var(--light, #ffffff);
    /* Use the site's dark gradient from the theme for consistency */
    background: linear-gradient(180deg, var(--dark, #000000) 0%, rgba(var(--dark-rgb, 10,10,15), 0.85) 50%, var(--dark, #000000) 100%);
    min-height: 100vh;
}

h1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    /* semi-opaque dark panel to match site header styling */
    /* background: rgba(10, 10, 15, 0.95); */
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 255,251,37), 0.08);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--primary, #ffd700);
    position: sticky;
    top: 0;
    z-index: 1000;
    color: var(--primary, #ffd700);
    text-align: center;
}

p {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(var(--light-rgb, 255,255,255), 0.95);
    /* background: rgba(10, 10, 15, 0.45); */
    padding: 20px;
    border-radius: 12px;
    max-width: 900px;
    margin: 30px auto;
    text-align: justify;
    backdrop-filter: blur(4px);
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.4); */
}

p::first-letter {
    font-size: 200%;
    font-weight: bold;
    color: var(--primary, #ffd700);
    float: left;
    line-height: 1;
    margin-right: 8px;
}


/* Back / Retour floating button */
.back-button {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	color: var(--dark);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.18);
	border: none;
	cursor: pointer;
	z-index: 1200;
	transform: translateY(20px);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}
.back-button.visible { opacity: 1; transform: translateY(0); }
.back-button:focus { outline: 2px solid rgba(var(--light-rgb), 0.12); }
.back-button i { font-size: 1.1rem; }

@media (max-width: 480px) {
	.back-button { right: 14px; bottom: 14px; width: 48px; height: 48px; }
}