/* =====================================================================
   Formation RPS — page-formation-rps.php
   Self-contained (design tokens only): never shares selectors with the
   HACCP/PE pages. Navy + gold, same brand as the rest of the site.
   --rps-sticky-top / --rps-subnav-h are measured by rps-form.js.
   ===================================================================== */

.rps { color: var(--color-text); }
.rps h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--space-md); color: var(--color-primary); text-wrap: balance; }
.rps h3 { font-size: 1.15rem; line-height: 1.3; margin: var(--space-md) 0 var(--space-sm); color: var(--color-primary); }
.rps p { line-height: 1.65; margin: 0 0 var(--space-sm); }
.rps [id] { scroll-margin-top: calc(var(--rps-sticky-top, 67px) + var(--rps-subnav-h, 52px) + 1rem); }
.rps-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ---------- Hero ---------- */
.rps-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(55% 75% at 88% 8%, rgba(212, 160, 18, 0.16) 0%, transparent 62%),
		radial-gradient(120% 140% at 0% 0%, #1b3a5c 0%, var(--color-primary) 45%, var(--color-primary-dark) 100%);
	padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(5.5rem, 9vw, 7.5rem);
}
/* Decorative concentric rings, top right. */
.rps-hero::after {
	content: "";
	position: absolute;
	right: -11rem;
	top: -11rem;
	width: 32rem;
	height: 32rem;
	border-radius: 50%;
	border: 1px solid rgba(212, 160, 18, 0.28);
	box-shadow: 0 0 0 4.5rem rgba(255, 255, 255, 0.025), 0 0 0 9rem rgba(255, 255, 255, 0.018);
	pointer-events: none;
}
.rps-hero__inner { position: relative; z-index: 1; max-width: 62rem; text-align: center; }
.rps-hero__eyebrow { color: var(--color-accent); margin: 0 0 var(--space-sm); }
.rps-hero__title { color: #fff; font-size: clamp(1.7rem, 3.4vw + 0.6rem, 3rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 var(--space-sm); text-wrap: balance; }
.rps-hero__title-sub { display: block; margin-top: 0.35em; font-size: 0.6em; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.78); }
.rps .rps-hero__lead { color: var(--color-accent); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; letter-spacing: 0.01em; margin-bottom: var(--space-sm); }
.rps .rps-hero__text { color: rgba(255, 255, 255, 0.82); font-size: clamp(1rem, 1.2vw, 1.1rem); max-width: 44rem; margin: 0 auto; }
.rps-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
.rps-hero__link { display: inline-flex; align-items: center; gap: 0.4rem; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 2px; }
.rps-hero__link:hover, .rps-hero__link:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }
.rps-hero__link .rps-ico { transition: transform 0.2s ease; }
.rps-hero__link:hover .rps-ico { transform: translateX(3px); }
.rps .rps-hero__price { margin: var(--space-md) 0 0; color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; }
.rps-hero__price strong { color: var(--color-accent); font-size: 1.1rem; white-space: nowrap; }
.rps-chips { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.6rem; }
.rps-chips li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; }
.rps-chips .rps-ico { color: var(--color-accent); }
@media (max-width: 639px) {
	.rps-hero__inner { text-align: left; }
	.rps-hero__actions, .rps-chips { justify-content: flex-start; }
	.rps-hero__actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- 3 pillars (overlap the hero) ---------- */
.rps-pillars { position: relative; z-index: 2; margin-top: -3.75rem; }
.rps-pillars__grid { display: grid; gap: var(--space-sm); }
.rps-pillar { background: #fff; border-radius: var(--radius-lg); border-top: 3px solid var(--color-accent); box-shadow: 0 18px 40px rgba(16, 42, 67, 0.14); padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.rps-pillar__icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); margin-bottom: 0.6rem; }
.rps .rps-pillar__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--color-primary); margin: 0 0 0.25rem; }
.rps .rps-pillar__text { color: var(--color-muted); font-size: 0.95rem; line-height: 1.5; margin: 0; }
@media (max-width: 759px) {
	.rps-pillar { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: start; }
	.rps-pillar__icon { grid-row: span 2; margin: 0; }
}
@media (min-width: 760px) {
	.rps-pillars { margin-top: -4.5rem; }
	.rps-pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
}

