@charset "UTF-8";
/* ============================================================================
   DOR HAGUEOULA — FEUILLE DE STYLE UNIQUE DU SITE
   Theme « REVUE » (direction graphique A, choisie par le client).
   Chargee par les quatre pages : / · /cours-de-torah/ · /calendrier/ ·
   /participez/.

   PARTI PRIS
   Un hebdomadaire communautaire imprime. Bandeau-titre centre, filets fins
   couleur sable, serif d'affichage en bas-de-casse, grille a deux colonnes
   sur grand ecran, beaucoup de blanc chaud. Les horaires du jour forment un
   encadre « bloc-notes » pose tout en haut de la page d'accueil.
   L'ancien theme (capitales etroites Archivo 800 a 72 % de largeur, titres
   monuments, arche bleue) a entierement disparu : ses regles ne sont PAS
   empilees sous celles-ci, elles ont ete supprimees.

   TYPOGRAPHIE
     Spectral (Google Fonts) ...... titres ET texte courant. Le serif fait
                                    basculer tout le registre.
     Archivo, largeur 100 % ....... intertitres, libelles, boutons : petites
                                    capitales tracees. La police des anciens
                                    titres, reemployee a l'envers — petite,
                                    de largeur normale, jamais en display.
     IBM Plex Sans Hebrew ......... hebreu seul (unicode-range).
   Chaque page doit charger Spectral exactement comme l'accueil
   (trois balises dans le <head>) : voir src/THEME-REVUE.md.

   PALETTE : les neuf teintes validees par le client, aux valeurs exactes.
   NE PAS y revenir a l'ancienne palette bleue (#F9F9F6 / #0A2C6E /
   #E8EEF8) : ces valeurs-ci sont les bonnes.
   Ce qui change par rapport a l'ancien theme, c'est leur emploi : le papier
   beige occupe tout le fond, le sable ne sert plus qu'a des filets d'un
   pixel, le bleu est reserve aux liens, aux boutons et a une seule bande
   sombre par page.

   MOBILE D'ABORD : le socle est ecrit pour 375 px, les @media
   (min-width: 700px), (min-width: 760px) et (min-width: 1040px) ne font
   qu'ajouter des colonnes. Cibles tactiles : 44 px minimum.

   DEUX FAMILLES DE CLASSES, UN SEUL THEME
     .rv-*  classes nees avec ce theme (bandeau-titre, une, image
            d'ouverture, tableaux).
     .dh-*  et .ac-* / .ca-* / .ch-* / .pa-* : classes deja presentes dans
            le HTML du site. Elles sont RHABILLEES ici, jamais laissees
            dans l'ancien registre. Quand une classe .dh-* est l'equivalent
            exact d'une classe .rv-*, les deux partagent le meme bloc de
            regles (ex. .rv-wrap, .dh-wrap) : une page pas encore reecrite
            porte donc deja le bon habillage.

   SOMMAIRE
     01. Polices
     02. Variables
     03. Socle & typographie
     04. Conteneur, filets, accessibilite
     05. Libelles en petites capitales
     06. Boutons & liens
     07. Bandeau-titre, navigation, dateline
     08. Tiroir mobile
     09. Encadre « en bref » (horaires du jour)
     10. La une & titres de rubrique de page
     11. Image d'ouverture
     12. Sections & en-tetes de rubrique
     13. Message de la choul
     14. Tableaux d'horaires & zmanim
     15. Releve des cours de Torah
     16. Portrait du Rav
     17. Bande d'appel (bleu)
     18. Acces & plan
     19. Pied de page & bouton retour en haut
     20. Calendrier : prochaine fete, filtres, mois, lignes
     21. Bandeau d'abonnement
     22. Page Participez
     23. Formulaires
     24. Impression
   ========================================================================= */


/* ========================================================================
   01. POLICES
   Spectral arrive par <link> (fonts.googleapis.com) dans le <head> de
   chaque page. Archivo et l'hebreu sont auto-heberges dans assets/fonts/.
   Les deux WOFF2 d'IBM Plex Sans latin et les deux de Plex Mono, qui
   servaient a l'ancien theme, ne sont plus charges.
   ======================================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('/assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'PlexHe';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0590-05FF, U+FB1D-FB4F;
	src: url('/assets/fonts/ibm-plex-sans-hebrew-hebrew-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'PlexHe';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	unicode-range: U+0590-05FF, U+FB1D-FB4F;
	src: url('/assets/fonts/ibm-plex-sans-hebrew-hebrew-500-normal.woff2') format('woff2');
}


/* ========================================================================
   02. VARIABLES
   Les neuf couleurs de la charte, aux valeurs exactes validees, plus les
   trois teintes de categorie du calendrier (deja en service dans
   assets/js/zmanim.js et le HTML de /calendrier/).
   ======================================================================== */

:root {
	/* BLANC ET BLEU MARINE — palette du site du quartier (09/11/2026).
	   Le beige rendait les pages trop lourdes : le papier passe au blanc
	   franc, et tout ce qui etait sable ou or devient un bleu de la meme
	   famille que le logo. Le logo, lui, ne change pas : son or ressort
	   d'autant mieux sur fond blanc.
	   Contrastes mesures sur le blanc : encre 18,2 — gris 6,1 — bleu 11,1
	   — marine 16,6 — bleu fonce des libelles 9,6 pour 1. Tous bien
	   au-dessus du niveau AA. --dh-sand (1,3:1) est DECORATIF : filets et
	   bordures, jamais de texte dessus. */
	--dh-paper:    #FFFFFF;   /* papier : fond de toutes les pages */
	--dh-ink:      #0F1621;   /* encre : texte courant */
	--dh-grey:     #596274;   /* texte secondaire, legendes */
	--dh-blue:     #0B3A77;   /* bleu de la charte : liens, boutons */
	--dh-blue-ink: #001E44;   /* bleu marine du logo : titres, bande d'appel */
	--dh-tint:     #F2F6FC;   /* bleu tres pale : encadres et bandeaux */
	--dh-sand:     #D7E0EE;   /* bleu gris : filets et bordures */
	--dh-gold:     #2E5E9E;   /* bleu moyen : bordures d'encadre */
	--dh-gold-ink: #14457F;   /* bleu fonce : libelles sur fond clair */

	/* Categories du calendrier (pastilles et etiquettes). */
	--dh-k-jeune: #9A3B12;
	--dh-k-nat:   #1F7A4D;
	--dh-k-rh:    #5E6472;

	/* Serif d'affichage + de labeur. 'PlexHe' est confine a l'hebreu par
	   son unicode-range : il prend le relais la ou Spectral n'a pas de
	   glyphe, sans jamais toucher au latin. */
	--rv-serif: 'Spectral', 'PlexHe', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
	--rv-label: 'Archivo', 'PlexHe', 'Helvetica Neue', Arial, sans-serif;

	--rv-wrap: 68rem;        /* 1088 px : la justification du journal */
	--rv-gut: 1rem;          /* gouttiere laterale sur telephone */
	--rv-rule: 1px solid var(--dh-sand);
	--rv-hair: 1px solid rgba(122, 90, 42, .18);

	/* Alias de compatibilite : du HTML et d'anciennes regles parlaient de
	   --dh-gut. Une seule gouttiere pour tout le site. */
	--dh-gut: var(--rv-gut);
}


/* ========================================================================
   03. SOCLE & TYPOGRAPHIE
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

html.dh-lock, html.dh-lock body { overflow: hidden; }

body {
	margin: 0;
	background: var(--dh-paper);
	color: var(--dh-ink);
	font-family: var(--rv-serif);
	font-size: 1.0625rem;        /* 17 px : un corps de revue */
	font-weight: 400;
	line-height: 1.62;
	font-kerning: normal;
	font-variant-numeric: lining-nums;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;          /* filet de securite anti-debordement */
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--rv-serif);
	font-weight: 400;            /* bas-de-casse, graisse normale : l'inverse du 800 etroit */
	color: var(--dh-blue-ink);
	letter-spacing: -0.012em;
	line-height: 1.12;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--dh-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--dh-blue-ink); }

img { max-width: 100%; height: auto; }

time { font-variant-numeric: lining-nums tabular-nums; }

small { font-size: 0.82em; }

/* L'hebreu : sans hebreu auto-heberge, jamais etire. */
[lang="he"] {
	font-family: 'PlexHe', var(--rv-serif);
	letter-spacing: 0;
}
.dh-he { font-family: 'PlexHe', var(--rv-serif); letter-spacing: 0; }

.dh-ico { flex: none; }

/* Filet de securite : plusieurs blocs du site naissent avec l'attribut
   hidden et sont reveles par assets/js/site.js (DH_CONFIG) ou par
   assets/js/zmanim.js. Comme ces blocs recoivent ici des display: grid /
   flex, l'attribut doit l'emporter. */
.dor-site [hidden] { display: none !important; }


/* ========================================================================
   04. CONTENEUR, FILETS, ACCESSIBILITE
   .rv-wrap et .dh-wrap sont la meme chose : la justification du journal.
   ======================================================================== */

.rv-wrap,
.dh-wrap {
	width: 100%;
	max-width: var(--rv-wrap);
	margin-inline: auto;
	padding-inline: var(--rv-gut);
}

/* Cible d'ancre : rien a compenser (en-tete non collante), juste un peu
   d'air au-dessus du titre vise. */
[id] { scroll-margin-top: 1.25rem; }

.dh-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dh-skip {
	position: absolute;
	inset-inline-start: 0.5rem; top: 0.5rem;
	z-index: 200;
	clip-path: inset(50%);      /* cache sans sortir du flux horizontal */
	padding: 0.75rem 1rem;
	background: var(--dh-blue-ink);
	color: var(--dh-paper);
	font-family: var(--rv-label);
	font-size: 0.8125rem;
	text-decoration: none;
}
.dh-skip:focus { clip-path: none; }

:focus-visible {
	outline: 2px solid var(--dh-blue);
	outline-offset: 2px;
	border-radius: 1px;
}
.rv-sec--blue :focus-visible,
.dh-sec--blue :focus-visible,
.dh-sub :focus-visible,
.dh-next :focus-visible,
.dh-skip:focus-visible { outline-color: var(--dh-sand); }

/* Les crochets d'animation de assets/js/site.js (.dh-split, .dh-fade,
   .dh-draw, .dh-stagger) ne recoivent VOLONTAIREMENT aucune regle : cette
   direction est calme, et surtout les horaires doivent etre lisibles des la
   premiere image, sans dependre d'un IntersectionObserver.
   <html data-dh-anim="off"> coupe le module de toute facon. */


/* ========================================================================
   05. LIBELLES EN PETITES CAPITALES
   L'unique endroit ou survit Archivo — en petit, a largeur NORMALE.
   ======================================================================== */

.dh-label {
	margin: 0 0 0.55rem;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;        /* 11 px */
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1.45;
	color: var(--dh-gold-ink);
}


/* ========================================================================
   06. BOUTONS & LIENS
   Boutons rectangulaires, sans arrondi : des cartouches d'imprimeur.
   Hauteur minimale 44 px partout (cible tactile).
   ======================================================================== */

.dh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--dh-blue);
	background: transparent;
	color: var(--dh-blue);
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.dh-btn--blue {
	background: var(--dh-blue);
	color: var(--dh-paper);
}
.dh-btn--blue:hover {
	background: var(--dh-blue-ink);
	border-color: var(--dh-blue-ink);
	color: var(--dh-paper);
}

.dh-btn--white {
	background: var(--dh-paper);
	border-color: var(--dh-paper);
	color: var(--dh-blue-ink);
}
.dh-btn--white:hover {
	background: var(--dh-tint);
	border-color: var(--dh-tint);
	color: var(--dh-blue-ink);
}

.dh-btn--link {
	border-color: var(--dh-gold-ink);   /* 5,9:1 : contraste non textuel AA */
	background: transparent;
	color: var(--dh-blue-ink);
}
.dh-btn--link:hover {
	background: var(--dh-tint);
	border-color: var(--dh-gold);
	color: var(--dh-blue-ink);
}

.dh-btn--sm { min-height: 40px; padding: 0.45rem 0.85rem; }
.dh-btn--block { width: 100%; }

/* Lien editorial « Nous ecrire → » */
.rv-link {
	display: inline-block;
	min-height: 44px;
	padding: 0.6rem 0;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

@media (max-width: 699px) {
	.dh-hide-mobile { display: none !important; }
}


/* ========================================================================
   07. BANDEAU-TITRE, NAVIGATION, DATELINE
   Telephone : logo a gauche, bouton Menu a droite, nom hebreu en dessous.
   Grand ecran : bandeau-titre centre, double filet, puis la barre de
   navigation.

   Deux habillages, un seul registre :
     .rv-head + .rv-head__in     bandeau-titre du theme (accueil, et les
                                 autres pages des qu'elles sont reecrites) ;
     .dh-header + .dh-header__bar  en-tete en une ligne, encore en service
                                 sur les pages pas encore reecrites.
   ======================================================================== */

/* Le bandeau-titre NE COLLE PAS en haut de l'ecran : une une de journal ne
   suit pas le lecteur. Trois raisons concretes :
     - sur telephone il mangeait 155 px en permanence, au detriment des
       horaires, qui sont la raison de la visite ;
     - une en-tete collante qui se replie au defilement change de hauteur,
       donc deplace la cible des ancres (#horaires arrivait 5 px TROP HAUT,
       cache derriere elle) ;
     - le retour en haut est deja assure par le bouton .dh-totop.
   La classe .is-scrolled que pose assets/js/site.js reste donc sans effet :
   c'est voulu, pas un oubli. */
.rv-head,
.dh-header {
	position: static;
	background: var(--dh-paper);
	border-bottom: 3px double var(--dh-sand);
}

.rv-head__in {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.12rem 0.75rem;
	padding-block: 0.6rem;
}

/* En-tete en une ligne des pages pas encore reecrites. */
.dh-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 0.6rem;
}
.dh-header__bar .dh-nav { display: none; }

.dh-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--dh-logo-ecart);
	text-decoration: none;
	color: var(--dh-blue-ink);
	min-width: 0;
}
/* --dh-logo-large et --dh-logo-ecart servent aussi a recentrer le lien
   « Écrire au Rav Cohen » sous la mention du Rav : celle-ci n'est pas au
   milieu de la page mais au milieu de la colonne de texte, decalee de la
   moitie du logo plus l'ecart. */
:root { --dh-logo-large: 72px; --dh-logo-ecart: 0.6rem; }
.dh-logo__img {
	width: var(--dh-logo-large); height: var(--dh-logo-large);
	flex: none;
	transition: width .2s ease, height .2s ease;
}
.dh-logo__txt {
	font-family: var(--rv-serif);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1;
	white-space: nowrap;
}

.rv-head__he {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--dh-gold-ink);
	line-height: 1.3;
}

/* Barre de rubriques : masquee sur telephone, le tiroir prend le relais. */
.rv-head__bar { display: none; }
.rv-nav { display: block; min-width: 0; flex: 1 1 auto; }
.dh-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* sept onglets depuis l'ajout d'« Un mot au Rav » : a 1,5rem d'ecart ils
	   demandaient 907 px pour 849 disponibles et passaient a la ligne. */
	gap: 0 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dh-nav__list a {
	display: inline-block;
	padding: 0.5rem 0;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dh-blue-ink);
	border-bottom: 2px solid transparent;
}
.dh-nav__list a:hover { color: var(--dh-blue); border-bottom-color: var(--dh-sand); }
/* Page courante : classe WordPress d'origine + equivalent accessible. */
.dh-nav__list a[aria-current="page"],
.dh-nav__list .current-menu-item > a { border-bottom-color: var(--dh-gold); }
/* Un lien d'ancre ne doit pas se marquer comme page courante. */
.dh-nav__list a[aria-current="page"][href*="#"],
.dh-nav__list .current-menu-item > a[href*="#"] { border-bottom-color: transparent; }

