/* =========================================================================
   Rav Engagements — Design system front-office
   -------------------------------------------------------------------------
   Charte graphique globale « Institutions et mémoire du Rav Ron Chaya
   zatsal » v2.0, appliquée dans sa VARIANTE « Émeraude & or doux »
   (dérogation durable au titre du §14, propre à RavChayaPourMoi).

   Architecture conforme au §11 : les variables --rcz-* portent un nom
   FONCTIONNEL et constituent la seule source de vérité. Aucune couleur
   hexadécimale ne doit apparaître ailleurs que dans ce bloc.

   Les variables --rav-* sont conservées comme couche de compatibilité :
   elles ne portent plus de valeur propre et se contentent de pointer vers
   la couche normative. Changer la palette = modifier ce seul bloc.

   Typographies officielles : Cormorant Garamond (titres),
   Source Sans 3 (interface), Frank Ruhl Libre (hébreu).
   ========================================================================= */

:root,
.rav-app,
[data-rcz-theme="emeraude"] {
	/* ── Couche NORMATIVE (§11.2) — variante Émeraude ──────────── */

	/* Surfaces */
	--rcz-surface-page: #FAF6EF;
	--rcz-surface-card: #FFFFFF;
	--rcz-surface-secondary: #E3E6DC;
	--rcz-surface-institutional: #0B3B2E;
	--rcz-surface-institutional-secondary: #14523F;
	--rcz-surface-institutional-deep: #072A20;

	/* Textes */
	--rcz-text-primary: #0B3B2E;
	--rcz-text-secondary: #5D615F;
	--rcz-text-inverse: #FFFFFF;
	--rcz-text-accent: #0B3B2E;
	--rcz-text-on-institutional: #EAF1EC;
	--rcz-text-on-institutional-soft: #C9D9CF;

	/* Actions */
	--rcz-action-primary-bg: #0B3B2E;
	--rcz-action-primary-text: #FFFFFF;
	--rcz-action-primary-border: #0B3B2E;
	--rcz-action-primary-hover-bg: #14523F;

	/* Or doux enrichi : même clarté que le #C99A3A de la charte, saturation
	   portée de 57 à 74. Sur émeraude profond il gagne en présence sans
	   virer au métallique (§7.2). Texte vert profond dessus : 5,59:1. */
	--rcz-action-secondary-bg: #DAA520;
	/* Mêmes composantes, exploitables en transparence (motif circulaire). */
	--rcz-accent-rgb: 218 165 32;
	--rcz-action-secondary-text: #0B3B2E;
	--rcz-action-secondary-border: #DAA520;
	--rcz-action-secondary-hover-bg: #E3E6DC;

	--rcz-action-tertiary-bg: transparent;
	--rcz-action-tertiary-text: #0B3B2E;
	--rcz-action-tertiary-border: #14523F;
	--rcz-action-tertiary-hover-bg: #E3E6DC;

	/* Liens et bordures */
	--rcz-link-default: #14523F;
	--rcz-link-hover: #0B3B2E;
	--rcz-link-visited: #0B3B2E;
	--rcz-border-default: #E3E6DC;
	--rcz-border-strong: #CBD5C6;
	--rcz-border-control: #5D615F;

	/* Accent clair (fonds de repères, pastilles) */
	--rcz-accent-soft: #F3E7CD;
	/* Vert éclairci — survols et dégradés doux */
	--rcz-surface-institutional-light: #1B6B52;
	/* L'or doux ne passe pas le seuil AA en TEXTE : deux déclinaisons
	   dédiées, l'une éclaircie pour les fonds institutionnels, l'autre
	   assombrie pour les fonds clairs. L'aplat reste --rcz-action-secondary-bg. */
	--rcz-accent-text-on-institutional: #E8BC4A;
	--rcz-accent-text-on-light: #7F6205;

	/* Focus bicolore obligatoire (§9.1) */
	--rcz-focus-outer: #0B3B2E;
	--rcz-focus-inner: #FFFFFF;
	--rcz-focus-width: 3px;
	--rcz-focus-offset: 3px;

	/* États fonctionnels (§3.2) — distincts de la palette de marque */
	--rcz-state-error-bg: #B42318;
	--rcz-state-error-text: #FFFFFF;
	--rcz-state-error-soft: #FBEAE8;
	--rcz-state-error-border: #EFC6C1;
	--rcz-state-success-bg: #2E7D32;
	--rcz-state-success-text: #FFFFFF;
	--rcz-state-success-soft: #E9F2E7;
	--rcz-state-success-border: #C4DCC0;
	--rcz-state-success-strong: #1F5C22;
	--rcz-state-warning-bg: #F3E2A8;
	--rcz-state-warning-text: #3B2F00;
	--rcz-state-info-bg: #E9EFEA;
	--rcz-state-info-text: #0B3B2E;
	--rcz-state-disabled-bg: #E3E6DC;
	--rcz-state-disabled-text: #5D615F;

	/* Typographies */
	--rcz-font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--rcz-font-ui: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--rcz-font-hebrew: "Frank Ruhl Libre", "Noto Serif Hebrew", serif;

	/* Formes, ombres et dimensions */
	--rcz-radius-card: 24px;
	--rcz-radius-control: 999px;
	--rcz-radius-sm: 14px;
	--rcz-shadow-card: 0 12px 32px rgb(11 59 46 / .10);
	--rcz-shadow-card-hover: 0 18px 48px rgb(11 59 46 / .16);
	--rcz-content-max: 1200px;
	--rcz-text-max: 720px;
	--rcz-target-min: 48px;
}