/* ---------- Sticky section nav ---------- */
.rps-subnav { position: sticky; top: var(--rps-sticky-top, 67px); z-index: 50; margin-top: var(--space-lg); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-block: 1px solid var(--color-border); transition: box-shadow 0.2s ease; }
.rps-subnav.is-stuck { box-shadow: 0 6px 18px rgba(16, 42, 67, 0.08); }
.rps-subnav__inner { display: flex; align-items: center; gap: var(--space-sm); }
.rps-subnav__list { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.rps-subnav__list::-webkit-scrollbar { display: none; }
.rps-subnav__list a { display: block; white-space: nowrap; padding: 0.95rem 0.7rem; font-size: 0.9rem; font-weight: 600; color: var(--color-muted); text-decoration: none; box-shadow: inset 0 -3px 0 transparent; transition: color 0.15s ease, box-shadow 0.15s ease; }
.rps-subnav__list a:hover { color: var(--color-primary); }
.rps-subnav__list a[aria-current] { color: var(--color-primary); box-shadow: inset 0 -3px 0 var(--color-accent); }
.rps-subnav__cta { flex: 0 0 auto; padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.rps-subnav__cta-short { display: none; }
/* From 640px the RPS site header shows its own "Demander un devis" (header.php), so no duplicate here. */
@media (min-width: 640px) { .rps-subnav__cta { display: none; } }
@media (max-width: 639px) {
	.rps-subnav__list { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
	.rps-subnav__cta-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.rps-subnav__cta-short { display: inline; }
}

/* ---------- Sections ---------- */
.rps-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.rps-section--alt { background: var(--color-surface); }
.rps-narrow { max-width: 52rem; }
.rps-head { max-width: 52rem; margin: 0 auto var(--space-lg); text-align: center; }
/* `.rps .x` beats `.rps p` (0,1,1), which otherwise resets these margins. */
.rps .rps-center { text-align: center; max-width: 46rem; margin: var(--space-lg) auto 0; color: var(--color-muted); }
.rps-two { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) { .rps-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); } }

.rps-list { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: grid; gap: 0.55rem; }
.rps-list li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.rps-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.rps-list--check li { padding-left: 1.85rem; }
.rps-list--check li::before { left: 0; top: 0.2em; width: 1.15rem; height: 1.15rem; background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 68% no-repeat; }
.rps-list--pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rps-list--pills li { padding: 0.45rem 0.95rem; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); font-size: 0.92rem; color: var(--color-primary); }
.rps-list--pills li::before { content: none; }