.rv-head__don { flex: none; }

.dh-burger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	grid-column: 2;
	grid-row: 1;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	justify-self: end;
	border: 1px solid var(--dh-gold-ink);
	background: transparent;
	color: var(--dh-blue-ink);
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
}
.dh-burger:hover { background: var(--dh-tint); }

/* Dateline : la ligne de date du journal.
   .rv-dateline tient sous le bandeau-titre du theme ; .dh-topline est le
   meme bandeau, place avant l'en-tete sur les pages pas encore reecrites. */
.rv-dateline,
.dh-topline {
	border-top: var(--rv-rule);
	border-bottom: var(--rv-rule);
	background: var(--dh-tint);
}
.rv-dateline { border-bottom: 0; }
.rv-dateline__in,
.dh-topline__in {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.8rem;
	padding-block: 0.3rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--dh-blue-ink);
}
.rv-dateline__fr,
.dh-topline__in > span:first-child { font-weight: 500; }
.rv-dateline__he,
.dh-topline__he {
	color: var(--dh-gold-ink);
	font-size: 0.8125rem;
	line-height: 1.85;        /* place pour les nikud de la date hebraique */
}
.rv-dateline__ch,
.dh-topline__ch {
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--dh-grey);
}
.rv-dateline__ch span,
.dh-topline__ch span { color: var(--dh-blue-ink); font-weight: 500; }

@media (min-width: 700px) {
	:root { --rv-gut: 1.5rem; }

	/* Bandeau-titre centre : logo, nom hebreu, puis la barre de rubriques
	   sur toute la largeur, sous un filet. */
	.rv-head__in {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 0.3rem;
		padding-block: 1rem 0;
		text-align: center;
	}
	:root { --dh-logo-large: 96px; }
	.dh-logo__txt { font-size: 2.125rem; }
	.rv-head__he { grid-column: auto; font-size: 1rem; }

	.rv-head__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0 1rem;
		width: 100%;
		margin-top: 0.65rem;
		padding-top: 0.15rem;
		border-top: var(--rv-rule);
	}
	.dh-nav__list { justify-content: flex-start; gap: 0 1.05rem; }
	.dh-nav__list a { font-size: 0.6875rem; letter-spacing: 0.11em; }
	.rv-head__don { padding-inline: 0.7rem; }
	.dh-burger { display: none; }

	/* En-tete en une ligne : le menu reparait, le logo reste a sa taille. */
	.dh-header__bar .dh-nav { display: block; }
	.dh-header__bar .dh-logo__img { width: 72px; height: 72px; }
	.dh-header__bar .dh-logo__txt { font-size: 1.625rem; }
}

@media (min-width: 1040px) {
	:root { --rv-gut: 2.5rem; }
	.dh-logo__txt { font-size: 2.5rem; }
	.dh-header__bar .dh-logo__txt { font-size: 1.75rem; }
	.dh-nav__list { gap: 0 1.25rem; }   /* sept onglets : 2rem les faisait passer a la ligne */
	.dh-nav__list a { font-size: 0.75rem; letter-spacing: 0.13em; }
}


/* ========================================================================
   08. TIROIR MOBILE
   Pilote par assets/js/site.js : hidden, .is-open, aria-expanded, .dh-lock.
   ======================================================================== */

.dh-drawer {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1rem var(--rv-gut) 2rem;
	background: var(--dh-paper);
	overflow-y: auto;
}
/* Le tiroir est visible des que assets/js/site.js retire son attribut
   hidden. Volontairement PAS d'opacite 0 en attente de la classe .is-open :
   si le requestAnimationFrame qui la pose ne s'execute pas (onglet en
   arriere-plan, animation coupee), le menu resterait invisible. L'entree
   en fondu passe donc par une animation, qui n'est que decorative. */
.dh-drawer:not([hidden]) { animation: rv-drawer-in .2s ease-out; }
@keyframes rv-drawer-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.dh-drawer:not([hidden]) { animation: none; }
}

.dh-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 3px double var(--dh-sand);
}
.dh-drawer__top .dh-logo__img { width: 62px; height: 62px; }
.dh-drawer__top .dh-logo__txt { font-size: 1.375rem; }

.dh-drawer__close {
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--dh-gold-ink);
	background: transparent;
	color: var(--dh-blue-ink);
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
}
.dh-drawer__close:hover { background: var(--dh-tint); }

.dh-drawer__list {
	margin: 0; padding: 0;
	list-style: none;
}
.dh-drawer__list li + li { border-top: var(--rv-hair); }
.dh-drawer__list a {
	display: block;
	padding: 0.95rem 0;
	min-height: 52px;
	font-family: var(--rv-serif);
	font-size: 1.5rem;
	font-weight: 400;
	text-decoration: none;
	color: var(--dh-blue-ink);
}
.dh-drawer__list a:hover { color: var(--dh-blue); }
.dh-drawer__list a[aria-current="page"],
.dh-drawer__list .current-menu-item > a { color: var(--dh-gold-ink); }
.dh-drawer__list a[aria-current="page"][href*="#"],
.dh-drawer__list .current-menu-item > a[href*="#"] { color: var(--dh-blue-ink); }

@media (min-width: 700px) {
	.dh-drawer { display: none !important; }
}


/* ========================================================================
   09. ENCADRE « EN BREF » — LES HORAIRES DU JOUR, TOUT EN HAUT
   C'est le bloc-notes du journal : un cadre, un fond beige clair, deux
   cellules separees par un filet. Rien ne le precede dans <main>.
   ======================================================================== */

.rv-brief { margin: 1.5rem 0 0; }

.rv-brief__box {
	display: grid;
	gap: 0;
	border: 1px solid var(--dh-gold);
	background: var(--dh-tint);
}
.rv-brief__cell { padding: 1.1rem var(--rv-gut); }
.rv-brief__cell + .rv-brief__cell { border-top: 1px solid var(--dh-gold); }

/* --- Offices du jour ---------------------------------------------------- */

.dh-strip {
	margin: 0; padding: 0;
	list-style: none;
}
.dh-strip > li {
	display: grid;
	grid-template-columns: 4.5rem 1fr auto;
	align-items: baseline;
	gap: 0 0.75rem;
	padding: 0.5rem 0;
	border-top: var(--rv-hair);
	color: var(--dh-blue-ink);
}
.dh-strip > li:first-child { border-top: 0; }
.dh-strip time {
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.dh-strip span { font-size: 1rem; }
/* La precision sous le nom de l'office (« Daf Hayomi · Rav Dov ») suit le
   meme traitement que les <small> du tableau des horaires. */
.dh-strip span small {
	display: block;
	font-size: 0.75rem;
	font-style: italic;
	line-height: 1.3;
	color: var(--dh-grey);
}
.dh-strip em {
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.625rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dh-paper);
	background: var(--dh-gold-ink);
	padding: 0.2rem 0.4rem;
	white-space: nowrap;
}
.dh-strip > li.is-past { color: var(--dh-grey); }
.dh-strip > li.is-next { position: relative; }
.dh-strip > li.is-next::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-0.5 * var(--rv-gut));
	top: 0.75rem;
	width: 4px; height: 1.1rem;
	background: var(--dh-gold-ink);
}

/* Meteo : masquee par defaut (attribut hidden sur le <li>). Mise en forme
   prete si une source la remplit un jour, via window.DH_METEO.load(). */
.dh-meteo { color: var(--dh-grey); }
.dh-meteo__row { display: inline-flex; align-items: center; gap: 0.4rem; }
.dh-meteo__ico { flex: none; width: 1.25rem; height: 1.25rem; }
.dh-meteo__t { font-size: 1.1875rem; font-weight: 500; color: var(--dh-blue-ink); }
.dh-meteo__l { font-size: 0.9375rem; }
.dh-meteo__ch { display: inline-flex; align-items: center; }

/* --- Chabbat ----------------------------------------------------------- */

.dh-chabbat__par {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--dh-gold-ink);
}
/* <html data-dh-grad="accent"> fait poser .dh-grad par site.js ; .dh-gold
   est pose a la main dans le HTML. Dans ce theme, ni l'un ni l'autre n'est
   un degrade : c'est l'or fonce, qui reste lisible sur le papier. */
.dh-grad, .dh-gold { color: var(--dh-gold-ink); }

.dh-chabbat__he {
	margin: 0.1rem 0 0;
	font-size: 1.0625rem;
	color: var(--dh-grey);
}

.dh-chabbat__t {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
	margin: 0.9rem 0 0;
	padding-top: 0.7rem;
	border-top: var(--rv-hair);
}
.dh-chabbat__t dt {
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
}
.dh-chabbat__t dd {
	margin: 0.1rem 0 0;
	font-size: 1.5rem;
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--dh-blue-ink);
	line-height: 1.1;
}

@media (min-width: 700px) {
	.rv-brief { margin-top: 2rem; }
	.rv-brief__box { grid-template-columns: 1.15fr 1fr; }
	.rv-brief__cell { padding: 1.35rem 1.6rem; }
	.rv-brief__cell + .rv-brief__cell {
		border-top: 0;
		border-inline-start: 1px solid var(--dh-gold);
	}
	.dh-strip > li.is-next::before { left: -1.6rem; }
}


/* ========================================================================
   10. LA UNE & TITRES DE RUBRIQUE DE PAGE
   Accueil : titre en bas-de-casse, serif, graisse normale. Sous lui, deux
   colonnes : le chapeau a gauche, les deux appels a l'action a droite.
   Les trois autres pages ouvrent sur le meme registre (.ca-hero,
   .ch-hero, .pa-hero) : un titre serif en bas-de-casse, un filet, un
   chapeau. Rien de plus.
   ======================================================================== */

.rv-une { padding: 2rem 0 0; }

.rv-une__t {
	font-size: clamp(2.5rem, 11.5vw, 5.25rem);
	line-height: 1.02;
	letter-spacing: -0.022em;
	text-wrap: balance;
}
.rv-une__t .ac-blue { color: var(--dh-blue); }

/* --- Le feuillet de Chabbat, a cote du titre ---------------------------
   Pas d'encadre : seule la couverture est posee la, avec son ombre, et le
   texte a cote. Le lien de telechargement clignote au meme rythme lent que
   l'onglet « Cours du Rav » (voir rv-pulse, section du clignotement) :
   environ 0,7 fois par seconde, bien en dessous des 3 par seconde a partir
   desquels un clignotement devient dangereux (WCAG 2.3.1). */
.rv-feuillet {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
	text-decoration: none;
	color: inherit;
}
.rv-feuillet__img {
	flex: none;
	width: 150px;
	height: auto;
	border: 1px solid rgba(16, 21, 31, .14);
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 24, 60, .15);
	transition: transform .2s ease, box-shadow .2s ease;
}
.rv-feuillet:hover .rv-feuillet__img,
.rv-feuillet:focus-visible .rv-feuillet__img {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 24, 60, .2);
}
.rv-feuillet__txt { display: grid; gap: 0.125rem; min-width: 0; }
.rv-feuillet__k {
	font-family: var(--dh-serif, inherit);
	font-size: 1.1875rem;
	line-height: 1.25;
	color: var(--dh-blue-ink);
}
.rv-feuillet__n {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--dh-grey);
}
.rv-feuillet__dl {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.625rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--dh-blue);
	animation: rv-pulse 1.4s ease-in-out infinite;
}
.rv-feuillet:hover .rv-feuillet__dl,
.rv-feuillet:focus-visible .rv-feuillet__dl {
	animation: none;
	opacity: 1;
	text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
	.rv-feuillet__dl { animation: none; }
}

.rv-une__foot {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: var(--rv-rule);
	display: grid;
	gap: 1.25rem;
}
.rv-une__chapo {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--dh-grey);
	max-width: 36ch;
}
.rv-une__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* --- Le feuillet a droite du titre, seulement sur grand ecran -----------
   En dessous de 1080 px la colonne de droite devient trop etroite pour la
   couverture plus le texte : la carte debordait et faisait scroller la page
   horizontalement. Elle reste donc sous le titre, pleine largeur. */
@media (min-width: 1080px) {
	.rv-une__haut {
		display: grid;
		grid-template-columns: 1fr minmax(0, 26.5rem);
		align-items: center;
		gap: 2rem;
	}
	.rv-feuillet { margin-top: 0; }
	.rv-feuillet__img { width: 196px; }
	/* La place ne manque qu'ici : ailleurs on laisse le texte revenir a la ligne. */
	.rv-feuillet__k,
	.rv-feuillet__dl { white-space: nowrap; }
}

/* --- Ouverture des trois autres pages ---------------------------------- */

.ca-hero, .ch-hero, .pa-hero {
	padding: 2rem 0 2.25rem;
	border-bottom: 3px double var(--dh-sand);
}
.ca-hero h1, .ch-hero h1, .pa-hero h1 {
	font-size: clamp(2.5rem, 11vw, 4.5rem);
	line-height: 1.04;
	letter-spacing: -0.022em;
}
.ca-hero__he, .pa-hero__he {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	color: var(--dh-gold-ink);
	line-height: 1.4;
}
.ca-hero__grid, .ch-hero__grid, .pa-hero__grid {
	display: grid;
	gap: 1.75rem;
	align-items: start;
}
.ch-hero p, .pa-hero__txt p {
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--dh-grey);
	max-width: 42ch;
}
.ch-hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.ch-list { padding: 2.5rem 0 0; }

/* Date du jour, sous le titre du calendrier. */
.dh-cal__today {
	margin: 0.9rem 0 0;
	font-size: 1.0625rem;
	color: var(--dh-grey);
}
.dh-cal__today [lang="he"] { color: var(--dh-gold-ink); }

/* Lien WhatsApp / contact en fin de chapeau. */
.ca-wa, .pa-wa { margin-top: 1.1rem; font-size: 1rem; }
.ca-wa a, .pa-wa a {
	color: var(--dh-blue);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* Exergue de la page Participez. */
.pa-quote {
	margin: 1.5rem 0 0;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--dh-gold);
	font-size: clamp(1.25rem, 5vw, 1.625rem);
	font-style: italic;
	line-height: 1.3;
	color: var(--dh-blue-ink);
}
.pa-quote small {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--dh-grey);
}

@media (min-width: 700px) {
	.rv-une { padding-top: 2.75rem; }
	.rv-une__foot {
		grid-template-columns: 1fr auto;
		align-items: start;
		gap: 2rem;
	}
	.rv-une__cta { justify-content: flex-end; }


	.ca-hero, .ch-hero, .pa-hero { padding: 2.75rem 0 2.75rem; }
	.ca-hero__grid, .ch-hero__grid, .pa-hero__grid {
		grid-template-columns: 1fr minmax(0, 22rem);
		gap: 2.5rem;
	}
	.ca-hero__grid > :last-child,
	.pa-hero__grid > :last-child { padding-top: 0.4rem; }
}


/* ========================================================================
   11. IMAGE D'OUVERTURE
   Pleine largeur de la justification, calme, avec sa legende sous un filet.
   Aucun logo pose dessus, aucune arche, aucun masque : le logo reste dans
   le bandeau-titre. Le client a refuse le logo sur la photo.
   ======================================================================== */

.rv-open { margin: 2rem 0 0; }

/* La photo nette est posee en retrait dans son cadre ; derriere elle, la
   meme image agrandie et floutee remplit le cadre et deborde de tous les
   cotes. Resultat : un halo flou autour de la photo, et plus de bord net
   qui coupe. La photo du dessus est en "contain", donc jamais recadree. */