.rav-app {
	/* ── Couche de COMPATIBILITÉ ───────────────────────────────────
	   Aucune valeur propre : uniquement des renvois vers la couche
	   normative ci-dessus. Ne jamais y écrire une couleur en dur. */
	--rav-brun: var(--rcz-surface-institutional);
	--rav-brun-2: var(--rcz-surface-institutional-secondary);
	/* « terra » portait l'accent et les liens : renvoie vers le vert de lien,
	   distinguable du texte courant sans devenir criard. */
	--rav-terra: var(--rcz-link-default);
	--rav-terra-2: var(--rcz-surface-institutional-light);
	--rav-terra-deep: var(--rcz-text-primary);
	--rav-ink: var(--rcz-text-primary);
	--rav-ink-2: var(--rcz-surface-institutional-secondary);
	--rav-ink-deep: var(--rcz-text-primary);
	--rav-muted: var(--rcz-text-secondary);
	--rav-ivory: var(--rcz-surface-page);
	--rav-cream: var(--rcz-state-info-bg);
	--rav-surface: var(--rcz-surface-card);
	--rav-surface-2: var(--rcz-surface-page);
	--rav-border: var(--rcz-border-default);
	--rav-border-strong: var(--rcz-border-strong);

	/* Anciens noms « ochre » : renvoient vers l'accent officiel. */
	--rav-ochre: var(--rcz-action-secondary-bg);
	--rav-ochre-2: var(--rcz-action-secondary-hover-bg);
	--rav-ochre-deep: var(--rcz-link-default);

	/* Sémantique */
	--rav-success: var(--rcz-state-success-bg);
	--rav-success-soft: var(--rcz-state-success-soft);
	--rav-danger: var(--rcz-state-error-bg);
	--rav-danger-soft: var(--rcz-state-error-soft);

	/* Formes & profondeur */
	--rav-radius: var(--rcz-radius-card);
	--rav-radius-sm: var(--rcz-radius-sm);
	--rav-shadow: var(--rcz-shadow-card);
	--rav-shadow-lg: var(--rcz-shadow-card-hover);
	/* Anneau de focus BICOLORE (§9.1) : halo clair puis liseré foncé.
	   Reste visible sur fond clair comme sur fond institutionnel. */
	--rav-ring:
		0 0 0 var(--rcz-focus-offset) var(--rcz-focus-inner),
		0 0 0 calc(var(--rcz-focus-offset) + var(--rcz-focus-width)) var(--rcz-focus-outer);

	/* Typographie */
	--rav-font-head: var(--rcz-font-title);
	--rav-font-body: var(--rcz-font-ui);
	--rav-font-hebrew: var(--rcz-font-hebrew);

	color: var(--rcz-text-primary);
	background: var(--rcz-surface-page);
	font-family: var(--rav-font-body);
	font-size: 16.5px;
	line-height: 1.65;
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 18px 56px;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.rav-app *, .rav-app *::before, .rav-app *::after { box-sizing: inherit; }

.rav-app h1, .rav-app h2, .rav-app h3 {
	font-family: var(--rav-font-head);
	color: var(--rav-ink-deep);
	line-height: 1.15;
	margin: 0 0 .4em;
	font-weight: 600;
	letter-spacing: 0;
}
.rav-app h1 { font-size: clamp(2.1rem, 4.5vw, 3.25rem); font-weight: 700; }
.rav-app h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.rav-app h3 { font-size: 1.25rem; }
.rav-app p { margin: 0 0 1em; }
.rav-app a { color: var(--rav-terra); text-underline-offset: 2px; }
.rav-app :lang(he), .rav-app [dir="rtl"] { font-family: var(--rav-font-hebrew); }

/* ── Focus visible bicolore (§9.1) ─────────────────────────
   Un seul point d'application pour tout le module : aucun composant
   ne doit désactiver le focus sans le remplacer. */
.rav-app a:focus-visible,
.rav-app button:focus-visible,
.rav-app input:focus-visible,
.rav-app select:focus-visible,
.rav-app textarea:focus-visible,
.rav-app summary:focus-visible,
.rav-app [tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--rav-ring);
	border-radius: var(--rcz-radius-sm);
}
/* Sur fond institutionnel, les deux couleurs s'inversent. */
.rav-app .rav-hero a:focus-visible,
.rav-app .rav-hero button:focus-visible,
.rav-app .rav-header a:focus-visible,
.rav-app .rav-header button:focus-visible {
	box-shadow:
		0 0 0 var(--rcz-focus-offset) var(--rcz-focus-outer),
		0 0 0 calc(var(--rcz-focus-offset) + var(--rcz-focus-width)) var(--rcz-focus-inner);
}

/* ── Boutons ──────────────────────────────────────────────── */
.rav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.rav-btn:hover { transform: translateY(-1px); box-shadow: var(--rav-shadow); }
.rav-btn:active { transform: translateY(0); }

/* Bouton principal (§6.3) : fond institutionnel, texte inverse. */
.rav-btn--primary {
	background: var(--rcz-action-primary-bg);
	color: var(--rcz-action-primary-text);
	border-color: var(--rcz-action-primary-border);
}
.rav-btn--primary:hover { background: var(--rcz-action-primary-hover-bg); }

/* Bouton secondaire (§6.3) : or doux, texte institutionnel.
   Réservé aux appels à l'action de forte valeur. */
.rav-btn--gold {
	background: var(--rcz-action-secondary-bg);
	color: var(--rcz-action-secondary-text);
	border-color: var(--rcz-action-secondary-border);
	box-shadow: 0 8px 20px -10px rgb(11 59 46 / .45);
}
.rav-btn--gold:hover {
	background: var(--rcz-action-secondary-hover-bg);
	border-color: var(--rcz-action-tertiary-border);
}

/* Bouton tertiaire (§6.3) : contour, sans aplat. */
.rav-btn--ghost {
	background: var(--rav-surface);
	color: var(--rcz-action-tertiary-text);
	border-color: var(--rcz-border-strong);
}
.rav-btn--ghost:hover {
	background: var(--rcz-action-tertiary-hover-bg);
	border-color: var(--rcz-action-tertiary-border);
	color: var(--rcz-action-tertiary-text);
}
.rav-btn--sm { padding: 8px 15px; font-size: .875rem; }
.rav-btn--block { width: 100%; }
.rav-btn--danger { background: transparent; color: var(--rav-danger); }
.rav-btn--danger:hover { background: var(--rav-danger-soft); box-shadow: none; }

/* ── Cartes ───────────────────────────────────────────────── */
.rav-card {
	position: relative;
	background: var(--rav-surface);
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius);
	box-shadow: var(--rav-shadow);
	padding: 26px 28px;
	transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease;
}
.rav-commit.rav-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--rav-shadow-lg);
	border-color: var(--rav-border-strong);
}
.rav-grid { display: grid; gap: 22px; }
.rav-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rav-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rav-grid--2, .rav-grid--3 { grid-template-columns: 1fr; } }

