/*
 * Barre de navigation commune aux gabarits du thème enfant (Accueil, Chambre, Activité).
 *
 * Le balisage est produit par riad_nav_render() dans functions.php : une seule feuille et un
 * seul jeu de classes pour tous les gabarits, afin qu'une correction du menu profite d'office
 * à toutes les pages. La barre est volontairement autonome — elle déclare sa propre palette et
 * sa propre police — pour ne dépendre d'aucun conteneur de gabarit.
 *
 * Un gabarit qui aurait besoin d'un habillage différent (fond, hauteur) peut le surcharger en
 * préfixant par son conteneur, par exemple « .riad-t1 .riad-nav { … } ».
 */
.riad-nav {
	--nav-nuit-medina: #1A1410;
	--nav-or-epice: #C5853A;
	--nav-or-doux: #E8C07A;
	--nav-ivoire: #F5ECD8;
	--nav-parchemin: #E8E0D0;
	--nav-cannelle: #A0522D;
	--nav-cannelle-clair: #D4885F;
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	font-family: 'DM Sans', sans-serif;
	/* Translucide au repos : la barre se pose sur la photo ou l'en-tête sombre du gabarit. */
	background: rgba(26, 20, 16, 0.55);
	transition: background 0.4s ease, box-shadow 0.4s ease;
}
.riad-nav * { box-sizing: border-box; }
.riad-nav a { text-decoration: none; }
/* Classe posée par le script de riad_nav_render() au-delà de 60px de défilement. */
.riad-nav.is-scrolled { background: var(--nav-nuit-medina); box-shadow: 0 1px 0 rgba(197, 133, 58, 0.22); }

/*
 * Connecté, la barre d'administration occupe déjà le haut de la fenêtre en position fixe : la
 * barre du gabarit est décalée de sa hauteur, qui change à 782px. Sous 600px WordPress la remet
 * en flux et elle défile, donc plus aucun décalage.
 */
body.admin-bar .riad-nav { top: 32px; }
@media screen and (max-width: 48.875rem) { body.admin-bar .riad-nav { top: 46px; } }
@media screen and (max-width: 37.5rem) { body.admin-bar .riad-nav { top: 0; } }

/*
 * Les deux groupes de liens n'ont pas la même largeur : « Organiser son voyage » et ses voisins
 * pèsent plus lourd à gauche que les quatre entrées et le bouton de droite. Le logo est donc un
 * élément de la rangée, entre les deux groupes, et « space-between » répartit l'espace libre à
 * parts égales de chaque côté : il respire autant à gauche qu'à droite et ne peut jamais
 * recouvrir un libellé. En contrepartie il s'écarte un peu du milieu exact de la barre, du
 * demi-écart de largeur entre les deux groupes.
 */
.riad-nav__inner {
	max-width: 90rem;
	margin: 0 auto;
	height: 5.5rem;
	padding: 0 3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* Écart minimal garanti si la fenêtre devient trop étroite pour dégager davantage. */
	gap: 1.5rem;
}
/* L'espacement se resserre avec la fenêtre et les libellés ne se coupent jamais : à espacement
   fixe, « Organiser son voyage » et ses voisins passaient à la ligne, ce qui élargissait le
   groupe de gauche et déportait le logo. */
.riad-nav__links {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
	/* Le groupe prend toute la hauteur de la barre pour que ses entrées puissent s'y étirer et
	   rejoindre le haut du panneau ; « align-items » recentre son contenu, dont le bouton. */
	align-self: stretch;
	align-items: center;
	gap: clamp(0.875rem, 1.5vw, 2rem);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
/* L'entrée occupe toute la hauteur de la barre, pas seulement celle de son libellé : sans cela le
   pointeur quittait l'entrée avant d'atteindre le panneau, qui commence au bas de la barre, et le
   panneau se refermait en route. « align-self » plutôt que « align-items » sur le groupe, pour ne
   pas étirer aussi le bouton « Réserver ». */
.riad-nav__item { display: flex; align-items: center; align-self: stretch; }
.riad-nav a.riad-nav__link { color: var(--nav-parchemin); white-space: nowrap; }
.riad-nav a.riad-nav__link:hover { color: var(--nav-or-doux); }
/* La rubrique déployable se signale par un filet ocre qui se dessine sous son libellé, plutôt
   que par un chevron : le reste des gabarits n'emploie que des filets et de la typographie. */
.riad-nav__item--has-panel > .riad-nav__link { position: relative; }
.riad-nav__item--has-panel > .riad-nav__link::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -0.5rem;
	height: 1px;
	background: var(--nav-or-epice);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}