.rv-open__cadre {
	position: relative;
	aspect-ratio: 1600 / 900;
	padding: clamp(0.375rem, 1.1vw, 0.9375rem);
	overflow: hidden;
	background: var(--dh-tint);
}
.rv-open__flou {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.18);
	filter: blur(26px) saturate(1.15);
	opacity: .85;
	pointer-events: none;
}
.rv-open__img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.rv-open__cap {
	margin: 0.6rem 0 0;
	padding-top: 0.5rem;
	border-top: var(--rv-hair);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--dh-grey);
	max-width: 62ch;
}

@media (min-width: 700px) {
	.rv-open { margin-top: 2.5rem; }
}


/* ========================================================================
   12. SECTIONS & EN-TETES DE RUBRIQUE
   Chaque rubrique s'ouvre sur un court filet d'imprimeur, un titre serif en
   bas-de-casse et une ligne de chapeau. Les rubriques sont separees par un
   filet sable, pas par des blocs de couleur.
   .rv-sec et .dh-sec sont la meme chose, idem pour leurs en-tetes.
   ======================================================================== */

.rv-sec,
.dh-sec {
	padding: 2.5rem 0;
	border-top: var(--rv-rule);
	margin-top: 2.5rem;
}
.rv-sec--tint,
.dh-sec--tint {
	background: var(--dh-tint);
	border-top: 1px solid var(--dh-gold);
	border-bottom: 1px solid var(--dh-gold);
}
.rv-sec--blue,
.dh-sec--blue {
	background: var(--dh-blue-ink);
	color: var(--dh-paper);
	border-top: 0;
}

.rv-sec__head,
.dh-sec__head { margin-bottom: 1.75rem; }
.rv-sec__head::before,
.dh-sec__head::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	background: var(--dh-gold-ink);
	margin-bottom: 1rem;
}
.rv-sec--blue .rv-sec__head::before,
.dh-sec--blue .dh-sec__head::before { background: var(--dh-sand); }
.rv-sec__head h2,
.dh-sec__head h2 {
	font-size: clamp(1.75rem, 6.5vw, 2.625rem);
	line-height: 1.08;
	margin: 0 0 0.4rem;
}
.rv-sec__head > p:last-child,
.dh-sec__head > p:last-child {
	margin: 0;
	max-width: 48ch;
	font-size: 1.0625rem;
	color: var(--dh-grey);
}
.rv-sec--blue .rv-sec__head h2,
.dh-sec--blue .dh-sec__head h2 { color: var(--dh-paper); }
.rv-sec--blue .rv-sec__head > p:last-child,
.dh-sec--blue .dh-sec__head > p:last-child { color: var(--dh-tint); }
.rv-sec--blue .dh-label,
.dh-sec--blue .dh-label { color: var(--dh-sand); }

/* La rubrique qui suit immediatement l'ouverture d'une page (.ca-hero,
   .ch-hero, .pa-hero) ne reprend pas de filet : l'ouverture se ferme deja
   sur son double filet sable. Sans cette regle on lit deux filets separes
   par une bande vide d'environ 80 px. Les rubriques sur fond (--tint,
   --blue) gardent leur encadrement propre. */
.ca-hero + .rv-sec:not(.rv-sec--tint):not(.rv-sec--blue),
.ch-hero + .rv-sec:not(.rv-sec--tint):not(.rv-sec--blue),
.pa-hero + .rv-sec:not(.rv-sec--tint):not(.rv-sec--blue),
.ca-hero + .dh-sec:not(.dh-sec--tint):not(.dh-sec--blue),
.ch-hero + .dh-sec:not(.dh-sec--tint):not(.dh-sec--blue),
.pa-hero + .dh-sec:not(.dh-sec--tint):not(.dh-sec--blue) {
	border-top: 0;
	margin-top: 0;
}
.ca-hero + .rv-sec--tint,
.ch-hero + .rv-sec--tint,
.pa-hero + .rv-sec--tint,
.ca-hero + .rv-sec--blue,
.ch-hero + .rv-sec--blue,
.pa-hero + .rv-sec--blue { margin-top: 0; }

@media (min-width: 700px) {
	.rv-sec, .dh-sec { padding: 3.25rem 0; margin-top: 3.25rem; }
	.rv-sec__head, .dh-sec__head { margin-bottom: 2rem; }
}

@media (min-width: 1040px) {
	/* Grille a deux colonnes : le titre tient la colonne de gauche, le
	   chapeau la colonne de droite, aligne sur sa derniere ligne. */
	.rv-sec__head,
	.dh-sec__head {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 3rem;
		align-items: end;
	}
	.rv-sec__head::before,
	.dh-sec__head::before { grid-column: 1; grid-row: 1; }
	.rv-sec__head h2,
	.dh-sec__head h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
	.rv-sec__head > p:last-child,
	.dh-sec__head > p:last-child {
		grid-column: 2;
		grid-row: 2;
		padding-bottom: 0.45rem;
	}
}


/* ========================================================================
   13. MESSAGE DE LA CHOUL
   Un communique encadre, deux colonnes (vendredi / chabbat) sur grand
   ecran, une seule sur telephone.
   ======================================================================== */

.dh-msg {
	border: 1px solid var(--dh-sand);
	background: #fff;
	padding: 1.25rem var(--rv-gut) 1.5rem;
}
.dh-msg__head {
	padding-bottom: 1rem;
	border-bottom: 3px double var(--dh-sand);
	margin-bottom: 1.25rem;
}
.dh-msg__badge {
	color: var(--dh-grey);
	letter-spacing: 0.12em;
}
.dh-msg__title {
	font-size: clamp(1.625rem, 6vw, 2.25rem);
	line-height: 1.08;
	margin: 0 0 0.3rem;
}
.dh-msg__dates {
	margin: 0;
	font-style: italic;
	color: var(--dh-grey);
	font-size: 0.9375rem;
}

.dh-msg__days { display: grid; gap: 1.75rem; }

.dh-msg__day h4 {
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
	padding-bottom: 0.5rem;
	border-bottom: var(--rv-rule);
	margin-bottom: 0.25rem;
}
.dh-msg__day ol {
	margin: 0; padding: 0;
	list-style: none;
}
.dh-msg__day > ol > li {
	padding: 0.7rem 0;
	border-bottom: var(--rv-hair);
}
.dh-msg__day > ol > li:last-child { border-bottom: 0; }

.dh-msg__row {
	display: grid;
	grid-template-columns: 4.25rem 1fr;
	gap: 0 0.75rem;
	align-items: baseline;
}
.dh-msg__row time {
	font-size: 1.1875rem;
	font-weight: 500;
	color: var(--dh-blue-ink);
}
.dh-msg__row > span { font-size: 1.0625rem; }
.dh-msg__row small {
	display: inline;
	font-style: italic;
	color: var(--dh-grey);
}

.dh-msg__day li.is-candle .dh-msg__row time,
.dh-msg__day li.is-end .dh-msg__row time { color: var(--dh-gold-ink); }

.dh-msg__dedi, .dh-msg__brakha, .dh-msg__note {
	margin: 0.4rem 0 0 0;
	padding-inline-start: 5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--dh-grey);
}
.dh-msg__brakha { font-style: italic; }
.dh-msg__note { font-style: italic; }

.dh-msg__close {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 3px double var(--dh-sand);
	text-align: center;
}
.dh-msg__close p {
	margin: 0 0 0.2rem;
	font-size: 1.0625rem;
	color: var(--dh-blue-ink);
}
.dh-msg__close p[lang="he"] { color: var(--dh-gold-ink); }

@media (max-width: 420px) {
	.dh-msg__dedi, .dh-msg__brakha, .dh-msg__note { padding-inline-start: 0; }
}

@media (min-width: 700px) {
	.dh-msg { padding: 1.75rem 2rem 2rem; }
	.dh-msg__days {
		grid-template-columns: 1fr 1fr;
		gap: 0 2.5rem;
	}
	.dh-msg__days > .dh-msg__day + .dh-msg__day {
		padding-inline-start: 2.5rem;
		margin-inline-start: -2.5rem;
		border-inline-start: var(--rv-rule);
	}
}


/* ========================================================================
   14. TABLEAUX D'HORAIRES & ZMANIM
   Trois colonnes de releves, a la facon des tableaux d'un journal :
   libelle a gauche, heure a droite, filets d'un pixel entre les lignes.
   Telephone : une colonne. 700 px : deux. 1040 px : trois.
   .rv-tables / .rv-table est l'ecriture du theme ; .dh-horaires et ses
   <section> enfants sont l'ancienne, encore en service sur
   /cours-de-torah/. Les deux donnent le meme releve.
   ======================================================================== */

.rv-tables,
.dh-horaires {
	display: grid;
	gap: 2rem;
}

.rv-table,
.dh-horaires > section { min-width: 0; }

.dh-colhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	padding-bottom: 0.55rem;
	border-bottom: 3px double var(--dh-sand);
	margin-bottom: 0.25rem;
}
.dh-colhead > span:first-child {
	font-family: var(--rv-serif);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--dh-blue-ink);
	letter-spacing: -0.01em;
}
.dh-colhead > span:last-child {
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
}

.dh-rows { margin: 0; }
.dh-rows > div {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;      /* le libelle et l'heure se repondent au centre */
	gap: 0 1.25rem;
	padding: 0.95rem 0;       /* 0.6rem auparavant : les filets se touchaient */
	border-bottom: var(--rv-hair);
}
.dh-rows dt {
	font-size: 1rem;
	color: var(--dh-ink);
	line-height: 1.35;
}
.dh-rows dt small {
	display: block;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--dh-grey);
}
.dh-rows dd {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--dh-blue-ink);
	text-align: end;
	white-space: nowrap;
}

/* Encadre de repli : <noscript>, calendrier non calcule, liste vide. */
.dh-empty {
	padding: 0.9rem 1rem;
	border: 1px solid var(--dh-gold);
	background: var(--dh-tint);
	font-size: 0.9375rem;
	color: var(--dh-ink);
	margin-bottom: 1.5rem;
}

@media (min-width: 700px) {
	.rv-tables, .dh-horaires { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
}
@media (min-width: 1040px) {
	.rv-tables, .dh-horaires { grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
	.rv-tables > .rv-table + .rv-table,
	.dh-horaires > section + section {
		padding-inline-start: 2.5rem;
		margin-inline-start: -2.5rem;
		border-inline-start: var(--rv-rule);
	}
}


/* ========================================================================
   15. RELEVE DES COURS DE TORAH
   Un releve d'horaires de journal : jour, public, intitule, heure.
   Sert sur l'accueil (section #cours) et sur /cours-de-torah/.
   ======================================================================== */

.ac-index {
	border-top: 3px double var(--dh-sand);
}
.ac-index__row {
	display: grid;
	grid-template-areas:
		"day  time"
		"who  who"
		"what what";
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1rem;
	padding: 0.9rem 0;
	border-bottom: var(--rv-hair);
	align-items: baseline;
}
.ac-index__day {
	grid-area: day;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
}
.ac-index__who {
	grid-area: who;
	font-size: 1.1875rem;
	font-weight: 500;
	color: var(--dh-blue-ink);
	line-height: 1.25;
}
/* L'intitule du cours : classe .ac-index__what, ou simple <span> sans
   classe dans l'ancien HTML de /cours-de-torah/. Les deux occupent la
   troisieme zone de la grille. */
.ac-index__what,
.ac-index__row > span:not([class]) {
	grid-area: what;
	font-size: 1rem;
	color: var(--dh-grey);
	line-height: 1.45;
}
.ac-index__time {
	grid-area: time;
	font-size: 1.0625rem;
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--dh-blue-ink);
	white-space: nowrap;
	text-align: end;
}

.ac-index__more {
	display: grid;
	gap: 1.1rem;
	margin-top: 1.75rem;
	justify-items: start;
}
.ac-index__more p {
	margin: 0;
	max-width: 46ch;
	font-size: 1.0625rem;
	color: var(--dh-grey);
}

@media (min-width: 760px) {
	.ac-index__row {
		grid-template-areas: "day who what time";
		grid-template-columns: 7.5rem 10rem 1fr 8rem;
		gap: 0 1.5rem;
		padding: 0.85rem 0;
	}
	.ac-index__who { font-size: 1.0625rem; }
	.ac-index__more {
		grid-template-columns: 1fr auto;
		align-items: center;
		justify-items: start;
	}
	.ac-index__more .dh-btn { justify-self: end; }
}

/* Note de colonne : paragraphe de texte courant sous une tete de colonne
   dans .rv-tables (page /cours-de-torah/, colonnes « Programme » et « Ou »).
   Un cran sous le corps du texte, pour qu'il ne pese pas plus que les
   heures de la colonne voisine. */
.ch-note {
	margin: 0.85rem 0 0;
	font-family: var(--rv-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dh-grey);
	max-width: 44ch;
}
.ch-note + .ch-note { margin-top: 0.6rem; }


/* ========================================================================
   16. PORTRAIT DU RAV
   Colonne etroite (portrait + citation) puis le texte courant, avec une
   lettrine et, sur grand ecran, deux colonnes : c'est le seul endroit ou
   le texte se colonne, une page de revue a besoin d'un morceau de
   « vraie » lecture. La BIOGRAPHIE est celle du site d'origine ; il n'y a
   ni video ni renvoi vers les cours du Rav.
   ======================================================================== */

.rv-rav { display: grid; gap: 1.75rem; }

.rv-rav__side { min-width: 0; }

.ac-rav__img {
	margin: 0 0 1.1rem;
	border: 1px solid var(--dh-sand);
	padding: 0.4rem;
	background: #fff;
	max-width: 20rem;
}
.ac-rav__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ac-rav__quote {
	margin: 0;
	font-size: clamp(1.375rem, 5.5vw, 1.75rem);
	font-style: italic;
	line-height: 1.3;
	color: var(--dh-blue-ink);
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--dh-gold);
}
.ac-rav__quote span { color: var(--dh-gold-ink); }

.ac-rav__bio p { font-size: 1.0625rem; line-height: 1.66; }
.ac-rav__bio p:first-child::first-letter {
	float: inline-start;
	font-size: 3.6em;
	line-height: 0.82;
	padding: 0.06em 0.09em 0 0;
	color: var(--dh-gold-ink);
	font-weight: 400;
}

@media (min-width: 700px) {
	.rv-rav {
		grid-template-columns: 20rem 1fr;
		gap: 2.5rem;
		align-items: start;
	}
	.ac-rav__bio {
		padding-inline-start: 2.5rem;
		margin-inline-start: -2.5rem;
		border-inline-start: var(--rv-rule);
	}
}
@media (min-width: 1040px) {
	.ac-rav__bio {
		columns: 2;
		column-gap: 2.5rem;
	}
	.ac-rav__bio p { margin-top: 0; }
}


/* ========================================================================
   17. BANDE D'APPEL (BLEU)
   La seule surface sombre d'une page : une tribune d'appel aux dons.
   .rv-cols est l'ecriture du theme ; .ac-cols et .pa-uses sont les
   anciennes, encore en service sur /cours-de-torah/ et /participez/.
   ======================================================================== */

