/* =========================================================
   Regle.net — CSS articles règles de jeux
   Fichier : /newrde/regle-game.css
   Scope : article custom uniquement
   ========================================================= */

.rgl-wrap {
	--rgl-ink: #151b2f;
	--rgl-muted: #5b6478;
	--rgl-soft: #f7f9ff;
	--rgl-card: #ffffff;
	--rgl-blue: #245cff;
	--rgl-blue-dark: #153ab0;
	--rgl-green: #20a766;
	--rgl-yellow: #ffd23f;
	--rgl-orange: #ff7a35;
	--rgl-red: #f24b5b;
	--rgl-purple: #7b4dff;
	--rgl-pink: #ff4faf;
	--rgl-border: rgba(21, 27, 47, .12);
	--rgl-shadow: 0 22px 55px rgba(21, 27, 47, .15);
	--rgl-shadow-soft: 0 12px 28px rgba(21, 27, 47, .09);

	position: relative !important;
	max-width: 1120px !important;
	margin: 0 auto 34px !important;
	padding: 18px !important;
	isolation: isolate !important;
}

/* Box sizing uniquement sur les éléments rgl-* */
.rgl-wrap [class^="rgl-"],
.rgl-wrap [class*=" rgl-"] {
	box-sizing: border-box !important;
}

/* Fond animé */
.rgl-wrap:before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -3 !important;
	border-radius: 30px !important;
	background:
		radial-gradient(circle at 12% 10%, rgba(255, 210, 63, .34), transparent 28%),
		radial-gradient(circle at 88% 12%, rgba(123, 77, 255, .26), transparent 30%),
		radial-gradient(circle at 50% 100%, rgba(36, 92, 255, .16), transparent 36%),
		linear-gradient(180deg, #fbfcff 0%, #f1f5ff 100%) !important;
	animation: rgl-bg-breathe 9s ease-in-out infinite !important;
}

.rgl-wrap:after {
	content: "" !important;
	position: absolute !important;
	inset: 12px !important;
	z-index: -2 !important;
	border-radius: 26px !important;
	background-image:
		linear-gradient(90deg, rgba(21, 27, 47, .045) 1px, transparent 1px),
		linear-gradient(180deg, rgba(21, 27, 47, .045) 1px, transparent 1px) !important;
	background-size: 34px 34px !important;
	mask-image: linear-gradient(180deg, rgba(0,0,0,.76), transparent 74%) !important;
	pointer-events: none !important;
	animation: rgl-grid-slide 18s linear infinite !important;
}

/* Liens uniquement dans les blocs custom */
.rgl-wrap .rgl-section a,
.rgl-wrap .rgl-hero a {
	color: var(--rgl-blue) !important;
	text-decoration: none !important;
	font-weight: 800 !important;
}

.rgl-wrap .rgl-section a:hover,
.rgl-wrap .rgl-hero a:hover {
	color: var(--rgl-blue-dark) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

/* HERO */

.rgl-hero {
	position: relative !important;
	overflow: hidden !important;
	border: 1px solid rgba(255,255,255,.75) !important;
	border-radius: 28px !important;
	padding: clamp(24px, 4vw, 46px) !important;
	background:
		linear-gradient(135deg, rgba(36,92,255,.98), rgba(123,77,255,.96) 58%, rgba(255,79,175,.92)),
		radial-gradient(circle at 20% 20%, rgba(255,255,255,.30), transparent 30%) !important;
	color: #fff !important;
	box-shadow: var(--rgl-shadow) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	transform: translateZ(0) !important;
}

.rgl-hero:before {
	content: "♟︎ 🎲 ★ 🃏" !important;
	position: absolute !important;
	right: clamp(8px, 4vw, 34px) !important;
	top: 16px !important;
	font-size: clamp(46px, 10vw, 112px) !important;
	letter-spacing: 8px !important;
	opacity: .16 !important;
	transform: rotate(-8deg) !important;
	pointer-events: none !important;
	animation: rgl-float-icons 7s ease-in-out infinite !important;
}

.rgl-hero:after {
	content: "" !important;
	position: absolute !important;
	inset: -80px !important;
	background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 45%, transparent 56%) !important;
	transform: translateX(-65%) rotate(8deg) !important;
	animation: rgl-shine 6s ease-in-out infinite !important;
	pointer-events: none !important;
}

.rgl-kicker,
.rgl-eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: fit-content !important;
	margin: 0 0 12px !important;
	padding: 7px 12px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.18) !important;
	color: #fff !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 13px !important;
	font-weight: 950 !important;
	letter-spacing: .045em !important;
	text-transform: uppercase !important;
	backdrop-filter: blur(9px) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.20) !important;
	position: relative !important;
	z-index: 1 !important;
}

.rgl-kicker:before,
.rgl-eyebrow:before {
	content: "🎯" !important;
	display: inline-block !important;
	animation: rgl-tiny-bounce 2.6s ease-in-out infinite !important;
}

.rgl-title {
	position: relative !important;
	z-index: 1 !important;
	max-width: 840px !important;
	margin: 0 !important;
	color: #fff !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: clamp(31px, 5vw, 60px) !important;
	line-height: .98 !important;
	font-weight: 1000 !important;
	letter-spacing: -0.058em !important;
	text-wrap: balance !important;
	text-shadow: 0 5px 22px rgba(0,0,0,.18) !important;
}

.rgl-lead {
	position: relative !important;
	z-index: 1 !important;
	max-width: 800px !important;
	margin: 18px 0 0 !important;
	color: rgba(255,255,255,.94) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: clamp(17px, 2.1vw, 22px) !important;
	line-height: 1.58 !important;
	font-weight: 560 !important;
}

.rgl-actions {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 24px !important;
}

/* BOUTONS */

.rgl-btn,
.rgl-card-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	min-height: 46px !important;
	padding: 12px 18px !important;
	border-radius: 16px !important;
	border: 0 !important;
	text-decoration: none !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-weight: 950 !important;
	line-height: 1.1 !important;
	cursor: pointer !important;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.rgl-btn:hover,
.rgl-card-cta:hover {
	transform: translateY(-3px) scale(1.015) !important;
	text-decoration: none !important;
	filter: saturate(1.08) !important;
}

.rgl-btn--primary {
	background: linear-gradient(135deg, var(--rgl-yellow), #fff078) !important;
	color: #2a2200 !important;
	box-shadow: 0 14px 24px rgba(255,210,63,.34) !important;
}

.rgl-btn--primary:before {
	content: "▶" !important;
}

.rgl-btn--ghost {
	background: rgba(255,255,255,.16) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.34) !important;
	backdrop-filter: blur(8px) !important;
}