/* ── Hero (brun profond institutionnel, accent terre de Sienne) ── */
.rav-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(158deg, var(--rav-brun-2) 0%, var(--rav-brun) 58%, var(--rcz-surface-institutional-deep) 100%);
	color: var(--rcz-text-on-institutional);
	border-radius: var(--rav-radius);
	padding: 56px 48px;
	margin-bottom: 30px;
	box-shadow: var(--rav-shadow-lg);
}
.rav-hero::after {
	content: "";
	position: absolute;
	left: 48px; right: 48px; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--rcz-action-secondary-bg), transparent 70%);
	opacity: .9;
}
/* ── Motif circulaire (§7.1) ───────────────────────────────
   Arcs fins en or, traits de 1 px. Un seul foyer — la charte proscrit
   l'accumulation — placé HORS du cadre, en haut à droite : seuls les arcs
   balaient l'angle. Les rayons (96 / 140 / 184 px) sont bornés par la
   mesure la plus contraignante relevée en recette, 191 px, de sorte
   qu'aucun anneau ne passe derrière un texte, un bouton ou le portrait,
   sur toutes les pages et à toutes les largeurs. */
.rav-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 106% -8%, transparent 0 96px,  rgb(var(--rcz-accent-rgb) / .34) 96px 97px,   transparent 97px),
		radial-gradient(circle at 106% -8%, transparent 0 140px, rgb(var(--rcz-accent-rgb) / .24) 140px 141px, transparent 141px),
		radial-gradient(circle at 106% -8%, transparent 0 184px, rgb(var(--rcz-accent-rgb) / .15) 184px 185px, transparent 185px);
}
/* Sur mobile le héro se resserre autour du portrait : les deux arcs
   extérieurs le traverseraient. On ne garde que le premier. */
@media (max-width: 700px) {
	.rav-hero::before {
		background-image:
			radial-gradient(circle at 106% -8%, transparent 0 96px, rgb(var(--rcz-accent-rgb) / .34) 96px 97px, transparent 97px);
	}
}
.rav-hero > * { position: relative; z-index: 1; }
.rav-hero h1 { color: var(--rcz-text-inverse); }
/* Surtitre. Valeur par défaut : fond CLAIR (il est réutilisé hors du héro,
   par exemple en tête du guide) ; la version éclaircie ne vaut que dans le
   héro institutionnel. */
.rav-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: .72rem;
	color: var(--rcz-accent-text-on-light);
	font-weight: 700;
	margin-bottom: 14px;
}
.rav-hero__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--rcz-accent-text-on-light); }
.rav-hero .rav-hero__eyebrow { color: var(--rcz-accent-text-on-institutional); }
.rav-hero .rav-hero__eyebrow::before { background: var(--rcz-accent-text-on-institutional); }
.rav-hero__lead { font-size: 1.14rem; color: var(--rcz-text-on-institutional-soft); max-width: 620px; }
.rav-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.rav-hero .rav-btn--primary {
	background: var(--rcz-action-secondary-bg);
	color: var(--rcz-action-secondary-text);
	border-color: var(--rcz-action-secondary-border);
}
.rav-hero .rav-btn--primary:hover {
	background: var(--rcz-accent-soft);
	border-color: var(--rcz-accent-soft);
}
.rav-hero .rav-btn--ghost {
	background: rgb(255 255 255 / .08);
	border-color: rgb(234 241 236 / .42);
	color: var(--rcz-text-on-institutional);
}
.rav-hero .rav-btn--ghost:hover {
	background: rgb(255 255 255 / .14);
	border-color: var(--rcz-action-secondary-bg);
	color: var(--rcz-text-inverse);
}

/* ── Compteurs ────────────────────────────────────────────── */
.rav-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.rav-counter { text-align: center; padding: 6px 16px; border-left: 1px solid var(--rav-border); }
.rav-counter:first-child { border-left: none; }
.rav-counter__value {
	font-family: var(--rav-font-head);
	font-size: 2.3rem;
	font-weight: 700;
	color: var(--rav-ochre-deep);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.rav-counter__label { color: var(--rav-muted); font-size: .9rem; margin-top: 6px; }
@media (max-width: 760px) {
	.rav-counters { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
	.rav-counter:nth-child(odd) { border-left: none; }
}

/* ── Progression ──────────────────────────────────────────── */
.rav-progress {
	height: 10px;
	background: var(--rav-surface-2);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgb(11 59 46 / .10);
}
.rav-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--rav-ochre), var(--rav-ochre-2));
	border-radius: 999px;
	transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.rav-progress__meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--rav-muted); margin-top: 7px; }

/* ── Badges ───────────────────────────────────────────────── */
.rav-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .02em;
	border: 1px solid transparent;
}
.rav-badge--active { background: var(--rcz-state-info-bg); color: var(--rav-terra-deep); border-color: var(--rcz-border-strong); }
.rav-badge--completed { background: var(--rav-success-soft); color: var(--rcz-state-success-strong); border-color: var(--rcz-state-success-border); }
.rav-badge--cancelled, .rav-badge--expired { background: var(--rav-danger-soft); color: var(--rav-danger); border-color: var(--rcz-state-error-border); }
.rav-badge--gold { background: var(--rcz-accent-soft); color: var(--rav-brun); border-color: var(--rav-border-strong); }

/* ── Engagements ──────────────────────────────────────────── */
.rav-commit { display: flex; flex-direction: column; gap: 14px; }
.rav-commit__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rav-commit__title { margin: 0; font-size: 1.2rem; }
.rav-commit__sub { color: var(--rav-muted); font-size: .9rem; }
.rav-commit__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }

/* ── Éléments assignables (Téhilim…) ──────────────────────── */
.rav-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
	max-height: 340px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius-sm);
	background: var(--rav-cream);
}
.rav-item-toggle { margin: 0; }
.rav-item-toggle button {
	width: 100%;
	padding: 9px 4px;
	border: 1px solid var(--rav-border);
	background: var(--rav-surface);
	border-radius: 10px;
	cursor: pointer;
	font: inherit;
	font-size: .83rem;
	color: var(--rav-muted);
	transition: all .12s ease;
}
.rav-item-toggle button:hover { border-color: var(--rav-ochre); }
.rav-item-toggle--done button {
	background: linear-gradient(180deg, var(--rcz-surface-card), var(--rav-success-soft));
	border-color: var(--rav-success);
	color: var(--rcz-state-success-strong);
	font-weight: 700;
}