.riad-nav__item--has-panel:hover > .riad-nav__link::after,
.riad-nav__item--has-panel:focus-within > .riad-nav__link::after,
.riad-nav__item--has-panel.is-open > .riad-nav__link::after { transform: scaleX(1); }
.riad-nav__links--right { justify-content: flex-end; }
.riad-nav a.riad-nav__cta { border: 1px solid var(--nav-or-epice); color: var(--nav-or-doux) !important; padding: 0.6875rem 1.25rem; white-space: nowrap; }
.riad-nav a.riad-nav__cta:hover { background: var(--nav-or-epice); color: var(--nav-nuit-medina) !important; }
.riad-nav__brand { flex: 0 0 auto; text-align: center; line-height: 1; }
/* Le nom est écrit sur deux lignes (« RIAD » puis « JAMAÏ ») : sur une seule, il occupait
   presque toute la largeur libre au centre et recouvrait les derniers liens du groupe de
   gauche. Le retour est posé dans le balisage, la hauteur reste dans celle de la barre. */
.riad-nav__brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.625rem; line-height: 1.05; letter-spacing: 0.18em; color: var(--nav-ivoire); white-space: nowrap; }
.riad-nav__brand-sub { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.34em; color: var(--nav-cannelle-clair); margin-top: 0.375rem; }

/*
 * Panneaux déroulants des rubriques.
 *
 * Le panneau prend toute la largeur de la fenêtre et se cale sous la barre : les rubriques
 * comptent jusqu'à treize entrées, un menu étroit accroché sous chaque libellé les aurait
 * empilées sur une colonne interminable. Il reprend le fond nuit de la barre, séparé par un filet
 * ocre, et compose une petite page : la rubrique en Cormorant à gauche, les entrées à droite.
 */
.riad-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--nav-nuit-medina);
	border-top: 1px solid rgba(197, 133, 58, 0.28);
	box-shadow: 0 1.5rem 3rem rgba(26, 20, 16, 0.45);
	/* Fermé : invisible donc hors de portée du pointeur, mais toujours dans le document pour
	   rester indexable et accessible au clavier. C'est « visibility » seule qui coupe les clics,
	   sans « pointer-events » : la visibilité ne bascule qu'à la fin du fondu, si bien que le
	   panneau reste cliquable pendant sa fermeture et qu'un écart de trajectoire du pointeur ne
	   condamne pas le survol. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.625rem);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.riad-nav__item--has-panel:hover > .riad-nav__panel,
.riad-nav__item--has-panel:focus-within > .riad-nav__panel,
.riad-nav__item--has-panel.is-open > .riad-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Panneau ouvert, la barre quitte sa translucidité : sans cela le panneau opaque paraissait
   décollé du bandeau. */
.riad-nav:has(.riad-nav__item--has-panel:hover),
.riad-nav:has(.riad-nav__item--has-panel:focus-within),
.riad-nav:has(.riad-nav__item--has-panel.is-open) { background: var(--nav-nuit-medina); }
.riad-nav__panel-inner {
	max-width: 90rem;
	margin: 0 auto;
	padding: 3rem;
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
	text-align: left;
}
.riad-nav__panel-intro { border-right: 1px solid rgba(197, 133, 58, 0.2); padding-right: 2.5rem; }
.riad-nav__panel-kicker { display: block; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--nav-cannelle-clair); }
.riad-nav__panel-title { display: block; margin-top: 0.875rem; font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; line-height: 1.15; letter-spacing: 0.01em; text-transform: none; color: var(--nav-ivoire); }
.riad-nav a.riad-nav__panel-all { display: inline-block; margin-top: 1.375rem; padding-bottom: 0.25rem; border-bottom: 1px solid rgba(197, 133, 58, 0.5); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--nav-or-doux); }
.riad-nav a.riad-nav__panel-all:hover { border-bottom-color: var(--nav-or-doux); color: var(--nav-ivoire); }
/* Rubrique à sous-rubriques : une colonne titrée par sous-rubrique. */
.riad-nav__panel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2.5rem 3rem; }
.riad-nav a.riad-nav__panel-group-title { display: block; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(197, 133, 58, 0.22); font-family: 'Cormorant Garamond', serif; font-size: 1.1875rem; letter-spacing: 0.02em; text-transform: none; color: var(--nav-or-doux); }
.riad-nav a.riad-nav__panel-group-title:hover { color: var(--nav-ivoire); }
.riad-nav__panel-list { display: flex; flex-direction: column; gap: 0.625rem; }
/* Rubrique en liste simple : le texte coule en colonnes, comme un index. Seule la largeur de
   colonne est fixée, le nombre se déduit de la place — le panneau fait toute la fenêtre. */