.rv-cols, .ac-cols, .pa-uses { display: grid; gap: 0; }
.rv-cols > div, .ac-cols > div, .pa-uses > div {
	padding: 1.4rem 0;
	border-top: 1px solid rgba(228, 192, 144, .35);
}
.rv-cols > div:first-child,
.ac-cols > div:first-child,
.pa-uses > div:first-child { border-top: 3px double var(--dh-sand); }
.rv-cols h3, .ac-cols h3, .pa-uses h3 {
	margin: 0 0 0.4rem;
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--dh-paper);
}
.rv-cols p, .ac-cols p, .pa-uses p {
	margin: 0 0 1rem;
	font-size: 1rem;
	color: var(--dh-tint);
	max-width: 34ch;
}
.rv-cols p:last-child, .ac-cols p:last-child, .pa-uses p:last-child { margin-bottom: 0; }
.rv-cols .rv-link, .ac-cols .rv-link { color: var(--dh-sand); }
.rv-cols .rv-link:hover, .ac-cols .rv-link:hover { color: var(--dh-paper); }
/* Lien « Nous ecrire → » sans classe dans l'ancien HTML. */
.ac-cols a:not(.dh-btn) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--dh-sand);
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.ac-cols a:not(.dh-btn):hover { color: var(--dh-paper); }

@media (min-width: 700px) {
	.rv-cols, .ac-cols {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 2.5rem;
	}
	.pa-uses {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 2.5rem;
	}
	.rv-cols > div, .ac-cols > div, .pa-uses > div {
		padding: 1.5rem 0 0;
		border-top: 3px double var(--dh-sand);
	}
	/* Filet de separation entre colonnes. Il se pose sur les elements qui ne
	   sont PAS en premiere colonne : un simple « div + div » attrapait aussi
	   le premier element de chaque rangee suivante et le tirait hors du
	   cadre (visible sur .pa-uses, 5 items sur 2 colonnes, entre 700 et
	   1039 px : « Kollel » et « La choul » debordaient de 40 px a gauche). */
	.rv-cols > div:not(:nth-child(3n+1)),
	.ac-cols > div:not(:nth-child(3n+1)),
	.pa-uses > div:nth-child(2n) {
		padding-inline-start: 2.5rem;
		margin-inline-start: -2.5rem;
		border-inline-start: 1px solid rgba(228, 192, 144, .35);
	}
}
@media (min-width: 1040px) {
	.pa-uses { grid-template-columns: repeat(5, 1fr); gap: 0 1.75rem; }
	/* Sur cinq colonnes, la rangee est unique : on repart de zero. */
	.pa-uses > div:nth-child(2n) {
		padding-inline-start: 0;
		margin-inline-start: 0;
		border-inline-start: 0;
	}
	.pa-uses > div:not(:nth-child(5n+1)) {
		padding-inline-start: 1.75rem;
		margin-inline-start: -1.75rem;
		border-inline-start: 1px solid rgba(228, 192, 144, .35);
	}
}


/* ========================================================================
   18. ACCES & PLAN
   ======================================================================== */

.rv-visit, .ac-visit, .pa-contact, .pa-don { display: grid; gap: 1.75rem; }

.rv-visit__addr {
	margin: 0 0 1.1rem;
	font-size: clamp(1.875rem, 7vw, 2.75rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.018em;
}
.rv-visit__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.rv-visit__map {
	border: 1px solid var(--dh-sand);
	padding: 0.4rem;
	background: #fff;
}
.rv-visit__map iframe,
.ac-visit > iframe {
	display: block;
	width: 100%;
	height: 17rem;
	border: 0;
	background: var(--dh-tint);
}

.pa-contact__txt p { max-width: 42ch; }

@media (min-width: 700px) {
	.rv-visit, .ac-visit {
		grid-template-columns: 1fr 1.1fr;
		gap: 2.5rem;
		align-items: start;
	}
	.pa-contact, .pa-don {
		grid-template-columns: 1fr 1.2fr;
		gap: 2.5rem;
		align-items: start;
	}
	.rv-visit__map iframe, .ac-visit > iframe { height: 21rem; }
}


/* ========================================================================
   19. PIED DE PAGE & BOUTON RETOUR EN HAUT
   Un colophon sur papier, pas un bloc sombre : la bande bleue est deja
   passee juste au-dessus, inutile d'en remettre une.
   ======================================================================== */

.rv-foot,
.dh-footer {
	border-top: 3px double var(--dh-sand);
	padding: 2.25rem 0 2.5rem;
	background: var(--dh-paper);
}

.dh-footer__mark {
	margin: 0 0 1.5rem;
	font-size: clamp(2.5rem, 13vw, 5.5rem);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--dh-sand);
	-webkit-user-select: none;
	user-select: none;
}

.dh-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	padding-top: 1.5rem;
	border-top: var(--rv-rule);
}
.dh-footer__grid p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.dh-footer__grid a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;          /* cible tactile */
	padding: 0.1rem 0;
	color: var(--dh-blue);
}

.dh-footer__legal {
	margin: 1.75rem 0 0;
	padding-top: 1rem;
	border-top: var(--rv-hair);
	font-size: 0.8125rem;
	color: var(--dh-grey);
}

@media (min-width: 700px) {
	.dh-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

.dh-totop {
	position: fixed;
	inset-inline-end: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 90;
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--dh-gold-ink);
	background: var(--dh-paper);
	color: var(--dh-blue-ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.dh-totop svg { width: 20px; height: 20px; }
.dh-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.dh-totop:hover { background: var(--dh-tint); }
@media (prefers-reduced-motion: reduce) {
	.dh-totop { transition: none; }
}


/* ========================================================================
   20. CALENDRIER : PROCHAINE FETE, FILTRES, MOIS, LIGNES
   Les douze mois, les dates hebraiques et les horaires sont ecrits par
   assets/js/zmanim.js dans le gabarit ci-dessous ; les classes et les
   attributs (data-k, data-d, data-same, data-f) sont ceux qu'attendent
   zmanim.js et site.js — ne pas les renommer.
   ======================================================================== */

/* --- Encadre de la prochaine fete -------------------------------------- */

.dh-next {
	border: 1px solid var(--dh-gold);
	background: var(--dh-blue-ink);
	color: var(--dh-paper);
	padding: 1.25rem 1.25rem 1.4rem;
}
.dh-next small {
	display: block;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dh-sand);
}
.dh-next__n {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.5rem 0 0.2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(228, 192, 144, .35);
}
.dh-next__n b {
	font-family: var(--rv-serif);
	font-size: clamp(3rem, 14vw, 4.25rem);
	font-weight: 400;
	line-height: 0.9;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -0.03em;
}
.dh-next__n em {
	font-style: normal;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dh-sand);
}
.dh-next h3 {
	margin: 0.6rem 0 0.25rem;
	font-size: 1.625rem;
	font-weight: 500;
	color: var(--dh-paper);
}
.dh-next p { margin: 0; font-size: 0.9375rem; color: var(--dh-tint); }

/* --- Barre de filtres --------------------------------------------------- */

.dh-filt {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.dh-filt button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--dh-gold-ink);
	background: transparent;
	color: var(--dh-blue-ink);
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
.dh-filt button:hover { background: var(--dh-tint); }
.dh-filt button.is-on {
	background: var(--dh-blue-ink);
	border-color: var(--dh-blue-ink);
	color: var(--dh-paper);
}
.dh-filt i {
	width: 9px; height: 9px;
	flex: none;
	display: inline-block;
}
.dh-k--choul { background: var(--dh-ink); }
.dh-filt .is-on .dh-k--choul { background: var(--dh-paper); }
.dh-k--fete  { background: var(--dh-blue); }
.dh-k--jeune { background: var(--dh-k-jeune); }
.dh-k--rh    { background: var(--dh-k-rh); }
.dh-k--nat   { background: var(--dh-k-nat); }
.dh-k--omer  { background: var(--dh-gold); }

/* --- Un mois ------------------------------------------------------------ */

.dh-mois { scroll-margin-top: 1.25rem; }
.dh-mois__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.5rem 1.25rem;
	margin: 2.5rem 0 0;
	padding-bottom: 0.6rem;
	border-bottom: 3px double var(--dh-sand);
}
.dh-mois__head h2 {
	font-size: clamp(1.75rem, 7vw, 2.625rem);
	line-height: 1.08;
}
.dh-mois__head small {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--dh-grey);
	letter-spacing: 0;
}
.dh-mois__nav {
	display: flex;
	gap: 1.25rem;
	white-space: nowrap;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.dh-mois__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	color: var(--dh-gold-ink);
}
.dh-mois__nav a:hover { color: var(--dh-blue); }
.dh-mois__vide {
	margin: 0;
	padding: 1rem 0;
	border-bottom: var(--rv-hair);
	font-style: italic;
	color: var(--dh-grey);
}

/* --- Une ligne de calendrier ------------------------------------------- */

.dh-row {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0.2rem 0.9rem;
	padding: 0.9rem 0;
	border-bottom: var(--rv-hair);
	align-items: start;
}
.dh-row[data-same] .dh-row__d { visibility: hidden; }
.dh-row__d b {
	display: block;
	font-family: var(--rv-serif);
	font-size: 1.875rem;
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--dh-blue-ink);
	letter-spacing: -0.02em;
}
.dh-row__d span {
	display: block;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--dh-grey);
}
.dh-row__t { min-width: 0; }
.dh-row h4 {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--dh-blue-ink);
}
.dh-row h4 a { text-decoration: none; }
.dh-row h4 .dh-he {
	display: block;
	margin: 0.2rem 0 0;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--dh-grey);
}
.dh-row p {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--dh-grey);
}
.dh-row__h {
	grid-column: 2;
	margin-top: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	font-variant-numeric: lining-nums tabular-nums;
}
.dh-row__h span { color: var(--dh-grey); }
.dh-row__h time { font-weight: 500; color: var(--dh-blue-ink); }

.dh-tag {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
}
.dh-tag--fete  { color: var(--dh-blue); }
.dh-tag--jeune { color: var(--dh-k-jeune); }
.dh-tag--rh    { color: var(--dh-k-rh); }
.dh-tag--nat   { color: var(--dh-k-nat); }
.dh-tag--omer, .dh-tag--omersum { color: var(--dh-gold-ink); }
.dh-tag--choul { color: var(--dh-ink); }

/* Lignes mises en avant : un fond beige qui va d'un bord a l'autre de la
   gouttiere, avec un filet epais a gauche. */
.dh-row--choul,
.dh-row--omersum {
	margin-inline: calc(var(--rv-gut) * -1);
	padding-inline: var(--rv-gut);
	background: var(--dh-tint);
	box-shadow: inset 3px 0 0 var(--dh-blue);
}
.dh-row--omersum { box-shadow: inset 3px 0 0 var(--dh-gold); }
.dh-row.is-passe { opacity: .5; }
.dh-row.is-today { box-shadow: inset 3px 0 0 var(--dh-gold-ink); }

.dh-row__more summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dh-blue);
}
.dh-row__more summary::-webkit-details-marker { display: none; }
.dh-row__more summary::after { content: " +"; }
.dh-row__more[open] summary::after { content: " \2212"; }
.dh-row__more ul {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	max-width: 22rem;
}
.dh-row__more li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
	border-bottom: var(--rv-hair);
	font-size: 0.9375rem;
}
.dh-row__more time { font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }

/* « Tout » (data-f="") montre tout sauf le compte du Omer : il a son
   propre filtre. Regle heritee de site.js, section 7. */
.dh-agenda[data-f=""] .dh-row[data-k="omer"],
.dh-agenda:not([data-f]) .dh-row[data-k="omer"] { display: none; }

.dh-cal__src {
	margin-top: 1.75rem;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--dh-grey);
}

/* Liste d'evenements vide, sur /calendrier/. */
.dh-ev__vide {
	margin: 0;
	padding-top: 1rem;
	border-top: var(--rv-hair);
	font-style: italic;
	color: var(--dh-grey);
}

@media (min-width: 760px) {
	.dh-mois__head { margin-top: 3.25rem; }
	.dh-row {
		grid-template-columns: 4.5rem minmax(0, 1fr) 14rem;
		gap: 0 1.5rem;
	}
	.dh-row__h { grid-column: 3; margin-top: 0; }
	.dh-row__d b { font-size: 2.25rem; }
}


/* ========================================================================
   21. BANDEAU D'ABONNEMENT
   Bande sombre .dh-sub avec son groupe de liens .dh-sub__b
   (telechargement du calendrier .ics, sur /calendrier/).
   ======================================================================== */

.dh-sub {
	background: var(--dh-blue-ink);
	color: var(--dh-paper);
	padding: 2.5rem 0;
}
.dh-sub .dh-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}
.dh-sub h2, .dh-sub h3 { color: var(--dh-paper); font-size: 1.625rem; font-weight: 500; }
.dh-sub p { margin: 0.5rem 0 0; max-width: 42ch; color: var(--dh-tint); font-size: 1rem; }
.dh-sub .dh-label { color: var(--dh-sand); }
.dh-sub__b { display: flex; flex-wrap: wrap; }
.dh-sub__b a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--dh-sand);
	color: var(--dh-paper);
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
}
.dh-sub__b a + a { border-inline-start: 0; }
.dh-sub__b a:hover { background: var(--dh-paper); color: var(--dh-blue-ink); }


/* ========================================================================
   22. PAGE PARTICIPEZ
   .pa-ways : les trois facons de donner. .pa-frame : l'encadre du
   formulaire de don externe. .pa-don__info : le releve des coordonnees.
   (.pa-uses et .pa-contact sont traites avec leurs equivalents,
   sections 17 et 18.)
   ======================================================================== */

.pa-ways { display: grid; gap: 0; border-top: 3px double var(--dh-sand); }
.pa-ways > div {
	padding: 1.2rem 0;
	border-bottom: var(--rv-hair);
	display: grid;
	gap: 0.4rem;
	justify-items: start;
}
.pa-ways b {
	font-family: var(--rv-serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--dh-blue-ink);
}
.pa-ways p { margin: 0; color: var(--dh-grey); max-width: 38ch; }
.pa-ways a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--dh-blue);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.pa-don__info dl { margin: 0; border-top: 3px double var(--dh-sand); }
.pa-don__info dl div {
	padding: 0.7rem 0;
	border-bottom: var(--rv-hair);
}
.pa-don__info dt { font-weight: 500; color: var(--dh-blue-ink); }
.pa-don__info dd { margin: 0.2rem 0 0; font-size: 0.9375rem; color: var(--dh-grey); }

.pa-frame {
	border: 1px solid var(--dh-sand);
	border-top: 3px solid var(--dh-blue);
	background: #fff;
	padding: 0.4rem;
}
.pa-frame iframe {
	display: block;
	width: 100%;
	height: 1150px;
	border: 0;
}

@media (min-width: 700px) {
	.pa-ways { grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
	.pa-ways > div { padding: 1.4rem 0 0; border-bottom: 0; }
	.pa-ways > div + div {
		padding-inline-start: 2.5rem;
		margin-inline-start: -2.5rem;
		border-inline-start: var(--rv-rule);
	}
}
@media (max-width: 699px) {
	.pa-frame iframe { height: 1350px; }
}


/* ========================================================================
   23. FORMULAIRES
   Champs soulignes, pot de miel .dh-form__hp, messages .dh-form__ok /
   .dh-form__err. En statique, l'envoi passe par un service externe
   (action du <form>) : voir src/GABARIT.md.
   ======================================================================== */

.dh-form {
	display: grid;
	gap: 1.1rem;
	max-width: 45rem;
}
.dh-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}
.dh-form label {
	display: grid;
	gap: 0.4rem;
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
}
.dh-form input, .dh-form select, .dh-form textarea {
	font-family: var(--rv-serif);
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--dh-ink);
	background: #fff;
	border: 1px solid var(--dh-sand);
	border-radius: 0;
	padding: 0.65rem 0.7rem;
	min-height: 44px;
	width: 100%;
}
.dh-form textarea { resize: vertical; min-height: 9rem; }
.dh-form input:focus, .dh-form select:focus, .dh-form textarea:focus {
	outline: 0;
	border-color: var(--dh-blue);
	box-shadow: inset 0 0 0 1px var(--dh-blue);
}
.dh-form .dh-btn { justify-self: start; }
.dh-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}
.dh-form__ok, .dh-form__err {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--dh-gold);
	background: var(--dh-tint);
	font-size: 0.9375rem;
}
.dh-form__ok { box-shadow: inset 3px 0 0 var(--dh-blue); }
.dh-form__err { box-shadow: inset 3px 0 0 var(--dh-k-jeune); }