/* ── Formulaires ──────────────────────────────────────────── */
.rav-field { margin-bottom: 20px; }
.rav-field > label { display: block; font-weight: 600; margin-bottom: 7px; color: var(--rav-ink); }
.rav-field .rav-hint { color: var(--rav-muted); font-size: .85rem; font-weight: 400; }
.rav-input, .rav-select, .rav-textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius-sm);
	font: inherit;
	background: var(--rav-surface);
	color: var(--rav-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.rav-input:focus, .rav-select:focus, .rav-textarea:focus {
	outline: none;
	border-color: var(--rav-ochre);
	box-shadow: var(--rav-ring);
}
.rav-choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius-sm);
	background: var(--rav-surface);
	cursor: pointer;
	margin-bottom: 10px;
	transition: border-color .15s ease, background .15s ease;
}
.rav-choice:hover { border-color: var(--rav-terra); background: var(--rav-surface-2); }
/* Cases et boutons radio : agrandis et teintés à la charte. Ils restent
   enveloppés dans un libellé cliquable d'au moins 48 px de haut. */
.rav-choice input {
	margin-top: 2px;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--rcz-surface-institutional);
}
.rav-fieldset { border: none; padding: 0; margin: 0 0 20px; }
.rav-fieldset > legend { font-weight: 600; padding: 0; margin-bottom: 10px; color: var(--rav-ink); }

/* ── Notices ──────────────────────────────────────────────── */
.rav-notice { padding: 14px 18px; border-radius: var(--rav-radius-sm); margin-bottom: 22px; border: 1px solid transparent; font-weight: 500; }
.rav-notice--ok { background: var(--rav-success-soft); border-color: var(--rcz-state-success-border); color: var(--rcz-state-success-strong); }
.rav-notice--error { background: var(--rav-danger-soft); border-color: var(--rcz-state-error-border); color: var(--rav-danger); }
.rav-notice--info { background: var(--rav-cream); border-color: var(--rav-border-strong); color: var(--rav-terra-deep); }

/* ── Divers ───────────────────────────────────────────────── */
.rav-section { margin-bottom: 38px; }
.rav-section__title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.rav-section__title h2 { display: flex; align-items: center; gap: 12px; margin: 0; }
.rav-section__title h2::before {
	content: "";
	width: 9px; height: 9px;
	border-radius: 2px;
	background: var(--rav-terra);
	transform: rotate(45deg);
	flex: 0 0 auto;
}
.rav-muted { color: var(--rav-muted); }
.rav-empty { text-align: center; padding: 46px 22px; color: var(--rav-muted); background: var(--rav-cream); border-style: dashed; }
.rav-inline-form { display: inline; }
.rav-date { font-size: .85rem; color: var(--rav-muted); }
.rav-date__heb { color: var(--rav-ochre-deep); font-weight: 600; }

.rav-today-bar {
	text-align: center;
	font-family: var(--rav-font-head);
	color: var(--rav-ochre-deep);
	font-size: 1.02rem;
	letter-spacing: .01em;
	margin: 4px 0 16px;
}
.rav-today { color: var(--rav-ochre-deep); font-weight: 600; }

/* ── Page Hub « Accueil du site » ─────────────────────────── */
.rav-site-hub__hero {
	text-align: center;
	padding: 48px 32px 40px;
}
.rav-site-hub__hero .rav-hero__eyebrow { justify-content: center; }
.rav-site-hub__hero .rav-hero__lead { margin: 0 auto; }

.rav-site-hub__choices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 36px;
}
@media (max-width: 700px) {
	.rav-site-hub__choices { grid-template-columns: 1fr; }
}

.rav-site-hub__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 40px 32px 36px;
	border-radius: var(--rav-radius);
	border: 1px solid var(--rav-border);
	background: var(--rav-surface);
	box-shadow: var(--rav-shadow);
	text-decoration: none;
	color: var(--rav-ink);
	transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.rav-site-hub__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--rav-shadow-lg);
	border-color: var(--rav-ochre);
}

.rav-site-hub__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	background: var(--rcz-accent-soft);
	color: var(--rcz-text-primary);
	transition: background .2s ease, color .2s ease;
}
/* Différenciation des deux portes, désormais par la matière et non par
   deux couleurs de marque : hommages = or doux, engagements = vert. */
.rav-site-hub__card:hover { border-color: var(--rcz-action-secondary-bg); }
.rav-site-hub__card:hover .rav-site-hub__icon {
	background: var(--rcz-action-secondary-bg);
	color: var(--rcz-action-secondary-text);
}
.rav-site-hub__card--engagement .rav-site-hub__icon {
	background: var(--rcz-state-info-bg);
	color: var(--rcz-surface-institutional);
}
.rav-site-hub__card--engagement:hover { border-color: var(--rcz-surface-institutional); }
.rav-site-hub__card--engagement:hover .rav-site-hub__icon {
	background: var(--rcz-surface-institutional);
	color: var(--rcz-text-on-institutional);
}

.rav-site-hub__title {
	font-family: var(--rav-font-head);
	font-size: 1.4rem;
	font-weight: 700;
	margin: 4px 0 0;
	color: var(--rav-ink);
}
.rav-site-hub__desc {
	color: var(--rav-muted);
	font-size: .95rem;
	line-height: 1.55;
	margin: 0;
	max-width: 320px;
}

.rav-site-hub__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-weight: 600;
	font-size: .95rem;
	color: var(--rav-terra);
	transition: gap .15s ease;
}
.rav-site-hub__card--engagement .rav-site-hub__action { color: var(--rav-brun); }
.rav-site-hub__card:hover .rav-site-hub__action { gap: 10px; }

.rav-site-hub__footer {
	text-align: center;
	font-family: var(--rav-font-head);
	font-style: italic;
	color: var(--rav-muted);
	font-size: .95rem;
	max-width: 600px;
	margin: 0 auto 30px;
	line-height: 1.6;
}