.rgl-btn--ghost:before {
	content: "↪" !important;
}

/* SECTIONS */

.rgl-section {
	position: relative !important;
	margin-top: 20px !important;
	padding: clamp(20px, 3vw, 30px) !important;
	border: 1px solid var(--rgl-border) !important;
	border-radius: 24px !important;
	background: rgba(255,255,255,.91) !important;
	box-shadow: var(--rgl-shadow-soft) !important;
	overflow: hidden !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.rgl-section:before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	background:
		radial-gradient(circle at 0 0, rgba(36,92,255,.065), transparent 30%),
		linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent) !important;
	opacity: .9 !important;
}

.rgl-section > * {
	position: relative !important;
	z-index: 1 !important;
}

.rgl-section--soft {
	background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,255,.96)) !important;
}

.rgl-section--green {
	border-color: rgba(32,167,102,.28) !important;
	background:
		radial-gradient(circle at 0 0, rgba(32,167,102,.14), transparent 34%),
		#fff !important;
}

.rgl-section--warning {
	border-color: rgba(255,122,53,.32) !important;
	background:
		radial-gradient(circle at 0 0, rgba(255,210,63,.24), transparent 34%),
		#fff !important;
}

.rgl-section h2,
.rgl-section h3 {
	color: var(--rgl-ink) !important;
	background: transparent !important;
	border: 0 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.rgl-section h2 {
	margin: 0 0 14px !important;
	font-size: clamp(24px, 3.4vw, 36px) !important;
	line-height: 1.08 !important;
	font-weight: 1000 !important;
	letter-spacing: -0.038em !important;
	text-wrap: balance !important;
}

.rgl-section h3 {
	margin: 18px 0 8px !important;
	font-size: clamp(19px, 2.3vw, 24px) !important;
	line-height: 1.2 !important;
	font-weight: 950 !important;
	letter-spacing: -0.022em !important;
}

.rgl-section p {
	margin: 0 0 13px !important;
	color: var(--rgl-muted) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
}

.rgl-section p:last-child {
	margin-bottom: 0 !important;
}

/* REPONSE RAPIDE */

.rgl-quick {
	display: grid !important;
	grid-template-columns: 70px 1fr !important;
	gap: 16px !important;
	align-items: center !important;
	padding: 18px !important;
	border-radius: 20px !important;
	background:
		linear-gradient(135deg, rgba(255,210,63,.25), rgba(32,167,102,.13)),
		#fff !important;
	border: 1px solid rgba(255,210,63,.48) !important;
	box-shadow: 0 12px 24px rgba(21,27,47,.07) !important;
}

.rgl-quick:before {
	content: "⚡" !important;
	display: grid !important;
	place-items: center !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 20px !important;
	background: linear-gradient(135deg, var(--rgl-yellow), var(--rgl-orange)) !important;
	color: #fff !important;
	font-size: 32px !important;
	box-shadow: 0 14px 26px rgba(255,122,53,.28) !important;
	animation: rgl-pulse-token 2.8s ease-in-out infinite !important;
}

/* INFOS JEU */

.rgl-meta-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 12px !important;
	margin-top: 18px !important;
}

.rgl-meta {
	position: relative !important;
	padding: 16px !important;
	border-radius: 20px !important;
	background: #fff !important;
	border: 1px solid var(--rgl-border) !important;
	box-shadow: 0 10px 20px rgba(21,27,47,.07) !important;
	overflow: hidden !important;
	transition: transform .18s ease, box-shadow .18s ease !important;
}

.rgl-meta:before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(120deg, transparent, rgba(36,92,255,.08), transparent) !important;
	transform: translateX(-120%) !important;
	transition: transform .45s ease !important;
}

.rgl-meta:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 16px 28px rgba(21,27,47,.10) !important;
}

.rgl-meta:hover:before {
	transform: translateX(120%) !important;
}

.rgl-meta strong,
.rgl-meta span {
	position: relative !important;
	z-index: 1 !important;
}

.rgl-meta strong {
	display: block !important;
	margin-bottom: 4px !important;
	color: var(--rgl-ink) !important;
	font-size: 14px !important;
	font-weight: 1000 !important;
	text-transform: uppercase !important;
	letter-spacing: .035em !important;
}

.rgl-meta span {
	color: var(--rgl-muted) !important;
	font-weight: 750 !important;
}

/* CARDS */

.rgl-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 14px !important;
	margin-top: 18px !important;
}

.rgl-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.rgl-card {
	position: relative !important;
	padding: 18px !important;
	border-radius: 22px !important;
	background: #fff !important;
	border: 1px solid var(--rgl-border) !important;
	box-shadow: 0 12px 24px rgba(21,27,47,.075) !important;
	overflow: hidden !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.rgl-card:before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 5px !important;
	background: linear-gradient(90deg, var(--rgl-blue), var(--rgl-purple), var(--rgl-orange), var(--rgl-yellow)) !important;
	background-size: 240% 100% !important;
	animation: rgl-rainbow-line 5s linear infinite !important;
}

.rgl-card:hover {
	transform: translateY(-4px) rotate(-.25deg) !important;
	box-shadow: 0 20px 34px rgba(21,27,47,.12) !important;
	border-color: rgba(36,92,255,.24) !important;
}

.rgl-card h3 {
	margin-top: 4px !important;
}

.rgl-card-cta {
	margin-top: 10px !important;
	background: var(--rgl-blue) !important;
	color: #fff !important;
	box-shadow: 0 10px 18px rgba(36,92,255,.18) !important;
}

.rgl-card-cta:after {
	content: " →" !important;
}

/* LISTES — anti doubles puces */

.rgl-checklist,
.rgl-rule-list,
.rgl-dice-list {
	list-style: none !important;
	padding: 0 !important;
	padding-left: 0 !important;
	margin: 16px 0 0 !important;
	margin-left: 0 !important;
	display: grid !important;
	gap: 10px !important;
}

.rgl-checklist > li,
.rgl-rule-list > li,
.rgl-dice-list > li {
	position: relative !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 13px 14px 13px 46px !important;
	border-radius: 16px !important;
	background: rgba(246,248,255,.97) !important;
	border: 1px solid rgba(21,27,47,.08) !important;
	color: var(--rgl-muted) !important;
	font-weight: 680 !important;
	transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}

.rgl-checklist > li::marker,
.rgl-rule-list > li::marker,
.rgl-dice-list > li::marker {
	content: "" !important;
	font-size: 0 !important;
}

