@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 {
	--dh-paper:    #FBF7F0;   /* papier : fond de toutes les pages */
	--dh-ink:      #10151F;   /* encre : texte courant */
	--dh-grey:     #5E6472;   /* texte secondaire, legendes */
	--dh-blue:     #0B3A77;   /* bleu de la charte : liens, boutons */
	--dh-blue-ink: #00183C;   /* bleu fonce : titres, bande d'appel */
	--dh-tint:     #F3E8D4;   /* beige clair : encadres */
	--dh-sand:     #E4C090;   /* sable : filets */
	--dh-gold:     #C9A36A;   /* or : bordures d'encadre */
	--dh-gold-ink: #7A5A2A;   /* or 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;
	left: 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.35rem 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: 0.6rem;
	text-decoration: none;
	color: var(--dh-blue-ink);
	min-width: 0;
}
.dh-logo__img {
	width: 44px; height: 44px;
	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;
	gap: 0 1.5rem;
	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;
	}
	.dh-logo__img { width: 56px; height: 56px; }
	.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: 44px; height: 44px; }
	.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 2rem; }
	.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: 40px; height: 40px; }
.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; }
.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;
	left: 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-left: 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); }

.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;
}

/* --- 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-left: 1rem;
	border-left: 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; }

.rv-open__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1400 / 788;
	object-fit: cover;
	background: var(--dh-tint);
	border: 1px solid var(--dh-sand);
}
.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-left: 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-left: 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-left: 2.5rem;
		margin-left: -2.5rem;
		border-left: 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: baseline;
	gap: 0 1rem;
	padding: 0.6rem 0;
	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: right;
	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-left: 2.5rem;
		margin-left: -2.5rem;
		border-left: 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: right;
}

.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-left: 1rem;
	border-left: 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: left;
	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-left: 2.5rem;
		margin-left: -2.5rem;
		border-left: 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-left: 2.5rem;
		margin-left: -2.5rem;
		border-left: 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-left: 0;
		margin-left: 0;
		border-left: 0;
	}
	.pa-uses > div:not(:nth-child(5n+1)) {
		padding-left: 1.75rem;
		margin-left: -1.75rem;
		border-left: 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;
	right: 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-left: 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-left: 2.5rem;
		margin-left: -2.5rem;
		border-left: 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: 0; font-size: .74rem; opacity: .8; }

  .dh-logo__img   { width: 34px; height: 34px; }
  .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; }
}