/* ── Encart CTA « Prendre un engagement » ─────────────────── */
.rav-cta-engagement {
	margin: 32px 0;
}
.rav-cta-engagement__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 30px;
	border-radius: var(--rav-radius);
	border: 1px solid var(--rav-border-strong);
	background:
		radial-gradient(ellipse 80% 120% at 0% 50%, rgb(var(--rcz-accent-rgb) / .10), transparent 60%),
		var(--rav-surface);
	box-shadow: var(--rav-shadow);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.rav-cta-engagement__inner:hover {
	border-color: var(--rav-ochre);
	box-shadow: var(--rav-shadow-lg);
}
.rav-cta-engagement__content {
	display: flex;
	align-items: center;
	gap: 18px;
}
.rav-cta-engagement__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rav-cream), var(--rav-surface-2));
	color: var(--rav-terra);
}
.rav-cta-engagement__title {
	font-family: var(--rav-font-head);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--rav-ink);
}
.rav-cta-engagement__text {
	margin: 0;
	color: var(--rav-muted);
	font-size: .9rem;
	line-height: 1.5;
}
.rav-cta-engagement__btn {
	flex-shrink: 0;
	white-space: nowrap;
}
@media (max-width: 700px) {
	.rav-cta-engagement__inner { flex-direction: column; text-align: center; }
	.rav-cta-engagement__content { flex-direction: column; }
	.rav-cta-engagement__btn { width: 100%; }
}

/* =========================================================================
   v1.8.1 — Blindage anti-thème (U1)
   -------------------------------------------------------------------------
   Les thèmes WordPress imposent souvent leurs couleurs aux liens, boutons et
   champs (a { color }, .wp-block-button, input { background }…) et rendaient
   le texte des boutons illisible. On force ici nos couleurs sur TOUS les
   composants du module, avec la spécificité nécessaire.
   ========================================================================= */

/* — Boutons : neutralise l'apparence et les couleurs du thème — */
.rav-app a.rav-btn,
.rav-app button.rav-btn,
.rav-app .rav-btn {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none !important;
	box-sizing: border-box;
}
.rav-app a.rav-btn--primary,
.rav-app button.rav-btn--primary,
.rav-app .rav-btn--primary,
.rav-app .rav-btn--primary:focus,
.rav-app .rav-btn--primary:visited,
.rav-app .rav-btn--primary:active {
	background: var(--rcz-action-primary-bg) !important;
	color: var(--rcz-action-primary-text) !important;
	border-color: var(--rcz-action-primary-border) !important;
}
.rav-app .rav-btn--primary:hover {
	background: var(--rcz-action-primary-hover-bg) !important;
	color: var(--rcz-action-primary-text) !important;
}
.rav-app a.rav-btn--gold,
.rav-app button.rav-btn--gold,
.rav-app .rav-btn--gold,
.rav-app .rav-btn--gold:focus,
.rav-app .rav-btn--gold:visited,
.rav-app .rav-btn--gold:active {
	background: var(--rcz-action-secondary-bg) !important;
	color: var(--rcz-action-secondary-text) !important;
	border-color: var(--rcz-action-secondary-border) !important;
}
.rav-app .rav-btn--gold:hover {
	background: var(--rcz-action-secondary-hover-bg) !important;
	color: var(--rcz-action-secondary-text) !important;
	border-color: var(--rcz-action-tertiary-border) !important;
}
.rav-app a.rav-btn--ghost,
.rav-app button.rav-btn--ghost,
.rav-app .rav-btn--ghost,
.rav-app .rav-btn--ghost:visited {
	background: var(--rav-surface) !important;
	color: var(--rcz-action-tertiary-text) !important;
	border-color: var(--rcz-border-strong) !important;
}
.rav-app .rav-btn--ghost:hover,
.rav-app .rav-btn--ghost:focus {
	background: var(--rcz-action-tertiary-hover-bg) !important;
	border-color: var(--rcz-action-tertiary-border) !important;
	color: var(--rcz-action-tertiary-text) !important;
}
/* Sur le héro institutionnel : le bouton principal passe à l'or doux,
   seul aplat qui reste lisible sur le vert profond. */
.rav-app .rav-hero a.rav-btn--primary,
.rav-app .rav-hero button.rav-btn--primary,
.rav-app .rav-hero .rav-btn--primary,
.rav-app .rav-hero .rav-btn--primary:focus,
.rav-app .rav-hero .rav-btn--primary:visited,
.rav-app .rav-hero .rav-btn--primary:active {
	background: var(--rcz-action-secondary-bg) !important;
	color: var(--rcz-action-secondary-text) !important;
	border-color: var(--rcz-action-secondary-border) !important;
}
.rav-app .rav-hero .rav-btn--primary:hover {
	background: var(--rcz-accent-soft) !important;
	color: var(--rcz-action-secondary-text) !important;
	border-color: var(--rcz-accent-soft) !important;
}
.rav-app .rav-hero a.rav-btn--ghost,
.rav-app .rav-hero button.rav-btn--ghost,
.rav-app .rav-hero .rav-btn--ghost,
.rav-app .rav-hero .rav-btn--ghost:visited {
	background: rgb(255 255 255 / .08) !important;
	border-color: rgb(234 241 236 / .42) !important;
	color: var(--rcz-text-on-institutional) !important;
}
.rav-app .rav-hero a.rav-btn--ghost:hover,
.rav-app .rav-hero a.rav-btn--ghost:focus,
.rav-app .rav-hero .rav-btn--ghost:hover,
.rav-app .rav-hero .rav-btn--ghost:focus {
	background: rgb(255 255 255 / .14) !important;
	border-color: var(--rcz-action-secondary-bg) !important;
	color: var(--rcz-text-inverse) !important;
}
.rav-app .rav-btn--danger,
.rav-app .rav-btn--danger:visited {
	background: transparent !important;
	color: var(--rav-danger) !important;
}

/* — Liens-cartes (hub, campagnes) : pas de soulignement ni couleur du thème — */
.rav-app a.rav-site-hub__card,
.rav-app a.rav-site-hub__card:hover,
.rav-app a.rav-site-hub__card:visited {
	text-decoration: none !important;
	color: var(--rav-ink) !important;
	box-shadow: var(--rav-shadow);
}

/* — Champs de formulaire : couleurs forcées contre celles du thème — */
.rav-app input.rav-input,
.rav-app select.rav-select,
.rav-app textarea.rav-textarea {
	background: var(--rav-surface) !important;
	color: var(--rav-ink) !important;
	border: 1px solid var(--rav-border) !important;
	border-radius: var(--rav-radius-sm) !important;
	box-shadow: none;
}
.rav-app input.rav-input:focus,
.rav-app select.rav-select:focus,
.rav-app textarea.rav-textarea:focus {
	border-color: var(--rav-ochre) !important;
	box-shadow: var(--rav-ring) !important;
	outline: none !important;
}

/* — Titres : le thème ne doit pas repeindre ceux du héro — */
.rav-app .rav-hero h1,
.rav-app .rav-hero h2 { color: var(--rcz-text-inverse) !important; }

