/*
 * RGA — design "arcade sombre"
 * Surcharge le thème parent ct-amulet et le CSS additionnel du Customizer.
 * Les sélecteurs sont préfixés par "html body" pour passer devant le CSS
 * additionnel (#content, #masthead…) qui est imprimé plus tard dans <head>.
 */

:root {
	--rga-bg: #0f0a1f;
	--rga-panel: #1b1236;
	--rga-panel-2: #251a47;
	--rga-line: rgba(255, 255, 255, .12);
	--rga-text: #eee9fb;
	--rga-muted: #b7aedb;
	--rga-red: #ff2d46;
	--rga-pink: #ff7ad9;
	--rga-cyan: #35e6ea;
	--rga-yellow: #ffd23f;
	--rga-radius: 14px;
}

/* ---------- Fond de page : l'image arcade reste visible, assombrie ---------- */
html body.custom-background {
	background-color: #120a26 !important;
	background-blend-mode: multiply;
	background-attachment: fixed;
	color: var(--rga-text);
	font-size: 17px;
	line-height: 1.7;
}

/* ---------- En-tête ---------- */
html body #masthead {
	background-color: var(--rga-bg);
	border-bottom: 3px solid var(--rga-red);
	box-shadow: 0 6px 24px rgba(255, 45, 70, .25);
}
html body #masthead .custom-logo-link img { display: block; margin-inline: auto; }
html body #masthead .header-image img,
html body #masthead img.header-image { display: block; margin-inline: auto; max-width: 100%; height: auto; }

/* ---------- Navigation ---------- */
html body #site-navigation {
	background-color: var(--rga-panel);
	border-top: 1px solid var(--rga-line);
}
html body #site-navigation a {
	color: var(--rga-text);
	font-weight: 700;
	letter-spacing: .02em;
	padding: .75rem 1rem;
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s, background .15s;
}
html body #site-navigation a:hover,
html body #site-navigation a:focus,
html body #site-navigation .current-menu-item > a,
html body #site-navigation .current-menu-ancestor > a {
	color: var(--rga-cyan);
	border-bottom-color: var(--rga-cyan);
	background: rgba(53, 230, 234, .08);
}
html body #site-navigation ul ul { background: var(--rga-panel-2); }

/* ---------- Zone de contenu : panneau plein, plus de transparence ---------- */
html body #content {
	background-color: var(--rga-bg);
	color: var(--rga-text);
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}
html body #primary { padding: 10px; margin: auto; }

html body #content a { color: var(--rga-cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body #content a:hover { color: var(--rga-yellow); }

/* ---------- Titres ---------- */
html body #content h1,
html body #content h2,
html body #content h3,
html body #content h4 {
	color: #fff;
	font-weight: 800;
	line-height: 1.25;
}
html body article h1,
html body .page-title,
html body .entry-title { text-align: left; }
html body article h1.entry-title,
html body .page-title {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	text-shadow: 0 0 18px rgba(255, 45, 70, .55);
}
html body #content .entry-content h2,
html body #content .entry-content h3 {
	margin-top: 2rem;
	padding-bottom: .3rem;
	border-bottom: 2px solid var(--rga-red);
}

/* ---------- Liste d'articles (accueil, archives) : cartes ---------- */
html body.blog article.post,
html body.archive article.post,
html body.search article.post {
	background: var(--rga-panel);
	border: 1px solid var(--rga-line);
	border-radius: var(--rga-radius);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
html body.blog article.post:hover,
html body.archive article.post:hover {
	transform: translateY(-2px);
	border-color: var(--rga-pink);
	box-shadow: 0 8px 26px rgba(255, 122, 217, .2);
}
html body .post-container .post-thumb img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
html body #content article .entry-title a { color: var(--rga-pink); text-decoration: none; }
html body #content article .entry-title a:hover { color: #fff; }
html body #content article .entry-meta,
html body #content article .entry-meta a { color: var(--rga-muted); font-size: .9rem; text-decoration: none; }
html body .post-container .entry-excerpt {
	color: var(--rga-text);
	font-weight: 400;
	font-size: 1.05rem;
}
html body #content .post-container .entry-footer a,
html body #content a.more-link {
	display: inline-block;
	color: #fff;
	background: var(--rga-red);
	border: 0;
	border-radius: 999px;
	padding: .55rem 1.2rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, transform .15s;
}
html body .post-container .entry-footer a:hover,
html body a.more-link:hover {
	background: #ff5a6e;
	color: #fff;
	transform: translateX(2px);
}

/* ---------- Article / page : texte confortable ---------- */
html body.single #primary,
html body.page #primary { max-width: 860px; }
html body article .entry-content {
	padding: 1rem 0;
	font-size: 1.12rem;
	line-height: 1.8;
	color: var(--rga-text);
}
html body .entry-content p,
html body .entry-content li { color: var(--rga-text); }
html body .entry-content img,
html body .entry-content figure img { border-radius: 10px; height: auto; max-width: 100%; }
html body .entry-content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--rga-panel);
	border-left: 4px solid var(--rga-pink);
	border-radius: 0 10px 10px 0;
	color: var(--rga-text);
}
html body .entry-content hr { border: 0; border-top: 1px solid var(--rga-line); }
html body .entry-content table { border-collapse: collapse; width: 100%; }
html body .entry-content th,
html body .entry-content td { border: 1px solid var(--rga-line); padding: .6rem .8rem; color: var(--rga-text); }
html body .entry-content th { background: var(--rga-panel-2); }
html body .entry-content code,
html body .entry-content pre { background: var(--rga-panel); color: var(--rga-yellow); border-radius: 6px; }

