/*
Theme Name: Hôtel La Paix
Theme URI: https://hotel-la-paix.fr
Author: Hôtel Restaurant La Paix
Description: Thème WordPress sur-mesure (Full Site Editing) pour l'Hôtel Restaurant La Paix, au Nouvion-en-Thiérache. One-page, sauge & laiton, distinct du noir & or de l'Auberge.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotel-la-paix
*/

/* La quasi-totalité du design vit dans theme.json. Ce fichier ne couvre que
   les mises en page (grilles, cartes, header sticky) que le système de blocs
   natif ne peut pas exprimer sans classes personnalisées. */

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
}
.wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin: 0;
}

.hlp-hairline {
	border: none;
	border-top: 1px solid var(--wp--preset--color--ligne);
	margin: 0;
}

.hlp-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	color: var(--wp--preset--color--laiton-fonce);
	font-weight: 700;
}
.hlp-eyebrow.hlp-on-sauge {
	color: var(--wp--preset--color--laiton);
}

.hlp-intro-line {
	font-family: var(--wp--preset--font-family--titres);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--encre-douce);
}

/* ---- section fond sauge (la table, jardin, contact) ---- */
.hlp-on-sauge {
	background: var(--wp--preset--color--sauge);
	color: var(--wp--preset--color--ivoire);
}
.hlp-on-sauge p,
.hlp-on-sauge .hlp-muted {
	color: var(--wp--preset--color--ivoire-douce);
}
.hlp-on-sauge h2,
.hlp-on-sauge h3,
.hlp-on-sauge h4 {
	color: var(--wp--preset--color--ivoire);
}
.hlp-on-sauge a {
	color: var(--wp--preset--color--ivoire);
}
.hlp-on-sauge a:hover {
	color: var(--wp--preset--color--laiton);
}

.hlp-muted {
	color: var(--wp--preset--color--encre-douce);
}

/* ---- carte générique (patterns : escapade, téléchargement, partenaire) ---- */
.hlp-card {
	background: var(--wp--preset--color--lin);
	border: 1px solid var(--wp--preset--color--ligne);
	padding: 1.5rem;
}
.hlp-tag {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--laiton-fonce);
	color: var(--wp--preset--color--laiton-fonce);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.3em 0.75em;
}
.hlp-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.85em 0;
	border-bottom: 1px solid var(--wp--preset--color--ligne);
}
.hlp-price-row:last-child {
	border-bottom: none;
}
.hlp-price {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	white-space: nowrap;
}

/* ---- boutons ---- */
.wp-block-button.hlp-btn-fill .wp-block-button__link {
	background: var(--wp--preset--color--laiton);
	border-color: var(--wp--preset--color--laiton);
	color: var(--wp--preset--color--sauge-fonce);
}
.wp-block-button.hlp-btn-fill .wp-block-button__link:hover {
	background: var(--wp--preset--color--laiton-fonce);
	border-color: var(--wp--preset--color--laiton-fonce);
	color: var(--wp--preset--color--papier);
}
.wp-block-button.is-style-outline.hlp-btn-pale .wp-block-button__link {
	border-color: rgba(245, 241, 228, 0.55);
	color: var(--wp--preset--color--ivoire);
}
.wp-block-button.is-style-outline.hlp-btn-pale .wp-block-button__link:hover {
	background: var(--wp--preset--color--ivoire);
	color: var(--wp--preset--color--sauge-fonce);
}
.hlp-btn-sm .wp-block-button__link {
	padding: 0.55em 1.3em;
	font-size: 0.78rem;
}

/* ---- header ---- */
.hlp-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 30;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--wp--preset--color--ligne);
}
/* Remarque : pas de backdrop-filter ici — cette propriété crée un nouveau
   "containing block" pour les descendants en position:fixed. Le panneau du
   menu mobile plein écran de WordPress dépend de position:fixed pour
   couvrir tout l'écran ; avec un backdrop-filter sur le header (l'ancêtre
   du bloc Navigation), le panneau se retrouvait piégé dans la hauteur du
   header au lieu de couvrir l'écran — c'est ce qui causait le bug du menu
   burger sur mobile. */
.hlp-header .wp-block-navigation {
	align-items: center;
}
.hlp-header > .wp-block-group {
	align-items: center;
}
.hlp-header > .wp-block-group > .wp-block-group:first-child {
	flex-shrink: 0;
}
.hlp-brand-kicker {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--laiton-fonce);
	font-family: var(--wp--preset--font-family--corps);
	margin-bottom: 0.15rem;
}

/* Le bloc Navigation natif de WordPress bascule automatiquement burger/inline
   selon un seuil interne peu fiable en pratique. Plutôt que de laisser
   WordPress décider, on force nous-mêmes le comportement par media query :
   burger partout par défaut (overlayMenu:"always" dans header.html), et à
   partir de 1000px on affiche le menu directement en ligne dans le header en
   désactivant le burger. */
@media (min-width: 1000px) {
	.hlp-header .wp-block-navigation__responsive-container-open,
	.hlp-header .wp-block-navigation__responsive-container-close {
		display: none !important;
	}
	.hlp-header .wp-block-navigation__responsive-container {
		display: flex !important;
		position: static !important;
		inset: auto !important;
		background: transparent !important;
		padding: 0 !important;
		height: auto !important;
		width: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	.hlp-header .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 1.5rem;
	}
	.hlp-header .wp-block-navigation__container {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 1.25rem;
	}
}

/* Menu ouvert en plein écran (mobile) : reprend le style serif centré. Le
   bloc Navigation a "justifyContent:right" pour l'affichage desktop en
   ligne — sans cette réinitialisation, le panneau plein écran hérite du
   même alignement à droite et déborde hors de l'écran sur mobile. */
