/* CNR Championnat — page « Payer sa participation » [cnr_participation] et éléments partagés (cartes, champs, boutons WhatsApp) */
.cnrc-ui .cnrc-body { container-type: inline-size; }
.cnrc-ui.cnrp .cnrc-body > * { max-width: 1120px; }

/* ---------- Éléments partagés ---------- */
.cnrc-ui .cnrp-card {
	background: #fff; border: 1px solid var(--ligne); border-radius: 22px;
	box-shadow: var(--ombre); padding: clamp(20px, 3vw, 28px); font-size: 16px;
}
.cnrc-ui .cnrp-empty { max-width: 720px; margin: 0 auto; text-align: center; }
.cnrc-ui .cnrp-empty h2 { font-size: 26px; margin-bottom: 8px; }
.cnrc-ui .cnrp-admin-note { margin: 18px auto 0; padding: 12px 16px; border-radius: 14px; background: #fff8e6; border: 1px dashed #e8a800; color: #6b4e00; font-size: 14px; text-align: left; }
.cnrc-ui .cnrp-admin-note a { color: inherit; font-weight: 600; }
.cnrc-ui .cnrp-h3 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.cnrc-ui .cnrp-h4 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.cnrc-ui .cnrp-muted { color: var(--doux); font-size: 16px; margin-bottom: 16px; }
.cnrc-ui .cnrp-small { font-size: 13px; color: var(--doux); margin-top: 10px; }
.cnrc-ui .cnrp-eyebrow { font-size: 12px; text-transform: uppercase !important; letter-spacing: .08em; font-weight: 600; color: var(--doux); margin-bottom: 14px; }
.cnrc-ui .cnrp-center { text-align: center; margin-top: 18px; }

/* Champs */
.cnrc-ui .cnrp-form { display: flex; flex-direction: column; gap: 16px; }
.cnrc-ui .cnrp-field { display: flex; flex-direction: column; gap: 6px; }
.cnrc-ui .cnrp-field label { font-weight: 600; font-size: 15px; color: var(--violet); }
.cnrc-ui .cnrp-field abbr { color: var(--orange); text-decoration: none; border: 0; }
.cnrc-ui .cnrp-opt { font-weight: 400; color: var(--doux); font-size: 13px; }
.cnrc-ui .cnrp-field input, .cnrc-ui .cnrp-field select, .cnrc-ui .cnrp-field textarea {
	width: 100%; min-height: 50px; margin: 0; padding: 12px 14px !important;
	border: 1.5px solid var(--ligne) !important; border-radius: 14px !important;
	background-color: #fff !important; box-shadow: none !important;
	font: inherit; font-size: 16px; color: var(--texte); line-height: 1.4;
}
.cnrc-ui .cnrp-field select { appearance: none; -webkit-appearance: none; padding-right: 40px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232d1d54' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center !important; }
.cnrc-ui .cnrp-field textarea { min-height: 90px; resize: vertical; }
.cnrc-ui .cnrp-field input:focus, .cnrc-ui .cnrp-field select:focus, .cnrc-ui .cnrp-field textarea:focus { outline: 0; border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(244, 127, 7, .18) !important; }
.cnrc-ui .cnrp-field [aria-invalid="true"] { border-color: #c62828 !important; }
.cnrc-ui .cnrp-ref { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--fond); border: 1px dashed #cfc8e2; }
.cnrc-ui .cnrp-ref[hidden], .cnrc-ui .cnrp-paid[hidden], .cnrc-ui .cnrp-error[hidden] { display: none; }
.cnrc-ui .cnrp-ref span { color: var(--doux); font-size: 14px; }
.cnrc-ui .cnrp-ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; color: var(--violet); letter-spacing: .04em; }
.cnrc-ui .cnrp-paid { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; background: var(--vert-l); color: #0b5e4b; font-size: 14px; }
.cnrc-ui .cnrp-error { color: #c62828; font-size: 14px; font-weight: 500; }

/* Boutons */
.cnrc-ui a.cnrp-btn, .cnrc-ui button.cnrp-btn.cnrp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
	background: #25d366; color: #fff !important; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none !important;
	cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s;
	box-shadow: 0 10px 24px -12px rgba(18, 140, 70, .7);
}
.cnrc-ui a.cnrp-btn:hover, .cnrc-ui button.cnrp-btn.cnrp-btn:hover { background: #1ebe5b; }
.cnrc-ui a.cnrp-btn:active, .cnrc-ui button.cnrp-btn.cnrp-btn:active { transform: translateY(1px); }
.cnrc-ui a.cnrp-btn[aria-disabled="true"] { background: #b8e8c9; box-shadow: none; }
.cnrc-ui button.cnrp-btn.cnrp-btn:disabled { background: #b8e8c9; cursor: not-allowed; box-shadow: none; }
.cnrc-ui .cnrp-btn--block { width: 100%; }
.cnrc-ui a.cnrp-btn--ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.5); box-shadow: none; }
.cnrc-ui a.cnrp-btn--ghost:hover { background: rgba(255,255,255,.12); }
.cnrc-ui .cnrp-inline { display: inline-block; }
.cnrc-ui a.cnrp-link { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.cnrc-ui a.cnrp-link:hover { color: var(--orange); }

/* ---------- 1. En trois étapes ---------- */
.cnrc-ui .cnrp-flow { list-style: none; margin: 0 auto 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; position: relative; }
.cnrc-ui .cnrp-flow__item { position: relative; background: #fff; border: 1px solid var(--ligne); border-radius: 22px; padding: 26px 22px 24px; box-shadow: var(--ombre); text-align: center; }
.cnrc-ui .cnrp-flow__item:not(:last-child)::after { content: ""; position: absolute; top: 58px; right: -14px; width: 10px; height: 10px; border-top: 2.5px solid var(--orange); border-right: 2.5px solid var(--orange); transform: rotate(45deg); }
.cnrc-ui .cnrp-flow__icon { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--violet), var(--violet-2)); color: #fff; margin-bottom: 14px; }
.cnrc-ui .cnrp-flow__item:nth-child(2) .cnrp-flow__icon { background: linear-gradient(135deg, #25d366, #128c7e); }
.cnrc-ui .cnrp-flow__item:nth-child(3) .cnrp-flow__icon { background: linear-gradient(135deg, var(--vert), #22b38f); }
.cnrc-ui .cnrp-flow__icon b { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 13px; border: 3px solid #fff; }
.cnrc-ui .cnrp-flow__item h3 { font-size: 19px; margin-bottom: 6px; }
.cnrc-ui .cnrp-flow__item p { color: var(--doux); font-size: 15px; }

/* ---------- 2. Action + interlocuteur ---------- */
.cnrc-ui .cnrp-main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 22px; align-items: start; margin-bottom: 12px; scroll-margin-top: calc(var(--cnrc-nav, 0px) + 20px); }
.cnrc-ui .cnrp-action { background: #fff; border: 1px solid var(--ligne); border-radius: 24px; box-shadow: 0 1px 2px rgba(45,29,84,.06), 0 24px 48px -24px rgba(45,29,84,.35); padding: clamp(22px, 3.4vw, 34px); position: relative; overflow: hidden; }
.cnrc-ui .cnrp-action::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #25d366, var(--vert), var(--orange)); }
.cnrc-ui .cnrp-action__head { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.cnrc-ui .cnrp-action__icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; background: #e8faf0; color: #128c7e; }
.cnrc-ui .cnrp-action__head h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; }
.cnrc-ui .cnrp-action__head p { color: var(--doux); font-size: 15px; margin-top: 2px; }
.cnrc-ui .cnrp-amount { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 20px; }
.cnrc-ui .cnrp-amount > div { padding: 14px 16px; border-radius: 16px; background: var(--fond); }
.cnrc-ui .cnrp-amount > div:first-child { background: var(--violet); color: #fff; }
.cnrc-ui .cnrp-amount dt { font-size: 13px; color: var(--doux); }
.cnrc-ui .cnrp-amount > div:first-child dt { color: rgba(255,255,255,.7); }
.cnrc-ui .cnrp-amount dd { margin: 2px 0 0; }
.cnrc-ui .cnrp-amount strong { display: block; font-family: var(--titre); font-size: 24px; line-height: 1.15; color: var(--violet); }
.cnrc-ui .cnrp-amount > div:first-child strong { color: #fff; font-size: 28px; }
.cnrc-ui .cnrp-amount span { display: block; font-size: 13px; margin-top: 4px; color: rgba(255,255,255,.75); }
.cnrc-ui .cnrp-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #fff7ee; color: var(--violet); font-size: 15px; margin-bottom: 16px; }
.cnrc-ui .cnrp-notice .cnrc-ico { color: var(--orange); flex: none; margin-top: 1px; }
.cnrc-ui .cnrp-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 14px; color: var(--doux); }
.cnrc-ui .cnrp-alt a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cnrc-ui .cnrp-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cnrc-ui .cnrp-referent { background: linear-gradient(160deg, var(--violet), #1d1238); border: 0; color: #fff; }
.cnrc-ui .cnrp-referent .cnrp-eyebrow { color: rgba(255,255,255,.65); }
.cnrc-ui .cnrp-referent__who { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.cnrc-ui .cnrp-referent__avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--titre); font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.cnrc-ui .cnrp-referent__who > div > strong { display: block; color: #fff; font-size: 18px; }
.cnrc-ui .cnrp-referent__who > div > span { display: block; color: rgba(255,255,255,.7); font-size: 14px; }
.cnrc-ui .cnrp-referent__list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 10px; font-size: 15px; }
.cnrc-ui .cnrp-referent__list li { display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.85); }
.cnrc-ui .cnrp-referent__list .cnrc-ico { color: #25d366; flex: none; }
.cnrc-ui .cnrp-referent__list a { color: #fff !important; font-weight: 600; text-decoration: none; }
.cnrc-ui .cnrp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; }
.cnrc-ui .cnrp-checks li { display: flex; gap: 10px; align-items: flex-start; }
.cnrc-ui .cnrp-checks .cnrc-ico { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--vert-l); color: var(--vert); }

/* ---------- 3. Parcours ---------- */
.cnrc-ui .cnrp-journey { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 0; background: #fff; border: 1px solid var(--ligne); border-radius: 22px; box-shadow: var(--ombre); overflow: hidden; }
.cnrc-ui .cnrp-journey__step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 14px; position: relative; font-size: 15px; color: var(--texte); }
.cnrc-ui .cnrp-journey__step + .cnrp-journey__step { border-left: 1px solid var(--ligne); }
.cnrc-ui .cnrp-journey__step b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fond); color: var(--violet); font-family: var(--titre); font-size: 17px; }
.cnrc-ui .cnrp-journey__step.is-pay { background: #fff7ee; color: var(--violet); font-weight: 600; }
.cnrc-ui .cnrp-journey__step.is-pay b { background: var(--orange); color: #fff; box-shadow: 0 0 0 6px rgba(244, 127, 7, .18); }
.cnrc-ui .cnrp-journey__step em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--orange-d); background: #fff; border: 1px solid #f6c48f; border-radius: 999px; padding: 2px 10px; }

/* ---------- 4. Garanties ---------- */
.cnrc-ui .cnrp-trust { list-style: none; margin: 40px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cnrc-ui .cnrp-trust li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--vert-l); }
.cnrc-ui .cnrp-trust li > span { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--vert); }
.cnrc-ui .cnrp-trust strong { display: block; color: var(--violet); font-size: 16px; }
.cnrc-ui .cnrp-trust p { color: #3d5c55; font-size: 14px; margin-top: 2px; }

/* ---------- 5. FAQ ---------- */
.cnrc-ui .cnrp-faq { max-width: 860px !important; display: grid; gap: 10px; }
.cnrc-ui .cnrp-faq details { background: #fff; border: 1px solid var(--ligne); border-radius: 16px; box-shadow: var(--ombre); }
.cnrc-ui .cnrp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--violet); font-size: 16px; }
.cnrc-ui .cnrp-faq summary::-webkit-details-marker { display: none; }
.cnrc-ui .cnrp-faq summary .cnrc-ico { flex: none; color: var(--orange); transition: transform .2s; }
.cnrc-ui .cnrp-faq details[open] summary .cnrc-ico { transform: rotate(45deg); }
.cnrc-ui .cnrp-faq details p { padding: 0 20px 18px; color: var(--texte); font-size: 15px; }

/* ---------- 6. Bandeau final ---------- */
.cnrc-ui .cnrp-cta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 4vw, 40px); border-radius: 26px; background: radial-gradient(circle at 90% 10%, rgba(244,127,7,.35), transparent 45%), linear-gradient(135deg, var(--violet), #1d1238); color: #fff; }
.cnrc-ui .cnrp-cta h2 { color: #fff; font-size: clamp(22px, 2.8vw, 30px); }
.cnrc-ui .cnrp-cta p { color: rgba(255,255,255,.78); margin-top: 6px; max-width: 52ch; }
.cnrc-ui .cnrp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Bouton flottant ---------- */
.cnrp-float {
	position: fixed; left: 18px; bottom: 18px; z-index: 9990;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px;
	background: #25d366; color: #fff !important; text-decoration: none !important;
	font: 600 15px/1 "Prompt", "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35);
}
.cnrp-float:hover { background: #1ebe5b; }
.cnrp-float svg { width: 26px; height: 26px; }

/* ---------- Adaptation à la largeur du bloc ---------- */
@container (max-width: 860px) {
	.cnrc-ui .cnrp-main { grid-template-columns: 1fr; }
	.cnrc-ui .cnrp-flow, .cnrc-ui .cnrp-trust { grid-template-columns: 1fr; }
	.cnrc-ui .cnrp-flow__item { display: grid; grid-template-columns: 64px 1fr; text-align: left; gap: 2px 16px; align-items: start; }
	.cnrc-ui .cnrp-flow__icon { grid-row: span 2; margin: 0; }
	.cnrc-ui .cnrp-flow__item:not(:last-child)::after { display: none; }
	.cnrc-ui .cnrp-journey { flex-direction: column; }
	.cnrc-ui .cnrp-journey__step { flex-direction: row; text-align: left; padding: 14px 18px; }
	.cnrc-ui .cnrp-journey__step + .cnrp-journey__step { border-left: 0; border-top: 1px solid var(--ligne); }
	.cnrc-ui .cnrp-journey__step em { margin-left: auto; }
}
@media (max-width: 640px) {
	.cnrc-ui .cnrp-card, .cnrc-ui .cnrp-action { border-radius: 18px; padding: 20px 16px; }
	.cnrc-ui .cnrp-cta__actions, .cnrc-ui .cnrp-cta__actions .cnrp-btn { width: 100%; }
	.cnrp-float span { display: none; }
	.cnrp-float { padding: 0 13px; }
}

/* ---------- Bloc « Participer au championnat » [cnr_parcours] ---------- */
.cnrc-ui.cnrpc { container-type: inline-size; margin: 40px auto; padding: 0 16px; max-width: 1212px; }
.cnrc-ui .cnrpc-inner { background: var(--violet); color: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 44px); position: relative; overflow: hidden; isolation: isolate; }
.cnrc-ui .cnrpc-inner::after { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(244, 127, 7, .14); z-index: -1; }
.cnrc-ui .cnrpc-head { max-width: 640px; margin-bottom: 26px; }
.cnrc-ui .cnrpc-head h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; line-height: 1.1; }
.cnrc-ui .cnrpc-head p { color: rgba(255, 255, 255, .78); font-size: 16px; margin-top: 10px; }
.cnrc-ui .cnrpc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.cnrc-ui .cnrpc-step > a, .cnrc-ui .cnrpc-step > div {
	position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
	padding: 18px 18px 20px; border-radius: 20px; background: #fff; color: var(--texte); text-decoration: none !important;
	border: 2px solid transparent; transition: transform .15s, border-color .15s;
}
.cnrc-ui .cnrpc-step > a:hover { transform: translateY(-3px); border-color: var(--orange); }
.cnrc-ui .cnrpc-step > a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.cnrc-ui .cnrpc-num { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fond); color: var(--violet); font-size: 13px; font-weight: 700; }
.cnrc-ui .cnrpc-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff1e2; color: var(--orange); margin-bottom: 8px; }
.cnrc-ui .cnrpc-step strong { font-family: var(--titre); font-size: 18px; color: var(--violet); line-height: 1.2; padding-right: 30px; }
.cnrc-ui .cnrpc-step em { font-style: normal; font-size: 14px; color: var(--doux); }
.cnrc-ui .cnrpc-go { position: absolute; right: 16px; bottom: 16px; color: var(--orange); transition: transform .15s; display: flex; }
.cnrc-ui .cnrpc-step > a:hover .cnrpc-go { transform: translateX(3px); }
.cnrc-ui .cnrpc-step.is-current > div { background: rgba(255, 255, 255, .08); border-color: var(--orange); color: #fff; }
.cnrc-ui .cnrpc-step.is-current strong { color: #fff; }
.cnrc-ui .cnrpc-step.is-current em { color: var(--orange); font-weight: 600; }
.cnrc-ui .cnrpc-step.is-current .cnrpc-num { background: var(--orange); color: #fff; }
.cnrc-ui .cnrpc-step.is-current .cnrpc-ico { background: rgba(255, 255, 255, .12); }
.cnrc-ui .cnrpc-track { margin-top: 20px; }
.cnrc-ui .cnrpc-track a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.cnrc-ui .cnrpc-track a:hover { color: var(--orange); }
@container (max-width: 900px) { .cnrc-ui .cnrpc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 520px) { .cnrc-ui .cnrpc-steps { grid-template-columns: 1fr; } .cnrc-ui .cnrpc-inner { border-radius: 22px; } }