.riad-nav__panel-flow { columns: 11rem; column-gap: 3rem; }
.riad-nav__panel-entry { break-inside: avoid; margin-bottom: 0.625rem; }
.riad-nav a.riad-nav__panel-link { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.45; letter-spacing: 0.01em; text-transform: none; color: var(--nav-parchemin); }
.riad-nav a.riad-nav__panel-link:hover { color: var(--nav-or-doux); }
/* Petit-enfant d'une liste simple : en retrait, marqué d'un filet plutôt que d'une puce. */
.riad-nav a.riad-nav__panel-link--sub { position: relative; margin: 0.375rem 0 0 0.875rem; padding-left: 0.875rem; font-size: 0.75rem; color: var(--nav-cannelle-clair); }
.riad-nav__panel-link--sub::before { content: ''; position: absolute; left: 0; top: 0.5625rem; width: 0.5rem; height: 1px; background: rgba(197, 133, 58, 0.5); }
.riad-nav a.riad-nav__panel-link--sub:hover { color: var(--nav-or-doux); }
/* Sur les fenêtres basses, un panneau de 29 entrées dépasse l'écran : il défile alors seul. */
@media (max-height: 46.875rem) {
	.riad-nav__panel {
		max-height: calc(100vh - 5.5rem);
		overflow-y: auto;
		scrollbar-width: none;
	}
	.riad-nav__panel::-webkit-scrollbar { display: none; }
}

/* Neuf entrées plus un bouton ne tiennent pas sous 1400px à la taille nominale : la barre se
   resserre par paliers plutôt que de couper le bouton « Réserver ». */
@media (min-width: 64.0625rem) and (max-width: 87.5rem) {
	.riad-nav__inner { padding: 0 1.75rem; gap: 1rem; }
	.riad-nav__links { font-size: 0.6875rem; letter-spacing: 0.05em; gap: clamp(0.625rem, 1vw, 1.125rem); }
	.riad-nav a.riad-nav__cta { padding: 0.625rem 0.875rem; }
	.riad-nav__brand-name { font-size: 1.375rem; letter-spacing: 0.12em; }
	/* Les libellés se resserrant, le panneau suit : marges et colonne d'introduction réduites. */
	.riad-nav__panel-inner { padding: 2.5rem 2rem; grid-template-columns: 12rem minmax(0, 1fr); gap: 2.5rem; }
	.riad-nav__panel-intro { padding-right: 1.75rem; }
	.riad-nav__panel-title { font-size: 1.5rem; }
	.riad-nav__panel-groups { gap: 2rem 2.25rem; }
	.riad-nav__panel-flow { columns: 10rem; column-gap: 2.25rem; }
}
@media (min-width: 64.0625rem) and (max-width: 75rem) {
	.riad-nav__inner { padding: 0 1.25rem; gap: 0.75rem; }
	.riad-nav__links { font-size: 0.625rem; letter-spacing: 0.03em; gap: 0.5rem; }
	.riad-nav a.riad-nav__cta { padding: 0.5rem 0.6875rem; }
	.riad-nav__brand-name { font-size: 1.125rem; letter-spacing: 0.08em; }
	.riad-nav__brand-sub { font-size: 0.5rem; letter-spacing: 0.2em; }
	.riad-nav__panel-inner { padding: 2rem 1.5rem; grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; }
	.riad-nav__panel-intro { padding-right: 1.25rem; }
	.riad-nav__panel-title { font-size: 1.375rem; }
	.riad-nav__panel-flow { columns: 9.5rem; column-gap: 2rem; }
}
/*
 * Feuille mobile et tablette.
 *
 * Jusqu'à 1024px la rangée n'a plus la place d'aligner neuf rubriques confortablement : le
 * bouton déplie la barre elle-même en une feuille plein écran, logo compris, plutôt que de
 * comprimer le menu desktop. Le balisage ne change pas — les mêmes panneaux se déplient ici en
 * accordéon, si bien qu'une correction du menu vaut pour les deux dispositions.
 */
.riad-nav__burger { display: none; }
html.riad-menu-open,
html.riad-menu-open body {
	overflow: hidden;
	scrollbar-width: none;
}
html.riad-menu-open::-webkit-scrollbar,
html.riad-menu-open body::-webkit-scrollbar { display: none; }

