/* ScratchMania FR — site-wide utility classes shared by page templates. */

body { margin: 0; }
a { color: var(--fg-gold); }
a:hover { color: var(--gold-300); }

.sm-page summary::-webkit-details-marker { display: none; }
.sm-page summary:focus-visible,
.sm-page a:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 6px; }

/* header */
.sm-nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sm-burger { display: none; }
@media (max-width: 1120px) {
	.sm-nav { display: none; }
	.sm-burger { display: block; }
}
/*
 * Narrow viewports: the header row is flex/nowrap, and both the brand block and
 * the /go/ CTA were flex-shrink: 0, so at 375px they overflowed by 63px. Because
 * body has overflow-x: hidden the page did not scroll — the CTA was simply
 * clipped off the right edge. Let the brand give up space (and ellipsis its
 * label) and tighten the row so the CTA always fits.
 * Selectors carry .sm-head because components.css is enqueued after this file.
 */
@media (max-width: 700px) {
	.sm-head .smfr-shead-2 { padding: 12px 16px; gap: 12px; }
	.sm-head .smfr-shead-3 { flex-shrink: 1; min-width: 0; }
	.sm-head .smfr-shead-6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sm-head .smfr-shead-13 { padding: 10px 14px; letter-spacing: 0.08em; }
}
.sm-nav a:focus-visible,
.sm-head a:focus-visible,
.sm-head summary:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 6px; }

/* footer */
.sm-foot a { color: var(--fg-2); text-decoration: none; }
.sm-foot a:hover { color: var(--fg-gold); }
.sm-foot a:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

/* game tile grids (Jeux page) */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; }
.sm-tile { text-decoration: none; display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface-1); transition: transform 220ms cubic-bezier(.2,.7,.2,1), border-color 220ms; }
.sm-tile:hover { transform: translateY(-4px); border-color: var(--hairline-strong); }
.sm-tile img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.sm-tile span { display: block; padding: 11px 13px; font-size: 13px; font-weight: 600; color: var(--fg-1); }

/* data tables (Application, Paiements) */
.sm-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.sm-tbl th { text-align: left; padding: 16px 20px; color: var(--fg-3); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--hairline); }
.sm-tbl td { padding: 15px 20px; border-bottom: 1px solid rgba(246,241,228,.06); color: var(--fg-2); }
.sm-tbl td:first-child { color: var(--fg-1); }
.sm-tbl tr:last-child td { border-bottom: none; }
.sm-wrap { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow-2); overflow-x: auto; }

/* cookies table (narrower cell padding) */
.sm-tbl-cookies th { text-align: left; padding: 15px 18px; color: var(--fg-3); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--hairline); }
.sm-tbl-cookies td { padding: 14px 18px; border-bottom: 1px solid rgba(246,241,228,.06); color: var(--fg-2); vertical-align: top; }
.sm-tbl-cookies td:first-child { color: var(--fg-1); }
.sm-tbl-cookies tr:last-child td { border-bottom: none; }