/* ==========================================================================
   RCAM — Composants (charte_graphique.md §5-§6)
   Tout est scopé sous .rcam pour ne jamais interférer avec le thème parent.
   Les tokens viennent de tokens.css.
   ========================================================================== */

/* ---------- Mise en page globale du thème ---------- */
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.rcam-flush > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.rcam-header-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* ---------- Base ---------- */
.rcam {
	margin-top: 0 !important;
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	color: var(--color-slate-800);
	line-height: 1.55;
}
.rcam * { box-sizing: border-box; }
.rcam h1, .rcam h2, .rcam h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-4);
}
.rcam h1 { font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; }
.rcam h2 { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem); }
.rcam h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 500; }
.rcam p { margin: 0 0 var(--space-4); max-width: 70ch; }
.rcam a { color: inherit; }
.rcam .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.rcam section { padding: var(--space-16) 0; }
@media (min-width: 1024px) { .rcam section { padding: var(--space-32) 0; } }

/* ---------- Registres ---------- */
.rcam .dark { background: var(--color-ink-950); color: var(--color-slate-100); }
.rcam .dark p { color: var(--color-slate-300); }
.rcam .dark-alt { background: var(--color-ink-900); color: var(--color-slate-100); }
.rcam .light { background: var(--color-paper-50); color: var(--color-slate-800); }
.rcam .light-alt { background: var(--color-paper-100); color: var(--color-slate-800); }
.rcam .grid-pattern {
	background-image:
		linear-gradient(rgba(27, 40, 66, .5) 1px, transparent 1px),
		linear-gradient(90deg, rgba(27, 40, 66, .5) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* ---------- Textes ---------- */
.rcam .eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-cyan-400);
	display: block;
	margin-bottom: var(--space-4);
}
.rcam .light .eyebrow, .rcam .light-alt .eyebrow { color: var(--color-cyan-700); }
.rcam .lede { font-size: 1.125rem; color: var(--color-slate-300); max-width: 60ch; }
.rcam .light .lede, .rcam .light-alt .lede { color: var(--color-slate-500); }
.rcam .proof {
	margin-top: var(--space-8);
	font-size: .875rem;
	color: var(--color-slate-300);
	letter-spacing: .02em;
}
.rcam .note { font-size: .9375rem; color: var(--color-slate-500); }
.rcam .dark .note { color: var(--color-slate-300); }

/* ---------- Boutons ---------- */
.rcam .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 24px;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition:
		background var(--motion-fast) var(--ease-out),
		border-color var(--motion-fast) var(--ease-out),
		transform var(--motion-fast) var(--ease-out);
	cursor: pointer;
}
.rcam .btn-primary { background: var(--color-cyan-400); color: var(--color-ink-950); }
.rcam .btn-primary:hover { background: var(--color-cyan-300); }
.rcam .btn-primary:active { background: var(--color-cyan-500); }
.rcam .btn-secondary { background: transparent; border-color: var(--color-slate-300); color: var(--color-slate-100); }
.rcam .light .btn-secondary, .rcam .light-alt .btn-secondary { border-color: var(--color-slate-800); color: var(--color-slate-800); }
.rcam .btn-secondary:hover { border-color: var(--color-cyan-400); }
.rcam .btn:focus-visible, .rcam a:focus-visible, .rcam summary:focus-visible {
	outline: 2px solid var(--color-cyan-400);
	outline-offset: 2px;
}
.rcam .btn-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.rcam .badge {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	border: 1px solid var(--color-slate-300);
	border-radius: 999px;
	padding: 6px 14px;
}
.rcam .light .badge, .rcam .light-alt .badge { border-color: var(--color-paper-200); }

/* ---------- Cartes ---------- */
.rcam .cards { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-12); }
@media (min-width: 768px) { .rcam .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
	.rcam .cards-4 { grid-template-columns: repeat(4, 1fr); }
	.rcam .cards-3 { grid-template-columns: repeat(3, 1fr); }
	.rcam .cards-2 { grid-template-columns: repeat(2, 1fr); }
}
.rcam .card {
	background: var(--color-ink-900);
	border: 1px solid var(--color-ink-800);
	border-radius: var(--radius-md);
	padding: var(--space-8) var(--space-6);
	transition:
		border-color var(--motion-base) var(--ease-out),
		transform var(--motion-base) var(--ease-out);
}
.rcam .light .card, .rcam .light-alt .card { background: var(--color-paper-50); border-color: var(--color-paper-200); }
.rcam .card:hover { border-color: var(--color-cyan-400); transform: translateY(-2px); }
.rcam .card .num {
	font-family: var(--font-mono);
	color: var(--color-cyan-400);
	font-size: .875rem;
	display: block;
	margin-bottom: var(--space-4);
}
.rcam .light .card .num, .rcam .light-alt .card .num { color: var(--color-cyan-700); }
.rcam .card h3 { margin-bottom: var(--space-2); }
.rcam .card p { margin-bottom: var(--space-2); }
.rcam .card a { color: var(--color-cyan-400); text-decoration: underline; font-weight: 600; font-size: .9375rem; }
.rcam .light .card a, .rcam .light-alt .card a { color: var(--color-cyan-700); }
.rcam .avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--color-ink-950);
	color: var(--color-cyan-400);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: var(--space-4);
}