@media (min-width: 700px) {
	.dh-form__row { grid-template-columns: 1fr 1fr; }
}


/* ========================================================================
   24. IMPRESSION
   Une revue doit s'imprimer. On enleve ce qui ne sert qu'a l'ecran.
   ======================================================================== */

@media print {
	.rv-head, .dh-header { position: static; border-bottom: 2px solid #000; }
	.dh-burger, .dh-drawer, .dh-totop, .rv-visit__map, .ac-visit > iframe,
	.pa-frame, .rv-une__cta, .ac-index__more .dh-btn, .rv-head__don,
	.dh-filt, .dh-sub__b { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.rv-sec, .dh-sec { padding: 1rem 0; margin-top: 1rem; break-inside: avoid; }
	.rv-sec--blue, .dh-sec--blue, .dh-sub, .dh-next { background: #fff; color: #000; }
	.rv-sec--blue .rv-sec__head h2, .dh-sec--blue .dh-sec__head h2,
	.rv-cols h3, .ac-cols h3, .pa-uses h3,
	.dh-next h3, .dh-sub h2, .dh-sub h3 { color: #000; }
	.rv-cols p, .ac-cols p, .pa-uses p, .dh-next p, .dh-sub p,
	.rv-sec--blue .rv-sec__head > p:last-child,
	.dh-sec--blue .dh-sec__head > p:last-child { color: #333; }
	.rv-open__img, .dh-mois, .dh-row { break-inside: avoid; }
}

/* ===========================================================================
   AJUSTEMENT TELEPHONE
   Mesure sur un vrai 375x812 : l'en-tete prenait 159 px avant tout contenu
   (.rv-head__in 87 + .rv-dateline 58), parce que le logo, le sur-titre
   hebreu et le bouton menu s'empilaient. Selecteurs releves dans le DOM reel.
   =========================================================================== */
@media (max-width: 560px) {

  /* --- en-tete : le logo et le menu sur une seule ligne --------------- */
  .rv-head__in {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: .15rem;
    padding-block: .45rem;
  }
  .rv-head__brand { grid-column: 1; grid-row: 1; }
  .dh-burger      { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .rv-head__he    { grid-column: 1; grid-row: 2; margin: -.1rem 0 0; font-size: .74rem; opacity: .8; }

  :root { --dh-logo-large: 62px; }
  .dh-logo__txt   { font-size: 1.18rem; }
  .dh-logo        { gap: .5rem; }

  /* --- bandeau de date : une ligne, plus serre ------------------------ */
  .rv-dateline__in { padding-block: .35rem; row-gap: .1rem; }
  .rv-dateline__fr,
  .rv-dateline__he,
  .rv-dateline__ch { font-size: .8rem; line-height: 1.35; }

  /* --- titres : 43 px, c'est trop sur 375 px de large ------------------ */
  h1 { font-size: clamp(1.85rem, 8.4vw, 2.1rem); line-height: 1.12; }
  h2 { font-size: clamp(1.35rem, 6.2vw, 1.6rem); }

  /* --- respiration generale : un cran plus serre ---------------------- */
  .rv-wrap { padding-inline: 1rem; }

  /* --- on ne descend jamais sous 44 px de cible tactile --------------- */
  .dh-burger, .dh-btn { min-height: 44px; }
}


/* ---------------------------------------------------------------------------
   « Ramat Poleg » sous le nom, en lettres latines.
   Remplace l'ancien sur-titre hebreu, qui etait en RTL : on repasse donc en
   LTR, en petites capitales espacees pour rester discret sous le nom.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Le bloc de marque : logo a gauche, puis le nom et « Ramat Poleg » empiles.
   Le sous-titre se centre ainsi sur le NOM et non sur l'ensemble logo+nom,
   ou il paraissait decale vers la gauche.
   --------------------------------------------------------------------------- */
.dh-logo__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}
.rv-head__lieu {
	direction: ltr;
	text-transform: uppercase;
	letter-spacing: .17em;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	margin: .18rem 0 0 .17em;   /* .17em compense l'interlettrage a droite */
	color: var(--dh-gold-ink);
	white-space: nowrap;
}
@media (min-width: 700px) { .rv-head__lieu { font-size: 1rem; margin-top: .22rem; } }
@media (max-width: 560px) { .rv-head__lieu { font-size: .8rem; letter-spacing: .14em; } }




/* ---------------------------------------------------------------------------
   PROCHAIN COURS A VENIR (page Cours de Torah)
   Les deux images — la choul recadree en portrait et l'affiche — partagent la
   meme ligne et le meme format 2:3. Les informations suivent dans une
   troisieme colonne sur grand ecran, sous les images en dessous de 1040 px.
   --------------------------------------------------------------------------- */
.rv-surtitre {
	margin: 0 0 .45rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
}
.rv-affiche {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(16rem, 1fr);
	gap: 2rem 2.5rem;
	align-items: start;
}
.rv-affiche__duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 300px));
	gap: 1rem;
}
.rv-affiche__img { margin: 0; }
.rv-affiche__img img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;          /* les deux images au meme format, quoi qu'il arrive */
	object-fit: cover;
	height: auto;
	border-radius: 4px;
	border: 1px solid rgba(16, 21, 31, .12);
	box-shadow: 0 2px 18px rgba(0, 24, 60, .10);
}
.rv-affiche__avec {
	margin: 0 0 1.1rem;
	font-size: 1.15rem;
	color: var(--dh-blue-ink);
}
.rv-affiche__avec b { font-weight: 600; }
.rv-affiche__dl { margin: 0 0 1.5rem; }
.rv-affiche__dl > div {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: .5rem 1rem;
	padding: .6rem 0;
	border-top: 1px solid var(--dh-rule);
}
.rv-affiche__dl > div:last-child { border-bottom: 1px solid var(--dh-rule); }
.rv-affiche__dl dt {
	margin: 0;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
	align-self: center;
}
.rv-affiche__dl dd { margin: 0; line-height: 1.45; }

/* une seule image : elle garde sa largeur au lieu de s'etirer sur deux colonnes */
.rv-affiche__duo--seule { grid-template-columns: minmax(0, 340px); }

@media (max-width: 1040px) {
	.rv-affiche { grid-template-columns: minmax(0, 1fr); }
	.rv-affiche__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
	.rv-affiche__duo--seule { grid-template-columns: minmax(0, 340px); }
}
@media (max-width: 560px) {
	.rv-affiche__duo { gap: .6rem; }
	.rv-affiche__dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
	.rv-affiche__avec { font-size: 1.05rem; }
	.rv-surtitre { font-size: .66rem; }
}


/* ---------------------------------------------------------------------------
   NEWSLETTER : la case de consentement et la note sous le formulaire
   --------------------------------------------------------------------------- */
.dh-form__check {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: .2rem 0 1.1rem;
	font-size: .95rem;
	line-height: 1.45;
	cursor: pointer;
}
.dh-form__check input {
	flex: none;
	width: 1.05rem; height: 1.05rem;
	margin-top: .18rem;
	accent-color: var(--dh-blue);
}
.dh-form__note {
	margin: 1rem 0 0;
	padding: .75rem 1rem;
	border-inline-start: 3px solid var(--dh-gold);
	background: var(--dh-tint);
	border-radius: 3px;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--dh-blue-ink);
}
.rv-note {
	margin-top: 1.2rem;
	font-size: .92rem;
	color: var(--dh-grey);
}


/* ---------------------------------------------------------------------------
   Numero d'amouta (association enregistree en Israel), sur la ligne legale.
   Tres discret, a gauche, et passe au-dessus du copyright sur telephone
   plutot que de serrer les deux mentions sur une ligne trop etroite.
   --------------------------------------------------------------------------- */
.dh-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem 1.1rem;
}
.dh-footer__amouta {
	font-size: .86em;
	opacity: .78;
	font-variant-numeric: tabular-nums;
	order: -1;               /* toujours a gauche, avant le copyright */
}
@media (max-width: 560px) {
	.dh-footer__amouta { font-size: .9em; }
}


/* ---------------------------------------------------------------------------
   Numero d'amouta en haut : juste au-dessus du filet du menu, a gauche.
   L'en-tete est centre, cette mention ne l'est pas : elle est calee a gauche
   pour rester une mention legale et non un element d'identite.
   Masquee sous 700 px, comme la barre de rubriques qu'elle surmonte : sur
   telephone elle ne figure qu'au pied de page.
   --------------------------------------------------------------------------- */
.rv-head__amouta { display: none; }

@media (min-width: 700px) {
	.rv-head__amouta {
		display: block;
		width: 100%;
		margin: 0.55rem 0 -0.5rem;
		text-align: start;
		font-size: 0.625rem;
		letter-spacing: 0.04em;
		line-height: 1.3;
		color: var(--dh-grey);
		opacity: .72;
		font-variant-numeric: tabular-nums;
	}
}


/* ---------------------------------------------------------------------------
   Le relais WhatsApp sur la page Newsletter : tant que l'inscription par
   courriel n'est pas branchee, c'est la seule voie qui fonctionne vraiment.
   --------------------------------------------------------------------------- */
.nl-wa {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(16, 21, 31, .12);
	border-inline-start: 3px solid var(--dh-gold);
	border-radius: 4px;
	background: var(--dh-tint);
}
.nl-wa p { margin: 0 0 .6rem; }
.nl-wa p:last-child { margin-bottom: 0; }
.nl-wa__titre {
	font-weight: 600;
	color: var(--dh-blue-ink);
	font-size: 1.05rem;
}

/* ===========================================================================
   FAIRE UN DON — montants en shekels, frequence, moyens de paiement
   =========================================================================== */
.don__bloc { border: 0; margin: 0 0 1.6rem; padding: 0; }
.don__bloc .dh-label { display: block; margin-bottom: .6rem; }

.don__montants { display: flex; flex-wrap: wrap; gap: .6rem; }
.don__m,
.don__f {
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: .7rem 1.15rem;
	min-height: 48px;
	border: 1px solid rgba(16, 21, 31, .22);
	border-radius: 3px;
	background: #fff;
	color: var(--dh-blue-ink);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.don__m:hover, .don__f:hover { border-color: var(--dh-blue); }
.don__m.is-on, .don__f.is-on {
	background: var(--dh-blue-ink);
	border-color: var(--dh-blue-ink);
	color: #fff;
}
.don__m:focus-visible, .don__f:focus-visible,
.don__onglet:focus-visible, .don__copier:focus-visible {
	outline: 2px solid var(--dh-gold); outline-offset: 2px;
}

.don__autre { margin-top: 1rem; }
.don__autre label {
	display: block;
	margin-bottom: .35rem;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
}
.don__champ { display: flex; align-items: center; gap: .5rem; max-width: 14rem; }
.don__champ input {
	flex: 1; min-width: 0;
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: .65rem .8rem;
	min-height: 48px;
	border: 1px solid rgba(16, 21, 31, .22);
	border-radius: 3px;
	background: #fff;
}
.don__champ span { font-size: 1.1rem; color: var(--dh-grey); }

.don__freq { display: flex; flex-wrap: wrap; gap: .6rem; }
.don__aide {
	margin: .8rem 0 0;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--dh-grey);
}

.don__recap {
	margin: 0 0 1.1rem;
	padding: .8rem 1.1rem;
	border-inline-start: 3px solid var(--dh-gold);
	background: #fff;
	border-radius: 3px;
	font-size: 1.05rem;
}
.don__recap b { color: var(--dh-blue-ink); }

.don__moyens {
	margin-top: 2.2rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--dh-rule);
}
.don__moyens-titre { margin: 0 0 1rem; font-size: 1.2rem; color: var(--dh-blue-ink); }
.don__onglets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.don__onglet {
	font: inherit;
	font-size: .92rem;
	padding: .6rem 1rem;
	min-height: 44px;
	border: 1px solid rgba(16, 21, 31, .18);
	border-radius: 3px;
	background: transparent;
	color: var(--dh-grey);
	cursor: pointer;
}
.don__onglet.is-on {
	background: #fff;
	border-color: var(--dh-gold);
	color: var(--dh-blue-ink);
	font-weight: 600;
}
.don__panneau p { margin: 0 0 .8rem; }
.don__gris { color: var(--dh-grey); font-size: .94rem; }

.don__coord { margin: 1.1rem 0; }
.don__coord > div {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: .4rem 1rem;
	padding: .55rem 0;
	border-top: 1px solid var(--dh-rule);
}
.don__coord > div:last-child { border-bottom: 1px solid var(--dh-rule); }
.don__coord dt {
	margin: 0;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dh-gold-ink);
	align-self: center;
}
.don__coord dd { margin: 0; line-height: 1.5; font-variant-numeric: tabular-nums; }
.don__copier {
	font: inherit;
	font-size: .78rem;
	margin-inline-start: .5rem;
	padding: .2rem .6rem;
	border: 1px solid rgba(16, 21, 31, .22);
	border-radius: 3px;
	background: #fff;
	color: var(--dh-blue);
	cursor: pointer;
}

@media (max-width: 560px) {
	.don__montants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.don__m { padding-inline: .5rem; text-align: center; }
	.don__freq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.don__onglets { display: grid; grid-template-columns: minmax(0, 1fr); }
	.don__coord > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
	.don__champ { max-width: none; }
}

/* ---------------------------------------------------------------------------
   « Faire un don » en tete de page : le formulaire a gauche, la photo de la
   choul a droite. La photo passe sous le formulaire en dessous de 980 px.
   --------------------------------------------------------------------------- */
.don__haut {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: 2rem 2.5rem;
	align-items: start;
}
.don__haut .don { order: -1; }          /* le formulaire d'abord, meme a l'ecran */
.don__photo { margin: 0; }
.don__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	height: auto;
	border-radius: 4px;
	border: 1px solid rgba(16, 21, 31, .12);
	box-shadow: 0 2px 18px rgba(0, 24, 60, .10);
}
.don__photo figcaption {
	margin-top: .6rem;
	font-size: .88rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--dh-grey);
}

@media (max-width: 980px) {
	.don__haut { grid-template-columns: minmax(0, 1fr); }
	.don__photo { max-width: 300px; }
}



/* ---------------------------------------------------------------------------
   PARTICIPEZ — haut de page : deux colonnes egales, puis la photo en dessous
   sur toute la largeur. Les colonnes font la meme largeur pour que l'oeil
   les lise comme une paire, et non comme un texte avec un encart.
   --------------------------------------------------------------------------- */
.pa-haut {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 3.5rem;
	align-items: start;
}
.pa-tete h1 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 3.6vw, 2.7rem);
	line-height: 1.08;
}
.pa-tete > p { margin: 0 0 1rem; }
.pa-tete .pa-quote { margin-bottom: 0; }

.pa-don-col__titre { margin: 0 0 .3rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.pa-don-col__sous  { margin: 0 0 1.6rem; color: var(--dh-grey); }

.pa-haut .don__haut,
.pa-haut .pa-don-col .don { display: block; }

/* la photo, sous les deux colonnes : un bandeau large et bas, pas un pave */
.pa-photo { margin: 2.6rem 0 0; }
.pa-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;      /* on garde le bandeau bas meme si l'image change */
	object-fit: cover;
	object-position: center;
	height: auto;
	border-radius: 4px;
	border: 1px solid rgba(16, 21, 31, .12);
	box-shadow: 0 2px 18px rgba(0, 24, 60, .10);
}
.pa-photo figcaption {
	margin-top: .7rem;
	font-size: .9rem;
	font-style: italic;
	color: var(--dh-grey);
	text-align: center;
}