.rps-notice { background: #fff; border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); padding: 1rem 1.25rem; box-shadow: var(--shadow-sm); margin-top: var(--space-md); }
.rps-meta { color: var(--color-muted); font-size: 0.85rem; }

/* ---------- Context: questions ---------- */
.rps-questions { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
@media (min-width: 640px) { .rps-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rps .rps-question { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; padding: 1rem 1.1rem; background: var(--color-surface); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); font-weight: 600; line-height: 1.45; color: var(--color-primary); }
.rps-question .rps-ico { margin-top: 0.12rem; color: var(--color-accent-text); }

/* ---------- Cards ---------- */
.rps-cards { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .rps-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rps-card { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.rps-card--wide { margin-top: var(--space-md); }
.rps-card h3 { margin-top: 0; }
.rps-card__num { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--color-primary); color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-sm); }
.rps .rps-card__tag { color: var(--color-accent-text); margin: 0 0 0.35rem; }
.rps-card__sub { color: var(--color-muted); font-style: italic; }
.rps-practice { background: var(--color-surface); border-radius: var(--radius-md); padding: 0.9rem 1rem; margin-top: var(--space-sm); font-size: 0.95rem; }

/* ---------- Legal: in force vs under discussion ---------- */
.rps-law { display: grid; gap: var(--space-md); align-items: start; }
@media (min-width: 900px) { .rps-law { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rps-law__card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.rps-law__card--now { border-top: 4px solid var(--color-primary); }
.rps-law__card--next { border-top: 4px solid var(--color-accent); background: #fffdf6; }
.rps-law__card h3 { margin-top: 0.6rem; }
.rps .rps-badge { display: inline-block; margin: 0; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rps-badge--now { background: #e6eef7; color: var(--color-primary); }
.rps-badge--next { background: #fbf1d6; color: var(--color-accent-text); }
.rps-refs { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rps-refs li { padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.rps-law__foot { max-width: 52rem; margin: var(--space-md) auto 0; }

/* ---------- Intervenant ---------- */
.rps-profile { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 900px) { .rps-profile { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); max-width: 66rem; } }
.rps-profile__id { text-align: center; background: #fff; border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); }
@media (min-width: 900px) { .rps-profile__id { position: sticky; top: calc(var(--rps-sticky-top, 67px) + var(--rps-subnav-h, 52px) + 1.5rem); } }
.rps-profile__avatar { display: grid; place-items: center; width: 6rem; height: 6rem; margin: 0 auto var(--space-sm); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #1b3a5c, var(--color-primary)); color: var(--color-accent); font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--color-accent); }
.rps .rps-profile__name { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-primary); }
.rps .rps-profile__role { margin: 0; font-size: 0.9rem; color: var(--color-muted); }
.rps .rps-highlight { margin-top: var(--space-md); padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; }

/* ---------- Practical info ---------- */
.rps-dl { margin: 0; }
.rps-info { position: relative; padding: 0.85rem 0 0.85rem 3.1rem; border-bottom: 1px solid var(--color-border); }
.rps-info:last-child { border-bottom: 0; }
.rps-dl dt { font-weight: 700; color: var(--color-primary); }
.rps-dl dt .rps-ico { position: absolute; left: 0; top: 0.85rem; width: 2.2rem; height: 2.2rem; padding: 0.5rem; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); }
.rps-dl dd { margin: 0.15rem 0 0; line-height: 1.55; color: var(--color-text); }

/* ---------- Final CTA + form ---------- */
.rps-final { background: var(--color-primary); color: #fff; padding-block: clamp(2.5rem, 6vw, 5rem); }
.rps-final__grid { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 960px) {
	.rps-final__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); }
	.rps-final__text { position: sticky; top: calc(var(--rps-sticky-top, 67px) + var(--rps-subnav-h, 52px) + 1.5rem); }
}
.rps-final h2 { color: #fff; }
.rps-final__text p { color: rgba(255, 255, 255, 0.82); }

.rps-form-card { background: #fff; color: var(--color-text); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(6, 18, 32, 0.35); padding: clamp(1.25rem, 3vw, 2rem); }
.rps-row { display: grid; gap: 0.75rem; }
@media (min-width: 560px) { .rps-row { grid-template-columns: 1fr 1fr; } }
.rps-field { display: grid; gap: 0.3rem; margin-bottom: 0.75rem; min-width: 0; }
.rps-field label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }
.rps-field label span { color: #c0392b; }
.rps-field small { color: var(--color-muted); font-size: 0.78rem; }
.rps-field input, .rps-field select, .rps-field textarea {
	width: 100%; font: inherit; font-size: 1rem; color: var(--color-text);
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: 0.75rem 0.9rem; min-height: 3rem;
}
.rps-field textarea { min-height: auto; resize: vertical; }
.rps-field input:focus, .rps-field select:focus, .rps-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16, 42, 67, 0.12); }
.rps-field .is-invalid, .rps-field .is-invalid:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }
.rps-consent input.is-invalid { outline: 2px solid #c0392b; outline-offset: 2px; }
.rps-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rps-consent { margin: 0.25rem 0 0.9rem; }
.rps-consent label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.45; color: var(--color-muted); }
.rps-consent input { margin-top: 0.2rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.rps-consent a { color: var(--color-primary); }

.rps-alert { background: #fdecea; color: #8a1f17; border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-bottom: 0.75rem; font-size: 0.92rem; }
.rps-alert a { color: inherit; font-weight: 600; }
.rps-submit { width: 100%; padding: 1rem 1.25rem; font-size: 1.05rem; }
.rps-submit:disabled { opacity: 0.7; cursor: wait; }

.rps-success { text-align: center; padding: var(--space-md) 0; }
.rps-success__icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #eef8f1; color: #1e6b3a; font-size: 1.6rem; font-weight: 700; display: grid; place-items: center; margin: 0 auto var(--space-sm); }
.rps-success h3 { margin: 0 0 0.5rem; font-size: 1.4rem; }
.rps-success p { color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
	.rps-hero__link .rps-ico, .rps-subnav, .rps-subnav__list a { transition: none; }
}
