/* ============================================================
   CTA « Rejoindre les Rapetous » : boutons (cx-*), sections (ct-b*), et mise en page de la page de test
   ============================================================ */

/* Permanent Marker · latin */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/permanent-marker-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ct { padding-bottom: 80px; }
.ct-intro { padding-top: 40px; max-width: 820px; }
.ct-h1 { font-family: var(--rcm-head); color: var(--blue-800); font-size: clamp(2rem, 6vw, 3rem); text-transform: uppercase; margin: 6px 0 10px; line-height: 1.05; }
.ct-kicker { font-family: var(--rcm-head); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; color: var(--gold-700); margin: 0; }
.ct-part { font-family: var(--rcm-head); color: var(--blue-700); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.5rem; margin: 56px 0 22px; padding-bottom: 8px; border-bottom: 2px solid oklch(0.73 0.108 84 / 0.35); }
.ct-tag { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--blue-800); color: var(--gold-300); font-family: var(--rcm-head); font-size: 0.85rem; letter-spacing: 0.06em; }
.ct-label { display: flex; align-items: center; gap: 12px; margin: 48px auto 16px; font-weight: 600; color: var(--blue-800); }
.ct-ico { width: 1.15em; height: 1.15em; flex: none; }
.ct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.ct-row--center { justify-content: center; }

/* --- cartes de la partie A --- */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.ct-card { background: var(--white); border-radius: 18px; box-shadow: var(--sh-sm); overflow: hidden; display: flex; flex-direction: column; border: 1px solid oklch(0.35 0.14 264 / 0.08); }
.ct-card__head { padding: 18px 20px 6px; }
.ct-card__head h3 { font-family: var(--rcm-head); color: var(--blue-800); font-size: 1.15rem; margin: 10px 0 4px; }
.ct-card__head p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.ct-stage {
	flex: 1; display: grid; place-items: center; min-height: 200px; margin: 14px; border-radius: 14px; padding: 26px 16px;
	background: radial-gradient(120% 90% at 80% 0%, oklch(0.93 0.03 264), transparent 60%), var(--paper);
}
.ct-stage--photo { background: linear-gradient(0deg, oklch(0.19 0.075 264 / 0.55), oklch(0.19 0.075 264 / 0.15)), var(--photo) center 60% / cover; }
.ct-stage__cta { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ct-sub { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-500); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ct-sub:hover { color: var(--blue-900); }
.ct-sub--light, .ct-stage--photo .ct-sub { color: var(--white); }

/* socle commun des boutons de test */
[class^="ct-a"] { font-family: var(--rcm-head); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 1.02rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease); }

/* A1 : pilule bleue + pastille or */
.ct-a1 { background: var(--blue-700); color: var(--white); padding: 7px 7px 7px 26px; border-radius: 999px; gap: 16px; box-shadow: 0 10px 24px oklch(0.35 0.14 264 / 0.28); }
.ct-a1 span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-400); color: var(--blue-900); overflow: hidden; }
.ct-a1 .ct-ico { transition: translate 0.35s var(--ease); }
.ct-a1:hover { background: var(--blue-800); }
.ct-a1:hover .ct-ico { translate: 4px 0; }

/* A2 : or plat */
.ct-a2 { background: var(--gold-400); color: var(--blue-950); padding: 16px 26px; border-radius: 12px; }
.ct-a2:hover { background: var(--gold-300); transform: translateY(-2px); }
.ct-a2:hover .ct-ico { translate: 3px 0; }
.ct-a2 .ct-ico { transition: translate 0.3s var(--ease); }

/* A3 : bleu nuit + liseré or */
.ct-a3 { background: var(--blue-950); color: var(--gold-300); padding: 17px 32px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px oklch(0.79 0.10 86 / 0.7), 0 12px 26px oklch(0.19 0.075 264 / 0.3); letter-spacing: 0.1em; }
.ct-a3:hover { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--gold-300), 0 16px 30px oklch(0.19 0.075 264 / 0.38); transform: translateY(-2px); }