.rgl-checklist > li:hover,
.rgl-rule-list > li:hover,
.rgl-dice-list > li:hover {
	transform: translateX(3px) !important;
	background: #fff !important;
	border-color: rgba(36,92,255,.18) !important;
}

.rgl-checklist > li:before {
	content: "✓" !important;
	position: absolute !important;
	left: 13px !important;
	top: 12px !important;
	display: grid !important;
	place-items: center !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 9px !important;
	background: var(--rgl-green) !important;
	color: #fff !important;
	font-weight: 1000 !important;
	box-shadow: 0 8px 15px rgba(32,167,102,.22) !important;
}

.rgl-rule-list {
	counter-reset: rglstep !important;
}

.rgl-rule-list > li {
	counter-increment: rglstep !important;
}

.rgl-rule-list > li:before {
	content: counter(rglstep) !important;
	position: absolute !important;
	left: 12px !important;
	top: 12px !important;
	display: grid !important;
	place-items: center !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, var(--rgl-blue), var(--rgl-purple)) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 1000 !important;
	box-shadow: 0 8px 15px rgba(36,92,255,.22) !important;
}

.rgl-dice-list > li:before {
	content: "🎲" !important;
	position: absolute !important;
	left: 13px !important;
	top: 12px !important;
	font-size: 22px !important;
}

/* TABLEAUX */

.rgl-table-wrap {
	width: 100% !important;
	margin: 18px 0 0 !important;
	overflow-x: auto !important;
	border-radius: 20px !important;
	border: 1px solid var(--rgl-border) !important;
	background: #fff !important;
	box-shadow: 0 12px 24px rgba(21,27,47,.07) !important;
}

.rgl-table {
	width: 100% !important;
	min-width: 620px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: #fff !important;
	margin: 0 !important;
}

.rgl-table th,
.rgl-table td {
	padding: 14px 16px !important;
	text-align: left !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(21,27,47,.08) !important;
	vertical-align: top !important;
	font-size: 15px !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.rgl-table th {
	background: linear-gradient(135deg, var(--rgl-ink), #2b3551) !important;
	color: #fff !important;
	font-weight: 1000 !important;
	letter-spacing: .02em !important;
}

.rgl-table tr:last-child td {
	border-bottom: 0 !important;
}

.rgl-table td {
	color: var(--rgl-muted) !important;
	font-weight: 650 !important;
}

.rgl-table td strong {
	color: var(--rgl-ink) !important;
}

/* BADGES */

.rgl-badges {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 9px !important;
	margin: 16px 0 0 !important;
}

.rgl-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 8px 11px !important;
	border-radius: 999px !important;
	background: #fff !important;
	border: 1px solid rgba(21,27,47,.10) !important;
	color: var(--rgl-muted) !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	box-shadow: 0 8px 15px rgba(21,27,47,.055) !important;
	transition: transform .18s ease !important;
}

.rgl-badge:hover {
	transform: translateY(-2px) rotate(-1deg) !important;
}

.rgl-badge--blue {
	background: rgba(36,92,255,.09) !important;
	color: var(--rgl-blue-dark) !important;
}

.rgl-badge--green {
	background: rgba(32,167,102,.10) !important;
	color: #14744a !important;
}

.rgl-badge--yellow {
	background: rgba(255,210,63,.22) !important;
	color: #7a5a00 !important;
}

/* ENCADRÉS */

.rgl-note {
	position: relative !important;
	margin-top: 18px !important;
	padding: 16px 16px 16px 56px !important;
	border-radius: 20px !important;
	background: #fff !important;
	border: 1px solid rgba(36,92,255,.20) !important;
	box-shadow: 0 12px 22px rgba(21,27,47,.065) !important;
	color: var(--rgl-muted) !important;
	font-weight: 680 !important;
}

.rgl-note:before {
	content: "💡" !important;
	position: absolute !important;
	left: 16px !important;
	top: 15px !important;
	font-size: 26px !important;
	animation: rgl-tiny-bounce 2.8s ease-in-out infinite !important;
}

.rgl-warning {
	border-color: rgba(242,75,91,.25) !important;
	background:
		radial-gradient(circle at 0 0, rgba(242,75,91,.10), transparent 36%),
		#fff !important;
}

.rgl-warning:before {
	content: "⚠️" !important;
}

/* RELATED */

.rgl-related {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 12px !important;
	margin-top: 16px !important;
}

.rgl-related a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 14px 15px !important;
	border-radius: 18px !important;
	background: #fff !important;
	border: 1px solid rgba(21,27,47,.10) !important;
	box-shadow: 0 9px 18px rgba(21,27,47,.055) !important;
	color: var(--rgl-ink) !important;
	font-weight: 950 !important;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.rgl-related a:after {
	content: "→" !important;
	display: grid !important;
	place-items: center !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 10px !important;
	background: rgba(36,92,255,.10) !important;
	color: var(--rgl-blue) !important;
	flex: 0 0 auto !important;
	transition: transform .18s ease, background .18s ease !important;
}

.rgl-related a:hover {
	transform: translateY(-3px) !important;
	text-decoration: none !important;
	box-shadow: 0 16px 28px rgba(21,27,47,.10) !important;
	border-color: rgba(36,92,255,.20) !important;
}

.rgl-related a:hover:after {
	transform: translateX(3px) !important;
	background: rgba(36,92,255,.16) !important;
}



/* ANIMATIONS */

@keyframes rgl-bg-breathe {
	0%, 100% {
		filter: saturate(1) hue-rotate(0deg);
	}
	50% {
		filter: saturate(1.08) hue-rotate(4deg);
	}
}

@keyframes rgl-grid-slide {
	0% {
		background-position: 0 0, 0 0;
	}
	100% {
		background-position: 34px 0, 0 34px;
	}
}

@keyframes rgl-float-icons {
	0%, 100% {
		transform: translateY(0) rotate(-8deg);
	}
	50% {
		transform: translateY(10px) rotate(-5deg);
	}
}

@keyframes rgl-shine {
	0%, 62% {
		transform: translateX(-70%) rotate(8deg);
		opacity: 0;
	}
	72% {
		opacity: 1;
	}
	100% {
		transform: translateX(70%) rotate(8deg);
		opacity: 0;
	}
}

@keyframes rgl-tiny-bounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-2px) scale(1.08);
	}
}

@keyframes rgl-pulse-token {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 14px 26px rgba(255,122,53,.28);
	}
	50% {
		transform: scale(1.055);
		box-shadow: 0 18px 34px rgba(255,122,53,.36);
	}
}

@keyframes rgl-rainbow-line {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 240% 50%;
	}
}

/* ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {
	.rgl-wrap:before,
	.rgl-wrap:after,
	.rgl-hero:before,
	.rgl-hero:after,
	.rgl-kicker:before,
	.rgl-eyebrow:before,
	.rgl-quick:before,
	.rgl-note:before,
	.rgl-card:before {
		animation: none !important;
	}

	.rgl-btn,
	.rgl-card,
	.rgl-meta,
	.rgl-badge,
	.rgl-related a,
	.rgl-checklist > li,
	.rgl-rule-list > li,
	.rgl-dice-list > li {
		transition: none !important;
	}
}

/* MOBILE */

@media (max-width: 820px) {
	.rgl-wrap {
		padding: 12px !important;
	}

	.rgl-hero {
		border-radius: 22px !important;
		padding: 24px 18px !important;
	}

	.rgl-title {
		font-size: clamp(32px, 11vw, 46px) !important;
	}

	.rgl-lead {
		font-size: 17px !important;
	}

	.rgl-actions {
		flex-direction: column !important;
	}

	.rgl-btn,
	.rgl-card-cta {
		width: 100% !important;
	}

	.rgl-meta-grid,
	.rgl-grid,
	.rgl-grid--2,
	.rgl-related {
		grid-template-columns: 1fr !important;
	}

	.rgl-quick {
		grid-template-columns: 1fr !important;
	}

	.rgl-quick:before {
		width: 54px !important;
		height: 54px !important;
		border-radius: 18px !important;
	}

	.rgl-section {
		border-radius: 20px !important;
		padding: 18px !important;
	}

	.rgl-table th,
	.rgl-table td {
		padding: 12px !important;
		font-size: 14px !important;
	}
}

@media (max-width: 480px) {
	.rgl-wrap {
		margin-left: -4px !important;
		margin-right: -4px !important;
	}

	.rgl-hero:before {
		font-size: 54px !important;
		right: 4px !important;
		top: 8px !important;
	}

	.rgl-kicker,
	.rgl-eyebrow {
		font-size: 11px !important;
	}

	.rgl-section h2 {
		font-size: 25px !important;
	}

	.rgl-card,
	.rgl-meta {
		border-radius: 18px !important;
	}
}

/* =========================================================
   PATCH STORE / CATÉGORIES — alias classes IA + listes shop
   Ajout défensif : ne casse pas les anciennes classes rgl-title/rgl-meta.
   ========================================================= */

/* Alias des classes générées par l'outil hubs :
   .rgl-hero__* doit hériter du rendu premium historique. */
.rgl-hero__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: fit-content !important;
	max-width: 100% !important;
	margin: 0 0 12px !important;
	padding: 7px 12px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.18) !important;
	color: #fff !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 13px !important;
	font-weight: 950 !important;
	letter-spacing: .045em !important;
	text-transform: uppercase !important;
	backdrop-filter: blur(9px) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.20) !important;
	position: relative !important;
	z-index: 1 !important;
}

.rgl-hero__eyebrow:before {
	content: "🎯" !important;
	display: inline-block !important;
	animation: rgl-tiny-bounce 2.6s ease-in-out infinite !important;
}

.rgl-hero__title {
	position: relative !important;
	z-index: 1 !important;
	display: block !important;
	max-width: 840px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: clamp(31px, 5vw, 60px) !important;
	line-height: .98 !important;
	font-weight: 1000 !important;
	letter-spacing: -0.058em !important;
	text-wrap: balance !important;
	text-shadow: 0 5px 22px rgba(0,0,0,.18) !important;
	box-shadow: none !important;
}

.rgl-hero__lead {
	position: relative !important;
	z-index: 1 !important;
	display: block !important;
	max-width: 800px !important;
	margin: 18px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: rgba(255,255,255,.94) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: clamp(17px, 2.1vw, 22px) !important;
	line-height: 1.58 !important;
	font-weight: 560 !important;
	box-shadow: none !important;
}

/* Métas générées en .rgl-meta-item : cards propres même dans catégories et StoreVision. */
.rgl-meta-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
	gap: 12px !important;
	margin-top: 18px !important;
}

.rgl-meta-item {
	position: relative !important;
	display: block !important;
	min-height: 100% !important;
	padding: 16px !important;
	border-radius: 20px !important;
	background: #fff !important;
	border: 1px solid var(--rgl-border) !important;
	box-shadow: 0 10px 20px rgba(21,27,47,.07) !important;
	overflow: hidden !important;
	color: var(--rgl-muted) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 15px !important;
	font-weight: 680 !important;
	line-height: 1.55 !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.rgl-meta-item:before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(120deg, transparent, rgba(36,92,255,.08), transparent) !important;
	transform: translateX(-120%) !important;
	transition: transform .45s ease !important;
	pointer-events: none !important;
}

.rgl-meta-item:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 16px 28px rgba(21,27,47,.10) !important;
	border-color: rgba(36,92,255,.20) !important;
}

.rgl-meta-item:hover:before {
	transform: translateX(120%) !important;
}

.rgl-meta-item strong,
.rgl-meta-item span {
	position: relative !important;
	z-index: 1 !important;
}

.rgl-meta-item strong {
	display: block !important;
	margin: 0 0 5px !important;
	color: var(--rgl-ink) !important;
	font-size: 14px !important;
	font-weight: 1000 !important;
	text-transform: uppercase !important;
	letter-spacing: .035em !important;
}

.rgl-meta-item span {
	display: block !important;
	color: var(--rgl-muted) !important;
	font-weight: 750 !important;
	line-height: 1.55 !important;
}

/* Liste de liens homepage boutique / store : neutralise les listes natives du CMS. */
.rgl-link-list,
.storevision-homepage-content-wrapper .rgl-link-list {
	list-style: none !important;
	padding: 0 !important;
	padding-left: 0 !important;
	margin: 18px 0 0 !important;
	margin-left: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
	gap: 12px !important;
}

.rgl-link-list > li,
.storevision-homepage-content-wrapper .rgl-link-list > li {
	position: relative !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 15px 16px 15px 50px !important;
	border-radius: 18px !important;
	background: #fff !important;
	border: 1px solid rgba(21,27,47,.10) !important;
	box-shadow: 0 9px 18px rgba(21,27,47,.055) !important;
	color: var(--rgl-muted) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 15px !important;
	font-weight: 660 !important;
	line-height: 1.58 !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.rgl-link-list > li::marker,
.storevision-homepage-content-wrapper .rgl-link-list > li::marker {
	content: "" !important;
	font-size: 0 !important;
}

.rgl-link-list > li:before,
.storevision-homepage-content-wrapper .rgl-link-list > li:before {
	content: "🎲" !important;
	position: absolute !important;
	left: 14px !important;
	top: 15px !important;
	display: grid !important;
	place-items: center !important;
	width: 25px !important;
	height: 25px !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, rgba(36,92,255,.14), rgba(123,77,255,.13)) !important;
	font-size: 15px !important;
	box-shadow: 0 8px 15px rgba(36,92,255,.12) !important;
}

