/* =========================================================================
   Rav Engagements — Design system front-office
   Charte graphique officielle « Institutions et mémoire du Rav Ron Chaya
   zatsal » v1.2 : brun profond, terre de Sienne, ivoire. Aucun or.
   Titres Cormorant Garamond, interface Source Sans 3, hébreu Frank Ruhl Libre.
   REBRANDABLE : modifiez uniquement les variables (:root).
   ========================================================================= */

.rav-app {
	/* — Palette officielle — */
	--rav-brun: #3A1C12;          /* brun profond — institutionnel, structure */
	--rav-brun-2: #4d2a1c;        /* brun éclairci (dégradés, survols) */
	--rav-terra: #A0522D;         /* terre de Sienne — accent, action */
	--rav-terra-2: #b56238;       /* terra survol */
	--rav-terra-deep: #7a3d1c;    /* terra foncé — texte accent contrasté */
	--rav-ink: #2B241F;           /* anthracite — corps de texte */
	--rav-ink-2: #4a2a1a;
	--rav-ink-deep: #3A1C12;      /* titres */
	--rav-muted: #756D62;         /* taupe — texte secondaire */
	--rav-ivory: #FBF8F1;         /* ivoire — fond principal */
	--rav-cream: #F5EEE2;         /* ivoire profond (zones, listes) */
	--rav-surface: #FFFFFF;       /* cartes blanches */
	--rav-surface-2: #FBF8F1;     /* cartes ivoire */
	--rav-border: #E4D8C5;        /* bordure officielle */
	--rav-border-strong: #d8c7ac;

	/* Compat : anciens noms « ochre » remappés sur la terre de Sienne
	   (accent unique de la charte — plus aucun or). */
	--rav-ochre: var(--rav-terra);
	--rav-ochre-2: var(--rav-terra-2);
	--rav-ochre-deep: var(--rav-terra-deep);

	/* — Sémantique (statuts, hors identité de marque) — */
	--rav-success: #4f7a2f;
	--rav-success-soft: #edf3e2;
	--rav-danger: #9a3b2b;
	--rav-danger-soft: #f6e7e2;

	/* — Formes & profondeur (rayons charte 24-32 px) — */
	--rav-radius: 24px;
	--rav-radius-sm: 14px;
	--rav-shadow: 0 1px 2px rgba(58, 28, 18, .05), 0 10px 28px -14px rgba(58, 28, 18, .18);
	--rav-shadow-lg: 0 2px 6px rgba(58, 28, 18, .07), 0 24px 48px -22px rgba(58, 28, 18, .26);
	--rav-ring: 0 0 0 4px rgba(160, 82, 45, .28);

	/* — Typographie de la charte — */
	--rav-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--rav-font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--rav-font-hebrew: "Frank Ruhl Libre", "Noto Serif Hebrew", serif;

	color: var(--rav-ink);
	background: var(--rav-ivory);
	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); }