/* A4 : contour, remplissage au survol */
.ct-a4 { position: relative; overflow: hidden; color: var(--blue-700); padding: 15px 28px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--blue-700); isolation: isolate; }
.ct-a4::before { content: ""; position: absolute; inset: 0; background: var(--blue-700); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); z-index: -1; }
.ct-a4:hover { color: var(--white); }
.ct-a4:hover::before { transform: scaleX(1); }

/* A5 : ballon intégré */
.ct-a5 { background: var(--white); color: var(--blue-800); padding: 8px 26px 8px 10px; border-radius: 999px; box-shadow: var(--sh-md); }
.ct-a5 img { width: 40px; height: 40px; transition: rotate 0.6s var(--ease); }
.ct-a5:hover img { rotate: -200deg; }
.ct-a5:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }

/* A6 : bloc décalé */
.ct-a6 { background: var(--gold-400); color: var(--blue-950); padding: 16px 28px; border: 2px solid var(--blue-950); border-radius: 4px; box-shadow: 6px 6px 0 var(--blue-950); font-size: 1.1rem; }
.ct-a6:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--blue-950); }
.ct-a6:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--blue-950); }

/* A7 : deux lignes */
.ct-a7 { flex-direction: column; gap: 2px; background: var(--blue-700); color: var(--white); padding: 13px 34px; border-radius: 16px; box-shadow: 0 10px 24px oklch(0.35 0.14 264 / 0.28); }
.ct-a7 small { font-family: var(--rcm-body); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.85rem; color: var(--gold-300); }
.ct-a7:hover { transform: translateY(-2px); background: var(--blue-800); }

/* A8 : lien éditorial XXL */
.ct-a8 { white-space: nowrap; font-size: clamp(1.3rem, 5.4vw, 1.6rem); color: var(--blue-800); padding: 4px 0; background: linear-gradient(var(--gold-500), var(--gold-500)) left bottom / 100% 3px no-repeat; }
.ct-a8 .ct-ico { transition: translate 0.35s var(--ease); }
.ct-a8:hover { background-size: 40% 3px; }
.ct-a8:hover .ct-ico { translate: 8px 0; }

/* A9 : verre dépoli */
.ct-a9 { color: var(--white); padding: 16px 28px; border-radius: 999px; background: oklch(1 0 0 / 0.16); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.45), 0 10px 30px oklch(0.19 0.075 264 / 0.35); }
.ct-a9:hover { background: oklch(1 0 0 / 0.26); }

/* A10 : halo doré animé */
@property --ct-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ct-a10 { position: relative; padding: 2px; border-radius: 999px; background: conic-gradient(from var(--ct-angle), var(--gold-300), var(--blue-700) 30%, var(--gold-500) 55%, var(--blue-700) 80%, var(--gold-300)); animation: ct-spin 4s linear infinite; box-shadow: 0 10px 26px oklch(0.35 0.14 264 / 0.3); }
.ct-a10 span { display: block; padding: 15px 30px; border-radius: 999px; background: var(--blue-800); color: var(--white); }
.ct-a10:hover span { background: var(--blue-700); }
@keyframes ct-spin { to { --ct-angle: 360deg; } }