/* — Hero mobile (U2) — */
@media (max-width: 600px) {
	.rav-hero { padding: 34px 22px; }
	.rav-hero::after { left: 22px; right: 22px; }
	.rav-app { padding: 6px 12px 44px; }
	.rav-card { padding: 20px 18px; }
}

/* ── Entête sticky du module ─────────────────────────────────
   Bandeau brun profond (institutionnel) qui contraste avec l'ivoire :
   photo du Rav, page courante, navigation, version. */
.rav-header {
	position: sticky;
	top: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(180deg, var(--rav-brun-2), var(--rav-brun));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background-color: rgb(7 42 32 / .96);
	color: var(--rcz-text-on-institutional);
	border: 1px solid rgb(var(--rcz-accent-rgb) / .30);
	border-top: none;
	border-radius: 0 0 14px 14px;
	padding: 8px 16px;
	margin: 0 0 20px;
	box-shadow: 0 10px 24px -14px rgb(7 42 32 / .55);
	font-size: .86rem;
}
body.admin-bar .rav-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .rav-header { top: 46px; } }

.rav-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none !important;
	color: var(--rcz-text-on-institutional) !important;
	font-weight: 700;
	white-space: nowrap;
}
.rav-header__photo {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--rcz-action-secondary-bg);
	box-shadow: 0 0 0 2px rgb(7 42 32 / .5);
	display: block;
}
.rav-header__name { font-family: var(--rav-font-head); font-size: 1.05em; letter-spacing: .01em; }
.rav-header__zl { color: var(--rcz-text-on-institutional-soft); font-size: .82em; font-family: var(--rav-font-hebrew); }
.rav-header__sep { color: var(--rcz-text-on-institutional-soft); }
.rav-header__label {
	color: var(--rcz-accent-text-on-institutional);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0; /* sans quoi l'ellipse n'opère pas dans un conteneur flex */
}
.rav-header__nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* Entre 761 et 1080 px la barre ne tient pas sur une ligne : elle passe la
   navigation en seconde ligne plutôt que de déborder horizontalement. */
@media (max-width: 1080px) {
	.rav-header { flex-wrap: wrap; }
	.rav-header__nav {
		order: 9;
		flex-basis: 100%;
		margin-left: 0;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.rav-header__nav::-webkit-scrollbar { display: none; }
}
.rav-header__nav a {
	color: rgb(234 241 236 / .72) !important;
	text-decoration: none !important;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 999px;
	transition: color .15s ease, background .15s ease;
}
.rav-header__nav a:hover { color: var(--rcz-text-inverse) !important; background: rgb(255 255 255 / .10); }
/* Page courante : c'est le SEUL élément mis en évidence dans la barre. */
.rav-header__nav a.is-current {
	color: var(--rcz-text-inverse) !important;
	background: rgb(255 255 255 / .16);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28);
	cursor: default;
}
/* Or doux : seul aplat qui se détache franchement du bandeau vert. */
.rav-header__cta {
	flex: 0 0 auto;
	background: var(--rcz-action-secondary-bg) !important;
	color: var(--rcz-action-secondary-text) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: .82rem;
	padding: 8px 14px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1;
}
.rav-header__cta:hover { filter: brightness(1.06); }
.rav-header__ver {
	color: var(--rcz-text-on-institutional-soft);
	font-size: .68rem;
	font-variant-numeric: tabular-nums;
	margin-left: 8px;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.rav-header__nav { display: none; }
	.rav-header__name { display: none; }
	.rav-header__cta { margin-left: auto; }
	.rav-header { font-size: .82rem; }
}

/* ── Portrait du Rav (hero de l'accueil) ─────────────────────
   Médaillon circulaire sobre, cerclé de terre de Sienne (aucun halo doré). */
.rav-portrait {
	display: block;
	width: 108px;
	height: 108px;
	margin: 0 auto 18px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	border: 3px solid var(--rcz-action-secondary-bg);
	box-shadow: 0 0 0 6px rgb(255 255 255 / .14), 0 14px 30px -12px rgb(0 0 0 / .5);
}

/* ── Écrans de compte (connexion, inscription, mot de passe) ──── */
.rav-header--auth .rav-header__back {
	margin-left: auto;
	color: var(--rcz-text-on-institutional) !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: .86rem;
	white-space: nowrap;
	/* Cible d'au moins 44 px de haut : ce lien est isolé, il ne bénéficie
	   pas de l'exception « lien en ligne dans une phrase ». */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	border-radius: 999px;
}
.rav-header--auth .rav-header__back:hover { background: rgb(255 255 255 / .10); }
.rav-header--auth .rav-header__back:hover { color: var(--rcz-text-inverse) !important; }

.rav-auth { }
.rav-auth__panel {
	max-width: 460px;
	margin: 30px auto 0;
	background: var(--rav-surface);
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius);
	box-shadow: var(--rav-shadow);
	padding: 34px 34px 30px;
}
.rav-auth__panel--wide { max-width: 620px; }
.rav-auth__title {
	font-size: clamp(1.8rem, 4vw, 2.3rem);
	margin: 0 0 6px;
	color: var(--rav-ink-deep);
}
.rav-auth__lead { color: var(--rav-muted); margin: 0 0 20px; }

.rav-auth__form { display: block; }
.rav-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 18px;
}
.rav-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	color: var(--rav-ink-2);
	cursor: pointer;
}
.rav-auth__remember input { width: 20px; height: 20px; accent-color: var(--rcz-surface-institutional); }
.rav-auth__link,
.rav-auth__switch a {
	color: var(--rav-terra-deep);
	font-weight: 600;
	text-decoration: none;
}
.rav-auth__link:hover,
.rav-auth__switch a:hover { text-decoration: underline; }

/* ── Connexion externe (Google, Apple) ─────────────────────
   EXCEPTION ASSUMÉE au §6.3 : Google et Apple imposent l'apparence de
   leurs boutons dans leurs conditions d'utilisation — fond, logo,
   proportions et libellé. On ne les repeint donc pas à la charte. Seul
   l'entourage (séparateur, espacements, focus) reste à notre main. */
.rav-sso { margin: 0 0 22px; }
.rav-sso__sep {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0;
	color: var(--rcz-text-secondary);
	font-size: .88rem;
}
.rav-sso__sep::before,
.rav-sso__sep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rcz-border-default);
}
.rav-sso__buttons { display: flex; flex-direction: column; gap: 10px; }
.rav-sso__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: var(--rcz-radius-control);
	border: 1px solid transparent;
	font-family: var(--rcz-font-ui);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	transition: box-shadow .2s ease, background .2s ease;
}
.rav-sso__btn svg { flex: 0 0 auto; }