@media (max-width: 980px) {
	.pa-haut { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
	.pa-photo { margin-top: 2rem; }
}

/* ===========================================================================
   ANIMATIONS À L'APPARITION
   Reprises du site d'origine. Le moteur est dans site.js : il decoupe les
   titres en mots, pose .dh-draw / .dh-stagger / .dh-fade, ajoute .dh-anim sur
   <html>, puis .is-in quand l'element entre dans l'ecran.
   Sans JavaScript, aucune de ces regles ne s'applique (.dh-anim absent) et la
   page reste entierement lisible — c'est volontaire.
   =========================================================================== */
:root {
	--dh-ease: cubic-bezier(.22, .61, .36, 1);
	--dh-arch-d: .9s;        /* ouverture du bloc d'image */
	--dh-logo-delay: .55s;
	--dh-logo-d: 1.5s;
	--dh-title-line: .35;    /* decalage d'une ligne de titre a la suivante */
	--dh-title-sweep: .7;    /* vitesse du balayage horizontal des mots */
	--dh-cascade: .07s;      /* pas entre deux elements d'une liste */
	--dh-fade-d: .95s;
}

/* --- 1. Les titres se devoilent mot a mot, de gauche a droite ------------ */
.dh-anim .dh-split .dh-w {
	display: inline-block;
	clip-path: inset(-.3em 100% -.3em 0);
	transition: clip-path var(--t, .3s) linear;
	transition-delay: var(--d, 0s);
}
.dh-anim .dh-split.is-in .dh-w { clip-path: inset(-.3em -.1em -.3em 0); }

/* --- 2. Les filets se tracent ------------------------------------------- */
.dh-anim .dh-draw { position: relative; border-top-color: transparent !important; }
.dh-anim .dh-draw::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: -1px;
	height: 1px;
	background: currentColor;
	opacity: .22;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.1s var(--dh-ease);
}
.dh-anim .dh-draw.is-in::before { transform: none; }
.dh-anim .rv-sec--blue .dh-draw::before,
.dh-anim .dh-sec--blue .dh-draw::before { background: rgba(255, 255, 255, .55); opacity: 1; }

/* --- 3. Les listes arrivent en cascade ---------------------------------- */
.dh-anim .dh-stagger > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .7s ease, transform .8s var(--dh-ease);
	transition-delay: calc(var(--i, 0) * var(--dh-cascade) + 120ms);
}
.dh-anim .dh-stagger.is-in > * { opacity: 1; transform: none; }

/* --- 4. Les blocs montent en fondu -------------------------------------- */
.dh-anim .dh-fade {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dh-fade-d) ease,
	            transform calc(var(--dh-fade-d) * 1.1) var(--dh-ease);
	transition-delay: .2s;
}
.dh-anim .dh-fade.is-in { opacity: 1; transform: none; }

/* --- Rien de tout cela pour qui demande moins de mouvement -------------- */
@media (prefers-reduced-motion: reduce) {
	.dh-anim .dh-split .dh-w,
	.dh-anim .dh-draw::before,
	.dh-anim .dh-stagger > *,
	.dh-anim .dh-fade {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
		clip-path: none !important;
	}
}

/* ---------------------------------------------------------------------------
   OFFICES & ZMANIM — plus d'air entre les filets
   Les trois colonnes n'ont pas le meme nombre de lignes (3, 6 et 9) : on les
   espace davantage et on elargit la gouttiere pour qu'elles se lisent comme
   trois tableaux distincts et non comme une grille serree.
   --------------------------------------------------------------------------- */
.dh-horaires .dh-colhead {
	padding-bottom: 0.8rem;
	margin-bottom: 0.5rem;
}
.dh-horaires .dh-rows > div:last-child { border-bottom: 0; }

@media (min-width: 760px) {
	.rv-tables,
	.dh-horaires { gap: 0 3.25rem; }     /* 2rem auparavant */
}

@media (max-width: 759px) {
	/* empilees : il faut au contraire separer nettement les trois tableaux */
	.rv-tables,
	.dh-horaires { gap: 2.4rem; }
	.dh-horaires > section + section { padding-top: .4rem; }
}

/* ---------------------------------------------------------------------------
   « (prochainement) » dans un titre de section : plus petit, sans la graisse
   du titre, pour se lire comme une precision et non comme une partie du nom.
   --------------------------------------------------------------------------- */
.rv-bientot {
	font-size: .5em;
	font-weight: 400;
	font-style: italic;
	letter-spacing: .01em;
	color: var(--dh-gold-ink);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   « Dirigé et sous l'autorité de Rav Itshak Cohen », sous Ramat Poleg.
   En italique et discret : c'est une mention d'autorité rabbinique, elle ne
   doit pas concurrencer le nom de la choul. Masquee sur telephone, ou elle
   tiendrait sur deux lignes et ferait exploser la hauteur de l'en-tete —
   elle reste lisible partout ailleurs.
   --------------------------------------------------------------------------- */
.rv-head__rav {
	display: block;
	margin-top: .3rem;
	font-size: .9rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.3;
	color: var(--dh-blue-ink);
	text-align: center;
}
@media (min-width: 1040px) {
	.rv-head__rav { font-size: .975rem; }
}
/* Sur telephone, la mention passe sur deux lignes : on la resserre pour
   qu'elle coute le moins de hauteur possible au-dessus des horaires. */
@media (max-width: 560px) {
	.rv-head__rav {
		grid-column: 1;
		grid-row: 3;
		margin-top: .18rem;
		font-size: .79rem;
		line-height: 1.25;
		max-width: 20ch;      /* coupe apres « l'autorite de », pas n'importe ou */
		text-align: start;
	}
}

/* --- Le feuillet de la semaine, sous les horaires du message ----------
   Meme traitement que la vignette de la une : pas d'encadre, la
   couverture et son texte, et le lien qui clignote au rythme lent de
   rv-pulse (WCAG 2.3.1). */
.dh-msg__feuillet {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dh-sand);
	text-decoration: none;
	color: inherit;
}
.dh-msg__feuillet img {
	flex: none;
	width: 104px;
	height: auto;
	border: 1px solid rgba(16, 21, 31, .14);
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 24, 60, .15);
	transition: transform .2s ease, box-shadow .2s ease;
}
.dh-msg__feuillet:hover img,
.dh-msg__feuillet:focus-visible img {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 24, 60, .2);
}
.dh-msg__feuillet > span { display: grid; gap: .125rem; min-width: 0; }
.dh-msg__feuillet b {
	font-family: var(--dh-serif, inherit);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--dh-blue-ink);
}
.dh-msg__feuillet em {
	font-size: .875rem;
	font-style: normal;
	line-height: 1.4;
	color: var(--dh-grey);
}
.dh-msg__feuillet i {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin-top: .4375rem;
	font-size: .9375rem;
	font-style: normal;
	font-weight: 600;
	color: var(--dh-blue);
	animation: rv-pulse 1.4s ease-in-out infinite;
}
.dh-msg__feuillet:hover i,
.dh-msg__feuillet:focus-visible i { animation: none; opacity: 1; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .dh-msg__feuillet i { animation: none; } }
@media (min-width: 700px) { .dh-msg__feuillet img { width: 124px; } }

/* ---------------------------------------------------------------------------
   ONGLET « COURS DU RAV » QUI CLIGNOTE
   Une pastille doree pulse a cote du libelle, et le libelle respire avec elle.
   Rythme volontairement lent — environ 0,7 clignotement par seconde — :
   au-dela de 3 par seconde, un clignotement peut declencher une crise chez
   une personne photosensible (critere WCAG 2.3.1). Et rien ne bouge pour qui
   a demande moins d'animation dans les reglages de son appareil.
   --------------------------------------------------------------------------- */
@keyframes rv-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}
.rv-pastille {
	display: inline-block;
	width: .45em; height: .45em;
	margin-inline-end: .45em;
	border-radius: 50%;
	background: var(--dh-gold);
	vertical-align: .08em;
	animation: rv-pulse 1.4s ease-in-out infinite;
}
.menu-item--clignote > a {
	color: var(--dh-gold-ink);
	animation: rv-pulse 1.4s ease-in-out infinite;
}
.menu-item--clignote.current-menu-item > a,
.menu-item--clignote > a:hover,
.menu-item--clignote > a:focus-visible {
	animation: none;          /* une fois sur la page, le clignotement n'a plus d'objet */
	opacity: 1;
}
.menu-item--clignote.current-menu-item .rv-pastille { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.rv-pastille,
	.menu-item--clignote > a { animation: none; }
}

/* ---------------------------------------------------------------------------
   LECTURE DIFFEREE DE LA VIDEO
   --------------------------------------------------------------------------- */
.rv-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(16, 21, 31, .12);
	background: var(--dh-blue-ink);
}
.rv-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.rv-video__lancer {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: .6rem;
	width: 100%;
	border: 0;
	background: radial-gradient(ellipse at center, var(--dh-blue) 0%, var(--dh-blue-ink) 75%);
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.rv-video__play {
	display: grid; place-items: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	border: 2px solid var(--dh-gold);
	color: var(--dh-gold);
	font-size: 1.6rem;
	padding-inline-start: .18em;        /* le triangle est optiquement decentre */
	transition: transform .2s ease, background .2s ease;
}
.rv-video__lancer:hover .rv-video__play { transform: scale(1.06); background: rgba(201, 163, 106, .14); }
.rv-video__txt { font-size: 1.2rem; letter-spacing: .01em; }
.rv-video__note { font-size: .82rem; opacity: .72; }


/* ===========================================================================
   UN MOT AU RAV
   Un onglet rouge, seule couleur chaude d'un site bleu : c'est le lien
   direct avec le Rav, il doit se voir du premier coup d'oeil. Le rouge est
   assez fonce pour rester lisible sur le papier (5,9:1).
   =========================================================================== */
:root { --dh-rouge: #B4232A; --dh-rouge-clair: #D8434A; }

/* L'onglet clignote au rythme lent de rv-pulse — une fois toutes les
   1,4 s, soit 0,7 par seconde. Au-dela de 3 par seconde un clignotement
   peut declencher une crise chez une personne photosensible (WCAG 2.3.1).
   Sur la page elle-meme, et pour qui a demande moins d'animation, il
   s'arrete : il n'a plus rien a signaler. */
.menu-item--rouge > a {
	color: var(--dh-rouge);
	font-weight: 600;
	animation: rv-pulse 1.4s ease-in-out infinite;
}
.menu-item--rouge > a:hover,
.menu-item--rouge > a:focus-visible,
.menu-item--rouge.current-menu-item > a { animation: none; opacity: 1; }
.menu-item--rouge > a:hover,
.menu-item--rouge > a:focus-visible { color: var(--dh-rouge-clair); }
.menu-item--rouge.current-menu-item > a { border-bottom-color: var(--dh-rouge); }
.rv-point {
	display: inline-block;
	width: .42em; height: .42em;
	margin-inline-end: .42em;
	border-radius: 50%;
	background: var(--dh-rouge);
	vertical-align: .08em;
	animation: rv-pulse 1.4s ease-in-out infinite;
}
/* une pastille de chaque cote du libelle : celle de droite pousse a
   gauche, pas a droite. */
.rv-point:last-child { margin-inline-end: 0; margin-inline-start: .42em; }
.menu-item--rouge.current-menu-item .rv-point { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.menu-item--rouge > a, .rv-point { animation: none; }
}

.dh-btn--rouge {
	background: var(--dh-rouge);
	border-color: var(--dh-rouge);
	color: #fff;
}
.dh-btn--rouge:hover,
.dh-btn--rouge:focus-visible { background: var(--dh-rouge-clair); border-color: var(--dh-rouge-clair); }

/* --- l'ouverture : le portrait et le mot d'accueil ---------------------- */
.mr-hero { padding-top: 2rem; }
.mr-hero__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.mr-portrait { margin: 0; }
.mr-portrait img {
	display: block;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--dh-sand);
}
.mr-portrait figcaption {
	margin-top: .6rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--dh-blue-ink);
}
.mr-portrait figcaption span {
	display: block;
	font-weight: 400;
	font-style: italic;
	color: var(--dh-grey);
}
.mr-hero__txt h1 { margin: 0 0 .75rem; font-size: clamp(2rem, 4.4vw, 3rem); }
.mr-chapo {
	margin: 0 0 1rem;
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--dh-blue);
}
.mr-intro { margin: 0 0 1.25rem; max-width: 56ch; color: var(--dh-grey); }

/* --- ce qu'on peut demander -------------------------------------------- */
.mr-cas { display: grid; gap: 1rem; }
.mr-cas > div {
	padding: 1rem 1.125rem;
	border: 1px solid var(--dh-sand);
	border-inline-start: 3px solid var(--dh-rouge);
	border-radius: 4px;
	background: #fff;
}
.mr-cas b { display: block; margin-bottom: .3rem; color: var(--dh-blue-ink); }
.mr-cas p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--dh-grey); }

/* --- le formulaire et la colonne de droite ------------------------------ */
.mr-form__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.mr-form__note { margin: .875rem 0 0; font-size: .9375rem; line-height: 1.5; }
.mr-form__note.est-ok { color: var(--dh-blue); }
.mr-form__note.est-erreur { color: var(--dh-rouge); }
.mr-form [aria-invalid] { border-color: var(--dh-rouge); }
.mr-aside {
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--dh-sand);
	border-radius: 6px;
	background: var(--dh-tint);
}
.mr-aside p { font-size: .9375rem; line-height: 1.55; color: var(--dh-grey); }
.mr-aside__lieu { font-style: italic; }
.mr-aside__discret {
	margin-bottom: 0;
	padding-top: .875rem;
	border-top: 1px solid var(--dh-sand);
	font-size: .8125rem;
}

@media (min-width: 760px) {
	.mr-hero__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
	.mr-cas { grid-template-columns: repeat(3, 1fr); }
	.mr-form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
@media (min-width: 560px) and (max-width: 759px) {
	.mr-cas { grid-template-columns: 1fr 1fr; }
}


/* ===========================================================================
   RACCOURCI SUR L'ÉCRAN D'ACCUEIL
   Un bloc discret, l'icône à gauche et les trois gestes à droite. Il ne
   s'affiche que pour qui peut s'en servir (voir le script dans index.html).
   =========================================================================== */
.rc {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: start;
	padding: clamp(1.125rem, 2.4vw, 1.75rem);
	border: 1px solid var(--dh-sand);
	border-radius: 8px;
	background: var(--dh-tint);
}
.rc__icone {
	width: 84px;
	height: 84px;
	border-radius: 18px;
	border: 1px solid rgba(16, 21, 31, .12);
	box-shadow: 0 4px 14px rgba(0, 24, 60, .14);
}
.rc__txt h2 { margin: .2rem 0 .5rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.rc__chapo { margin: 0 0 1rem; max-width: 56ch; color: var(--dh-grey); }
.rc__pas {
	margin: 0 0 1rem;
	padding-inline-start: 1.3rem;
	max-width: 54ch;
	font-size: .9375rem;
	line-height: 1.75;
}
.rc__pas li { margin-bottom: .2rem; }
.rc__pas b { color: var(--dh-blue-ink); }
.rc__pas--bureau { padding-inline-start: 0; list-style: none; font-style: italic; color: var(--dh-grey); }
.rc__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em; height: 1.5em;
	margin-inline-start: .15em;
	border: 1px solid var(--dh-sand);
	border-radius: 4px;
	background: #fff;
	color: var(--dh-blue);
	vertical-align: -.4em;
	line-height: 1;
}
@media (min-width: 620px) {
	.rc { grid-template-columns: 84px minmax(0, 1fr); }
}


/* ===========================================================================
   PARTICIPEZ — présentation de la communauté
   Le texte fourni par la communauté, découpé en cases : le chapeau, les
   six choses qu'on peut y faire, l'appel et le projet côte à côte, puis
   la clôture.
   =========================================================================== */
.co-tete { text-align: center; }
.co-tete h2 { margin: .3rem 0 .6rem; line-height: 1.18; }
.co-devise {
	margin: 0;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	font-style: italic;
	color: var(--dh-blue);
}

.co-intro {
	max-width: 62ch;
	margin: 1.75rem auto 0;
	text-align: center;
}
.co-intro p { margin: 0 0 .75rem; color: var(--dh-grey); }
.co-intro__fort {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--dh-blue-ink) !important;
}