/* ---------- Chiffres ---------- */
.rcam .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 768px) { .rcam .stats { grid-template-columns: repeat(4, 1fr); } }
.rcam .stat b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	color: var(--color-slate-800);
	font-variant-numeric: tabular-nums;
}
.rcam .dark .stat b { color: var(--color-slate-100); }
.rcam .stat span { font-size: .875rem; color: var(--color-slate-500); }
.rcam .dark .stat span { color: var(--color-slate-300); }

/* ---------- Méthode ---------- */
.rcam .steps { counter-reset: step; display: grid; gap: var(--space-6); margin-top: var(--space-12); }
@media (min-width: 768px) { .rcam .steps { grid-template-columns: repeat(4, 1fr); } }
.rcam .step { border-top: 2px solid var(--color-ink-800); padding-top: var(--space-4); }
.rcam .step .n { font-family: var(--font-mono); color: var(--color-cyan-400); font-size: .875rem; }
.rcam .refuse {
	margin-top: var(--space-12);
	padding: var(--space-6);
	border-left: 2px solid var(--color-cyan-400);
	background: var(--color-ink-900);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.rcam .refuse strong { display: block; color: var(--color-slate-100); margin-bottom: var(--space-2); }
.rcam .refuse p { margin: 0; }

/* ---------- Header ---------- */
.rcam header.site { position: sticky; top: 0; z-index: 50; background: var(--color-ink-950); border-bottom: 1px solid var(--color-ink-800); }
.rcam-header-part .rcam header.site { position: relative; }
.rcam header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 72px; }
.rcam header.site .logo,
.rcam footer.site .logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-slate-100);
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
}
.rcam .logo .mono {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 6px;
	background: var(--color-cyan-400);
	color: var(--color-ink-950);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.rcam .logo .mono svg { width: 16px; height: 21px; fill: currentColor; display: block; }
.rcam header.site nav { display: none; gap: var(--space-8); }
@media (min-width: 768px) { .rcam header.site nav { display: flex; } }
.rcam header.site nav a { color: var(--color-slate-300); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.rcam header.site nav a:hover, .rcam header.site nav a[aria-current="page"] { color: var(--color-slate-100); }
.rcam header.site .actions { display: flex; align-items: center; gap: var(--space-3); }
.rcam header.site .btn .sm { display: none; }
@media (max-width: 479px) {
	.rcam header.site .bar { gap: var(--space-2); }
	.rcam header.site .logo { font-size: 1rem; white-space: nowrap; }
	.rcam header.site .logo-tail { display: none; }
	.rcam header.site .actions { gap: var(--space-2); }
	.rcam header.site .btn { padding: 0 14px; height: 40px; white-space: nowrap; }
	.rcam header.site .btn .lg { display: none; }
	.rcam header.site .btn .sm { display: inline; }
	.rcam .mnav summary { height: 40px; padding: 0 10px; }
}
/* Menu mobile sans JavaScript */
.rcam .mnav { position: relative; }
@media (min-width: 768px) { .rcam .mnav { display: none; } }
.rcam .mnav summary {
	list-style: none;
	cursor: pointer;
	height: 48px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	border: 1px solid var(--color-ink-800);
	border-radius: var(--radius-md);
	color: var(--color-slate-100);
	font-weight: 600;
	font-size: .9375rem;
}
.rcam .mnav summary::-webkit-details-marker { display: none; }
.rcam .mnav-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	min-width: 220px;
	background: var(--color-ink-900);
	border: 1px solid var(--color-ink-800);
	border-radius: var(--radius-md);
	padding: var(--space-2);
	display: grid;
}
.rcam .mnav-panel a { color: var(--color-slate-100); text-decoration: none; padding: 12px var(--space-4); border-radius: var(--radius-sm); font-weight: 600; }
.rcam .mnav-panel a:hover { background: var(--color-ink-800); }

/* ---------- Footer ---------- */
.rcam footer.site { background: var(--color-ink-950); color: var(--color-slate-300); border-top: 1px solid var(--color-ink-800); padding: var(--space-16) 0 var(--space-8); }
.rcam footer.site .logo { margin-bottom: var(--space-4); }
.rcam footer.site .cols { display: grid; gap: var(--space-8); grid-template-columns: 1fr; margin-bottom: var(--space-12); }
@media (min-width: 768px) { .rcam footer.site .cols { grid-template-columns: 2fr 1fr 1fr; } }
.rcam footer.site h4 {
	font-family: var(--font-body);
	color: var(--color-slate-100);
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0 0 var(--space-4);
}
.rcam footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: .9375rem; }
.rcam footer.site a { color: var(--color-slate-300); text-decoration: none; }
.rcam footer.site a:hover { color: var(--color-cyan-400); }
.rcam footer.site .bottom {
	border-top: 1px solid var(--color-ink-800);
	padding-top: var(--space-6);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-size: .875rem;
	color: var(--color-slate-500);
}
.rcam footer.site .bottom a { color: var(--color-slate-300); }