/* ── 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); }
.rav-btn:focus-visible { outline: none; box-shadow: var(--rav-ring); }

.rav-btn--primary {
	background: linear-gradient(180deg, var(--rav-terra-2), var(--rav-terra));
	color: #ffffff;
}
/* Bouton secondaire de la charte : brun profond / blanc. */
.rav-btn--gold {
	background: linear-gradient(180deg, var(--rav-brun-2), var(--rav-brun));
	color: #FBF8F1;
	box-shadow: 0 8px 20px -10px rgba(58, 28, 18, .5);
}
.rav-btn--gold:hover { color: #ffffff; }
.rav-btn--ghost {
	background: var(--rav-surface);
	color: var(--rav-terra);
	border-color: var(--rav-border-strong);
}
.rav-btn--ghost:hover { border-color: var(--rav-terra); color: var(--rav-terra-deep); }
.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%, #2B1710 100%);
	color: #f6ecdd;
	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(--rav-terra), transparent 70%);
	opacity: .9;
}
.rav-hero h1 { color: #fff; }
.rav-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: .72rem;
	color: #e2b28f;
	font-weight: 700;
	margin-bottom: 14px;
}
.rav-hero__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--rav-terra); }
.rav-hero__lead { font-size: 1.14rem; color: rgba(246, 236, 221, .86); max-width: 620px; }
.rav-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.rav-hero .rav-btn--ghost {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(246, 236, 221, .38);
	color: #f6ecdd;
}
.rav-hero .rav-btn--ghost:hover { border-color: var(--rav-ochre); color: #fff; }

/* ── 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 rgba(51, 35, 26, .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: #f6e6dc; color: var(--rav-terra-deep); border-color: #eccbb8; }
.rav-badge--completed { background: var(--rav-success-soft); color: #3a5e22; border-color: #d3e3bd; }
.rav-badge--cancelled, .rav-badge--expired { background: var(--rav-danger-soft); color: var(--rav-danger); border-color: #eccaca; }
.rav-badge--gold { background: #f0e2d3; 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, #fff, var(--rav-success-soft));
	border-color: var(--rav-success);
	color: #3a5e22;
	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); }
.rav-choice input { margin-top: 3px; accent-color: var(--rav-terra); }
.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: #d3e3bd; color: #35591f; }
.rav-notice--error { background: var(--rav-danger-soft); border-color: #eccaca; 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(--rav-cream);
	color: var(--rav-terra);
	transition: background .2s ease, color .2s ease;
}
.rav-site-hub__card:hover .rav-site-hub__icon {
	background: var(--rav-terra);
	color: #fff;
}
/* Différenciation des deux portes : hommage = terre de Sienne, engagement = brun. */
.rav-site-hub__card--engagement .rav-site-hub__icon { color: var(--rav-brun); }
.rav-site-hub__card--engagement:hover { border-color: var(--rav-brun); }
.rav-site-hub__card--engagement:hover .rav-site-hub__icon {
	background: var(--rav-brun);
	color: #FBF8F1;
}

.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%, rgba(160, 82, 45, .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:hover,
.rav-app .rav-btn--primary:focus,
.rav-app .rav-btn--primary:visited,
.rav-app .rav-btn--primary:active {
	background: linear-gradient(180deg, var(--rav-terra-2), var(--rav-terra)) !important;
	color: #ffffff !important;
	border-color: transparent !important;
}
.rav-app a.rav-btn--gold,
.rav-app button.rav-btn--gold,
.rav-app .rav-btn--gold,
.rav-app .rav-btn--gold:hover,
.rav-app .rav-btn--gold:focus,
.rav-app .rav-btn--gold:visited,
.rav-app .rav-btn--gold:active {
	background: linear-gradient(180deg, var(--rav-brun-2), var(--rav-brun)) !important;
	color: #FBF8F1 !important;
	border-color: transparent !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(--rav-terra) !important;
	border-color: var(--rav-border-strong) !important;
}
.rav-app .rav-btn--ghost:hover,
.rav-app .rav-btn--ghost:focus {
	border-color: var(--rav-terra) !important;
	color: var(--rav-terra-deep) !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: rgba(255, 255, 255, .06) !important;
	border-color: rgba(246, 236, 221, .38) !important;
	color: #f6ecdd !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 {
	border-color: var(--rav-ochre) !important;
	color: #fff !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: #fff !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: rgba(58, 28, 18, .96);
	color: #f4ecdd;
	border: 1px solid rgba(160, 82, 45, .30);
	border-top: none;
	border-radius: 0 0 14px 14px;
	padding: 8px 16px;
	margin: 0 0 20px;
	box-shadow: 0 10px 24px -14px rgba(58, 28, 18, .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: #f4ecdd !important;
	font-weight: 700;
	white-space: nowrap;
}
.rav-header__photo {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--rav-terra);
	box-shadow: 0 0 0 2px rgba(58, 28, 18, .5);
	display: block;
}
.rav-header__name { font-family: var(--rav-font-head); font-size: 1.05em; letter-spacing: .01em; }
.rav-header__zl { color: #e2c3aa; font-size: .82em; font-family: var(--rav-font-hebrew); }
.rav-header__sep { color: rgba(244, 236, 221, .45); }
.rav-header__label {
	color: #e2b28f;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rav-header__nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.rav-header__nav a {
	color: rgba(244, 236, 221, .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: #fff !important; background: rgba(251, 248, 241, .10); }
/* Page courante : c'est le SEUL élément mis en évidence dans la barre. */
.rav-header__nav a.is-current {
	color: #ffffff !important;
	background: rgba(251, 248, 241, .16);
	box-shadow: inset 0 0 0 1px rgba(251, 248, 241, .28);
	cursor: default;
}
.rav-header__cta {
	flex: 0 0 auto;
	background: linear-gradient(180deg, var(--rav-terra-2), var(--rav-terra)) !important;
	color: #ffffff !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: rgba(244, 236, 221, .38);
	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(--rav-terra);
	box-shadow: 0 0 0 6px rgba(251, 248, 241, .14), 0 14px 30px -12px rgba(0, 0, 0, .5);
}

/* ── Écrans de compte (connexion, inscription, mot de passe) ──── */
.rav-header--auth .rav-header__back {
	margin-left: auto;
	color: rgba(244, 236, 221, .78) !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: .86rem;
	white-space: nowrap;
}
.rav-header--auth .rav-header__back:hover { color: #fff !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 { accent-color: var(--rav-terra); }
.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; }
.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: 7px 0; }
.rav-guide__toc a { color: var(--rav-ink); text-decoration: none; font-weight: 600; }
.rav-guide__toc a:hover { color: var(--rav-terra); 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: #ffffff;
	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(--rav-success); }

.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%, rgba(160, 82, 45, .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: #ffffff;
	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: #ffffff;
}
.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; }
}