/* Google : fond blanc, texte #1F1F1F, contour gris — habillage officiel. */
.rav-app .rav-sso__btn--google,
.rav-app .rav-sso__btn--google:visited {
	background: #FFFFFF !important;
	color: #1F1F1F !important;
	border-color: #747775 !important;
}
.rav-app .rav-sso__btn--google:hover { box-shadow: 0 1px 3px rgb(0 0 0 / .25); }

/* Apple : fond noir, texte et logo blancs — habillage officiel. */
.rav-app .rav-sso__btn--apple,
.rav-app .rav-sso__btn--apple:visited {
	background: #000000 !important;
	color: #FFFFFF !important;
	border-color: #000000 !important;
}
.rav-app .rav-sso__btn--apple:hover { box-shadow: 0 1px 3px rgb(0 0 0 / .35); }

/* Le focus, lui, reste le nôtre : il doit rester visible sur blanc
   comme sur noir, d'où l'anneau bicolore. */
.rav-app .rav-sso__btn:focus-visible {
	outline: none;
	box-shadow: var(--rav-ring);
}
.rav-auth__switch {
	text-align: center;
	margin: 20px 0 0;
	color: var(--rav-muted);
	font-size: .95rem;
}
.rav-req { color: var(--rav-terra); }

/* Champ piège anti-robot : invisible pour l'humain, présent pour les bots. */
.rav-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}

@media (max-width: 540px) {
	.rav-auth__panel { padding: 26px 20px 24px; margin-top: 20px; }
}

/* ── Guide d'utilisation ─────────────────────────────────────── */
.rav-guide__head { padding: 34px 0 6px; }
.rav-guide__lead { font-size: 1.08rem; max-width: 64ch; color: var(--rav-ink); }
.rav-guide__lead-sm { font-size: 1.02rem; max-width: 62ch; color: var(--rav-ink-2); }

.rav-guide__toc {
	background: var(--rav-surface);
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius);
	padding: 22px 26px;
	margin: 26px 0 6px;
}
.rav-guide__toc h2 {
	font-family: var(--rav-font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rav-muted);
	margin: 0;
}
.rav-guide__toc ol { margin: 12px 0 0; padding-left: 20px; }
.rav-guide__toc li { margin: 2px 0; }
/* Liens de sommaire : cibles autonomes, donc au moins 24 px de haut. */
.rav-guide__toc a {
	display: inline-block;
	min-height: 24px;
	padding: 6px 0;
	color: var(--rav-ink);
	text-decoration: none;
	font-weight: 600;
}
.rav-guide__toc a:hover { color: var(--rcz-link-default); text-decoration: underline; }

.rav-guide__section { scroll-margin-top: 74px; }
.rav-guide__section h2 {
	margin: 56px 0 6px;
	padding-top: 28px;
	border-top: 2px solid var(--rav-border);
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.rav-guide__num {
	font-family: var(--rav-font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--rav-terra);
	border: 1px solid var(--rav-border);
	border-radius: 999px;
	padding: 4px 10px;
	flex: 0 0 auto;
}
.rav-guide__section h3 {
	font-size: 1.3rem;
	margin: 32px 0 8px;
	color: var(--rav-terra-deep);
}

/* Étapes numérotées */
.rav-guide__steps { list-style: none; counter-reset: ravstep; padding: 0; margin: 18px 0; }
.rav-guide__steps > li {
	counter-increment: ravstep;
	position: relative;
	padding: 0 0 0 54px;
	margin: 0 0 22px;
}
.rav-guide__steps > li::before {
	content: counter(ravstep);
	position: absolute;
	left: 0; top: 0;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--rav-terra);
	color: var(--rcz-text-inverse);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .95rem;
}
.rav-guide__steps > li strong { color: var(--rav-ink-deep); }

.rav-guide__card {
	background: var(--rav-surface);
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius);
	padding: 20px 24px;
	margin: 16px 0;
}
.rav-guide__card h3 { margin-top: 0; }

.rav-guide__note {
	background: var(--rav-cream);
	border: 1px solid var(--rav-border);
	border-left: 4px solid var(--rav-terra);
	border-radius: var(--rav-radius-sm);
	padding: 14px 18px;
	margin: 20px 0;
	color: var(--rav-ink-2);
}
.rav-guide__note strong { color: var(--rav-ink-deep); }
.rav-guide__note--calm {
	background: var(--rav-success-soft);
	border-left-color: var(--rav-success);
}
.rav-guide__note--calm strong { color: var(--rcz-state-success-strong); }

.rav-guide__tablewrap {
	overflow-x: auto;
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius-sm);
	margin: 20px 0;
}
.rav-guide__tablewrap table {
	border-collapse: collapse;
	width: 100%;
	background: var(--rav-surface);
	font-size: .95rem;
}
.rav-guide__tablewrap th {
	text-align: left;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rav-muted);
	background: var(--rav-cream);
	padding: 12px 16px;
	border-bottom: 1px solid var(--rav-border);
	white-space: nowrap;
}
.rav-guide__tablewrap td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--rav-border);
	vertical-align: top;
}
.rav-guide__tablewrap tr:last-child td { border-bottom: none; }
.rav-guide__tablewrap td strong { color: var(--rav-ink-deep); }

@media (max-width: 600px) {
	.rav-guide__steps > li { padding-left: 46px; }
	.rav-guide__card { padding: 18px 18px; }
}

/* ── Passerelle sur les pages du livre d'hommages ────────────── */
.rav-app--bridge {
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
}
.rav-app--bridge .rav-header { margin-bottom: 0; }

.rav-bridge-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 22px;
	margin: 36px 0 8px;
	padding: 30px 32px;
	border-radius: var(--rav-radius);
	border: 1px solid var(--rav-border-strong);
	background:
		radial-gradient(ellipse 70% 130% at 100% 0%, rgb(var(--rcz-accent-rgb) / .10), transparent 62%),
		var(--rav-surface);
	box-shadow: var(--rav-shadow);
}
.rav-bridge-cta__text { flex: 1 1 320px; }
.rav-bridge-cta__title {
	font-family: var(--rav-font-head);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--rav-ink-deep);
}
.rav-bridge-cta__lead {
	margin: 0;
	color: var(--rav-muted);
	font-size: .95rem;
	line-height: 1.55;
	max-width: 56ch;
}
.rav-bridge-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) {
	.rav-bridge-cta { padding: 24px 20px; }
	.rav-bridge-cta__actions .rav-btn { width: 100%; }
}