.co-sst {
	margin: 2.25rem 0 1rem;
	text-align: center;
	font-size: 1.1875rem;
	color: var(--dh-blue-ink);
}
.co-cases {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.co-cases li {
	padding: 1.0625rem 1.125rem;
	border: 1px solid var(--dh-sand);
	border-top: 3px solid var(--dh-gold);
	border-radius: 4px;
	background: #fff;
}
.co-cases b { display: block; margin-bottom: .3rem; color: var(--dh-blue-ink); }
.co-cases p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--dh-grey); }

.co-duo { display: grid; gap: 1rem; margin: 2.25rem 0 0; }
.co-bloc {
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--dh-sand);
	border-radius: 6px;
	background: var(--dh-tint);
}
.co-bloc h3 { margin: 0 0 .5rem; font-size: 1.125rem; line-height: 1.3; }
.co-bloc p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--dh-grey); }
.co-bloc--projet { background: var(--dh-blue-ink); border-color: var(--dh-blue-ink); }
.co-bloc--projet .dh-label,
.co-bloc--projet h3 { color: #fff; }
.co-bloc--projet p { color: rgba(255, 255, 255, .84); }

.co-don {
	margin: 2.25rem auto 0;
	max-width: 62ch;
	padding: 1.5rem;
	border: 1px solid var(--dh-sand);
	border-radius: 6px;
	background: #fff;
	text-align: center;
}
.co-don h3 { margin: 0 0 .6rem; font-size: 1.3125rem; }
.co-don p { margin: 0 0 .75rem; color: var(--dh-grey); }

.co-fin { margin: 2.25rem 0 0; text-align: center; }
.co-fin blockquote { margin: 0; }
.co-fin blockquote p {
	margin: 0 0 .4rem;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	line-height: 1.4;
	color: var(--dh-blue);
}
.co-fin figcaption {
	margin-top: 1rem;
	padding-top: .875rem;
	border-top: 1px solid var(--dh-sand);
	display: inline-block;
	font-size: .9375rem;
	color: var(--dh-blue-ink);
}
.co-fin figcaption span {
	display: block;
	font-weight: 400;
	font-style: italic;
	color: var(--dh-grey);
}

@media (min-width: 620px) { .co-cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) {
	.co-cases { grid-template-columns: repeat(3, 1fr); }
	.co-duo { grid-template-columns: 1fr 1fr; }
}


/* ===========================================================================
   COMMUNAUTÉ FRANCOPHONE
   La page de présentation : le texte de la communauté, mis en pages.
   =========================================================================== */
.fr-hero { text-align: center; padding-top: 2rem; }
.fr-hero h1 { margin: .35rem 0 .7rem; line-height: 1.16; }
.fr-devise {
	margin: 0 0 1.75rem;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
	font-style: italic;
	color: var(--dh-blue);
}
.fr-photo { margin: 0; }
.fr-photo img {
	display: block;
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
	border-radius: 8px;
	border: 1px solid var(--dh-sand);
}
.fr-photo figcaption {
	margin: .7rem auto 0;
	max-width: 840px;
	font-size: .875rem;
	font-style: italic;
	color: var(--dh-grey);
}

.fr-intro { max-width: 62ch; margin: 0 auto; text-align: center; }
.fr-intro p { margin: 0 0 .8rem; color: var(--dh-grey); }
.fr-intro__fort {
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--dh-blue-ink) !important;
}

.fr-cases { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.fr-cases li {
	padding: 1.0625rem 1.125rem;
	border: 1px solid var(--dh-sand);
	border-top: 3px solid var(--dh-gold);
	border-radius: 4px;
	background: #fff;
}
.fr-cases b { display: block; margin-bottom: .3rem; color: var(--dh-blue-ink); }
.fr-cases p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--dh-grey); }

.fr-duo { display: grid; gap: 1rem; }
.fr-bloc {
	padding: 1.375rem 1.5rem;
	border: 1px solid var(--dh-sand);
	border-radius: 6px;
	background: #fff;
}
.fr-bloc h2 { margin: 0 0 .55rem; font-size: 1.1875rem; line-height: 1.3; }
.fr-bloc p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--dh-grey); }
.fr-bloc--projet { background: var(--dh-blue-ink); border-color: var(--dh-blue-ink); }
.fr-bloc--projet .dh-label, .fr-bloc--projet h2 { color: #fff; }
.fr-bloc--projet p { color: rgba(255, 255, 255, .84); }

.fr-don {
	max-width: 62ch;
	margin: 0 auto;
	padding: 1.625rem;
	border: 1px solid var(--dh-sand);
	border-radius: 6px;
	background: var(--dh-tint);
	text-align: center;
}
.fr-don h2 { margin: 0 0 .6rem; font-size: 1.375rem; }
.fr-don p { margin: 0 0 .8rem; color: var(--dh-grey); }

.fr-fin { margin: 2.5rem 0 0; text-align: center; }
.fr-fin blockquote { margin: 0; }
.fr-fin blockquote p {
	margin: 0 0 .4rem;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.125rem, 2.3vw, 1.4375rem);
	line-height: 1.4;
	color: var(--dh-blue);
}
.fr-fin figcaption {
	display: inline-block;
	margin-top: 1rem;
	padding-top: .875rem;
	border-top: 1px solid var(--dh-sand);
	font-size: .9375rem;
	color: var(--dh-blue-ink);
}
.fr-fin figcaption span {
	display: block;
	font-weight: 400;
	font-style: italic;
	color: var(--dh-grey);
}

@media (min-width: 620px) { .fr-cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) {
	.fr-cases { grid-template-columns: repeat(3, 1fr); }
	.fr-duo { grid-template-columns: 1fr 1fr; }
}


/* --- « Un mot au Rav » hors du menu, au-dessus du bouton de don --------
   Sept onglets tenaient sur une ligne, huit non. Le lien rouge sort donc
   du menu et se place au-dessus de « Faire un don », a droite de
   l'en-tete sur grand ecran, au pied du tiroir sur telephone. */
.rv-head__motrav,
.dh-drawer__motrav {
	display: inline-flex;
	align-items: center;
	gap: .1rem;
	font-family: var(--rv-label);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dh-rouge);
	animation: rv-pulse 1.4s ease-in-out infinite;
}
/* Le lien rouge et le bouton de don sont empiles dans une meme colonne :
   sans ce conteneur, la barre d'en-tete les posait cote a cote et le
   libelle rouge se cassait en deux lignes. */
.rv-head__motrav {
	/* sous la mention « Dirige et sous l'autorite de Rav Itshak Cohen ».
	   Il est pose APRES le bloc du logo, qui est lui-meme un lien : un
	   lien ne peut pas en contenir un autre. */
	display: inline-flex;
	justify-content: center;
	margin: .4rem auto .1rem;
	white-space: nowrap;
}

.rv-head__motrav:hover, .rv-head__motrav:focus-visible,
.dh-drawer__motrav:hover, .dh-drawer__motrav:focus-visible,
.rv-head__motrav.est-ici, .dh-drawer__motrav.est-ici {
	animation: none; opacity: 1; color: var(--dh-rouge-clair);
}
.rv-head__motrav.est-ici, .dh-drawer__motrav.est-ici { color: var(--dh-rouge); }
.rv-head__motrav .rv-point, .dh-drawer__motrav .rv-point { animation: inherit; }
@media (prefers-reduced-motion: reduce) {
	.rv-head__motrav, .dh-drawer__motrav { animation: none; }
}


/* Le lien rouge n'apparaît qu'une fois : dans le menu sur téléphone, où le
   tiroir tient lieu de navigation ; sous la mention du Rav à partir de
   700 px, où le tiroir disparaît. */
@media (max-width: 699px) {
	.rv-head__motrav { display: none !important; }
}
/* Plus de decalage : depuis que le bandeau-titre est le logo « Ramat Poleg »
   centre (09/11/2026), la mention du Rav est elle-meme au milieu de la page.
   L'ancien translateX compensait la demi-largeur d'un blason pose a GAUCHE
   d'une colonne de texte — il n'y a plus de colonne. */
@media (min-width: 700px) {
	.dh-drawer__list .menu-item--rouge { display: none; }
}


/* ===========================================================================
   NOTRE KEHILA
   La page de presentation de la communaute. Elle a pris la place de l'onglet
   « Newsletter » dans le menu. Deux pieces lui sont propres : le lecteur
   video heberge par le site, et la phrase du Rav mise en exergue.
   Le reste reprend les memes formes que la page Francophones (.fr-*) :
   classes distinctes pour que l'une puisse bouger sans l'autre.
   =========================================================================== */
.nk-hero { text-align: center; padding-top: 2rem; }
.nk-hero h1 { margin: .35rem 0 .7rem; line-height: 1.16; }
.nk-devise {
	margin: 0 auto;
	max-width: 54ch;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
	font-style: italic;
	color: var(--dh-blue);
}

/* --- le film ----------------------------------------------------------
   Le rapport est celui du fichier (848 x 480). On le declare en
   aspect-ratio plutot qu'en hauteur fixe : sur telephone la largeur
   commande, et une hauteur figee laisserait des bandes noires. */
.nk-film { margin: 0; }
.nk-film__lecteur {
	display: block;
	width: 100%;
	max-width: 848px;
	height: auto;
	aspect-ratio: 848 / 480;
	margin: 0 auto;
	border-radius: 8px;
	border: 1px solid var(--dh-sand);
	background: var(--dh-blue-ink);   /* avant que l'affiche ne soit peinte */
	object-fit: cover;
}
.nk-film figcaption {
	margin: .7rem auto 0;
	max-width: 848px;
	font-size: .875rem;
	font-style: italic;
	color: var(--dh-grey);
	text-align: center;
}

/* --- le manifeste -----------------------------------------------------
   Colonne etroite et centree : c'est le coeur de la page, il se lit
   comme un edito, pas comme un paragraphe de site. */
.nk-manifeste { max-width: 62ch; margin: 0 auto; text-align: center; }
.nk-manifeste > p { margin: 0 0 .9rem; color: var(--dh-grey); }

/* La phrase du Rav. Elle est posee entre deux filets, en serif et en
   bleu : c'est la seule phrase de la page qui doit arreter l'oeil. */
.nk-phrase {
	margin: 1.9rem auto 0 !important;
	padding: 1.5rem 0 1.4rem;
	border-top: 1px solid var(--dh-sand);
	border-bottom: 1px solid var(--dh-sand);
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.1875rem, 2.9vw, 1.5rem);
	font-style: italic;
	line-height: 1.42;
	color: var(--dh-blue) !important;
	text-wrap: balance;
}

/* --- la semaine -------------------------------------------------------- */
.nk-cases { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.nk-cases li {
	padding: 1.0625rem 1.125rem;
	border: 1px solid var(--dh-sand);
	border-top: 3px solid var(--dh-gold);
	border-radius: 4px;
	background: #fff;
}
.nk-cases b { display: block; margin-bottom: .3rem; color: var(--dh-blue-ink); }
.nk-cases p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--dh-grey); }

.nk-renvoi {
	margin: 1.4rem 0 0;
	text-align: center;
	font-size: .9375rem;
	color: var(--dh-grey);
}
.nk-renvoi span { margin: 0 .45rem; color: var(--dh-sand); }

/* --- le Rav ------------------------------------------------------------
   Photo a gauche, texte a droite ; empiles sous 760 px. La photo est
   carree (900 x 900) : on la laisse carree, arrondie, sans recadrage. */
.nk-rav { display: grid; gap: 1.5rem; align-items: center; }
.nk-rav__photo { margin: 0; }
.nk-rav__photo img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
	border: 1px solid var(--dh-sand);
}
.nk-rav__texte h2 { margin: 0 0 .7rem; font-size: clamp(1.5rem, 4.6vw, 2rem); line-height: 1.14; }
.nk-rav__texte p { margin: 0 0 .85rem; color: var(--dh-grey); }
.nk-rav__texte p:last-child { margin: 1.2rem 0 0; }

/* --- l'appel et la chute ----------------------------------------------- */
.nk-don {
	max-width: 62ch;
	margin: 0 auto;
	padding: 1.625rem;
	border: 1px solid var(--dh-sand);
	border-radius: 6px;
	background: #fff;
	text-align: center;
}
.nk-don h2 { margin: 0 0 .6rem; font-size: 1.375rem; }
.nk-don p { margin: 0 0 .8rem; color: var(--dh-grey); }
.nk-don p:last-child { margin: 0; }

.nk-fin { margin: 2.5rem 0 0; text-align: center; }
.nk-fin blockquote { margin: 0; }
.nk-fin blockquote p {
	margin: 0 0 .4rem;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.125rem, 2.3vw, 1.4375rem);
	line-height: 1.4;
	color: var(--dh-blue);
}
.nk-fin figcaption {
	display: inline-block;
	margin-top: 1rem;
	padding-top: .875rem;
	border-top: 1px solid var(--dh-sand);
	font-size: .9375rem;
	color: var(--dh-blue-ink);
}
.nk-fin figcaption span {
	display: block;
	font-weight: 400;
	font-style: italic;
	color: var(--dh-grey);
}

@media (min-width: 620px) { .nk-cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) {
	.nk-rav { grid-template-columns: 300px 1fr; gap: 2.25rem; }
	.nk-rav__photo img { max-width: 300px; }
}
/* Quatre rubriques : on reste a DEUX colonnes meme en grand. A trois,
   la quatrieme carte restait seule sur sa ligne avec deux trous a cote. */


/* ===========================================================================
   BOUTON DE MENU FLOTTANT (telephone et tablette)
   Sur telephone, l'en-tete — donc le menu — part avec le defilement. Sur une
   page longue, changer de rubrique demandait de remonter tout en haut.
   Ce bouton reste au bord de l'ecran des que l'en-tete est sorti, et ouvre
   le MEME tiroir que le burger.
   Il est a GAUCHE : « revenir en haut » occupe deja le coin droit, et deux
   pastilles superposees du meme cote se touchent au pouce.
   Au-dessus de 1000 px, la barre de rubriques est visible en permanence :
   le bouton n'a plus d'objet et disparait.
   =========================================================================== */
.dh-menuflo {
	position: fixed;
	inset-inline-start: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 91;              /* au-dessus de .dh-totop (90), sous le tiroir */
	display: grid;
	place-items: center;
	gap: 1px;
	width: 56px; height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dh-blue);
	color: #fff;
	box-shadow: 0 2px 10px rgba(16, 21, 31, .28);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
}
.dh-menuflo svg { width: 21px; height: 21px; }
.dh-menuflo__txt {
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: .5rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
}
.dh-menuflo.is-on { opacity: 1; visibility: visible; transform: none; }
.dh-menuflo:hover,
.dh-menuflo:focus-visible { background: var(--dh-blue-ink); }