.rgl-link-list > li:hover,
.storevision-homepage-content-wrapper .rgl-link-list > li:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 16px 28px rgba(21,27,47,.10) !important;
	border-color: rgba(36,92,255,.20) !important;
}

.rgl-link-list > li > a,
.storevision-homepage-content-wrapper .rgl-link-list > li > a {
	color: var(--rgl-blue) !important;
	font-weight: 950 !important;
	text-decoration: none !important;
	text-underline-offset: 3px !important;
}

.rgl-link-list > li > a:hover,
.storevision-homepage-content-wrapper .rgl-link-list > li > a:hover {
	color: var(--rgl-blue-dark) !important;
	text-decoration: underline !important;
}

/* Wrappers StoreVision : garde le bloc propre dans les containers boutique sans toucher au métier. */
.storevision-homepage-content-wrapper .rgl-wrap,
#catcontent .rgl-wrap,
.ssc-topcontent-nextgen .rgl-wrap,
.ssc-bottomcontent-nextgen .rgl-wrap {
	width: 100% !important;
	max-width: 1120px !important;
	box-sizing: border-box !important;
}

@media (prefers-reduced-motion: reduce) {
	.rgl-hero__eyebrow:before,
	.rgl-meta-item:before {
		animation: none !important;
		transition: none !important;
	}

	.rgl-meta-item,
	.rgl-link-list > li {
		transition: none !important;
	}
}

@media (max-width: 820px) {
	.rgl-hero__title {
		font-size: clamp(32px, 11vw, 46px) !important;
	}

	.rgl-hero__lead {
		font-size: 17px !important;
	}

	.rgl-meta-grid,
	.rgl-link-list,
	.storevision-homepage-content-wrapper .rgl-link-list {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 480px) {
	.rgl-hero__eyebrow {
		font-size: 11px !important;
	}

	.rgl-meta-item,
	.rgl-link-list > li,
	.storevision-homepage-content-wrapper .rgl-link-list > li {
		border-radius: 18px !important;
	}
}

/* =========================================================
   PATCH DA REGLE.NET — surcouche jeu / boutique / catégories
   Scope volontairement limité aux blocs .rgl-wrap et wrappers StoreVision.
   À placer en fin de /newrde/regle-game.css
   ========================================================= */

.rgl-wrap.rgl-theme-game {
	border-radius: 34px !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,.74), rgba(245,248,255,.92)) !important;
	box-shadow:
		0 24px 70px rgba(21,27,47,.13),
		inset 0 0 0 1px rgba(255,255,255,.72) !important;
}

.rgl-wrap.rgl-theme-game:before {
	background:
		radial-gradient(circle at 8% 9%, rgba(255,210,63,.45), transparent 27%),
		radial-gradient(circle at 86% 7%, rgba(255,79,175,.30), transparent 25%),
		radial-gradient(circle at 88% 88%, rgba(32,167,102,.22), transparent 28%),
		radial-gradient(circle at 12% 92%, rgba(36,92,255,.22), transparent 30%),
		linear-gradient(180deg, #fffdf7 0%, #f2f6ff 100%) !important;
}

.rgl-wrap.rgl-theme-game:after {
	opacity: .88 !important;
	background-image:
		linear-gradient(90deg, rgba(36,92,255,.055) 1px, transparent 1px),
		linear-gradient(180deg, rgba(36,92,255,.055) 1px, transparent 1px),
		radial-gradient(circle, rgba(255,210,63,.26) 2px, transparent 2.5px) !important;
	background-size: 34px 34px, 34px 34px, 68px 68px !important;
}

/* Hero plus “boîte de jeu” : lisible boutique + catégories */
.rgl-wrap .rgl-hero {
	isolation: isolate !important;
	border: 1px solid rgba(255,255,255,.78) !important;
	outline: 1px solid rgba(36,92,255,.10) !important;
	outline-offset: 5px !important;
	background:
		radial-gradient(circle at 8% 12%, rgba(255,210,63,.50), transparent 27%),
		radial-gradient(circle at 92% 16%, rgba(255,79,175,.38), transparent 28%),
		linear-gradient(135deg, #245cff 0%, #6d4dff 52%, #ff4faf 100%) !important;
	box-shadow:
		0 28px 64px rgba(36,92,255,.26),
		0 12px 26px rgba(123,77,255,.18),
		inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.rgl-wrap .rgl-hero:before {
	content: "🎲 🃏 ♟️ ★" !important;
	right: clamp(6px, 3vw, 34px) !important;
	top: clamp(6px, 2vw, 16px) !important;
	font-size: clamp(54px, 10vw, 120px) !important;
	letter-spacing: 10px !important;
	opacity: .18 !important;
	filter: drop-shadow(0 16px 18px rgba(0,0,0,.18)) !important;
}

.rgl-wrap .rgl-hero__eyebrow,
.rgl-wrap .rgl-kicker,
.rgl-wrap .rgl-eyebrow {
	background: rgba(255,255,255,.20) !important;
	border: 1px solid rgba(255,255,255,.32) !important;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.16),
		0 10px 22px rgba(0,0,0,.10) !important;
	color: #fff !important;
}

.rgl-wrap .rgl-hero__title,
.rgl-wrap .rgl-title {
	max-width: 900px !important;
	font-size: clamp(34px, 5.5vw, 68px) !important;
	line-height: .94 !important;
	letter-spacing: -.065em !important;
	text-shadow:
		0 4px 0 rgba(21,27,47,.10),
		0 14px 32px rgba(0,0,0,.26) !important;
	filter: saturate(1.03) !important;
}

.rgl-wrap .rgl-hero__title:after,
.rgl-wrap .rgl-title:after {
	content: "" !important;
	display: block !important;
	width: min(210px, 72%) !important;
	height: 8px !important;
	margin-top: 16px !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, var(--rgl-yellow), #fff078, rgba(255,255,255,.05)) !important;
	box-shadow: 0 12px 22px rgba(255,210,63,.28) !important;
}

.rgl-wrap .rgl-hero__lead,
.rgl-wrap .rgl-lead {
	max-width: 860px !important;
	padding: 16px 18px !important;
	border-radius: 20px !important;
	background: rgba(255,255,255,.13) !important;
	border: 1px solid rgba(255,255,255,.18) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
	backdrop-filter: blur(8px) !important;
}

/* Sections : look cartes / plateaux */
.rgl-wrap .rgl-section {
	border-radius: 26px !important;
	border: 1px solid rgba(21,27,47,.10) !important;
	background:
		linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.94)) !important;
	box-shadow:
		0 18px 42px rgba(21,27,47,.10),
		inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.rgl-wrap .rgl-section--soft {
	background:
		radial-gradient(circle at 0 0, rgba(255,210,63,.16), transparent 32%),
		linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,249,255,.96)) !important;
}