/* ---------- Formulaires ---------- */
.rcam .field { margin-bottom: var(--space-6); }
.rcam .field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: var(--space-2); }
.rcam .field input, .rcam .field textarea {
	width: 100%;
	height: 48px;
	border: 1px solid var(--color-paper-200);
	border-radius: var(--radius-sm);
	padding: 0 var(--space-4);
	font-family: var(--font-body);
	font-size: 1rem;
	background: #fff;
	color: var(--color-slate-800);
}
.rcam .field textarea { height: 140px; padding: var(--space-4); }
.rcam .field input:focus, .rcam .field textarea:focus {
	outline: 2px solid var(--color-cyan-400);
	outline-offset: 2px;
	border-color: var(--color-cyan-400);
}
.rcam .field .help { display: block; font-size: .8125rem; color: var(--color-slate-500); margin-top: var(--space-2); }
.rcam .dark .field label { color: var(--color-slate-100); }
.rcam .dark .field input, .rcam .dark .field textarea { background: var(--color-ink-900); border-color: var(--color-ink-800); color: var(--color-slate-100); }
.rcam .dark .field .help { color: var(--color-slate-300); }
.rcam .form-legal { font-size: .8125rem; color: var(--color-slate-500); margin-top: var(--space-4); }
.rcam .dark .form-legal { color: var(--color-slate-300); }
.rcam .form-legal a { color: var(--color-cyan-700); }
.rcam .dark .form-legal a { color: var(--color-cyan-400); }
.rcam .contact-row { display: grid; gap: var(--space-8); grid-template-columns: 1fr; margin-top: var(--space-12); }
@media (min-width: 1024px) { .rcam .contact-row { grid-template-columns: 1fr 1fr; } }
.rcam .contact-item { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-6); }
.rcam .contact-item .ic {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 8px;
	background: var(--color-ink-900);
	color: var(--color-cyan-400);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: .8rem;
}

/* Contact Form 7 */
.rcam .wpcf7-form-control-wrap { display: block; }
.rcam .wpcf7 p { margin: 0; }
.rcam .wpcf7-response-output {
	margin: var(--space-4) 0 0;
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-paper-200);
	font-size: .9375rem;
}
.rcam .wpcf7-not-valid-tip { color: var(--color-red-500); font-size: .8125rem; margin-top: var(--space-1); display: block; }
.rcam .wpcf7-form.sent .wpcf7-response-output { border-color: var(--color-green-500); color: var(--color-green-500); }
.rcam .wpcf7-form.invalid .wpcf7-response-output,
.rcam .wpcf7-form.unaccepted .wpcf7-response-output { border-color: var(--color-red-500); color: var(--color-red-500); }
.rcam .wpcf7-spinner { margin-left: var(--space-2); }

/* ---------- Pages de texte (mentions légales, confidentialité…) ---------- */
.rcam-page .rcam-page-head { padding: var(--space-16) 0 var(--space-12); }
.rcam-page .rcam-page-body { padding: var(--space-12) 0 var(--space-16); }
.rcam-page .rcam-page-head h1 { margin: 0; color: var(--color-slate-100); }
.rcam-prose { max-width: 72ch; }
.rcam-prose > * + * { margin-top: var(--space-4); }
.rcam-prose h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); margin-top: var(--space-12); }
.rcam-prose h3 { font-size: 1.125rem; font-weight: 700; margin-top: var(--space-8); }
.rcam-prose a { color: var(--color-cyan-700); }
.rcam-prose ul, .rcam-prose ol { padding-left: 1.25rem; }

/* ---------- Utilitaires ---------- */
.rcam .center { text-align: center; }
.rcam .center .lede, .rcam .center p { margin-left: auto; margin-right: auto; }
.rcam .center .btn-row { justify-content: center; }
.rcam .todo { color: var(--color-amber-500); font-family: var(--font-mono); font-size: .8em; }
.rcam .sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Mouvement : apparition discrète (blueprint §5.1) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.rcam .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
	.rcam .reveal.is-in { opacity: 1; transform: none; }
}