.wp-block-navigation__responsive-container.is-menu-open {
	overflow-x: hidden;
	background: var(--wp--preset--color--sauge-fonce) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.4rem;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
	color: var(--wp--preset--color--ivoire);
}

/* Les sections ont un padding vertical généreux (4.5rem, pensé desktop) —
   on le resserre sur mobile où l'espace est précieux. */
@media (max-width: 600px) {
	section[id] {
		padding-top: 2.75rem !important;
		padding-bottom: 2.75rem !important;
	}
}

/* ---- chambres : carrousel (JS dans assets/js/carousel.js) ---- */
.hlp-carousel {
	overflow: hidden;
}
.hlp-carousel-track {
	display: flex;
	transition: transform 0.5s ease;
}
.hlp-carousel-slide {
	flex: 0 0 100%;
}
.hlp-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}
.hlp-carousel-dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--laiton);
	background: transparent;
	padding: 0;
	cursor: pointer;
}
.hlp-carousel-dots button.is-active {
	background: var(--wp--preset--color--laiton);
}

.hlp-room-slide {
	border: 1px solid var(--wp--preset--color--ligne);
	display: grid;
	grid-template-columns: 210px 1fr;
	max-width: 620px;
	margin: 0 auto;
	text-align: left;
	background: var(--wp--preset--color--lin);
}
.hlp-room-slide img {
	aspect-ratio: 3/4;
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
}
.hlp-room-body {
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.hlp-room-loc {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--laiton-fonce);
	font-weight: 700;
}
.hlp-room-price {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.25rem;
	margin-top: 0.4rem;
}
.hlp-room-body .wp-block-buttons {
	margin-top: 0.6rem;
}
@media (max-width: 560px) {
	.hlp-room-slide {
		grid-template-columns: 1fr;
	}
	.hlp-room-slide img {
		aspect-ratio: 16/10;
	}
}

/* ---- équipements : liste de pastilles ---- */
.hlp-amenity-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 2rem;
}
.hlp-amenity-list span {
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--encre-douce);
	border: 1px solid var(--wp--preset--color--ligne);
	padding: 0.45em 1em;
	border-radius: 999px;
}

/* ---- escapades : liste centrée ---- */
.hlp-escapade-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.3rem 2rem;
	max-width: 820px;
	margin: 2.5rem auto 0;
}
.hlp-escapade-item {
	text-align: center;
	max-width: 200px;
}
.hlp-escapade-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--laiton);
	color: var(--wp--preset--color--laiton);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.85rem;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.05rem;
}

/* ---- contact : encart sauge foncé ---- */
.hlp-contact-block {
	background: var(--wp--preset--color--sauge-fonce);
	color: var(--wp--preset--color--ivoire);
	padding: 2.75rem;
	max-width: 640px;
	margin: 3rem auto 0;
}
.hlp-contact-row {
	position: relative;
	font-size: 0.95rem;
	margin-top: 0.9rem;
	padding-left: 1.15rem;
}
.hlp-contact-row:first-child {
	margin-top: 0;
}
.hlp-contact-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--laiton);
}
.hlp-contact-cta {
	border-top: 1px solid var(--wp--preset--color--ligne-sombre);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	align-items: flex-start;
}
@media (max-width: 600px) {
	.hlp-contact-block {
		padding: 1.75rem 1.25rem;
	}
	.hlp-form {
		padding: 1.5rem 1.25rem;
	}
}

/* ---- formulaire de réservation restaurant ---- */
.hlp-form {
	border: 1px solid var(--wp--preset--color--ligne);
	padding: 2rem;
	max-width: 560px;
	margin: 2rem auto 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	background: var(--wp--preset--color--papier);
}
.hlp-form-row label {
	display: block;
	font-size: 0.8rem;
	color: var(--wp--preset--color--encre-douce);
	margin-bottom: 0.4rem;
}
.hlp-form-row input,
.hlp-form-row textarea {
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.65em 0.8em;
	border: 1px solid var(--wp--preset--color--ligne);
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--encre);
}
.hlp-form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 520px) {
	.hlp-form-row--split {
		grid-template-columns: 1fr;
	}
}
.hlp-form-hp {
	position: absolute;
	left: -9999px;
}
.hlp-form-submit {
	align-self: flex-start;
	background: var(--wp--preset--color--laiton);
	border: 1px solid var(--wp--preset--color--laiton);
	color: var(--wp--preset--color--sauge-fonce);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.9em 1.9em;
	cursor: pointer;
	border-radius: 2px;
}
.hlp-form-submit:hover {
	background: var(--wp--preset--color--laiton-fonce);
	border-color: var(--wp--preset--color--laiton-fonce);
	color: var(--wp--preset--color--papier);
}
.hlp-form-message {
	padding: 0.9em 1.2em;
	font-size: 0.9rem;
	border: 1px solid var(--wp--preset--color--ligne);
	max-width: 560px;
	margin: 0 auto 1.5rem;
}
.hlp-form-message--success {
	border-color: var(--wp--preset--color--laiton);
}

.hlp-embed-frame {
	width: 100%;
	border: 0;
	display: block;
}

footer.hlp-footer {
	text-align: center;
	padding: 3rem 1.5rem 2rem;
}
footer.hlp-footer .hlp-copyright {
	font-size: 0.75rem;
	color: rgba(245, 241, 228, 0.55);
	margin-top: 1.5rem;
}
footer.hlp-footer .hlp-copyright a {
	color: inherit !important;
	text-decoration: underline;
}
footer.hlp-footer .hlp-copyright a:hover {
	color: var(--wp--preset--color--laiton) !important;
}

/* ---- galerie : toutes les photos au même format ---- */
.hlp-gallery-carousel {
	max-width: 620px;
	margin: 0 auto;
}
.hlp-gallery-carousel .hlp-carousel-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}