/* ── Propositions des utilisateurs ───────────────────────────── */
.rav-sg-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--rav-border);
}
.rav-sg-row:first-child { border-top: none; }
.rav-sg-note {
	margin-top: 6px;
	padding: 8px 12px;
	background: var(--rav-cream);
	border-left: 3px solid var(--rav-terra);
	border-radius: 8px;
	font-size: .88rem;
	color: var(--rav-ink-2);
}

/* ── Formulation « bli neder » ───────────────────────────────── */
.rav-bli-neder {
	background: var(--rav-cream);
	border: 1px solid var(--rav-border);
	border-left: 3px solid var(--rav-terra);
	border-radius: var(--rav-radius-sm);
	padding: 12px 16px;
	margin: 8px 0 4px;
	font-family: var(--rav-font-head);
	font-size: 1.02rem;
	color: var(--rav-ink-2);
}

/* ── Sélecteur de simanim / chapitres (portée d'un engagement) ── */
.rav-items-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 4px 0 12px;
}
.rav-items-range {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rav-muted);
	font-size: .9rem;
}
.rav-items-range .rav-input {
	width: 74px;
	padding: 8px 10px;
	min-height: 44px;
}
.rav-items-count {
	margin-left: auto;
	font-weight: 700;
	color: var(--rav-terra-deep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.rav-items-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 7px;
	max-height: 320px;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius-sm);
	background: var(--rav-cream);
}
.rav-pick-item {
	min-height: 44px;
	padding: 8px 4px;
	border: 1px solid var(--rav-border-strong);
	background: var(--rav-surface);
	border-radius: 10px;
	cursor: pointer;
	font: inherit;
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
	color: var(--rav-ink);
	transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.rav-pick-item:hover { border-color: var(--rav-terra); }
.rav-pick-item:focus-visible { outline: none; box-shadow: var(--rav-ring); }
.rav-pick-item--on {
	background: var(--rav-terra);
	border-color: var(--rav-terra);
	color: var(--rcz-text-inverse);
	font-weight: 700;
}

/* ── Navigateur hiérarchique (Séder › Traité › Daf) ──────────── */
.rav-tree {
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius-sm);
	background: var(--rav-surface);
	overflow: hidden;
	margin-bottom: 12px;
}
.rav-tree__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	background: var(--rav-cream);
	border-bottom: 1px solid var(--rav-border);
	font-size: .86rem;
}
.rav-tree__crumb {
	background: none;
	border: none;
	padding: 4px 2px;
	font: inherit;
	font-weight: 600;
	color: var(--rav-terra-deep);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.rav-tree__crumb:last-of-type { color: var(--rav-ink); text-decoration: none; cursor: default; }
.rav-tree__crumb-sep { color: var(--rav-muted); }
.rav-tree__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 340px;
	overflow-y: auto;
}
.rav-tree__row {
	display: flex;
	align-items: stretch;
	gap: 0;
	border-bottom: 1px solid var(--rav-border);
}
.rav-tree__row:last-child { border-bottom: none; }
.rav-tree__check {
	flex: 0 0 auto;
	align-self: center;
	width: 26px;
	height: 26px;
	margin: 9px;
	padding: 0;
	border: 2px solid var(--rav-border-strong);
	border-radius: 7px;
	background: var(--rav-surface);
	color: transparent;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.rav-tree__check:hover { border-color: var(--rav-terra); }
.rav-tree__check--on {
	background: var(--rav-terra);
	border-color: var(--rav-terra);
	color: var(--rcz-text-inverse);
}
.rav-tree__check--part {
	background: var(--rav-cream);
	border-color: var(--rav-terra);
	color: var(--rav-terra);
}
.rav-tree__check:focus-visible { outline: none; box-shadow: var(--rav-ring); }
.rav-tree__open {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: none;
	border: none;
	padding: 12px 14px;
	font: inherit;
	text-align: left;
	color: var(--rav-ink);
	cursor: pointer;
	min-height: 44px;
}
.rav-tree__open:hover { background: var(--rav-cream); }
.rav-tree__open::after { content: "›"; color: var(--rav-terra); font-weight: 700; font-size: 1.2rem; }
.rav-tree__label { font-weight: 600; }
.rav-tree__row > .rav-tree__label { padding: 12px 14px; display: flex; align-items: center; }
.rav-tree__meta { color: var(--rav-muted); font-size: .82rem; margin-left: auto; padding-right: 6px; }

/* ── Héros avec portrait latéral (accueil du module) ─────────── */
.rav-hero--portrait {
	display: flex;
	align-items: center;
	gap: 40px;
}
.rav-hero--portrait .rav-hero__body { flex: 1 1 auto; min-width: 0; }
.rav-portrait--aside {
	flex: 0 0 auto;
	width: 152px;
	height: 152px;
	margin: 0;
}
@media (max-width: 820px) {
	.rav-hero--portrait { flex-direction: column-reverse; align-items: stretch; gap: 22px; }
	.rav-portrait--aside { width: 104px; height: 104px; margin: 0 auto; }
}

/* ── Fil d'Ariane hiérarchique du wizard (v1.20) ─────────────── */
.rav-path {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	background: var(--rav-cream);
	border: 1px solid var(--rav-border);
	border-radius: var(--rav-radius-sm);
	padding: 10px 14px;
	margin-bottom: 20px;
	font-size: .86rem;
	color: var(--rav-ink-2);
}
.rav-path--visible { display: flex; }
.rav-path__step { font-weight: 600; white-space: nowrap; }
.rav-path__sep { color: var(--rav-ochre-deep); font-weight: 700; }
.rav-path__unit { color: var(--rav-ochre-deep); font-weight: 700; }

/* — Accessibilité : animations réduites (U3) — */
@media (prefers-reduced-motion: reduce) {
	.rav-app *,
	.rav-app *::before,
	.rav-app *::after {
		transition: none !important;
		animation: none !important;
	}
	.rav-btn:hover,
	.rav-commit.rav-card:hover,
	.rav-site-hub__card:hover { transform: none !important; }
}