.rgl-wrap .rgl-section--green {
	background:
		radial-gradient(circle at 0 0, rgba(32,167,102,.15), transparent 33%),
		linear-gradient(180deg, rgba(248,255,251,.98), rgba(239,255,247,.94)) !important;
	border-color: rgba(32,167,102,.20) !important;
}

.rgl-wrap .rgl-section--warning {
	background:
		radial-gradient(circle at 0 0, rgba(255,210,63,.24), transparent 34%),
		linear-gradient(180deg, rgba(255,253,244,.99), rgba(255,248,224,.94)) !important;
	border-color: rgba(255,210,63,.46) !important;
}

.rgl-wrap .rgl-section h2 {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 14px !important;
	color: var(--rgl-ink) !important;
	letter-spacing: -.035em !important;
}

.rgl-wrap .rgl-section h2:before {
	content: "🎯" !important;
	flex: 0 0 auto !important;
	display: inline-grid !important;
	place-items: center !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 14px !important;
	background: linear-gradient(135deg, var(--rgl-yellow), #fff078) !important;
	box-shadow: 0 10px 18px rgba(255,210,63,.34) !important;
	font-size: 19px !important;
}

.rgl-wrap .rgl-section--green h2:before { content: "✅" !important; }
.rgl-wrap .rgl-section--warning h2:before { content: "⚠️" !important; }

/* Cartes internes : style jeu de société premium */
.rgl-wrap .rgl-card,
.rgl-wrap .rgl-card--soft {
	position: relative !important;
	border-radius: 22px !important;
	border: 1px solid rgba(21,27,47,.10) !important;
	background:
		linear-gradient(180deg, #ffffff, #f8faff) !important;
	box-shadow:
		0 14px 30px rgba(21,27,47,.085),
		inset 0 1px 0 rgba(255,255,255,.95) !important;
	overflow: hidden !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.rgl-wrap .rgl-card:before,
.rgl-wrap .rgl-card--soft:before {
	content: "" !important;
	position: absolute !important;
	inset: 0 0 auto 0 !important;
	height: 6px !important;
	background: linear-gradient(90deg, var(--rgl-blue), var(--rgl-purple), var(--rgl-pink), var(--rgl-yellow)) !important;
}

.rgl-wrap .rgl-card:hover,
.rgl-wrap .rgl-card--soft:hover {
	transform: translateY(-4px) rotate(-.25deg) !important;
	box-shadow: 0 22px 42px rgba(21,27,47,.13) !important;
	border-color: rgba(36,92,255,.20) !important;
}

.rgl-wrap .rgl-card h3 {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	color: var(--rgl-ink) !important;
}

.rgl-wrap .rgl-card h3:before {
	content: "🎲" !important;
	font-size: 18px !important;
}

/* Blocs meta — look tuiles de plateau */
.rgl-wrap .rgl-meta-grid {
	gap: 14px !important;
	margin-top: 20px !important;
}

.rgl-wrap .rgl-meta-item,
.rgl-wrap .rgl-meta {
	border-radius: 22px !important;
	background:
		radial-gradient(circle at 100% 0, rgba(255,210,63,.18), transparent 34%),
		linear-gradient(180deg, #ffffff, #f7f9ff) !important;
	border: 1px solid rgba(36,92,255,.12) !important;
	box-shadow:
		0 14px 28px rgba(21,27,47,.085),
		inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.rgl-wrap .rgl-meta-item:nth-child(1) strong:before { content: "👥 "; }
.rgl-wrap .rgl-meta-item:nth-child(2) strong:before { content: "🏁 "; }
.rgl-wrap .rgl-meta-item:nth-child(3) strong:before { content: "📚 "; }

.rgl-wrap .rgl-meta-item strong,
.rgl-wrap .rgl-meta strong {
	color: var(--rgl-blue-dark) !important;
	font-size: 13px !important;
}

.rgl-wrap .rgl-meta-item span,
.rgl-wrap .rgl-meta span {
	color: #333b50 !important;
	font-size: 15px !important;
}

/* Listes : checklists + liens boutique */
.rgl-wrap .rgl-checklist,
.rgl-wrap .rgl-rule-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.rgl-wrap .rgl-checklist > li,
.rgl-wrap .rgl-rule-list > li {
	position: relative !important;
	margin: 10px 0 !important;
	padding: 13px 14px 13px 48px !important;
	border-radius: 18px !important;
	background: #fff !important;
	border: 1px solid rgba(21,27,47,.09) !important;
	box-shadow: 0 8px 18px rgba(21,27,47,.055) !important;
	font-weight: 720 !important;
}

.rgl-wrap .rgl-checklist > li:before,
.rgl-wrap .rgl-rule-list > li:before {
	position: absolute !important;
	left: 14px !important;
	top: 12px !important;
	display: grid !important;
	place-items: center !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 10px !important;
	background: rgba(32,167,102,.14) !important;
	color: var(--rgl-green) !important;
	font-weight: 1000 !important;
}

.rgl-wrap .rgl-checklist > li:before { content: "✓" !important; }
.rgl-wrap .rgl-rule-list > li:before { content: "★" !important; color: var(--rgl-orange) !important; background: rgba(255,122,53,.14) !important; }

.rgl-wrap .rgl-link-list,
.storevision-homepage-content-wrapper .rgl-link-list {
	gap: 14px !important;
}

.rgl-wrap .rgl-link-list > li,
.storevision-homepage-content-wrapper .rgl-link-list > li {
	border-radius: 22px !important;
	background:
		radial-gradient(circle at 100% 0, rgba(255,210,63,.16), transparent 36%),
		linear-gradient(180deg, #ffffff, #f8faff) !important;
	border-color: rgba(36,92,255,.12) !important;
	box-shadow: 0 14px 26px rgba(21,27,47,.075) !important;
}

.rgl-wrap .rgl-link-list > li:before,
.storevision-homepage-content-wrapper .rgl-link-list > li:before {
	content: "🧩" !important;
	background: linear-gradient(135deg, rgba(255,210,63,.35), rgba(36,92,255,.16)) !important;
}

.rgl-wrap .rgl-link-list > li > a,
.storevision-homepage-content-wrapper .rgl-link-list > li > a {
	display: inline !important;
	padding: 2px 4px !important;
	border-radius: 8px !important;
	background: linear-gradient(180deg, transparent 55%, rgba(255,210,63,.38) 0) !important;
}

/* Tables : style plateau lisible */
.rgl-wrap .rgl-table-wrap {
	border-radius: 22px !important;
	box-shadow: 0 14px 32px rgba(21,27,47,.09) !important;
}

.rgl-wrap .rgl-table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: #fff !important;
}

.rgl-wrap .rgl-table th {
	background: linear-gradient(135deg, var(--rgl-blue), var(--rgl-purple)) !important;
	color: #fff !important;
	font-weight: 1000 !important;
	letter-spacing: .015em !important;
}

.rgl-wrap .rgl-table td {
	background: rgba(255,255,255,.96) !important;
	border-bottom: 1px solid rgba(21,27,47,.075) !important;
}

.rgl-wrap .rgl-table tbody tr:nth-child(even) td {
	background: #f8faff !important;
}

/* Variantes store/home : petit accent achat sans casser les catégories éditoriales */
.rgl-wrap.rgl-store-home .rgl-hero,
.storevision-homepage-content-wrapper .rgl-store-home .rgl-hero {
	background:
		radial-gradient(circle at 9% 12%, rgba(255,210,63,.56), transparent 27%),
		radial-gradient(circle at 92% 18%, rgba(32,167,102,.34), transparent 27%),
		linear-gradient(135deg, #153ab0 0%, #245cff 45%, #20a766 100%) !important;
}

.rgl-wrap.rgl-store-cat .rgl-hero {
	background:
		radial-gradient(circle at 9% 12%, rgba(255,210,63,.52), transparent 26%),
		radial-gradient(circle at 92% 18%, rgba(255,122,53,.34), transparent 27%),
		linear-gradient(135deg, #245cff 0%, #7b4dff 48%, #ff7a35 100%) !important;
}

.rgl-wrap.rgl-cat-before .rgl-hero,
.rgl-wrap.rgl-cat-after .rgl-hero {
	background:
		radial-gradient(circle at 8% 12%, rgba(255,210,63,.50), transparent 27%),
		radial-gradient(circle at 92% 15%, rgba(255,79,175,.34), transparent 28%),
		linear-gradient(135deg, #245cff 0%, #7b4dff 56%, #ff4faf 100%) !important;
}

/* Anti-conflits wrappers boutique/catégories */
.storevision-homepage-content-wrapper .rgl-wrap,
.storevision-cat-content-wrapper .rgl-wrap,
.rgl-store-home,
.rgl-store-cat,
.rgl-cat-before,
.rgl-cat-after {
	clear: both !important;
}

@media (prefers-reduced-motion: reduce) {
	.rgl-wrap .rgl-card,
	.rgl-wrap .rgl-card--soft,
	.rgl-wrap .rgl-meta-item,
	.rgl-wrap .rgl-link-list > li {
		transition: none !important;
		transform: none !important;
	}
}

@media (max-width: 820px) {
	.rgl-wrap.rgl-theme-game {
		border-radius: 24px !important;
		padding: 12px !important;
	}

	.rgl-wrap .rgl-hero {
		outline-offset: 3px !important;
	}

	.rgl-wrap .rgl-hero__title,
	.rgl-wrap .rgl-title {
		font-size: clamp(32px, 10vw, 48px) !important;
	}

	.rgl-wrap .rgl-hero__lead,
	.rgl-wrap .rgl-lead {
		padding: 13px 14px !important;
	}

	.rgl-wrap .rgl-section h2 {
		align-items: flex-start !important;
	}
}

@media (max-width: 480px) {
	.rgl-wrap .rgl-section h2:before {
		width: 32px !important;
		height: 32px !important;
		border-radius: 12px !important;
		font-size: 16px !important;
	}

	.rgl-wrap .rgl-card:hover,
	.rgl-wrap .rgl-card--soft:hover {
		transform: none !important;
	}
}

/* =========================================================
   REGLE.NET — PATCH HP CARDS + CONTRASTE CTA
   À placer tout en bas de /newrde/regle-game.css
   ========================================================= */

/* 1) HP : éviter les grilles à 3 colonnes trop serrées dans les blocs éditoriaux */
.rgl-theme-game.rgl-home-before .rgl-grid,
.rgl-theme-game.rgl-home-after .rgl-grid,
.rgl-theme-game.rgl-home-fwack .rgl-grid,
.rgl-theme-game.rgl-home-before .rgl-meta-grid,
.rgl-theme-game.rgl-home-after .rgl-meta-grid,
.rgl-theme-game.rgl-home-fwack .rgl-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Sécurité pour éviter les cartes écrasées */
.rgl-theme-game.rgl-home-before .rgl-card,
.rgl-theme-game.rgl-home-after .rgl-card,
.rgl-theme-game.rgl-home-fwack .rgl-card,
.rgl-theme-game.rgl-home-before .rgl-meta-item,
.rgl-theme-game.rgl-home-after .rgl-meta-item,
.rgl-theme-game.rgl-home-fwack .rgl-meta-item {
  min-width: 0 !important;
  width: auto !important;
}

/* Mobile très étroit : on repasse à 1 colonne pour ne pas casser la lecture */
@media (max-width: 520px) {
  .rgl-theme-game.rgl-home-before .rgl-grid,
  .rgl-theme-game.rgl-home-after .rgl-grid,
  .rgl-theme-game.rgl-home-fwack .rgl-grid,
  .rgl-theme-game.rgl-home-before .rgl-meta-grid,
  .rgl-theme-game.rgl-home-after .rgl-meta-grid,
  .rgl-theme-game.rgl-home-fwack .rgl-meta-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2) CTA : contraste fort et stable sur toute la homepage */
.rgl-theme-game .rgl-btn,
.rgl-theme-game .rgl-card-cta,
.rgl-theme-game a.rgl-card-cta,
.rgl-theme-game .rgl-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: #245cff !important;
  border: 2px solid #245cff !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 10px 22px rgba(36, 92, 255, .24) !important;
  opacity: 1 !important;
}

/* États liens : évite le violet visited / hover illisible */
.rgl-theme-game .rgl-btn:visited,
.rgl-theme-game .rgl-card-cta:visited,
.rgl-theme-game a.rgl-card-cta:visited,
.rgl-theme-game .rgl-actions a:visited,
.rgl-theme-game .rgl-btn:hover,
.rgl-theme-game .rgl-card-cta:hover,
.rgl-theme-game a.rgl-card-cta:hover,
.rgl-theme-game .rgl-actions a:hover,
.rgl-theme-game .rgl-btn:focus,
.rgl-theme-game .rgl-card-cta:focus,
.rgl-theme-game a.rgl-card-cta:focus,
.rgl-theme-game .rgl-actions a:focus {
  background: #173fdb !important;
  border-color: #173fdb !important;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* CTA secondaire / ghost : fond clair + texte foncé lisible */
.rgl-theme-game .rgl-btn--ghost,
.rgl-theme-game a.rgl-btn--ghost {
  background: #ffffff !important;
  border: 2px solid rgba(21, 27, 47, .18) !important;
  color: #151b2f !important;
  box-shadow: 0 10px 22px rgba(21, 27, 47, .12) !important;
}

.rgl-theme-game .rgl-btn--ghost:visited,
.rgl-theme-game a.rgl-btn--ghost:visited,
.rgl-theme-game .rgl-btn--ghost:hover,
.rgl-theme-game a.rgl-btn--ghost:hover,
.rgl-theme-game .rgl-btn--ghost:focus,
.rgl-theme-game a.rgl-btn--ghost:focus {
  background: #f4f7ff !important;
  border-color: rgba(36, 92, 255, .35) !important;
  color: #151b2f !important;
}

/* CTA dans cartes : largeur propre, pas de bouton minuscule illisible */
.rgl-theme-game .rgl-card .rgl-card-cta {
  width: 100% !important;
  margin-top: auto !important;
  text-align: center !important;
}

/* 3) Listes de liens : garder les liens lisibles mais pas façon CTA */
.rgl-theme-game .rgl-link-list a {
  color: #173fdb !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.rgl-theme-game .rgl-link-list a:hover,
.rgl-theme-game .rgl-link-list a:focus {
  color: #102a94 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 4) Tables : contraste liens dans les cellules */
.rgl-theme-game .rgl-table a {
  color: #173fdb !important;
  font-weight: 900 !important;
}

.rgl-theme-game .rgl-table a:hover,
.rgl-theme-game .rgl-table a:focus {
  color: #102a94 !important;
}


/* =========================================================
   REGLE.NET — PATCH AUTO GRILLES rgl-grid + rgl-meta-grid
   Sans modification HTML
   ========================================================= */

.rgl-theme-game .rgl-grid,
.rgl-theme-game .rgl-meta-grid {
  display: grid !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Exactement 3 éléments => 3 colonnes */
.rgl-theme-game .rgl-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
.rgl-theme-game .rgl-meta-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Exactement 4 éléments => 2 colonnes */
.rgl-theme-game .rgl-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
.rgl-theme-game .rgl-meta-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Sécurité enfants */
.rgl-theme-game .rgl-grid > *,
.rgl-theme-game .rgl-meta-grid > * {
  min-width: 0 !important;
  width: auto !important;
}

/* Tablette : 3 reste 3, 4 reste 2 */
@media (max-width: 900px) {
  .rgl-theme-game .rgl-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .rgl-theme-game .rgl-meta-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .rgl-theme-game .rgl-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .rgl-theme-game .rgl-meta-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile : 3 cartes passent en 1 colonne */
@media (max-width: 560px) {
  .rgl-theme-game .rgl-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .rgl-theme-game .rgl-meta-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: 1fr !important;
  }

  .rgl-theme-game .rgl-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .rgl-theme-game .rgl-meta-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Très petit mobile : 4 cartes repassent en 1 colonne */
@media (max-width: 360px) {
  .rgl-theme-game .rgl-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .rgl-theme-game .rgl-meta-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   CTA : contraste fort partout dans les blocs Regle
   ========================================================= */

.rgl-theme-game .rgl-btn,
.rgl-theme-game .rgl-card-cta,
.rgl-theme-game a.rgl-card-cta,
.rgl-theme-game .rgl-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: #245cff !important;
  border: 2px solid #245cff !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 10px 22px rgba(36, 92, 255, .24) !important;
  opacity: 1 !important;
}

/* visited / hover / focus : jamais violet, jamais gris illisible */
.rgl-theme-game .rgl-btn:visited,
.rgl-theme-game .rgl-card-cta:visited,
.rgl-theme-game a.rgl-card-cta:visited,
.rgl-theme-game .rgl-actions a:visited,
.rgl-theme-game .rgl-btn:hover,
.rgl-theme-game .rgl-card-cta:hover,
.rgl-theme-game a.rgl-card-cta:hover,
.rgl-theme-game .rgl-actions a:hover,
.rgl-theme-game .rgl-btn:focus,
.rgl-theme-game .rgl-card-cta:focus,
.rgl-theme-game a.rgl-card-cta:focus,
.rgl-theme-game .rgl-actions a:focus {
  background: #173fdb !important;
  border-color: #173fdb !important;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* CTA ghost : fond clair, texte foncé */
.rgl-theme-game .rgl-btn--ghost,
.rgl-theme-game a.rgl-btn--ghost {
  background: #ffffff !important;
  border: 2px solid rgba(21, 27, 47, .20) !important;
  color: #151b2f !important;
  box-shadow: 0 10px 22px rgba(21, 27, 47, .12) !important;
}

.rgl-theme-game .rgl-btn--ghost:visited,
.rgl-theme-game a.rgl-btn--ghost:visited,
.rgl-theme-game .rgl-btn--ghost:hover,
.rgl-theme-game a.rgl-btn--ghost:hover,
.rgl-theme-game .rgl-btn--ghost:focus,
.rgl-theme-game a.rgl-btn--ghost:focus {
  background: #f4f7ff !important;
  border-color: rgba(36, 92, 255, .38) !important;
  color: #151b2f !important;
}

/* CTA dans les cards : largeur propre */
.rgl-theme-game .rgl-card .rgl-card-cta {
  width: 100% !important;
  margin-top: auto !important;
}

/* Liens simples : lisibles, mais pas transformés en boutons */
.rgl-theme-game .rgl-link-list a,
.rgl-theme-game .rgl-table a {
  color: #173fdb !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.rgl-theme-game .rgl-link-list a:visited,
.rgl-theme-game .rgl-table a:visited {
  color: #173fdb !important;
}

.rgl-theme-game .rgl-link-list a:hover,
.rgl-theme-game .rgl-link-list a:focus,
.rgl-theme-game .rgl-table a:hover,
.rgl-theme-game .rgl-table a:focus {
  color: #102a94 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}