/* A11 : duo de boutons */
.ct-card--a11 .ct-stage__cta { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ct-a11 { background: var(--blue-700); color: var(--white); padding: 14px 22px; border-radius: 999px; font-size: 0.95rem; }
.ct-a11--alt { background: oklch(0.35 0.14 264 / 0.08); color: var(--blue-700); }
.ct-a11:hover { transform: translateY(-2px); }

/* A12 : minimal carré */
.ct-a12 { background: var(--blue-800); color: var(--white); padding: 15px 22px; border-radius: 2px; font-weight: 500; letter-spacing: 0.12em; font-size: 0.95rem; }
.ct-a12 .ct-ico { color: var(--gold-400); transition: translate 0.3s var(--ease); }
.ct-a12:hover { background: var(--blue-950); }
.ct-a12:hover .ct-ico { translate: 4px 0; }

/* ---------------- Partie B ---------------- */
:where(.ct) :where(h2:not(.ct-part)) { font-family: var(--rcm-head); text-transform: uppercase; line-height: 1; margin: 0; }

/* B1 */
.ct-b1 { position: relative; overflow: hidden; background: var(--blue-800); color: var(--white); padding: clamp(48px, 8vw, 96px) 0; }
.ct-b1::after { content: ""; position: absolute; right: -60px; top: 50%; width: 360px; height: 360px; translate: 0 -50%; background: var(--ball) center / contain no-repeat; opacity: 0.08; rotate: -20deg; }
.ct-b1__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.ct-b1 h2 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
.ct-b1 h2 em { font-style: normal; color: var(--gold-400); }
.ct-b1 p { color: oklch(1 0 0 / 0.8); font-size: 1.1rem; margin: 0 0 22px; }

/* B2 */
.ct-b2 { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 28px; overflow: hidden; background: var(--white); box-shadow: var(--sh-md); }
.ct-b2 img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.ct-b2__txt { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ct-b2 h2 { color: var(--blue-800); font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.ct-b2 p { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* B3 */
.ct-b3 { text-align: center; padding-top: 30px; padding-bottom: 10px; }
.ct-b3 h2 { color: var(--blue-800); font-size: clamp(2.2rem, 6vw, 4rem); }
.ct-b3 ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 0; margin: 28px 0 32px; }
.ct-b3 li { display: flex; flex-direction: column; min-width: 150px; padding: 16px 20px; border-radius: 16px; background: var(--white); box-shadow: var(--sh-sm); }
.ct-b3 strong { font-family: var(--rcm-head); font-size: 2rem; color: var(--blue-700); line-height: 1.1; }
.ct-b3 span { color: var(--gold-700); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* B4 */
.ct-b4 { background: var(--gold-400); border-block: 2px solid var(--blue-950); padding: 26px 0 30px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ct-b4__track { display: flex; width: max-content; animation: ct-marquee 26s linear infinite; }
.ct-b4__track span { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--rcm-head); text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.6rem); color: var(--blue-950); white-space: nowrap; }
.ct-b4__track i { width: 0.6em; height: 0.6em; background: var(--ball) center / contain no-repeat; }
.ct-b4 .ct-a6 { background: var(--white); }
@keyframes ct-marquee { to { transform: translateX(-50%); } }

/* B5 */
.ct-b5__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.ct-b5 h2 { color: var(--blue-800); font-size: clamp(1.9rem, 4.4vw, 3rem); max-width: 14ch; }
.ct-b5 ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ct-b5 li { position: relative; padding: 24px; border-radius: 20px; background: var(--white); box-shadow: var(--sh-sm); }
.ct-b5 li > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-400); color: var(--blue-950); font-family: var(--rcm-head); font-size: 1.2rem; }
.ct-b5 h3 { font-family: var(--rcm-head); color: var(--blue-800); text-transform: uppercase; margin: 14px 0 4px; font-size: 1.3rem; }
.ct-b5 p { margin: 0; color: var(--muted); }

/* B6 */
.ct-b6 { position: relative; overflow: hidden; text-align: center; border-radius: 28px; padding: clamp(48px, 8vw, 90px) 24px; background: radial-gradient(70% 90% at 50% 0%, var(--blue-500), transparent 70%), var(--grad-blue); color: var(--white); box-shadow: var(--sh-lg); }
.ct-b6__word { position: absolute; left: 50%; bottom: -0.28em; translate: -50% 0; font-family: var(--rcm-head); font-size: clamp(9rem, 30vw, 22rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px oklch(1 0 0 / 0.12); pointer-events: none; }
.ct-b6 > :not(.ct-b6__word) { position: relative; }
.ct-b6 .ct-kicker { color: var(--gold-300); }
.ct-b6 h2 { font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 12px 0 30px; }

/* B7 */
.ct-b7 { display: flex; align-items: center; gap: 20px; padding: 18px 18px 18px 22px; border-radius: 20px; background: var(--white); box-shadow: var(--sh-sm); border-left: 5px solid var(--gold-400); }
.ct-b7 p { margin: 0; flex: 1; font-size: 1.05rem; }
.ct-b7 strong { color: var(--blue-800); }

/* ---------------- Mobile ---------------- */
@media (max-width: 760px) {
	.ct-grid { grid-template-columns: 1fr; }
	.ct-b1__in, .ct-b2 { grid-template-columns: 1fr; }
	.ct-b2 img { min-height: 220px; max-height: 260px; }
	.ct-b5 ol { grid-template-columns: 1fr; }
	.ct-b7 { flex-wrap: wrap; }
	.ct-b7 img { width: 44px; height: 44px; }
	.ct-b7 p { flex-basis: calc(100% - 70px); }
	.ct-b7 .ct-a12 { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ct-a10, .ct-b4__track { animation: none; }
}

/* ============================================================
   Partie A, version rugby (C1 à C12)
   ============================================================ */
.ct-stage { min-height: 250px; padding-inline: 8px; }
[class^="cx-"] { text-decoration: none; }
[data-cx] { font-family: var(--rcm-head); text-transform: uppercase; }

/* C1 : ballon */
.cx-ball {
	position: relative; display: grid; place-items: center; width: 290px; height: 150px; border-radius: 50%; overflow: hidden;
	background: radial-gradient(65% 55% at 38% 30%, #fff, oklch(0.95 0.008 258) 55%, oklch(0.84 0.02 258));
	box-shadow: inset -12px -16px 26px oklch(0.35 0.14 264 / 0.2), 0 20px 30px -8px oklch(0.19 0.075 264 / 0.35);
	color: var(--blue-800);
}
.cx-ball::before, .cx-ball::after { content: ""; position: absolute; top: -12%; bottom: -12%; width: 70px; border-radius: 50%; }
.cx-ball::before { left: -3%; border-right: 11px solid var(--blue-700); }
.cx-ball::after { right: -3%; border-left: 11px solid var(--blue-700); }
.cx-ball__laces { position: absolute; top: 16px; left: 50%; width: 64px; height: 9px; translate: -50% 0; border-top: 2px solid oklch(0.35 0.14 264 / 0.5); background: repeating-linear-gradient(90deg, oklch(0.35 0.14 264 / 0.55) 0 3px, transparent 3px 9px); }
.cx-ball__txt { position: relative; z-index: 1; text-align: center; font-size: 1.1rem; line-height: 1.05; letter-spacing: 0.04em; font-weight: 700; }
:is(.cx-ball:hover, .cx-ball.is-play) { animation: cx-wobble 0.9s var(--ease); }
@keyframes cx-wobble { 0% { rotate: 0deg; } 25% { rotate: -9deg; translate: 0 -6px; } 50% { rotate: 7deg; } 75% { rotate: -3deg; } 100% { rotate: 0deg; } }

/* C2 : billet */
.cx-ticket { display: flex; filter: drop-shadow(0 10px 16px oklch(0.19 0.075 264 / 0.25)); }
.cx-ticket > span { display: flex; flex-direction: column; justify-content: center; }
.cx-ticket small { font-family: var(--rcm-body); text-transform: none; letter-spacing: 0.02em; font-size: 0.75rem; opacity: 0.8; }
.cx-ticket__main { background: var(--gold-400); color: var(--blue-950); padding: 14px 26px 14px 22px; border-radius: 10px 0 0 10px; font-size: 1.15rem;
	-webkit-mask: radial-gradient(circle 9px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle 9px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.cx-ticket__stub { background: var(--blue-800); color: var(--gold-300); padding: 10px 18px; border-radius: 0 10px 10px 0; text-align: center; border-left: 2px dashed oklch(0.85 0.08 87 / 0.6); transform-origin: 0 0; transition: rotate 0.45s var(--ease), translate 0.45s var(--ease);
	-webkit-mask: radial-gradient(circle 9px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle 9px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.cx-ticket__stub b { font-size: 1.4rem; line-height: 1; }
:is(.cx-ticket:hover, .cx-ticket.is-play) .cx-ticket__stub { rotate: 9deg; translate: 6px 2px; }

/* C3 : maillot */
.cx-jersey { display: flex; align-items: center; gap: 18px; color: var(--blue-800); }
.cx-jersey > svg { width: 110px; height: 110px; overflow: visible; transition: rotate 0.5s var(--ease), translate 0.5s var(--ease); filter: drop-shadow(0 12px 14px oklch(0.19 0.075 264 / 0.3)); }
.cx-jersey__shirt { fill: var(--blue-700); stroke: var(--blue-900); stroke-width: 2; stroke-linejoin: round; }
.cx-jersey__collar { fill: none; stroke: var(--gold-400); stroke-width: 6; stroke-linecap: round; }
.cx-jersey text { font-family: var(--rcm-head); text-anchor: middle; }
.cx-jersey__name { font-size: 24px; letter-spacing: 3px; fill: var(--gold-300); }
.cx-jersey__num { font-size: 76px; fill: #fff; }
.cx-jersey__txt { display: flex; flex-direction: column; gap: 4px; max-width: 150px; text-align: left; }
.cx-jersey__txt small { font-family: var(--rcm-body); text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--muted); }
.cx-jersey__txt strong { display: inline-flex; align-items: center; gap: 6px; font-size: 1.15rem; line-height: 1.1; border-bottom: 3px solid var(--gold-500); padding-bottom: 4px; }
:is(.cx-jersey:hover, .cx-jersey.is-play) > svg { rotate: -7deg; translate: 0 -6px; }

/* C4 : poteaux */
.cx-posts { position: relative; display: block; width: 300px; height: 190px; }
.cx-posts__frame i { position: absolute; background: var(--gold-500); border-radius: 4px; box-shadow: 2px 2px 0 var(--gold-700); }
.cx-posts__frame i:nth-child(1) { left: 12px; top: 0; bottom: 6px; width: 7px; }
.cx-posts__frame i:nth-child(2) { right: 12px; top: 0; bottom: 6px; width: 7px; }
.cx-posts__frame i:nth-child(3) { left: 12px; right: 12px; top: 92px; height: 7px; }
.cx-posts__btn { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 2; white-space: nowrap; background: var(--blue-700); color: #fff; padding: 14px 24px; border-radius: 999px; letter-spacing: 0.05em; box-shadow: 0 10px 22px oklch(0.35 0.14 264 / 0.3); transition: background-color 0.3s; }
.cx-posts__ball { position: absolute; left: 50%; bottom: 40px; width: 40px; margin-left: -20px; opacity: 0; z-index: 1; }
.cx-posts__ball img { width: 40px; height: 40px; display: block; }
:is(.cx-posts:hover, .cx-posts.is-play) .cx-posts__btn { background: var(--blue-800); }
:is(.cx-posts:hover, .cx-posts.is-play) .cx-posts__ball { animation: cx-kick 1.1s cubic-bezier(0.3, 0.6, 0.4, 1) forwards; }
@keyframes cx-kick { 0% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } 55% { opacity: 1; translate: 6px -150px; scale: 0.7; rotate: -300deg; } 100% { opacity: 0; translate: 10px -120px; scale: 0.45; rotate: -420deg; } }

/* C5 : licence */
.cx-licence { display: flex; flex-direction: column; width: 296px; border-radius: 16px; overflow: hidden; background: var(--white); color: var(--ink); box-shadow: var(--sh-md); border: 1px solid oklch(0.35 0.14 264 / 0.1); transition: rotate 0.4s var(--ease), translate 0.4s var(--ease); }
.cx-licence__top { background: var(--grad-blue-royal); color: var(--gold-300); padding: 9px 16px; font-size: 0.85rem; letter-spacing: 0.14em; }
.cx-licence__body { display: flex; gap: 14px; padding: 14px 16px 6px; }
.cx-licence__avatar { flex: none; width: 64px; height: 78px; border-radius: 8px; background: radial-gradient(circle at 50% 36%, var(--blue-500) 0 15px, transparent 16px), radial-gradient(60% 45% at 50% 100%, var(--blue-500) 0 98%, transparent), var(--paper-2); }
.cx-licence__fields { display: flex; flex-direction: column; gap: 3px; font-family: var(--rcm-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.92rem; color: var(--blue-800); text-align: left; }
.cx-licence__fields em { display: inline-block; width: 46px; font-style: normal; font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.cx-licence__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px 12px 12px; }
.cx-licence__foot > svg { width: 58px; height: 26px; flex: none; }
.cx-licence__foot > svg path { fill: none; stroke: var(--blue-600); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.1s ease; }
.cx-licence__foot b { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-400); color: var(--blue-950); padding: 8px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
:is(.cx-licence:hover, .cx-licence.is-play) { rotate: -1.5deg; translate: 0 -4px; }
:is(.cx-licence:hover, .cx-licence.is-play) .cx-licence__foot > svg path { stroke-dashoffset: 0; }

/* C6 : essai */
.cx-try { position: relative; display: flex; align-items: center; justify-content: center; width: 300px; height: 66px; border-radius: 12px; overflow: hidden; color: #fff;
	background: linear-gradient(90deg, transparent calc(100% - 58px), #fff calc(100% - 58px) calc(100% - 54px), oklch(0.5 0.12 145) calc(100% - 54px)), repeating-linear-gradient(90deg, oklch(0.55 0.13 145) 0 40px, oklch(0.5 0.12 145) 40px 80px);
	box-shadow: 0 10px 22px oklch(0.3 0.08 145 / 0.35); }
.cx-try__txt { position: relative; z-index: 1; padding: 0 50px 0 30px; font-size: 1rem; letter-spacing: 0.05em; text-shadow: 0 2px 6px oklch(0.2 0.05 145 / 0.6); }
.cx-try__ball { position: absolute; left: 10px; top: 50%; translate: 0 -50%; transition: left 0.75s cubic-bezier(0.5, 0, 0.3, 1), rotate 0.75s; z-index: 2; }
.cx-try__ball img { width: 36px; height: 36px; display: block; }
.cx-try__pop { position: absolute; right: 8px; top: 6px; z-index: 3; background: var(--gold-400); color: var(--blue-950); font-size: 0.75rem; padding: 2px 7px; border-radius: 6px; opacity: 0; scale: 0.5; transition: opacity 0.2s 0.7s, scale 0.3s 0.7s var(--ease); }
:is(.cx-try:hover, .cx-try.is-play) .cx-try__ball { left: calc(100% - 46px); rotate: 360deg; }
:is(.cx-try:hover, .cx-try.is-play) .cx-try__pop { opacity: 1; scale: 1; }

/* C7 : palettes */
.cx-flap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cx-flap__row { display: flex; gap: 4px; padding: 10px; border-radius: 10px; background: var(--blue-950); box-shadow: var(--sh-md); perspective: 400px; }
.cx-flap__row span { display: grid; place-items: center; width: 28px; height: 42px; border-radius: 4px; font-size: 1.6rem; color: var(--gold-300); background: linear-gradient(180deg, oklch(0.3 0.08 264) 0 49%, oklch(0.12 0.05 264) 49% 51%, oklch(0.26 0.08 264) 51%); }
:is(.cx-flap:hover, .cx-flap.is-play) .cx-flap__row span { animation: cx-flip 0.5s calc(var(--i) * 0.06s) ease-in-out; }
@keyframes cx-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); color: #fff; } 100% { transform: rotateX(0); } }
.cx-flap__sub { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-800); font-size: 1.05rem; letter-spacing: 0.08em; }

/* C8 : autocollant */
.cx-sticker { position: relative; display: block; width: 170px; height: 170px; }
.cx-sticker svg { width: 100%; height: 100%; animation: cx-rotate 16s linear infinite; filter: drop-shadow(0 10px 14px oklch(0.19 0.075 264 / 0.3)); }
.cx-sticker circle { fill: var(--gold-400); }
.cx-sticker text { font-family: var(--rcm-head); font-size: 17px; letter-spacing: 1px; fill: var(--blue-950); }
.cx-sticker__core { position: absolute; inset: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-800); transition: scale 0.4s var(--ease); }
.cx-sticker__core img { width: 44px; height: 44px; transition: rotate 0.6s var(--ease); }
:is(.cx-sticker:hover, .cx-sticker.is-play) .cx-sticker__core { scale: 1.1; }
:is(.cx-sticker:hover, .cx-sticker.is-play) .cx-sticker__core img { rotate: -180deg; }
@keyframes cx-rotate { to { rotate: 360deg; } }

/* C9 : tableau du coach */
.cx-chalk { position: relative; display: block; width: 300px; padding: 6px 10px 16px; border-radius: 10px; background: radial-gradient(80% 90% at 30% 20%, oklch(0.36 0.04 200), oklch(0.26 0.03 210)); border: 8px solid oklch(0.5 0.07 60); box-shadow: var(--sh-md); text-align: center; }
.cx-chalk__play { display: block; width: 100%; height: auto; }
.cx-chalk__play g, .cx-chalk__play path { fill: none; stroke: oklch(0.96 0.01 90 / 0.85); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cx-chalk__play text { font-family: "Permanent Marker", cursive; font-size: 18px; fill: var(--gold-300); }
.cx-chalk__run { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1s ease; }
.cx-chalk__head { opacity: 0; transition: opacity 0.2s 0.9s; }
:is(.cx-chalk:hover, .cx-chalk.is-play) .cx-chalk__run { stroke-dashoffset: 0; }
:is(.cx-chalk:hover, .cx-chalk.is-play) .cx-chalk__head { opacity: 1; }
.cx-chalk__btn { display: inline-block; margin-top: -4px; padding: 8px 16px; font-family: "Permanent Marker", cursive; text-transform: none; font-size: 1.05rem; white-space: nowrap; letter-spacing: 0.02em; color: #fff; border: 2.5px solid oklch(0.96 0.01 90 / 0.85); border-radius: 12px 6px 14px 5px; }

/* C10 : écusson */
.cx-patch { display: inline-block; padding: 9px; border-radius: 22px; background: repeating-linear-gradient(45deg, oklch(0.3 0.12 264) 0 2px, oklch(0.33 0.13 264) 2px 4px); box-shadow: 0 2px 0 oklch(0.2 0.08 264), 0 14px 24px oklch(0.19 0.075 264 / 0.35); transition: rotate 0.4s var(--ease), scale 0.4s var(--ease); }
.cx-patch span { display: flex; flex-direction: column; align-items: center; padding: 14px 30px; border-radius: 15px; outline: 2.5px dashed var(--gold-400); outline-offset: -1px; color: var(--gold-300); font-size: 1rem; letter-spacing: 0.2em; text-shadow: 0 1px 0 oklch(0.5 0.08 80), 0 -1px 0 oklch(0.95 0.05 88 / 0.4); }
.cx-patch b { font-size: 1.55rem; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 0 oklch(0.4 0.1 264), 0 2px 0 oklch(0.2 0.08 264); }
:is(.cx-patch:hover, .cx-patch.is-play) { rotate: -3deg; scale: 1.04; }

/* C11 : sifflet */
.cx-whistle { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 7px 24px 7px 7px; border-radius: 999px; background: var(--blue-700); color: #fff; letter-spacing: 0.05em; box-shadow: 0 10px 22px oklch(0.35 0.14 264 / 0.3); }
.cx-whistle__ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-400); }
.cx-whistle__ico svg { width: 26px; height: 26px; fill: var(--blue-950); }
.cx-whistle__ico svg circle { fill: var(--gold-400); }
.cx-whistle__ico::before, .cx-whistle__ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-400); opacity: 0; }
:is(.cx-whistle:hover, .cx-whistle.is-play) .cx-whistle__ico { animation: cx-shake 0.4s 2; }
:is(.cx-whistle:hover, .cx-whistle.is-play) .cx-whistle__ico::before { animation: cx-ring 1s ease-out infinite; }
:is(.cx-whistle:hover, .cx-whistle.is-play) .cx-whistle__ico::after { animation: cx-ring 1s 0.35s ease-out infinite; }
.cx-whistle__tip { position: absolute; left: 6px; bottom: calc(100% + 10px); background: var(--white); color: var(--blue-800); padding: 4px 10px; border-radius: 8px; font-size: 0.85rem; box-shadow: var(--sh-sm); opacity: 0; translate: 0 6px; transition: opacity 0.25s, translate 0.25s var(--ease); white-space: nowrap; }
:is(.cx-whistle:hover, .cx-whistle.is-play) .cx-whistle__tip { opacity: 1; translate: 0 0; }
@keyframes cx-ring { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 1.9; } }
@keyframes cx-shake { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 75% { rotate: 12deg; } }

/* C12 : mêlée */
.cx-scrum { position: relative; display: block; width: 300px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--blue-800); color: #fff; box-shadow: 0 10px 22px oklch(0.35 0.14 264 / 0.3); }
.cx-scrum__fill { position: absolute; inset: 0; background: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.cx-scrum__words { position: absolute; inset: 0; }
.cx-scrum__words span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.1rem; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.15s; }
.cx-scrum__words span:first-child { opacity: 1; }
:is(.cx-scrum:hover, .cx-scrum.is-play) .cx-scrum__fill { transform: scaleX(1); transition: transform 1.2s linear; }
:is(.cx-scrum:hover, .cx-scrum.is-play) .cx-scrum__words span:first-child { opacity: 0; }
:is(.cx-scrum:hover, .cx-scrum.is-play) .cx-scrum__words span:nth-child(2) { animation: cx-call 0.4s 0s both; color: #fff; }
:is(.cx-scrum:hover, .cx-scrum.is-play) .cx-scrum__words span:nth-child(3) { animation: cx-call 0.4s 0.4s both; color: var(--blue-950); }
:is(.cx-scrum:hover, .cx-scrum.is-play) .cx-scrum__words span:nth-child(4) { opacity: 1; transition: opacity 0.15s 0.8s; color: var(--blue-950); font-size: 1.3rem; }
@keyframes cx-call { 0% { opacity: 0; scale: 1.3; } 20%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; } }

/* Mobile : retour immédiat au toucher (sans retarder l'ouverture du lien) */
[data-cx] { transition-property: rotate, translate, scale, box-shadow, background-color; }
[data-cx].is-tap { scale: 0.95; transition-duration: 0.12s; }
.cx-ticket.is-tap .cx-ticket__stub { rotate: 12deg; translate: 8px 3px; transition-duration: 0.15s; }
.cx-whistle.is-tap .cx-whistle__ico { animation: cx-shake 0.3s 1; }

@media (max-width: 760px) {
	.cx-chalk, .cx-licence, .cx-try { width: 100%; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
	.cx-sticker svg { animation: none; }
}

/* Panneau de secours des liens mailto (si aucune messagerie ne s'ouvre) */
.rcm-mailhelp { position: fixed; z-index: 300; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px)); translate: -50% 20px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, translate 0.35s var(--ease), visibility 0s linear 0.35s; padding: 20px 20px 18px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-lg); border: 1px solid oklch(0.35 0.14 264 / 0.1); }
.rcm-mailhelp.is-open { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity 0.25s ease, translate 0.35s var(--ease), visibility 0s; }
.rcm-mailhelp__title { margin: 0 30px 4px 0; font-family: var(--rcm-head); text-transform: uppercase; letter-spacing: 0.04em; color: var(--blue-800); font-size: 1.05rem; }
.rcm-mailhelp__mail { margin: 0 0 14px; font-weight: 600; color: var(--gold-700); word-break: break-all; }
.rcm-mailhelp__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rcm-mailhelp__btn { flex: 1 1 150px; display: inline-flex; justify-content: center; align-items: center; padding: 12px 14px; border-radius: 12px; border: 0; cursor: pointer; font: 600 0.9rem/1.1 var(--rcm-head); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; background: oklch(0.35 0.14 264 / 0.08); color: var(--blue-800); }
.rcm-mailhelp__btn--gold { background: var(--gold-400); color: var(--blue-950); }
.rcm-mailhelp__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.rcm-mailhelp__close::before, .rcm-mailhelp__close::after { content: ""; position: absolute; left: 10px; top: 17px; width: 16px; height: 2px; border-radius: 2px; background: var(--blue-700); rotate: 45deg; }
.rcm-mailhelp__close::after { rotate: -45deg; }