/* PAS de masquage pendant que le tiroir est ouvert. Le tiroir est en
   z-index 120, inset 0, sur fond opaque : il recouvre deja ce bouton (91).
   Le masquer en plus cassait le retour du focus — a la fermeture, le bouton
   etait encore au milieu de sa transition de visibilite et .focus() echouait
   sans bruit, renvoyant le lecteur en haut de la page. */

@media (min-width: 1000px) {
	.dh-menuflo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.dh-menuflo { transition: none; }
}


/* ===========================================================================
   CHOIX DE LA LANGUE — trois drapeaux
   Dans la barre de rubriques au-dessus de 700 px, dans le tiroir en dessous :
   jamais les deux a l'ecran en meme temps.
   =========================================================================== */
.dh-langues { display: inline-flex; align-items: center; gap: .25rem; }
.dh-langue {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	min-height: 32px;
	padding: .25rem .4rem;
	border: 1px solid transparent;
	border-radius: 3px;
	text-decoration: none;
	color: var(--dh-grey);
	font-family: var(--rv-label);
	font-stretch: 100%;
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1;
}
.dh-langue__dr {
	width: 19px; height: 13px;
	display: block;
	border: 1px solid rgba(16, 21, 31, .22);
	border-radius: 1px;
	/* Un drapeau n'a pas de sens de lecture : il ne se retourne pas en RTL. */
	transform: none;
}
.dh-langue:hover { background: var(--dh-tint); color: var(--dh-blue-ink); }
.dh-langue.est-active {
	border-color: var(--dh-sand);
	background: #fff;
	color: var(--dh-blue-ink);
}
/* L'hebreu n'a pas de capitales : l'interlettrage des libelles latins le
   deforme. On le neutralise sur le seul libelle « עב ». */
.dh-langue[lang="he"] .dh-langue__code { letter-spacing: 0; font-size: .75rem; }

/* Dans la barre, les drapeaux SEULS : les trois libelles « FR / EN / עב »
   prenaient 85 px a la navigation, et le menu anglais passait a la ligne.
   Le nom complet de la langue reste accessible par title et par le texte
   pour lecteurs d'ecran. Le tiroir, lui, a la place : il les garde. */
.dh-langues--bar { margin-inline-end: .5rem; gap: .15rem; }
.dh-langues--bar .dh-langue { padding: .3rem .3rem; }
.dh-langues--bar .dh-langue__code { display: none; }
.dh-langues--bar .dh-langue.est-active { border-color: var(--dh-gold-ink); }
.dh-langues--tiroir {
	margin: 0 0 1rem;
	padding-top: 1rem;
	border-top: var(--rv-rule);
}
.dh-langues--tiroir .dh-langue { min-height: 44px; padding: .5rem .6rem; font-size: .6875rem; }
.dh-langues--tiroir .dh-langue__dr { width: 24px; height: 16px; }

@media (max-width: 699px) { .dh-langues--bar { display: none; } }
@media (min-width: 1000px) { .dh-langues--tiroir { display: none; } }


/* ===========================================================================
   HEBREU — droite a gauche
   La mise en page se retourne toute seule : les marges, retraits et filets
   du site sont ecrits en proprietes logiques (margin-inline-start,
   border-inline-start, inset-inline-start…), qui suivent la direction.
   Ne restent ici que les reglages que la logique ne couvre pas.
   =========================================================================== */

/* 1. La police. Spectral n'a pas de glyphes hebreux : sans ce jeu de
      caracteres, le navigateur retomberait sur une police systeme au hasard
      et le site changerait de voix en changeant de langue. Frank Ruhl Libre
      est un serif hebreu de meme famille d'esprit. Il n'est charge QUE
      lorsque la page passe en hebreu (voir assets/js/langue.js). */
:root[lang="he"] {
	--rv-serif: "Frank Ruhl Libre", "Spectral", Georgia, serif;
	--rv-label: "Frank Ruhl Libre", "Archivo", system-ui, sans-serif;
}
:root[lang="he"] body { font-family: "Frank Ruhl Libre", "Spectral", Georgia, serif; }

/* 2. L'hebreu n'a ni capitales ni italiques. text-transform ne fait rien,
      mais letter-spacing disloque le mot et l'italique synthetique penche
      des lettres qui ne sont pas faites pour pencher. */
:root[lang="he"] * { letter-spacing: normal !important; }
:root[lang="he"] .dh-label,
:root[lang="he"] .dh-nav__list a,
:root[lang="he"] .dh-btn,
:root[lang="he"] .rv-head__motrav,
:root[lang="he"] .dh-drawer__motrav { text-transform: none; }
:root[lang="he"] em,
:root[lang="he"] i,
:root[lang="he"] blockquote p,
:root[lang="he"] figcaption,
:root[lang="he"] .nk-devise,
:root[lang="he"] .nk-phrase,
:root[lang="he"] .fr-devise,
:root[lang="he"] .rv-head__rav { font-style: normal; }

/* 3. L'hebreu sans nikoud porte moins haut que le latin : a corps egal il
      parait plus petit, et ses lignes se serrent. */
:root[lang="he"] body { line-height: 1.72; }
:root[lang="he"] .dh-nav__list a { font-size: .8125rem; }
:root[lang="he"] .dh-langue__code { font-size: .75rem; }

/* 4. Ce qui ne doit PAS se retourner : les heures, les adresses, l'IBAN,
      le numero d'amouta. Un nombre lu de droite a gauche reste un nombre,
      mais « 16:26 → 17:23 » inverserait sa fleche et son ordre. */
[dir="rtl"] time,
[dir="rtl"] .dh-msg__row time,
[dir="rtl"] .dh-iban,
[dir="rtl"] .rv-dateline__ch,
[dir="rtl"] .dh-footer__amouta { direction: ltr; unicode-bidi: isolate; }

/* 5. Le libelle rouge etait decale a la main pour se centrer sur la colonne
      de texte, logo compris. En RTL le logo passe a droite : le decalage
      doit partir dans l'autre sens. */
/* (plus de decalage a inverser en RTL : le bandeau-titre est centre) */

/* 6. Les fleches des boutons (« Faire un don → ») pointent vers l'avant de
      la lecture : en RTL, c'est vers la gauche. */
[dir="rtl"] .dh-btn .dh-ico,
[dir="rtl"] .dh-msg__feuillet .dh-ico { transform: scaleX(-1); }

/* Les drapeaux sont poses au bout de la ligne de l'amouta, pas dans la barre
   de rubriques : la place qu'ils y prenaient faisait passer le menu francais
   a la ligne (sept onglets tiennent de justesse). Cette ligne-la, elle, est
   vide sur toute sa moitie droite. */
.rv-head__ligne { display: contents; }
@media (min-width: 700px) {
	.rv-head__ligne {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
	}
	.rv-head__ligne .rv-head__amouta { width: auto; margin-block: 0.55rem -0.5rem; }
	.rv-head__ligne .dh-langues--bar { margin-inline-end: 0; flex: none; }
}


/* ===========================================================================
   BANDEAU-TITRE « RAMAT POLEG » (09/11/2026)
   Le logo porte lui-meme le nom de la ville : il remplace donc le couple
   blason + titre ecrit, et la mention de la kehila passe dessous.
   L'image est servie en deux largeurs (480 et 840) pour ne pas envoyer
   142 ko a un telephone qui en affiche 300 px.
   =========================================================================== */
.rv-head__brand--logo {
	display: block;
	max-width: 100%;
	line-height: 0;              /* pas d'espace fantome sous l'image */
	text-decoration: none;
}
.rv-head__logo {
	display: block;
	/* Sous 700 px, le logo partage sa ligne avec le bouton Menu : sa largeur
	   doit se mesurer sur SA COLONNE de grille (100 %), pas sur la fenetre.
	   Avec min(100vw - 5rem, 300px), les 300 px du logo plus les 95 px du
	   bouton depassaient les 358 px disponibles et la page defilait de cote. */
	width: 100%;
	max-width: 300px;
	height: auto;
	margin-inline: auto;
}
@media (min-width: 700px) {
	.rv-head__logo { width: 420px; }
}
@media (min-width: 1040px) {
	.rv-head__logo { width: 460px; }
}
/* La mention de la kehila n'est plus dans le lien du logo : c'est un
   paragraphe a part, qui doit retrouver ses marges de paragraphe. */
p.rv-head__rav { margin: .35rem auto 0; max-width: 46ch; }


/* ===========================================================================
   VOTRE COMMUNAUTE — la porte d'entree de Dor Hagueoula
   Depuis la refonte du 09/11/2026, la synagogue n'est plus l'identite du
   site mais l'une de ses rubriques. Cette page en est l'accueil : le blason,
   la devise, puis les six portes de la vie communautaire.
   =========================================================================== */
.vc-hero { text-align: center; padding-top: 1.5rem; }
.vc-blason { margin: 0 0 1rem; }
.vc-blason img {
	display: block;
	width: 112px; height: 112px;
	margin-inline: auto;
}
.vc-hero h1 { margin: .3rem 0 .6rem; line-height: 1.12; }
.vc-devise {
	margin: 0 auto;
	max-width: 52ch;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.0625rem, 2.1vw, 1.25rem);
	font-style: italic;
	color: var(--dh-blue);
}

.vc-intro { max-width: 60ch; margin: 0 auto; text-align: center; }
.vc-intro p { margin: 0 0 .8rem; color: var(--dh-grey); }
.vc-intro__fort {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--dh-blue-ink) !important;
}

/* Les six portes. Chaque carte est un lien ENTIER, pas un titre cliquable
   au milieu d'un paragraphe : sur telephone, la cible fait toute la carte. */
.vc-cartes { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vc-cartes li { display: flex; }
.vc-cartes a {
	display: block;
	width: 100%;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--dh-sand);
	border-top: 3px solid var(--dh-gold);
	border-radius: 4px;
	background: #fff;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}
.vc-cartes a:hover,
.vc-cartes a:focus-visible { background: var(--dh-tint); border-color: var(--dh-gold-ink); }
.vc-cartes b {
	display: block;
	margin-bottom: .35rem;
	color: var(--dh-blue-ink);
	font-size: 1.0625rem;
}
.vc-cartes p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--dh-grey); }

.vc-rav { display: grid; gap: 1.5rem; align-items: center; }
.vc-rav__photo { margin: 0; }
.vc-rav__photo img {
	display: block;
	width: 100%; max-width: 300px; height: auto;
	margin-inline: auto;
	border-radius: 8px;
	border: 1px solid var(--dh-sand);
}
.vc-rav__texte h2 { margin: 0 0 .7rem; font-size: clamp(1.5rem, 4.6vw, 2rem); line-height: 1.14; }
.vc-rav__texte p { margin: 0 0 .85rem; color: var(--dh-grey); }
.vc-rav__texte p:last-child { margin: 1.1rem 0 0; }

@media (min-width: 620px) { .vc-cartes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .vc-rav { grid-template-columns: 300px 1fr; gap: 2.25rem; } }
@media (min-width: 1040px) { .vc-cartes { grid-template-columns: repeat(3, 1fr); } }


/* ===========================================================================
   LOUER A RAMAT POLEG
   La page est volontairement courte tant qu'aucun logement n'est renseigne :
   mieux vaut l'ecrire que montrer une grille vide.
   =========================================================================== */
.ab-hero { text-align: center; padding-top: 2rem; }
.ab-hero h1 { margin: .35rem 0 .7rem; line-height: 1.16; }
.ab-devise {
	margin: 0 auto;
	max-width: 54ch;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
	font-style: italic;
	color: var(--dh-blue);
}
.ab-intro { max-width: 60ch; margin: 0 auto; text-align: center; }
.ab-intro p { margin: 0 0 .8rem; color: var(--dh-grey); }

.ab-attente {
	max-width: 60ch;
	margin: 0 auto;
	padding: 1.75rem;
	border: 1px dashed var(--dh-gold);
	border-radius: 6px;
	background: var(--dh-tint);
	text-align: center;
}
.ab-attente h2 { margin: .2rem 0 .6rem; font-size: 1.375rem; }
.ab-attente p { margin: 0; color: var(--dh-grey); }


/* ===========================================================================
   PRESENTATION DU QUARTIER (page d'accueil, refonte du 09/11/2026)
   L'accueil n'est plus celui de la synagogue : il presente Ramat Poleg.
   Les classes .rp-* lui sont propres ; la carte du Chabbat et le tableau des
   heures du jour, eux, n'ont pas bouge — ce sont les blocs du moteur
   d'horaires, que le client veut garder tels quels.
   =========================================================================== */
.rp-hero { text-align: center; padding-top: 2rem; }
.rp-hero h1 { margin: .35rem 0 .7rem; line-height: 1.12; }
.rp-devise {
	margin: 0 auto;
	max-width: 56ch;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
	font-style: italic;
	color: var(--dh-blue);
}
.rp-intro { max-width: 62ch; margin: 0 auto; text-align: center; }
.rp-intro p { margin: 0 0 .85rem; color: var(--dh-grey); }
.rp-intro p:last-child { margin: 0; }

.rp-cases { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.rp-cases li {
	padding: 1.0625rem 1.125rem;
	border: 1px solid var(--dh-sand);
	border-top: 3px solid var(--dh-gold);
	border-radius: 4px;
	background: #fff;
}
.rp-cases b { display: block; margin-bottom: .3rem; color: var(--dh-blue-ink); }
.rp-cases p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--dh-grey); }

.rp-fin { margin: 0; text-align: center; }
.rp-fin blockquote { margin: 0; }
.rp-fin blockquote p {
	margin: 0 auto;
	max-width: 54ch;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--dh-blue);
}

/* La bande du haut n'a plus qu'une cellule depuis que les offices du jour
   sont passes dans la page de la communaute : elle prend toute la largeur
   plutot que de laisser une moitie vide. */
.rv-brief__box:has(> .rv-brief__cell:only-child) { grid-template-columns: 1fr; }

@media (min-width: 620px) { .rp-cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .rp-cases { grid-template-columns: repeat(3, 1fr); } }

/* La photo du quartier ne fait que 640 px de large : on la plafonne a sa
   definition reelle au lieu de l'etirer sur les 1040 px du cadre. Le halo
   floute occupe le reste. Si une photo plus grande arrive un jour, il
   suffira de relever ce plafond. */
.rv-open--parc .rv-open__img { max-width: 640px; margin-inline: auto; }

/* Page « Horaires de Chabbat » — meme ouverture que les autres pages du
   quartier. Le bandeau et les tableaux viennent de l'accueil sans retouche. */
.hc-hero { text-align: center; padding-top: 2rem; }
.hc-hero h1 { margin: .35rem 0 .7rem; line-height: 1.14; }
.hc-devise {
	margin: 0 auto;
	max-width: 54ch;
	font-family: var(--rv-serif, inherit);
	font-size: clamp(1rem, 2vw, 1.1875rem);
	font-style: italic;
	color: var(--dh-grey);
}

/* Encart publicitaire de la page Airbnb. Il est signale comme tel : une
   annonce payante ou partenaire n'a pas a se faire passer pour du contenu
   de la page. L'image porte tout le texte de l'affiche dans son alt, pour
   qui ne la voit pas. */
.ab-pub { display: block; max-width: 720px; margin-inline: auto; line-height: 0; }
.ab-pub img {
	display: block; width: 100%; height: auto;
	border-radius: 6px;
	border: 1px solid var(--dh-sand);
}
.ab-pub__note {
	max-width: 720px;
	margin: .4rem auto 0;
	font-family: var(--rv-label);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dh-grey);
	text-align: end;
}