@media (max-width: 64rem) {
	.riad-nav__links { display: none; }
	.riad-nav__inner { justify-content: center; padding: 0 1.25rem; }

	/* Le bouton se dessine au filet, comme le reste de la barre : trois traits d'ocre qui se
	   croisent à l'ouverture. */
	.riad-nav__burger {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0.5rem;
		z-index: 2;
		width: 3.5rem;
		height: 5.5rem;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}
	.riad-nav__burger-lines,
	.riad-nav__burger-lines::before,
	.riad-nav__burger-lines::after {
		display: block;
		width: 1.5rem;
		height: 1px;
		background: var(--nav-or-doux);
		transition: transform 0.3s ease, opacity 0.2s ease;
	}
	.riad-nav__burger-lines { position: relative; }
	.riad-nav__burger-lines::before,
	.riad-nav__burger-lines::after { content: ''; position: absolute; left: 0; }
	.riad-nav__burger-lines::before { top: -0.4375rem; }
	.riad-nav__burger-lines::after { top: 0.4375rem; }
	.riad-nav.is-menu-open .riad-nav__burger-lines { background: transparent; }
	.riad-nav.is-menu-open .riad-nav__burger-lines::before { transform: translateY(0.4375rem) rotate(45deg); }
	.riad-nav.is-menu-open .riad-nav__burger-lines::after { transform: translateY(-0.4375rem) rotate(-45deg); }

	.riad-nav.is-menu-open { background: var(--nav-nuit-medina); }
	.riad-nav.is-menu-open .riad-nav__inner {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		max-width: none;
		height: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 1.25rem 1.5rem 3rem;
		background: var(--nav-nuit-medina);
		overflow-y: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.riad-nav.is-menu-open .riad-nav__inner::-webkit-scrollbar { display: none; }
	body.admin-bar .riad-nav.is-menu-open .riad-nav__inner { top: 46px; }
	/* Dans le balisage le logo sépare les deux groupes de liens, ce qui le placerait au milieu de
	   la feuille : il remonte en tête, les deux groupes formant alors une liste continue. */
	.riad-nav.is-menu-open .riad-nav__brand { flex: 0 0 auto; order: -1; margin: 0.5rem 0 2rem; }

	.riad-nav.is-menu-open .riad-nav__links {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 1rem;
		text-transform: none;
		letter-spacing: 0;
	}
	.riad-nav.is-menu-open .riad-nav__item { display: block; border-top: 1px solid rgba(197, 133, 58, 0.18); }
	/* La rubrique passe en Cormorant : à cette taille l'italique capitale du bandeau se lisait
	   mal, et les titres de rubrique du reste du site sont dans cette police. */
	.riad-nav.is-menu-open a.riad-nav__link {
		display: block;
		padding: 1rem 2.5rem 1rem 0;
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.3125rem;
		letter-spacing: 0.01em;
		color: var(--nav-ivoire);
		white-space: normal;
	}
	/* Le filet animé du bureau n'a pas de sens ici : la rubrique dépliable porte une croix de
	   filets, dont la barre verticale disparaît à l'ouverture. */
	.riad-nav__item--has-panel > .riad-nav__link::after { display: none; }
	.riad-nav.is-menu-open .riad-nav__item--has-panel > .riad-nav__link {
		position: relative;
		background-image: linear-gradient(var(--nav-or-epice), var(--nav-or-epice)), linear-gradient(var(--nav-or-epice), var(--nav-or-epice));
		background-repeat: no-repeat;
		background-size: 0.75rem 1px, 1px 0.75rem;
		background-position: right 0.5rem center, right 0.84375rem center;
	}
	.riad-nav.is-menu-open .riad-nav__item.is-open > .riad-nav__link { background-size: 0.75rem 1px, 0 0.75rem; }

	.riad-nav.is-menu-open .riad-nav__panel {
		position: static;
		display: none;
		background: none;
		border-top: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: none;
		overflow: visible;
	}
	.riad-nav.is-menu-open .riad-nav__item.is-open > .riad-nav__panel { display: block; }
	.riad-nav.is-menu-open .riad-nav__panel-inner { display: block; max-width: none; padding: 0 0 1.25rem 0.875rem; }
	/* Titre et sur-titre du panneau répéteraient la rubrique juste au-dessus ; seul l'accès à la
	   page de rubrique est conservé. */
	.riad-nav.is-menu-open .riad-nav__panel-kicker,
	.riad-nav.is-menu-open .riad-nav__panel-title { display: none; }
	.riad-nav.is-menu-open .riad-nav__panel-intro { border: 0; padding: 0; }
	.riad-nav.is-menu-open a.riad-nav__panel-all { margin: 0 0 0.75rem; }
	.riad-nav.is-menu-open .riad-nav__panel-groups,
	.riad-nav.is-menu-open .riad-nav__panel-flow { display: block; columns: auto; }
	.riad-nav.is-menu-open .riad-nav__panel-group { margin-top: 1rem; }
	.riad-nav.is-menu-open a.riad-nav__panel-group-title { font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nav-cannelle-clair); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
	.riad-nav.is-menu-open a.riad-nav__panel-link { padding: 0.4375rem 0; font-size: 0.9375rem; }
	.riad-nav.is-menu-open a.riad-nav__panel-link--sub { margin-left: 0.75rem; }

	.riad-nav.is-menu-open a.riad-nav__cta { display: block; margin-top: 2rem; padding: 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; }
}