/* ---------- Liste des machines (plugin rga-liste-machines) ---------- */
html body .rga-tab-button {
	background: var(--rga-panel);
	color: var(--rga-yellow);
	border-color: var(--rga-yellow);
}
html body .rga-tab-button.active { background: var(--rga-yellow); color: #111; }
html body .rga-machine-table { background: var(--rga-panel); color: var(--rga-text); }
html body .rga-machine-table th {
	background: var(--rga-panel-2);
	color: #fff;
	border-color: var(--rga-line);
}
html body .rga-machine-table td { border-color: var(--rga-line); color: var(--rga-text); }
html body .rga-machine-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .04); }

/* ---------- Formulaires (Contact Form 7, Newsletter) ---------- */
html body #content input[type="text"],
html body #content input[type="email"],
html body #content input[type="tel"],
html body #content input[type="url"],
html body #content select,
html body #content textarea {
	background: var(--rga-panel);
	color: var(--rga-text);
	border: 1px solid var(--rga-line);
	border-radius: 8px;
	padding: .6rem .8rem;
}
html body #content input:focus,
html body #content textarea:focus { outline: 2px solid var(--rga-cyan); outline-offset: 1px; }
html body #content input[type="submit"],
html body #content button[type="submit"] {
	background: var(--rga-red);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .65rem 1.4rem;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Pied de page ---------- */
html body #footer-sidebar {
	background-color: var(--rga-bg);
	border-top: 3px solid var(--rga-red);
	padding: 1.75rem 0 1.25rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
}
html body #footer-sidebar .row { justify-content: center; }
html body #footer-sidebar .footer-column {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}
html body #footer-sidebar .wp-block-buttons { justify-content: center; gap: .6rem; }
html body #footer-sidebar .wp-block-button__link {
	background: var(--rga-panel-2);
	color: #fff;
	border: 1px solid var(--rga-line);
	border-radius: 999px;
	padding: .5rem 1.2rem;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s, transform .15s;
}
html body #footer-sidebar .wp-block-button__link:hover,
html body #footer-sidebar .wp-block-button__link:focus-visible {
	background: var(--rga-red);
	border-color: var(--rga-red);
	color: #fff;
	transform: translateY(-2px);
}
html body #colophon {
	background-color: var(--rga-bg);
	border-top: 1px solid var(--rga-line);
	font-size: .95rem;
	font-weight: 400;
}
html body #colophon .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding-block: 1.5rem;
	color: var(--rga-muted);
	text-align: center;
}
html body #colophon .site-info { margin: 0; }
html body #colophon a { color: var(--rga-cyan); }

/* ---------- Mascotte ---------- */
.rga-mascot { display: flex; justify-content: center; margin: 0; }
.rga-mascot img,
.rga-mascot-float img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: 50%;
	border: 3px solid var(--rga-pink);
	box-shadow: 0 0 0 2px var(--rga-bg), 0 0 18px rgba(255, 122, 217, .7);
	background: var(--rga-panel);
}
.rga-mascot-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	pointer-events: none;
}
.rga-mascot-float img { width: 64px; height: 64px; animation: rga-hop 2.4s ease-in-out infinite; }
@keyframes rga-hop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@media (max-width: 767px) {
	.rga-mascot-float { display: none; }
	html body article .entry-content { font-size: 1.05rem; }
	html body.blog article.post,
	html body.archive article.post { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.rga-mascot-float img { animation: none; }
	html body.blog article.post { transition: none; }
}

/* ---------- Easter egg : casse-brique ---------- */
.rga-mascot-float {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	border-radius: 50%;
}
.rga-mascot-float:focus-visible { outline: 3px solid var(--rga-cyan); outline-offset: 3px; }
.rga-mascot img { cursor: pointer; }

html.rga-egg-open { overflow: hidden; }
.rga-egg {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 5, 18, .88);
	padding: 12px;
}
.rga-egg-box {
	background: var(--rga-bg);
	border: 2px solid var(--rga-pink);
	border-radius: var(--rga-radius);
	box-shadow: 0 0 28px rgba(255, 122, 217, .55);
	padding: 10px;
	width: min(100%, 380px);
}
.rga-egg-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--rga-yellow);
	font-family: "Press Start 2P", monospace;
	font-size: 11px;
	padding: 2px 4px 8px;
}
.rga-egg-close {
	background: var(--rga-red);
	color: #fff;
	border: 0;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.rga-egg canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 360 / 480;
	max-height: calc(100vh - 130px);
	margin-inline: auto;
	border-radius: 8px;
	touch-action: none;
	cursor: none;
}
.rga-egg-help { margin: 8px 0 0; text-align: center; color: var(--rga-muted); font-size: .78rem; line-height: 1.4; }

html body #footer-sidebar .widget { margin-bottom: 0; }

/* ---------- Page 404 ---------- */
html body.error404 .page-title { text-align: center; }
html body.error404 .page-content { text-align: center; }
html body.error404 .page-content img {
	display: block;
	width: min(100%, 320px);
	height: auto;
	margin: 1.5rem auto;
	border-radius: var(--rga-radius);
	box-shadow: 0 0 24px rgba(255, 45, 70, .35);
}
html body.error404 .searchform,
html body.search-no-results .searchform { display: flex; justify-content: center; align-items: center; gap: .5rem; }
html body.error404 .searchform input[type="text"],
html body.search-no-results .searchform input[type="text"] { width: min(100%, 320px); }