/* =========================================================
   Les Joséphines — styles complémentaires
   (le socle est dans theme.json ; ici : détails non gérables en theme.json)
   ========================================================= */

/* réinitialisation universelle du modèle de boîte : sans elle, tout élément
   avec `width:100%` + padding/bordure (champs de formulaire, notamment sur
   la page Contact) rend plus large que son conteneur → défilement horizontal. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --lj-line: #E5DAC6;
  --lj-brass: #9F8454;
  --lj-green: #2C3A2C;
  --lj-sage: #E7E9D3;
}

/* les eyebrows posés sur fond sombre gardent leur teinte claire */
.is-style-eyebrow.has-text-color { color: inherit; }
.wp-block-cover .is-style-eyebrow[style*="color"],
.has-green-background-color .is-style-eyebrow[style*="color"] { color: #D9C49B !important; }

/* --- Sections teintées --- */
.wp-block-group.is-style-section-sage { background-color: var(--wp--preset--color--sage); }
.wp-block-group.is-style-section-white { background-color: var(--wp--preset--color--white); }

/* --- Carte à bordure fine (variation de colonnes) --- */
.wp-block-columns.is-style-card,
.wp-block-column.is-style-card {
  border: 1px solid var(--wp--preset--color--line);
  background-color: var(--wp--preset--color--white);
}

/* =========================================================
   Divers
   ========================================================= */


/* liens de menu / boutons : pas de soulignement au survol dans l'en-tête */
header a:hover { text-decoration: none; }


/* =========================================================
   Sections bord à bord (pas d'écart entre les bandes)
   ========================================================= */
/* en-tête / contenu / pied de page collés */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
/* sections pleine largeur : aucun écart entre elles */
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }

/* =========================================================
   Beds24 — barre de réservation (gabarit custom beds24-strip.php)
   !important : des feuilles tierces (plugin/legacy) écrasent sinon
   les champs, le bouton et le calendrier.
   ========================================================= */
.lj-booking {
  width: 880px !important; max-width: 100% !important;
  margin-left: auto !important; margin-right: auto !important;
  padding: 0 !important; border: none !important; overflow: hidden !important;
  background: var(--wp--preset--color--white) !important;
  box-shadow: 0 20px 50px -34px rgba(40,50,35,.45) !important;
}
/* le layout « contraint » de WP bride les enfants à 720px : on neutralise */
.lj-booking > *,
.lj-booking .beds24strip,
.lj-booking .beds24strip form { max-width: none !important; width: 100% !important; margin: 0 !important; }
/* la barre de réservation vit aussi dans des sections .lj-sec (page appartement/
   studio) : cette règle a la même spécificité que « .lj-sec > * » plus bas
   (qui fixe max-width à 1068px) et lui est ANTÉRIEURE dans la feuille — sans
   ce correctif plus spécifique, la cascade rétablit 1068px et la barre
   (880px de large) déborde entre ~782 et 880px de viewport. */
.lj-sec > .lj-booking,
.lj-cta > .lj-booking { max-width: 100% !important; }
.beds24strip {
  background: transparent !important; padding: 0 !important; cursor: default !important;
  color: var(--wp--preset--color--contrast) !important;
  font-family: var(--wp--preset--font-family--body) !important;
}

/* --- la barre --- */
.lj-strip {
  display: flex !important; align-items: stretch !important; width: 100% !important;
  background: var(--wp--preset--color--white) !important;
  margin: 0 !important; padding: 0 !important;
}
.lj-strip__field {
  flex: 1 1 0 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important;
  justify-content: center !important; align-items: flex-start !important;
  text-align: left !important;
  padding: 15px 26px !important; margin: 0 !important;
  border: none !important;
  border-right: 1px solid var(--wp--preset--color--line) !important;
  background: transparent !important;
}
.lj-strip__label {
  display: block !important;
  width: 100% !important; text-align: left !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 9.5px !important; letter-spacing: .2em !important; text-transform: uppercase !important;
  color: var(--wp--preset--color--muted) !important; font-weight: 600 !important;
  line-height: 1 !important; margin: 0 0 9px 0 !important; padding: 0 !important; white-space: nowrap !important;
}

/* --- champs : plats, sans cadre (on écrase les styles de formulaire tiers) --- */
.lj-strip input.lj-strip__date,
.lj-strip select.lj-strip__guests {
  width: 100% !important; max-width: none !important;
  height: 22px !important; min-height: 0 !important; line-height: 22px !important;
  background: transparent !important; background-image: none !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
  padding: 0 !important; margin: 0 !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 14.5px !important; font-weight: 600 !important;
  color: var(--wp--preset--color--contrast) !important;
  cursor: pointer !important;
  text-align: left !important;
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  text-transform: none !important; letter-spacing: normal !important;
}
.lj-strip input.lj-strip__date:focus,
.lj-strip select.lj-strip__guests:focus {
  outline: none !important; box-shadow: none !important; border: none !important; background: transparent !important;
}

/* --- bouton : vert, bord à bord, angles nets --- */
.lj-strip button.lj-strip__submit,
.lj-strip .lj-strip__submit {
  flex: 0 0 auto !important; min-width: 280px !important; width: auto !important;
  background: var(--wp--preset--color--green) !important;
  background-color: var(--wp--preset--color--green) !important;
  background-image: none !important;
  color: #F3EFE4 !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 0 34px !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 0.72rem !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; font-weight: 600 !important; line-height: 1.2 !important;
  cursor: pointer !important; transition: background-color .15s ease !important;
  text-shadow: none !important;
}
.lj-strip button.lj-strip__submit:hover,
.lj-strip .lj-strip__submit:hover {
  background: var(--wp--preset--color--green-dark) !important;
  background-color: var(--wp--preset--color--green-dark) !important;
  color: #F3EFE4 !important;
}

/* --- mobile --- */
@media (max-width: 781px) {
  .lj-booking { width: 100% !important; }
  .lj-strip { flex-direction: column !important; }
  .lj-strip__field { border-right: none !important; border-bottom: 1px solid var(--wp--preset--color--line) !important; }
  .lj-strip button.lj-strip__submit { min-width: 0 !important; width: 100% !important; padding: 16px 20px !important; }
}

/* =========================================================
   Calendrier jQuery UI — habillage charte + flèches propres
   (le thème « smoothness » du plugin met des sprites qui
   apparaissent en carrés noirs : on les neutralise)
   ========================================================= */
.ui-datepicker {
  background: var(--wp--preset--color--white) !important;
  border: 1px solid var(--wp--preset--color--line) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 60px -30px rgba(40,50,35,.45) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 0.85rem !important; padding: 8px !important; width: 270px !important; z-index: 9999 !important;
}
.ui-datepicker .ui-datepicker-header {
  position: relative !important;
  background: var(--wp--preset--color--sage) !important; background-image: none !important;
  border: none !important; border-radius: 0 !important;
  color: var(--wp--preset--color--contrast) !important; padding: 10px 0 !important;
}
.ui-datepicker .ui-datepicker-title {
  font-weight: 600 !important; font-size: 0.9rem !important; margin: 0 34px !important; line-height: 1.4 !important;
}
/* flèches : on masque les sprites et on dessine des chevrons */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 30px !important; height: 30px !important;
  background: transparent !important; background-image: none !important;
  border: none !important; border-radius: 0 !important; cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-prev { left: 4px !important; }
.ui-datepicker .ui-datepicker-next { right: 4px !important; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-icon { display: none !important; background-image: none !important; text-indent: 0 !important; }
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important; line-height: 1 !important;
  color: var(--wp--preset--color--green) !important;
}
.ui-datepicker .ui-datepicker-prev::before { content: "\2039" !important; }
.ui-datepicker .ui-datepicker-next::before { content: "\203A" !important; }
.ui-datepicker .ui-datepicker-prev:hover::before,
.ui-datepicker .ui-datepicker-next:hover::before { color: var(--wp--preset--color--brass) !important; }
/* jours */
.ui-datepicker table { margin: 6px 0 0 0 !important; font-size: 0.85rem !important; }
.ui-datepicker th {
  color: var(--wp--preset--color--muted) !important; font-weight: 600 !important;
  font-size: 0.68rem !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  padding: 6px 0 !important; border: none !important;
}
.ui-datepicker td { border: none !important; padding: 1px !important; }
.ui-datepicker td a, .ui-datepicker td span {
  display: block !important; text-align: center !important; padding: 7px 0 !important;
  border: 1px solid transparent !important; border-radius: 0 !important;
  background: transparent !important; background-image: none !important;
  color: var(--wp--preset--color--contrast) !important; font-weight: 500 !important;
}
.ui-datepicker td a:hover { background: var(--wp--preset--color--sage) !important; }
.ui-datepicker td a.ui-state-active,
.ui-datepicker td .ui-state-active {
  background: var(--wp--preset--color--green) !important; color: #F3EFE4 !important; font-weight: 600 !important;
}
.ui-datepicker td.ui-datepicker-unselectable span { color: #BDB6A4 !important; }

/* =========================================================
   PIED DE PAGE (maquette option 9)
   ========================================================= */
.lj-footer { padding-top: 0 !important; padding-bottom: 0 !important; }
.lj-foot { display: flex !important; flex-wrap: wrap !important; gap: 40px !important; }
.lj-foot > .wp-block-column { flex: 1 1 0; min-width: 170px; }
.lj-foot__nm {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-size: 24px !important; font-weight: 600 !important;
  color: #F1EEE2 !important; letter-spacing: .04em !important; margin: 0 !important;
}
.lj-foot__sub {
  font-size: 9px !important; letter-spacing: .3em !important; text-transform: uppercase !important;
  color: #6f7562 !important; margin: 6px 0 18px !important;
}
.lj-footer p, .lj-footer li {
  font-size: 13px !important; line-height: 1.9 !important; color: #9aa08d !important;
  list-style: none !important; font-weight: 350 !important;
}
.lj-footer ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.lj-foot__h {
  display: block !important; font-size: 10px !important; letter-spacing: .2em !important;
  text-transform: uppercase !important; color: #6f7562 !important; margin: 0 0 14px !important;
  font-weight: 600 !important;
}
.lj-footer a { color: #b3b8a5 !important; text-decoration: none !important; }
.lj-footer a:hover { color: #F1EEE2 !important; }

/* contact avec pictos */
.lj-contact li { display: flex !important; align-items: flex-start !important; gap: 10px !important; }
.lj-contact li svg { width: 15px; height: 15px; flex: none; margin-top: 5px; color: #B79B6E; }
.lj-contact li span { color: #9aa08d; }

/* réseaux : pastilles rondes laiton */
.lj-social { display: flex; gap: 12px; margin-top: 18px; }
.lj-social a {
  width: 34px; height: 34px;
  border: 1px solid rgba(183,155,110,.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #B79B6E !important;
}
.lj-social a:hover { border-color: #B79B6E; color: #F1EEE2 !important; }
.lj-social a svg { width: 17px; height: 17px; }

/* bouton Réserver du pied de page */
.lj-foot__btn {
  display: inline-block; margin-top: 0;
  min-width: 118px; text-align: center; box-sizing: border-box;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #F1EEE2 !important; border: 1px solid rgba(241,238,226,.5);
  padding: 11px 20px;
}
.lj-foot__btn:hover { border-color: #F1EEE2; }
.lj-foot__btn--wa { display: inline-flex !important; align-items: center; gap: 8px; }
.lj-foot__btn--wa svg { width: 15px; height: 15px; flex: none; }

/* Contact list and Book intro text must reserve the same height so the
   buttons below them land at the same position regardless of how the
   text wraps in a given language. */
.lj-contact,
.lj-foot__book p:nth-of-type(2) { min-height: 56px !important; }

/* barre légale : CENTRÉE sur deux rangées.
   Copyright au centre, puis les liens sur une rangée centrée en dessous.
   Le contenu reste au milieu de la page, à l'écart des widgets fixes
   (chat, badge Google) qui flottent dans le coin bas-droit. */
.lj-legal {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 26px 0 64px;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  text-align: center;
  font-size: 12.5px; color: #8b917d; letter-spacing: .03em; line-height: 1.6;
}
.lj-legal > div:first-child { flex: 0 0 auto; }
/* les liens restent sur UNE rangée centrée, même si wpautop injecte des sauts */
.lj-legal__lk {
  display: flex !important; flex-wrap: wrap; justify-content: center;
  gap: 22px; flex: 0 0 auto;
}
.lj-legal__lk br { display: none !important; }   /* neutralise un éventuel <br> injecté */
.lj-legal__lk a {
  margin: 0 !important; color: #b3b8a5 !important; font-size: 12.5px !important;
  white-space: nowrap;
  border-bottom: 1px solid rgba(179,184,165,.32); padding-bottom: 2px;
}
@media (max-width: 781px) {
  .lj-legal__lk { gap: 16px; }
}

/* =========================================================
   EN-TÊTE — calqué sur la maquette option 9
   Fond #DEE4CE, rangée 80 px, logo 47 px, menu centré.
   PAS de filet bas (choix client : cohérence avec le bandeau titre).
   ========================================================= */
/* neutralise la bordure inline héritée de l'ancien markup d'en-tête :
   la page en ligne perd le filet sans réinsérer le template part */
header.wp-block-group { border-bottom: 0 !important; }
.lj-nav {
  display: flex !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: space-between !important;
  height: 80px !important; min-height: 80px !important; gap: 0 !important; width: 100% !important;
}
/* le <header> ne doit PAS ajouter de hauteur : la maquette fixe la rangée
   à 80 px pile. On annule le padding vertical hérité du bloc d'en-tête. */
header.wp-block-group { padding-top: 0 !important; padding-bottom: 0 !important; }
/* le menu occupe le centre, même si le logo n'est pas encore posé */
.lj-nav nav.lj-nav-menu,
.lj-nav .wp-block-shortcode,
.lj-nav nav { flex: 2 1 auto !important; display: flex !important; justify-content: center !important; margin: 0 !important; }
/* logo et bloc de droite en flex:1 -> le menu est parfaitement centré */
.lj-nav > .wp-block-site-logo { flex: 0 0 auto !important; width: 170px !important; }
.lj-nav .lj-navr { flex: 1 1 0 !important; justify-content: flex-end !important; gap: 22px !important; }
/* le conteneur qui enveloppe menu + navr (nécessaire pour le panneau mobile,
   voir plus bas) est transparent à la mise en page sur ordinateur : ses
   enfants participent au flex de .lj-nav exactement comme avant. */
.lj-nav-collapse { display: contents !important; }
/* Logo: lock to 54px tall, auto width. The inline-block link shrink-wraps the
   image so it can never stretch to fill the growing flex column (which would
   otherwise make the logo scale with the amount of nav space left over). */
.lj-nav > .wp-block-site-logo a,
header .wp-block-site-logo a { display: inline-block !important; width: auto !important; max-width: none !important; line-height: 0 !important; }
.lj-nav > .wp-block-site-logo img,
header .wp-block-site-logo img { height: auto !important; width: 170px !important; max-width: 170px !important; display: block !important; }

/* langue */
.lj-navr p { font-size: 11px !important; letter-spacing: .14em !important; color: var(--wp--preset--color--muted) !important; margin: 0 !important; }
.lj-navr p strong { color: var(--wp--preset--color--contrast) !important; }

/* bouton Réserver de l'en-tête */
.lj-navr .wp-block-button__link {
  font-size: 10.5px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  font-weight: 600 !important; padding: 9px 18px !important; border-radius: 0 !important;
  background: transparent !important; color: var(--wp--preset--color--green) !important;
  border: 1px solid var(--wp--preset--color--green) !important;
}
.lj-navr .wp-block-button__link:hover {
  background: var(--wp--preset--color--green) !important; color: #F3EFE4 !important;
}

/* =========================================================
   Menu principal (Apparence → Menus) — style maquette
   ========================================================= */
.lj-nav { position: relative; }
nav.lj-nav-menu, .lj-nav .lj-nav { }
.lj-menu {
  list-style: none !important; display: flex !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: center !important;
  gap: 12px !important; margin: 0 !important; padding: 0 !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 11px !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; font-weight: 650 !important;
  white-space: nowrap !important;
}
.lj-menu a { color: #3f4438 !important; text-decoration: none !important; }
.lj-menu a:hover, .lj-menu .current-menu-item > a { color: var(--wp--preset--color--green) !important; }

/* sous-menus déroulants */
.lj-menu li { position: relative; }
/* pont invisible et TOUJOURS présent (pas soumis à opacity/visibility) entre
   l'item de menu et le panneau déroulant : sans lui, la souris quitte le <li>
   pendant la traversée des 15px d'écart et le sous-menu se ferme avant d'être
   atteint. Ce pseudo-élément appartient au <li> (pas au <ul>), donc il garde
   le <li> "survolé" pendant toute la traversée. */
.lj-menu li.menu-item-has-children::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 15px;
}
.lj-menu ul {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; top: calc(100% + 15px); left: 0;
  min-width: 200px; background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  box-shadow: 0 18px 40px -28px rgba(40,50,35,.5);
  opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 40;
}
.lj-menu li:hover > ul { opacity: 1; visibility: visible; }
.lj-menu ul li { display: block; }
.lj-menu ul a {
  display: block; padding: 9px 18px 9px 22px !important; letter-spacing: .08em !important;
  white-space: nowrap; font-size: 11.5px !important; font-weight: 500 !important;
  text-transform: uppercase !important; color: var(--wp--preset--color--muted) !important;
}
.lj-menu ul a:hover { color: var(--wp--preset--color--green) !important; }
.lj-menu-empty { font-size: 11.5px; color: var(--wp--preset--color--muted); font-style: italic; }

/* =========================================================
   MENU MOBILE — bouton hamburger + panneau déroulant
   Interrupteur en CSS pur (case à cocher masquée), même principe
   que les onglets .lj-acces-tabs plus bas : aucun script requis.
   Le panneau contient le menu ET le bloc langue/réserver, dans
   l'ordre où ils apparaissent déjà dans le DOM.
   ========================================================= */
.lj-nav-toggle-input {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.lj-nav-toggle { display: none; }

@media (max-width: 900px) {
  .lj-nav { position: relative !important; }

  /* bouton */
  .lj-nav-toggle {
    display: flex !important; flex-direction: column !important; align-items: flex-end !important;
    justify-content: center !important; gap: 5px !important;
    width: 34px !important; height: 34px !important; flex: 0 0 auto !important;
    margin-left: auto !important; cursor: pointer !important;
  }
  .lj-nav-toggle__bar {
    display: block !important; width: 24px !important; height: 2px !important;
    background: var(--wp--preset--color--contrast) !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }
  .lj-nav-toggle-input:checked ~ .lj-nav-toggle .lj-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .lj-nav-toggle-input:checked ~ .lj-nav-toggle .lj-nav-toggle__bar:nth-child(2) { opacity: 0 !important; }
  .lj-nav-toggle-input:checked ~ .lj-nav-toggle .lj-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* panneau : masqué par défaut, affiché quand la case est cochée */
  .lj-nav-collapse {
    display: none !important;
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important;
    background: var(--wp--preset--color--header-green) !important;
    padding: 8px 4px 28px !important; gap: 22px !important;
    box-shadow: 0 18px 40px -28px rgba(40,50,35,.55) !important;
    max-height: calc(100vh - 80px) !important; overflow-y: auto !important;
    z-index: 60 !important;
  }
  .lj-nav-toggle-input:checked ~ .lj-nav-collapse { display: flex !important; }

  /* le menu passe en liste verticale, sous-menus dépliés en ligne */
  .lj-nav-collapse nav.lj-nav-menu,
  .lj-nav-collapse .wp-block-shortcode,
  .lj-nav-collapse nav { flex: 0 0 auto !important; justify-content: flex-start !important; width: 100% !important; }
  .lj-menu {
    flex-direction: column !important; align-items: flex-start !important;
    flex-wrap: wrap !important; gap: 2px !important; font-size: 13px !important;
    width: 100% !important; white-space: normal !important;
  }
  .lj-menu > li { width: 100%; }
  .lj-menu a { display: block !important; padding: 12px 20px !important; }
  .lj-menu ul {
    position: static !important; transform: none !important; min-width: 0 !important;
    opacity: 1 !important; visibility: visible !important; box-shadow: none !important; border: none !important;
    padding: 0 0 6px 20px !important; background: transparent !important;
  }
  .lj-menu ul a {
    padding: 8px 0 8px 16px !important; font-size: 12px !important; font-weight: 500 !important;
    text-transform: none !important; color: var(--wp--preset--color--muted) !important;
    border-left: 2px solid var(--wp--preset--color--line) !important;
  }

  /* langue + réserver, empilés sous le menu */
  .lj-navr {
    flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
    width: 100% !important; gap: 16px !important;
    padding: 18px 20px 0 !important; border-top: 1px solid rgba(38,33,25,.12) !important;
  }
  .lj-navr .wp-block-button__link,
  .lj-resa a { display: block !important; width: 100% !important; text-align: center !important; }
}

/* =========================================================
   Polylang — sélecteur de langue dans le menu (texte, pas drapeaux)
   ========================================================= */
/* Polylang — sélecteur de langue dans le menu : DRAPEAUX visibles.
   (Polylang doit être réglé pour afficher les drapeaux : Apparence → Menus
   → élément « Sélecteur de langue » → cocher « Afficher les drapeaux ».
   Le CSS ne peut montrer que ce que Polylang génère.) */
.lj-menu .lang-item a { letter-spacing: .14em !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.lj-menu .lang-item img { display: inline-block !important; width: 18px !important; height: auto !important; vertical-align: middle !important; }
/* si on ne veut QUE le drapeau, on masque le nom de langue */
.lj-menu .lang-item a .lj-lang-name { display: none; }
.lj-menu .lang-item.current-lang > a { color: var(--wp--preset--color--contrast) !important; font-weight: 700 !important; }

/* =========================================================
   MAQUETTE OPTION 9
   Référence : système de design Les Joséphines (repris de l'option validée)

   ── DEUX RÈGLES D'OR ────────────────────────────────────
   1. Ne JAMAIS écrire `margin: … !important` (raccourci) sur un bloc placé
      dans une mise en page « contrainte » de WordPress. WordPress centre les
      blocs avec `margin-left/right: auto !important`. Le raccourci `margin`
      remet ces marges à 0 : le bloc se colle à gauche et le texte paraît
      « centré » dans une boîte elle-même décalée.
      → uniquement `margin-block-start` / `margin-block-end`.
   2. Le centrage est REPOSÉ explicitement (margin-left/right: auto !important)
      sur tous les blocs concernés — filet de sécurité contre le CSS des
      extensions (WPBakery, Hotel Booking…) chargé après le thème.

   ── RYTHME VERTICAL ─────────────────────────────────────
   Une seule échelle, identique dans TOUTES les sections (hero, intro,
   entêtes, CTA). À régler ici et nulle part ailleurs.
   ========================================================= */
:root {
  --lj-gap-eyebrow: 22px;   /* intitulé laiton   →  titre    */
  --lj-gap-rule:    30px;   /* titre             →  filet    */
  --lj-gap-lead:    28px;   /* titre             →  chapô    */
  --lj-gap-head:    64px;   /* entête de section →  contenu  */
  --lj-content:     1068px; /* maquette : .wrap 1180px − 2×56px */
}

/* --- rythme des sections (maquette : section{padding:118px 0}) --- */
.lj-sec { padding-block: 118px !important; }
.lj-cta { padding-block: 104px !important; }

/* =========================================================
   CENTRAGE — margin-left/right: auto reposés explicitement
   ========================================================= */
.lj-sec > *,
.lj-cta > *,
.lj-head > *,
.lj-hero .wp-block-cover__inner-container > *,
.lj-kicker,
.lj-eyebrow,
.lj-h2,
.lj-hero__title,
.lj-lead,
.lj-rule,
.lj-booking,
.lj-cta__btn {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* colonne utile : 1068 px — la page déjà posée est corrigée sans réinsérer
   le pattern (qui porte la même valeur en contentSize) */
.lj-sec > *,
.lj-cta > * { max-width: var(--lj-content) !important; }

/* les blocs alignés à GAUCHE ne doivent pas être recentrés */
.lj-intro .wp-block-column > *,
.lj-room > *,
.lj-room__media > *,
.lj-loc__info > *,
.lj-loc__map > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* conteneurs centrés */
.lj-head,
.lj-cta,
.lj-hero .wp-block-cover__inner-container { text-align: center; }

/* entête de section — maquette : .center-head{max-width:640px} */
.lj-head {
  max-width: 640px !important;
  margin-block-end: var(--lj-gap-head) !important;
}

/* =========================================================
   Intitulés (eyebrows) — 11 px, laiton, interlettrage .34em
   ========================================================= */
.lj-eyebrow,
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 11px !important;
  letter-spacing: .34em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--brass) !important;
  line-height: 1.4 !important;
  /* ↓ le MÊME écart intitulé → titre dans toutes les sections */
  margin-block: 0 var(--lj-gap-eyebrow) !important;
}
/* l'interlettrage ajoute une chasse après la dernière lettre : un texte
   centré paraît décalé d'une demi-chasse à gauche. On compense. */
.lj-head .lj-eyebrow,
.lj-cta .lj-eyebrow,
.lj-hero .lj-eyebrow,
.lj-eyebrow.has-text-align-center,
.is-style-eyebrow.has-text-align-center { text-indent: .17em; }

.lj-eyebrow--light  { color: #D9C49B !important; }
.lj-cta .lj-eyebrow { color: #C4A876 !important; }

/* =========================================================
   Titres de section
   ========================================================= */
.lj-h2 {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  margin-block: 0 !important;
}
.lj-head .lj-h2 { font-size: clamp(2rem, 3.1vw, 2.75rem) !important; }   /* 44 px */
.lj-h2--light   { color: #F5F1E6 !important; }

/* =========================================================
   Filet 54 × 1 px laiton — même écart titre → filet partout
   ========================================================= */
.wp-block-separator.lj-rule,
.lj-rule {
  width: 54px !important; max-width: 54px !important; height: 1px !important;
  border: 0 !important;
  background: var(--wp--preset--color--brass) !important;
  opacity: 1 !important;
  margin-block: var(--lj-gap-rule) 0 !important;
}
.lj-rule--light { background: #D9C49B !important; }

/* =========================================================
   HERO — même rythme que les entêtes de section
   ========================================================= */
.lj-hero .lj-kicker {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-style: italic !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  color: #D9C49B !important;
  margin-block: 0 18px !important;
}
.lj-hero__title {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 4.6vw, 4.125rem) !important;   /* 66 px */
  line-height: 1.06 !important;
  letter-spacing: .005em !important;
  color: #F6F2E9 !important;
  max-width: 820px !important;
  margin-block: 0 !important;
  text-shadow: 0 1px 24px rgba(20, 26, 20, .35);
}
.lj-lead {
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 350 !important;
  color: #E7EAE2 !important;
  max-width: 560px !important;
  margin-block: var(--lj-gap-lead) 0 !important;
}
.lj-hero .lj-rule { margin-block: 36px 0 !important; }
.lj-booking       { margin-block: 44px 0 !important; }

/* =========================================================
   INTRO (aligné à GAUCHE)
   La maquette est une GRILLE : .intro{grid-template-columns:1fr 1fr}.
   WordPress fait du FLEX : sans `flex-basis: 0`, chaque colonne se
   dimensionne sur son contenu — la colonne de texte (longue) écrase
   la colonne image. `flex-basis:0 + flex-grow:1` = l'équivalent exact
   de `1fr 1fr`. Le !important passe devant le style inline `flex-basis:55%`
   de l'ancien markup : la page en ligne est corrigée sans réinsertion.
   ========================================================= */
.lj-intro__cols { gap: 80px !important; }
.lj-intro__cols > .wp-block-column {
  flex-basis: 0 !important;
  flex-grow: 1 !important;
}
.lj-intro .lj-eyebrow { text-indent: 0; }   /* écart hérité : var(--lj-gap-eyebrow) */
.lj-intro .lj-h2 {
  font-size: clamp(1.9rem, 3vw, 2.625rem) !important;      /* 42 px */
  line-height: 1.12 !important;
  margin-block: 0 24px !important;
}
.lj-body {
  font-size: 15px !important;
  line-height: 1.85 !important;
  font-weight: 350 !important;
  color: #55564b !important;
  margin-block: 0 18px !important;
}
.lj-sign {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-style: italic !important;
  font-size: 19px !important;
  line-height: 1.4 !important;
  color: var(--wp--preset--color--green) !important;
  margin-block: 8px 0 !important;
}
.lj-intro__img { margin-block: 0 !important; }
.lj-intro__img img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }

/* =========================================================
   LOGEMENTS — maquette : .grid4{grid-template-columns:repeat(4,1fr)}
   Même raison que l'intro : flex-basis:0 pour des colonnes strictement
   égales, quel que soit le contenu de chaque carte.
   ========================================================= */
.lj-rooms { gap: 28px !important; }
.lj-rooms > .wp-block-column {
  flex-basis: 0 !important;
  flex-grow: 1 !important;
}
.lj-room__media { position: relative !important; margin-block: 0 20px !important; }
.lj-room__img { margin-block: 0 !important; }
.lj-room__img img { width: 100% !important; height: 230px !important; object-fit: cover !important; display: block !important; }
.lj-room__img a { display: block !important; text-decoration: none !important; }
.lj-room__size {
  position: absolute !important; top: 14px !important; left: 14px !important;
  margin-block: 0 !important;
  background: rgba(251, 250, 247, .94) !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 600 !important; font-size: 15px !important; line-height: 1.2 !important;
  padding: 5px 12px !important;
  color: var(--wp--preset--color--green) !important;
}
.lj-room__title {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 600 !important; font-size: 21px !important; line-height: 1.15 !important;
  margin-block: 0 !important;
  color: var(--wp--preset--color--contrast) !important;
}
.lj-room__title a {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
}
.lj-room__meta {
  font-size: 12px !important; letter-spacing: .04em !important;
  color: var(--wp--preset--color--brass) !important;
  margin-block: 8px 9px !important;
}
.lj-room__desc {
  font-size: 12.5px !important; line-height: 1.6 !important;
  color: #55564b !important; margin-block: 0 14px !important;
}
.lj-room__link { margin-block: 0 !important; }
.lj-room__link a {
  font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--green) !important;
  border-bottom: 1px solid var(--wp--preset--color--brass) !important;
  padding-bottom: 3px !important;
  text-decoration: none !important;
}

/* =========================================================
   AVIS
   ========================================================= */
/* La ligne « Booking · Airbnb · Tripadvisor » est retirée du pattern.
   On la masque aussi en CSS pour qu'elle disparaisse sur la page déjà
   en ligne (non réinsérée), sans laisser d'espace vide. */
.lj-reviews__summary { display: none !important; }

/* Le widget WP Social Ninja apporte son PROPRE espace en haut. On l'annule,
   puis on garde EXACTEMENT le même écart entête→contenu que les autres
   sections (var --lj-gap-head = 64 px, comme au-dessus de « Nos studios »
   et sous « Accès »). */
.lj-reviews .lj-head { margin-block-end: 34px !important; } /* 34px + les 30px de marge native du plugin = 64px, comme les autres sections */
.lj-reviews .wp-block-shortcode { margin-block: 0 !important; }
.lj-reviews .wp-block-shortcode > *:first-child,
.lj-reviews [class*="wpsr"]:first-child,
.lj-reviews [class*="wpsn"]:first-child { /* margin-top: 0 !important; */ padding-top: 0 !important; }

/* =========================================================
   ACCÈS
   Colonnes 50 / 50 (demande client). La boîte bordée CLIPPE son
   contenu (overflow:hidden) : la carte ne peut plus déborder du cadre,
   quels que soient les arrondis ou surcouches de l'embed Google.
   Le fond blanc est posé sur la COLONNE **et** sur le conteneur : le
   panneau de texte reste blanc même si la page n'est pas réinsérée.
   ========================================================= */
.lj-loc,
.wp-block-columns.lj-loc {
  gap: 0 !important;
  border: 0 !important;
  background-color: var(--wp--preset--color--white) !important;
  align-items: stretch !important;
  overflow: hidden !important;      /* clippe toujours la carte */
  margin-block: 0 !important;
}
/* 50 / 50 — méthode blindée.
   WordPress génère pour ce bloc une règle conteneur du type
   `.wp-container-core-columns-is-layout-XXXX.wp-block-columns > .wp-block-column
    { flex-basis:0; flex-grow:1; }` — plus spécifique que mes classes, elle
   redistribue l'espace de façon inégale (la colonne texte a du contenu, la
   colonne carte non → contenu absolu de largeur nulle).
   On la neutralise : largeur FIXE + flex:none, et une spécificité qui la
   dépasse (double classe sur la colonne + contexte .lj-loc). */
.lj-loc > .lj-loc__info,
.lj-loc > .lj-loc__map,
.wp-block-columns.lj-loc > .wp-block-column.lj-loc__info,
.wp-block-columns.lj-loc > .wp-block-column.lj-loc__map {
  flex: 0 0 50% !important;   /* pas de grow/shrink : la largeur ne bouge plus */
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.lj-loc__info,
.wp-block-column.lj-loc__info {
  background-color: var(--wp--preset--color--white) !important;
  padding: 64px 58px !important;
}
.lj-loc__title {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  color: var(--wp--preset--color--contrast) !important;
  margin-block: 0 26px !important;
}
.lj-loc__list { list-style: none !important; margin-block: 0 !important; padding: 0 !important; }
.lj-loc__list li {
  display: flex !important; gap: 16px !important;
  padding: 15px 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--line) !important;
  font-size: 14px !important; line-height: 1.5 !important;
  color: #4c4d42 !important;
}
.lj-loc__list li strong,
.lj-loc__list li b {
  min-width: 88px; flex: none;
  color: var(--wp--preset--color--green) !important;
  font-weight: 700 !important;
}
.lj-loc__list li:last-child { border-bottom: 0 !important; }

.lj-loc__map,
.wp-block-column.lj-loc__map {
  padding: 0 !important;
  display: flex !important;
  min-height: 470px !important;     /* fixe la hauteur de la rangée */
}
.lj-loc__map > * { flex: 1 1 auto; margin-block: 0 !important; }
/* la carte remplit exactement sa colonne. IMPORTANT : .lj-map doit avoir une
   hauteur propre, sinon l'iframe (position:absolute; height:100%) se calcule
   sur une hauteur nulle et la carte disparaît. */
.lj-map { position: relative; width: 100%; min-height: 470px; align-self: stretch; }
.lj-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Accès (accueil) — 3 boutons de résidence + 1 carte à la fois, dans le même
   espace carré que l'ancienne carte unique. Bascule en CSS pur (case à cocher
   masquée), même principe que .lj-acces-tabs sur la page Accès. */
.lj-loc-mapswitch { display: flex; flex-direction: column; width: 100%; height: 100%; }
.lj-loc-mapswitch > input[type="radio"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.lj-loc-mapswitch__nav { display: flex; gap: 0; margin-bottom: 0; flex: 0 0 auto; }
.lj-loc-mapswitch__nav label {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0; text-align: center; cursor: pointer;
  padding: 12px 8px; font-family: var(--wp--preset--font-family--body);
  line-height: 1.3; color: var(--wp--preset--color--green);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line); border-radius: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.lj-loc-mapswitch__nav label:hover { z-index: 2; border-color: var(--wp--preset--color--brass); }
.lj-loc-mapswitch__name { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.lj-loc-mapswitch__addr { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .01em; margin-top: 2px; opacity: .85; }
#lj-loc-map-1:checked ~ .lj-loc-mapswitch__nav label[for="lj-loc-map-1"],
#lj-loc-map-2:checked ~ .lj-loc-mapswitch__nav label[for="lj-loc-map-2"],
#lj-loc-map-3:checked ~ .lj-loc-mapswitch__nav label[for="lj-loc-map-3"] {
  position: relative; z-index: 3;
  background: var(--wp--preset--color--green); color: #F5EEDF; border-color: var(--wp--preset--color--green);
}
.lj-loc-mapswitch__stage { position: relative; flex: 1 1 auto; min-height: 0; }
.lj-loc-mapswitch__panel { position: absolute; inset: 0; display: none; }
.lj-loc-mapswitch__panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
#lj-loc-map-1:checked ~ .lj-loc-mapswitch__stage .lj-loc-mapswitch__panel--1,
#lj-loc-map-2:checked ~ .lj-loc-mapswitch__stage .lj-loc-mapswitch__panel--2,
#lj-loc-map-3:checked ~ .lj-loc-mapswitch__stage .lj-loc-mapswitch__panel--3 { display: block; }
@media (max-width: 480px) {
  .lj-loc-mapswitch__nav { gap: 0; }
  .lj-loc-mapswitch__nav label { padding: 9px 4px; }
  .lj-loc-mapswitch__name, .lj-loc-mapswitch__addr { font-size: 8.5px; letter-spacing: .01em; }
}


/* =========================================================
   CTA
   ========================================================= */
.lj-cta .lj-h2 {
  font-size: clamp(2rem, 3.2vw, 2.875rem) !important;   /* 46 px */
  line-height: 1.1 !important;
  max-width: 640px !important;
}
.lj-cta .lj-rule  { background: #C4A876 !important; }
.lj-cta__btn      { text-align: center; margin-block: 36px 0 !important; }
.lj-cta__btn a {
  display: inline-block;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: #F5F1E6 !important;
  border: 1px solid rgba(245, 241, 230, .55);
  padding: 15px 34px;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.lj-cta__btn a:hover { background: rgba(245, 241, 230, .1); border-color: #F5F1E6; }

/* =========================================================
   Bouton « Réserver » de l'en-tête
   ========================================================= */
.lj-resa a {
  display: inline-block;
  min-width: 108px; text-align: center; box-sizing: border-box;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--wp--preset--color--green) !important;
  border: 1px solid var(--wp--preset--color--green);
  padding: 9px 18px; text-decoration: none !important; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.lj-resa a:hover { background: var(--wp--preset--color--green); color: #F3EFE4 !important; }

/* Drapeaux de langue en position fixe (à droite, hors menu) */
.lj-langs { list-style: none !important; display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; }
.lj-langs li { margin: 0 !important; padding: 0 !important; }
.lj-langs li::before { display: none !important; content: none !important; }
.lj-langs a { display: inline-flex !important; align-items: center; text-decoration: none !important; opacity: .5; transition: opacity .15s ease; }
.lj-langs a:hover, .lj-langs .current-lang > a { opacity: 1; }
.lj-langs img { display: block; width: 20px; height: auto; border-radius: 2px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .lj-intro__cols { gap: 48px !important; }
  .lj-loc__info, .wp-block-column.lj-loc__info { padding: 48px 40px !important; }
}
@media (max-width: 900px) {
  /* Intro (accueil) : texte / image → empilés, chacun 100% */
  .lj-intro__cols > .wp-block-column { flex-basis: 100% !important; flex-grow: 0 !important; }
  /* Logements (accueil) : grille 4 → 2 colonnes */
  .lj-rooms > .wp-block-column { flex-basis: calc(50% - 14px) !important; flex-grow: 0 !important; }
}
@media (max-width: 781px) {
  :root { --lj-gap-head: 44px; }
  .lj-reviews .lj-head { margin-block-end: 14px !important; } /* 14px + 30px du plugin = 44px, comme les autres sections en mobile */
  .lj-sec { padding-block: 64px !important; }
  .lj-cta { padding-block: 64px !important; }
  .lj-intro__cols { gap: 32px !important; }
  .lj-intro__img img { aspect-ratio: 1 / 1; height: auto; }
  .lj-rooms { gap: 32px !important; }
  .lj-loc { flex-wrap: wrap !important; }
  /* Accès : la barre de spécificité (double classe) de la règle 50/50 doit être
     égalée ici, sinon elle continue de gagner et le bloc ne s'empile jamais. */
  .lj-loc > .lj-loc__info,
  .lj-loc > .lj-loc__map,
  .wp-block-columns.lj-loc > .wp-block-column.lj-loc__info,
  .wp-block-columns.lj-loc > .wp-block-column.lj-loc__map {
    flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important;
  }
  .lj-loc, .wp-block-columns.lj-loc { background-color: transparent !important; }
  .lj-loc__info, .wp-block-column.lj-loc__info { padding: 36px 26px !important; }
  .lj-map { min-height: 320px; }
  .lj-loc__map, .wp-block-column.lj-loc__map { min-height: 380px !important; margin-top: 40px !important; }
  .lj-lead { font-size: 15px !important; }
  /* +30px de respiration en haut ET en bas sur mobile uniquement. Le contenu
     étant centré verticalement (align-items:center du bloc cover), un padding
     égal n'aurait aucun effet net (le centrage l'absorbe) — il faut agrandir
     la hauteur totale de la bannière de 2×30px pour que les deux écarts
     grandissent chacun de 30px, en restant égaux entre eux. */
  .lj-hero { min-height: calc(88vh + 60px) !important; }
}
@media (max-width: 560px) {
  .lj-rooms > .wp-block-column { flex-basis: 100% !important; }
}

/* =========================================================
   PAGE « NOTRE RÉSIDENCE » / « OUR RESIDENCE »
   Structure de la maquette notre-residence.html, MAIS avec la
   palette verrouillée actuelle (crème, vert anglais, laiton).
   Réutilise le rythme et les variables des autres sections.
   ========================================================= */

/* bandeau titre de page */
/* bandeau titre de page — Option D : fond blanc chaud + filet laiton bas.
   Sépare visuellement le titre de la section Welcome (crème) qui suit,
   de façon discrète (registre classique/bourgeois). Réutilisable sur les
   autres pages intérieures via .lj-pagehead-sec. */
.lj-pagehead-sec {
  background-color: var(--wp--preset--color--white) !important;
}
.lj-pagehead { text-align: center; max-width: 760px; margin-inline: auto !important; }
.lj-pagehead .lj-eyebrow { margin-block: 0 var(--lj-gap-eyebrow) !important; text-indent: .17em; }
.lj-pagehead .lj-h1 {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important;
  font-size: clamp(2.6rem, 4.4vw, 3.5rem) !important;
  line-height: 1.06 !important; letter-spacing: .005em !important;
  color: var(--wp--preset--color--contrast) !important;
  margin-block: 0 !important;
}
.lj-pagehead .lj-lead {
  color: #55564b !important; max-width: 660px !important;
  margin-block: 24px 0 !important;
}

/* WELCOME — deux colonnes texte / image (comme l'intro d'accueil) */
.lj-welcome__cols { gap: 64px !important; }
.lj-welcome__cols > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }
.lj-welcome .lj-eyebrow { text-indent: 0; }
.lj-welcome .lj-h2 {
  font-size: clamp(1.9rem, 3vw, 2.375rem) !important; line-height: 1.12 !important;
  margin-block: 0 24px !important;
}
.lj-welcome__img { margin-block: 0 !important; }
.lj-welcome__img img { width: 100%; height: 460px; object-fit: cover; display: block; }

/* ÉQUIPEMENT — grille 2 colonnes à puces laiton */
.lj-equip {
  list-style: none !important; margin: 0 auto !important; padding: 0 !important;
  max-width: 900px !important;
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px 40px !important;
}
.lj-equip li {
  list-style: none !important; position: relative !important;
  padding-left: 20px !important; margin: 0 !important;
  font-size: 14.5px !important; line-height: 1.55 !important; color: #4d4e44 !important;
}
.lj-equip li::before {
  content: "" !important; position: absolute !important; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wp--preset--color--brass) !important;
}
.lj-services {
  text-align: center !important; margin-block: 44px 0 !important;
  font-size: 14px !important; color: var(--wp--preset--color--muted) !important; letter-spacing: .02em !important;
}
.lj-services strong, .lj-services b { color: var(--wp--preset--color--contrast) !important; }

/* TRIO — Solo / couple / famille */
.lj-trio { gap: 30px !important; }
.lj-trio > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }
.lj-stay { text-align: center !important; padding: 0 12px !important; }
.lj-stay .lj-stay__ic { margin: 0 auto 16px !important; display: block; color: var(--wp--preset--color--brass) !important; }
.lj-stay .lj-stay__ic svg { stroke: var(--wp--preset--color--brass) !important; }
.lj-stay__t {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 600 !important; font-size: 24px !important; margin-block: 0 12px !important;
  color: var(--wp--preset--color--contrast) !important;
}
.lj-stay p { font-size: 14px !important; color: #55564b !important; line-height: 1.65 !important; margin: 0 !important; }

/* À PROXIMITÉ — 3 cartes image avec libellé */
.lj-near { gap: 26px !important; margin-block: 0 44px !important; }
.lj-near > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }
.lj-near__card {
  position: relative !important; height: 260px !important; overflow: hidden !important;
  display: flex !important; align-items: flex-end !important; color: #fff !important;
  margin: 0 !important; background-size: cover !important; background-position: center !important;
}
.lj-near__card::after {
  content: "" !important; position: absolute !important; inset: 0;
  background: linear-gradient(180deg, rgba(30,39,31,.15), rgba(30,39,31,.72));
}
.lj-near__lbl {
  position: relative !important; z-index: 1; padding: 24px 26px !important;
  display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important;
}
.lj-near__lbl svg { stroke: #E7D9BC; flex: none; }
.lj-near__lbl span {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 600 !important; font-size: 23px !important; letter-spacing: .02em !important;
}
.lj-near__cta { text-align: center !important; margin-block: 0 !important; }
.lj-near__cta a {
  display: inline-block !important;
  font-size: 11.5px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  font-weight: 600 !important; color: var(--wp--preset--color--green) !important;
  border: 1px solid var(--wp--preset--color--green) !important; padding: 14px 30px !important;
  text-decoration: none !important;
}
.lj-near__cta a:hover { background: var(--wp--preset--color--green) !important; color: #F3EFE4 !important; }

@media (max-width: 900px) {
  .lj-welcome__cols { gap: 40px !important; }
  .lj-welcome__cols > .wp-block-column { flex-basis: 100% !important; flex-grow: 0 !important; }
  .lj-welcome__img img { height: 340px; }
  .lj-trio > .wp-block-column { flex-basis: calc(50% - 15px) !important; flex-grow: 0 !important; }
  .lj-near > .wp-block-column { flex-basis: calc(50% - 13px) !important; flex-grow: 0 !important; }
}
@media (max-width: 781px) {
  .lj-equip { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .lj-trio > .wp-block-column,
  .lj-near > .wp-block-column { flex-basis: 100% !important; }
}

/* =========================================================
   PAGE APPARTEMENT (type « Appartements » / slug residence)
   Structure de appartement-60m2.html, palette verrouillée actuelle.
   ========================================================= */

/* fil d'ariane */
.lj-crumb { text-align: center; font-size: 11.5px; letter-spacing: .05em; color: var(--wp--preset--color--muted); margin-block: 0 18px !important; }
.lj-crumb a { color: var(--wp--preset--color--muted) !important; }
.lj-crumb a:hover { color: var(--wp--preset--color--green) !important; }
.lj-crumb .sep { margin: 0 8px; color: var(--wp--preset--color--brass); }

/* bandeau titre appartement (fond blanc chaud, comme Option D) */
.lj-apthead-sec { background-color: var(--wp--preset--color--white) !important; }
.lj-apthead { text-align: center; max-width: 820px; margin-inline: auto !important; }
.lj-apthead .lj-eyebrow { margin-block: 0 16px !important; text-indent: .17em; }
.lj-apthead .lj-h1 {
  font-family: var(--wp--preset--font-family--heading) !important; font-weight: 500 !important;
  font-size: clamp(2.3rem, 4vw, 3.1rem) !important; line-height: 1.07 !important;
  color: var(--wp--preset--color--contrast) !important; margin-block: 0 !important;
}
.lj-apthead .lj-specs {
  margin-block: 16px 0 !important; font-size: 14px; letter-spacing: .04em;
  color: var(--wp--preset--color--muted);
}
.lj-apthead .lj-specs span { color: var(--wp--preset--color--brass); margin: 0 8px; }

/* galerie : 1 grande + 2 petites */
/* Galerie appartements : MOSAÏQUE (une image vedette + tuiles), calibrée par
   nombre de photos pour toujours remplir un rectangle plein — aucune image
   orpheline. Le JS pose la classe .lj-gallery--n{N} (+ --mosaic / --odd) et
   aplatit n'importe quel balisage existant, donc actif sans reconstruire la page. */
.lj-gallery { margin-block: 0 !important; }
.lj-gallery .lj-gallery__item {
  margin: 0 !important; overflow: hidden !important; position: relative;
}
.lj-gallery .lj-gallery__item img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  cursor: zoom-in; transition: filter .25s ease;
}
.lj-gallery .lj-gallery__item img:hover { filter: brightness(1.04); }

/* --- Mosaïque (bureau) --- */
.lj-gallery--mosaic {
  --lj-row: 210px;
  display: grid !important; gap: 14px !important;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--lj-row);
  grid-auto-flow: row;
}
@media (max-width: 1000px) { .lj-gallery--mosaic { --lj-row: 176px; } }

/* image vedette = 2×2, sauf n=2 */
.lj-gallery--mosaic:not(.lj-gallery--n2) .lj-gallery__item:nth-child(1) {
  grid-column: span 2; grid-row: span 2;
}
/* n=1 : pleine largeur */
.lj-gallery--n1 { grid-template-columns: 1fr; }
.lj-gallery--n1 .lj-gallery__item:nth-child(1) { grid-column: span 1 !important; grid-row: span 2; }
/* n=2 : deux colonnes égales */
.lj-gallery--n2 { grid-template-columns: repeat(2, 1fr); }
/* n=3 & n=6 : grille 3 colonnes */
.lj-gallery--n3, .lj-gallery--n6 { grid-template-columns: repeat(3, 1fr); }
/* n=4 : vedette + une tuile large en haut à droite */
.lj-gallery--n4 .lj-gallery__item:nth-child(2) { grid-column: span 2; }
/* n=7 : tuile large en haut à droite + une large en bas à droite */
.lj-gallery--n7 .lj-gallery__item:nth-child(2) { grid-column: span 2; }
.lj-gallery--n7 .lj-gallery__item:nth-child(7) { grid-column: span 2; }
/* n=8 : une large en bas à droite pour compléter la 3e rangée */
.lj-gallery--n8 .lj-gallery__item:nth-child(8) { grid-column: span 2; }
/* n=5 & n=9 : vedette 2×2 + tuiles 1×1 (remplissage exact, rien à ajouter) */

/* --- Repli « rangées justifiées » (JS) pour N > 9 --- */
.lj-gallery--flow {
  display: flex !important; flex-wrap: wrap !important;
  gap: 14px !important; align-items: flex-start !important;
}
.lj-gallery--flow .lj-gallery__item { flex: 0 0 auto; width: calc(33.333% - 10px); height: 240px; }

/* --- Mobile : 2 colonnes, vedette pleine largeur si N impair (jamais d'orphelin) --- */
@media (max-width: 640px) {
  .lj-gallery--mosaic {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 148px !important;
  }
  .lj-gallery--mosaic .lj-gallery__item {
    grid-column: auto !important; grid-row: auto !important;
  }
  .lj-gallery--mosaic.lj-gallery--odd .lj-gallery__item:nth-child(1) {
    grid-column: span 2 !important;
  }
}

/* description en deux colonnes + encadré pratique */
.lj-desc__grid { gap: 56px !important; align-items: flex-start !important; }
.lj-desc__grid > .wp-block-column:first-child { flex-basis: 0 !important; flex-grow: 1.7 !important; }
.lj-desc__grid > .wp-block-column:last-child { flex-basis: 0 !important; flex-grow: 1 !important; }
.lj-desc .lj-eyebrow { text-indent: 0; margin-block: 0 var(--lj-gap-eyebrow) !important; }
.lj-desc .lj-h2 { font-size: clamp(1.7rem, 2.6vw, 2.125rem) !important; line-height: 1.14 !important; margin-block: 0 20px !important; }
.lj-desc .lj-body { font-size: 15px !important; line-height: 1.8 !important; color: #55564b !important; margin-block: 0 16px !important; }
.lj-equip__t {
  font-family: var(--wp--preset--font-family--heading) !important; font-weight: 600 !important;
  font-size: 20px !important; margin-block: 30px 16px !important; color: var(--wp--preset--color--contrast) !important;
}
.lj-equip-list { list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 30px !important; }
.lj-equip-list li { list-style: none !important; position: relative; padding-left: 20px !important;
  font-size: 14px !important; line-height: 1.5 !important; color: #4d4e44 !important; margin: 0 !important; }
.lj-equip-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--wp--preset--color--brass); }

/* encadré « infos pratiques » */
.lj-brief {
  background: var(--wp--preset--color--white) !important;
  border: 1px solid var(--wp--preset--color--line) !important;
  padding: 34px 32px !important;
}
.lj-brief__t {
  font-family: var(--wp--preset--font-family--heading) !important; font-weight: 600 !important;
  font-size: 20px !important; margin-block: 0 18px !important; color: var(--wp--preset--color--contrast) !important;
}
.lj-brief dl { margin: 0 !important; }
.lj-brief .lj-brief__row { display: flex !important; justify-content: space-between !important; gap: 16px;
  padding: 11px 0 !important; border-bottom: 1px solid var(--wp--preset--color--line) !important; }
.lj-brief .lj-brief__row:last-of-type { border-bottom: 0 !important; }
.lj-brief dt { font-size: 12.5px !important; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wp--preset--color--muted) !important; font-weight: 600 !important; margin: 0 !important;
  white-space: nowrap !important; flex-shrink: 0 !important; word-break: keep-all !important; }
.lj-brief dd { font-size: 13.5px !important; color: var(--wp--preset--color--contrast) !important;
  text-align: right; margin: 0 !important; }
.lj-brief__cta {
  display: block !important; text-align: center !important; margin-top: 22px !important;
  font-size: 11.5px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  font-weight: 600 !important; color: #F3EFE4 !important;
  background: var(--wp--preset--color--green) !important; padding: 15px 20px !important;
  text-decoration: none !important;
}
.lj-brief__cta:hover { background: var(--wp--preset--color--green-dark) !important; }
.lj-brief__note { text-align: center; font-size: 11.5px !important; color: var(--wp--preset--color--muted) !important; margin-top: 12px !important; }

/* grille d'équipements (icônes) */
.lj-amen {
  list-style: none !important; margin: 0 auto !important; padding: 0 !important;
  max-width: 1068px !important;
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important;
}
.lj-amen li {
  list-style: none !important; text-align: center !important; padding: 28px 16px !important;
  background: var(--wp--preset--color--white) !important;
  border: 1px solid var(--wp--preset--color--line) !important;
  font-size: 13px !important; line-height: 1.4 !important; color: #4d4e44 !important; margin: 0 !important;
}
.lj-amen li svg { display: block; margin: 0 auto 12px; stroke: var(--wp--preset--color--brass); stroke-linecap: round; stroke-linejoin: round; }

/* autres logements (3 cartes) — réutilise le style .lj-room de l'accueil */
.lj-others { gap: 28px !important; }
.lj-others > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }

@media (max-width: 900px) {
  .lj-desc__grid { gap: 36px !important; }
  .lj-desc__grid > .wp-block-column:first-child,
  .lj-desc__grid > .wp-block-column:last-child { flex-basis: 100% !important; flex-grow: 0 !important; }
  .lj-others > .wp-block-column { flex-basis: calc(50% - 14px) !important; flex-grow: 0 !important; }
  .lj-amen { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 781px) {
  .lj-gallery { flex-wrap: wrap !important; }
  .lj-equip-list { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .lj-others > .wp-block-column { flex-basis: 100% !important; }
}

/* --- Page appartement : ajustements d'espacement --- */
/* la galerie + barre Beds24 : pas besoin des 118px de padding bas de section
   (la barre se suffit à elle-même). On réduit le bas de CETTE section. */
.lj-gallery-sec { padding-block: 96px 16px !important; }
.lj-gallery-sec .lj-booking { margin-block: 34px 0 !important; }
/* moins de vide sous la barre Beds24 : on réduit le bas de la galerie ET le
   haut de la section « Le logement » qui suit (les deux sont crème → l'espace
   mort s'additionnait : 64 + 118 ≈ 182px). Cible ≈ 80px. */
.lj-desc { padding-block-start: 64px !important; }

/* « Nos autres logements » : le plus long titre (« Appartements … 45 m² »)
   passait sur 2 lignes à 21px dans une colonne de 337px. 18px → 1 ligne,
   42px de marge. Portée limitée à cette section (l'accueil reste conforme
   à la maquette option 9). */
.lj-others-sec .lj-room__title { font-size: 18px !important; }
/* le fil d'ariane + bandeau titre : padding un peu plus compact */
.lj-apthead-sec { padding-block: 64px !important; }

/* =========================================================
   LIGHTBOX GALERIE (overlay) — sans dépendance
   ========================================================= */

.lj-lb {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 22, 18, .93);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.lj-lb.is-open { opacity: 1; visibility: visible; }
.lj-lb__stage {
  position: relative; max-width: 84vw; max-height: 86vh;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.lj-lb__img {
  max-width: 84vw; max-height: 78vh; display: block;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  opacity: 0; transform: scale(.985); transition: opacity .28s ease, transform .28s ease;
}
.lj-lb__img.is-shown { opacity: 1; transform: none; }
.lj-lb__caption {
  position: absolute; left: 0; right: 0; bottom: -40px;
  text-align: center; color: #EDE7D7;
  font-family: var(--wp--preset--font-family--body, sans-serif);
  font-size: 13px; letter-spacing: .02em;
}
.lj-lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border: 0; cursor: pointer;
  background: transparent; color: #F5EEDF; opacity: .8;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease, color .2s ease;
  z-index: 2;
}
.lj-lb__btn:hover { opacity: 1; color: var(--wp--preset--color--brass, #9F8454); }
.lj-lb__btn svg { width: 34px; height: 34px; }
.lj-lb__prev { left: 16px; }
.lj-lb__next { right: 16px; }
.lj-lb__close {
  position: absolute; top: 22px; right: 26px;
  width: 44px; height: 44px; border: 0; cursor: pointer;
  background: transparent; color: #F5EEDF; opacity: .85;
  font-size: 30px; line-height: 1; transition: opacity .2s, color .2s;
  z-index: 2;
}
.lj-lb__close:hover { opacity: 1; color: var(--wp--preset--color--brass, #9F8454); }
.lj-lb__count {
  position: absolute; top: 28px; left: 26px;
  color: #EDE7D7; opacity: .75; font-size: 12px; letter-spacing: .12em;
  font-family: var(--wp--preset--font-family--body, sans-serif);
  z-index: 2;
}
body.lj-lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .lj-lb__btn { width: 40px; height: 40px; }
  .lj-lb__btn svg { width: 26px; height: 26px; }
  .lj-lb__prev { left: 4px; } .lj-lb__next { right: 4px; }
}

/* =========================================================
   PAGES INTÉRIEURES — CONTACT / ACTIVITÉS / BLOG
   Structure des maquettes contact.html, activites.html, blog.html
   avec la palette verrouillée (crème / vert anglais / laiton) et le
   rythme des autres sections (.lj-sec = 118px, entêtes = 640px…).
   Aucun style inline dans les blocs (hors wp:html et flex-basis colonnes).
   ========================================================= */

/* filet sous le chapô du bandeau titre (page Contact) */
.lj-pagehead .lj-rule { margin-block: var(--lj-gap-rule) 0 !important; margin-left: auto !important; margin-right: auto !important; }

/* ---------------------------------------------------------
   CONTACT — formulaire + coordonnées, puis bandeau carte
   --------------------------------------------------------- */
.lj-cgrid { gap: 80px !important; align-items: flex-start !important; margin-block: 0 !important; }
.lj-cgrid > .wp-block-column:first-child { flex-basis: 0 !important; flex-grow: 1.5 !important; }
.lj-cgrid > .wp-block-column:last-child  { flex-basis: 0 !important; flex-grow: 1 !important; }
.lj-cgrid > .wp-block-column > * { margin-left: 0 !important; margin-right: 0 !important; }
/* Alignement des deux titres H2 sur une même ligne : la colonne de gauche reçoit
   le même retrait haut que le padding du panneau vert (38px), pour que
   « Nous contacter » et « Nos coordonnées » démarrent au même niveau. */
.lj-cgrid > .lj-cform { padding-top: 38px !important; }

.lj-cform__h,
.lj-cinfo__h {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important; font-size: 30px !important; line-height: 1.15 !important;
  color: var(--wp--preset--color--contrast) !important; margin-block: 0 8px !important;
}
.lj-cform__lead { font-size: 14px !important; color: #55564b !important; line-height: 1.7 !important; margin-block: 0 28px !important; }

/* formulaire (habille aussi un formulaire CF7 / WPForms si les mêmes classes
   sont posées sur les champs — voir note du pattern) */
.lj-form { margin-block: 0 !important; }
.lj-form__two { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; }
.lj-form__field { margin-bottom: 20px; }
.lj-form label { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 8px; font-weight: 600; }
.lj-form label .req { color: var(--wp--preset--color--brass); }
.lj-form input,
.lj-form textarea {
  width: 100%; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white);
  padding: 13px 15px; font-family: var(--wp--preset--font-family--body); font-size: 14px;
  color: var(--wp--preset--color--contrast); border-radius: 0;
}
.lj-form input::placeholder,
.lj-form textarea::placeholder { color: #b7b4a6; }
.lj-form input:focus,
.lj-form textarea:focus { outline: none; border-color: var(--wp--preset--color--brass); }
.lj-form textarea { min-height: 150px; resize: vertical; }
.lj-form__submit {
  background: var(--wp--preset--color--green); color: #F3EFE4; border: none;
  font-family: var(--wp--preset--font-family--body); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; padding: 16px 40px; cursor: pointer; margin-top: 6px;
  transition: background-color .15s ease;
}
.lj-form__submit:hover { background: var(--wp--preset--color--green-dark); }

/* --- Contact Form 7 : reprend l'habillage .lj-form sur la sortie réelle du
   plugin, sans configuration CF7 particulière. Fonctionne aussi bien avec le
   gabarit CF7 par défaut (une colonne) qu'avec des rangées .lj-form__two. --- */
.lj-cform .wpcf7 { margin-block: 0 !important; }
.lj-cform .wpcf7-form p { margin: 0 0 20px !important; }
.lj-cform .lj-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lj-cform .wpcf7-form label {
  display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-bottom: 8px; font-weight: 600;
}
.lj-cform .wpcf7-form label .req { color: var(--wp--preset--color--brass); }
.lj-cform .wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]),
.lj-cform .wpcf7-form textarea,
.lj-cform .wpcf7-form select {
  width: 100%; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white);
  padding: 13px 15px; font-family: var(--wp--preset--font-family--body); font-size: 14px;
  color: var(--wp--preset--color--contrast); border-radius: 0; margin-top: 8px;
}
.lj-cform .wpcf7-form input::placeholder,
.lj-cform .wpcf7-form textarea::placeholder { color: #b7b4a6; }
.lj-cform .wpcf7-form input:focus,
.lj-cform .wpcf7-form textarea:focus,
.lj-cform .wpcf7-form select:focus { outline: none; border-color: var(--wp--preset--color--brass); }
.lj-cform .wpcf7-form textarea { min-height: 150px; resize: vertical; }
.lj-cform .wpcf7-form .wpcf7-submit {
  background: var(--wp--preset--color--green); color: #F3EFE4; border: none; width: auto;
  font-family: var(--wp--preset--font-family--body); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; padding: 16px 40px; cursor: pointer; margin-top: 6px;
  transition: background-color .15s ease;
}
.lj-cform .wpcf7-form .wpcf7-submit:hover { background: var(--wp--preset--color--green-dark); }
.lj-cform .wpcf7-form .wpcf7-spinner { margin: 0 0 0 12px; }
/* messages de validation / réponse CF7 */
.lj-cform .wpcf7-response-output {
  margin: 18px 0 0 !important; padding: 12px 15px !important; font-size: 13px;
  border-radius: 0; border-width: 1px;
}
.lj-cform .wpcf7-not-valid-tip { color: #b23b3b; font-size: 12px; margin-top: 6px; }
.lj-cform .wpcf7-form input.wpcf7-not-valid,
.lj-cform .wpcf7-form textarea.wpcf7-not-valid { border-color: #b23b3b; }

/* coordonnées (encart vert doux) */
.lj-cinfo { background: var(--wp--preset--color--sage) !important; padding: 38px 34px !important; }
.lj-cinfo__h { margin-block: 0 22px !important; }
.lj-cinfo__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(38,33,25,.1); }
.lj-cinfo__item:last-of-type { border-bottom: none; }
.lj-cinfo__item svg { width: 18px; height: 18px; flex: none; stroke: var(--wp--preset--color--brass); margin-top: 2px; }
.lj-cinfo__l { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 3px; }
.lj-cinfo__v { font-size: 14.5px; color: var(--wp--preset--color--contrast); line-height: 1.5; }
.lj-cinfo__v a { color: var(--wp--preset--color--contrast) !important; }
.lj-cinfo__follow { margin-top: 22px; }
.lj-cinfo__follow .lj-cinfo__l { margin-bottom: 14px; }
.lj-cinfo__social { display: flex; gap: 12px; }
.lj-cinfo__social a {
  width: 38px; height: 38px; border: 1px solid rgba(159,132,84,.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--brass) !important;
  transition: border-color .15s ease, color .15s ease;
}
.lj-cinfo__social a:hover { border-color: var(--wp--preset--color--brass); color: var(--wp--preset--color--green) !important; }
.lj-cinfo__social a svg { width: 18px; height: 18px; }
.lj-cinfo__legal {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(38,33,25,.1);
  font-size: 11px; line-height: 1.6; color: var(--wp--preset--color--muted);
}

/* bandeau carte pleine largeur + carte flottante
   La carte est enveloppée dans une section .alignfull (lj-mapband-sec) : c'est
   le mécanisme natif de pleine largeur du thème (marges négatives = padding
   racine), qui atteint les bords SANS 100vw — donc sans scroll horizontal.
   .lj-mapband remplit simplement la section à 100 %. */
.lj-mapband-sec { padding: 0 !important; }
.lj-mapband {
  position: relative; width: 100%; height: 460px; overflow: hidden;
  margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
.lj-mapband iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .lj-cgrid { flex-wrap: wrap !important; }
  .lj-cgrid > .wp-block-column:first-child,
  .lj-cgrid > .wp-block-column:last-child { flex-basis: 100% !important; flex-grow: 0 !important; }
  .lj-cgrid > .lj-cform { padding-top: 0 !important; }
  /* coordonnées au-dessus, formulaire en dessous (ordre visuel seulement — le
     HTML garde le formulaire en premier pour ne pas changer l'ordre de lecture
     des lecteurs d'écran / le focus au clavier) */
  .lj-cgrid > .lj-cinfo { order: -1; margin-bottom: 36px; }
  .lj-form__two { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   ACTIVITÉS — liens utiles, cartes catégories, clôture
   --------------------------------------------------------- */
.lj-links-intro {
  text-align: center; max-width: 600px; margin-inline: auto !important; margin-block: 0 44px !important;
  font-size: 16px; line-height: 1.75; color: #55564b;
}
.lj-links {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line);
  margin-inline: auto !important; margin-block: 0 !important; max-width: var(--lj-content) !important;
}
.lj-lki { background: var(--wp--preset--color--white); padding: 24px 28px; display: block; }
.lj-lki__t {
  font-family: var(--wp--preset--font-family--heading) !important; font-size: 21px !important; font-weight: 600 !important;
  color: var(--wp--preset--color--contrast) !important; margin-block: 0 6px !important;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  transition: color .15s ease;
}
.lj-lki__t .ar { color: var(--wp--preset--color--brass); font-size: 14px; font-family: var(--wp--preset--font-family--body); font-weight: 600; }
.lj-lki p { font-size: 13px; color: #55564b; line-height: 1.55; margin: 0; }
.lj-lki:hover .lj-lki__t { color: var(--wp--preset--color--green) !important; }

/* sous-titre d'entête de section (remplace le filet quand la maquette a un chapô) */
.lj-head__sub { color: var(--wp--preset--color--muted) !important; font-size: 14.5px !important; line-height: 1.6 !important; margin-block: 16px 0 !important; }

.lj-acts { gap: 24px !important; margin-block: 0 !important; }
.lj-acts > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }
.lj-act {
  background: var(--wp--preset--color--white) !important;
  border: 1px solid var(--wp--preset--color--line) !important;
  padding: 0 !important; display: flex !important; flex-direction: column !important;
}
.lj-act > * { margin-left: 0 !important; margin-right: 0 !important; }
.lj-act__img { position: relative; height: 160px; background-size: cover !important; background-position: center !important; margin-block: 0 !important; }
.lj-act__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,39,31,.10), rgba(30,39,31,.52)); }
.lj-act__body { padding: 22px 24px 26px !important; flex: 1; display: flex; flex-direction: column; }
.lj-act__body > * { margin-left: 0 !important; margin-right: 0 !important; }
.lj-act__t {
  font-family: var(--wp--preset--font-family--heading) !important; font-size: 21px !important; font-weight: 600 !important;
  color: var(--wp--preset--color--contrast) !important; margin-block: 0 12px !important;
}
.lj-act__links { list-style: none !important; margin-block: auto 0 !important; margin-inline: 0 !important; padding: 0 !important; }
.lj-act__links li { font-size: 13px !important; line-height: 1.5 !important; padding: 6px 0 !important; margin: 0 !important; list-style: none !important; color: #55564b !important; }
.lj-act__links a { color: var(--wp--preset--color--green) !important; border-bottom: 1px solid var(--wp--preset--color--brass); padding-bottom: 1px; text-decoration: none !important; }

/* clôture centrée */
.lj-closing { text-align: center; max-width: 760px; margin-inline: auto !important; }
.lj-closing > * { margin-left: auto !important; margin-right: auto !important; }
.lj-closing .lj-eyebrow { text-indent: .17em; }
.lj-closing p { font-size: 15.5px !important; line-height: 1.8 !important; color: #4d4e44 !important; margin-block: 16px 0 !important; max-width: 720px; }
.lj-closing .lj-sign { font-size: 16px !important; margin-block: 18px 0 !important; }
/* Accès : signature serif ajustée (Cormorant italique, 18px) pour lire comme une signature volontaire */
.lj-closing-sec.has-sage-background-color .lj-sign {
  font-size: 18px !important;
}

@media (max-width: 781px) {
  .lj-links { grid-template-columns: 1fr !important; }
  .lj-acts { flex-wrap: wrap !important; }
  .lj-acts > .wp-block-column { flex-basis: calc(50% - 12px) !important; }
}
@media (max-width: 560px) {
  .lj-acts > .wp-block-column { flex-basis: 100% !important; }
}

/* ---------------------------------------------------------
   BLOG — article à la une + grille d'articles (Query Loop)
   Les cartes stylent la sortie native des blocs de requête.
   --------------------------------------------------------- */
.lj-feat { margin-block: 0 40px !important; }
.lj-feat .wp-block-post-template { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.lj-feat .wp-block-post {
  border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white);
  margin: 0 !important; list-style: none !important;
}
.lj-feat__row { gap: 0 !important; align-items: stretch !important; margin-block: 0 !important; }
.lj-feat__row > .wp-block-column:first-child { flex-basis: 0 !important; flex-grow: 1.15 !important; }
.lj-feat__row > .wp-block-column:last-child  { flex-basis: 0 !important; flex-grow: .85 !important; }
.lj-feat__media { margin-block: 0 !important; min-height: 380px !important; height: 100% !important; }
.lj-feat__media a { display: block !important; height: 100% !important; }
.lj-feat__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; min-height: 380px; }
.lj-feat__body { padding: 52px 50px !important; display: flex; flex-direction: column; justify-content: center; }
.lj-feat__body > * { margin-left: 0 !important; margin-right: 0 !important; }
.lj-feat__tag { font-size: 10.5px !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--wp--preset--color--brass) !important; font-weight: 700 !important; margin-block: 0 14px !important; }
.lj-feat__date { font-size: 10.5px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--wp--preset--color--brass) !important; font-weight: 600 !important; margin-block: 0 !important; }
.lj-feat__title { margin-block: 6px 0 !important; }
.lj-feat__title a, .lj-feat__title { font-family: var(--wp--preset--font-family--heading) !important; font-weight: 500 !important; font-size: 34px !important; line-height: 1.14 !important; color: var(--wp--preset--color--contrast) !important; text-decoration: none !important; }
.lj-feat__excerpt { font-size: 15px !important; line-height: 1.75 !important; color: #55564b !important; margin-block: 16px 24px !important; }
.lj-feat__excerpt .wp-block-post-excerpt__more-text { display: block; }
.lj-feat__excerpt .wp-block-post-excerpt__more-link,
.lj-feat__more a, .lj-more a {
  font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--wp--preset--color--green) !important; font-weight: 600 !important;
  border-bottom: 1px solid var(--wp--preset--color--brass); padding-bottom: 3px; text-decoration: none !important;
  display: inline-block; margin-top: 8px;
  transition: color .15s ease, border-color .15s ease;
}
.lj-feat__excerpt .wp-block-post-excerpt__more-link:hover,
.lj-feat__more a:hover, .lj-more a:hover {
  color: var(--wp--preset--color--brass) !important; text-decoration: none !important;
}

.lj-posts { gap: 30px !important; margin-block: 0 !important; }
.lj-posts.wp-block-post-template { list-style: none !important; padding: 0 !important; }
.lj-posts .wp-block-post {
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
  display: flex !important; flex-direction: column !important; margin: 0 !important; list-style: none !important;
}
.lj-posts .lj-post__media { margin-block: 0 !important; }
.lj-posts .lj-post__media img { width: 100% !important; height: 200px !important; object-fit: cover !important; display: block; }
.lj-post__body { padding: 24px 26px 28px !important; flex: 1; display: flex; flex-direction: column; }
.lj-post__body > * { margin-left: 0 !important; margin-right: 0 !important; }
.lj-post__date { font-size: 10.5px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--wp--preset--color--brass) !important; font-weight: 600 !important; margin-block: 0 10px !important; }
.lj-post__title { margin-block: 0 10px !important; }
.lj-post__title a, .lj-post__title { font-family: var(--wp--preset--font-family--heading) !important; font-weight: 600 !important; font-size: 21px !important; line-height: 1.2 !important; color: var(--wp--preset--color--contrast) !important; text-decoration: none !important; }
.lj-post__excerpt { font-size: 13px !important; line-height: 1.6 !important; color: #55564b !important; margin-block: 0 18px !important; flex: 1; }
.lj-post__excerpt .wp-block-post-excerpt__more-text { display: block; }
.lj-post__excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 8px; font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--wp--preset--color--green) !important; font-weight: 600 !important; border-bottom: 1px solid var(--wp--preset--color--brass); padding-bottom: 3px; text-decoration: none !important; transition: color .15s ease; }
.lj-post__excerpt .wp-block-post-excerpt__more-link:hover { color: var(--wp--preset--color--brass) !important; text-decoration: none !important; }

@media (max-width: 900px) {
  .lj-feat__row { flex-wrap: wrap !important; }
  .lj-feat__row > .wp-block-column:first-child,
  .lj-feat__row > .wp-block-column:last-child { flex-basis: 100% !important; flex-grow: 0 !important; }
  .lj-feat__media, .lj-feat__media img { min-height: 260px; }
  .lj-feat__body { padding: 36px 30px !important; }
}

/* pagination numérotée (1 2 3) — sobre, alignée sur la charte */
.lj-pagination { margin-block: 56px 0 !important; gap: 10px !important; align-items: center; flex-wrap: wrap; }
.lj-pagination .wp-block-query-pagination-numbers { display: flex; gap: 10px; align-items: center; }
.lj-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 6px;
  font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 600;
  color: var(--wp--preset--color--contrast); text-decoration: none;
  border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.lj-pagination .page-numbers:hover { color: var(--wp--preset--color--brass); border-color: var(--wp--preset--color--brass); }
.lj-pagination .page-numbers.current {
  color: #F3EFE4; background: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green);
}
.lj-pagination .page-numbers.dots { border: none; background: none; min-width: 0; color: var(--wp--preset--color--muted); }
.lj-pagination .wp-block-query-pagination-previous,
.lj-pagination .wp-block-query-pagination-next {
  font-family: var(--wp--preset--font-family--body); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--green);
  text-decoration: none; padding: 0 6px;
}
.lj-pagination .wp-block-query-pagination-previous:hover,
.lj-pagination .wp-block-query-pagination-next:hover { color: var(--wp--preset--color--brass); }
.lj-pagination .wp-block-query-pagination-previous[aria-disabled="true"],
.lj-pagination .wp-block-query-pagination-next[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* =========================================================
   PAGE « NOS SERVICES » / « OUR SERVICES »
   Intro réutilise .lj-welcome (texte / image). Grille de
   services : icône laiton + titre serif + détail. Registre
   sobre, sans encadrés — cohérent avec .lj-stay / .lj-equip.
   ========================================================= */
.lj-srv {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: var(--lj-content) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 46px 48px !important;
}
.lj-srv__item { margin: 0 !important; }
.lj-srv__ic { display: block !important; margin: 0 0 15px !important; color: var(--wp--preset--color--brass) !important; }
.lj-srv__ic svg { stroke: var(--wp--preset--color--brass) !important; }
.lj-srv__t {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: var(--wp--preset--color--contrast) !important;
  margin: 0 0 9px !important;
}
.lj-srv__d {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  color: #55564b !important;
  margin: 0 !important;
}
/* clôture services : liens d'activités discrets */
.lj-srv-links {
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: #4d4e44 !important;
  max-width: 760px !important;
  margin-block: 16px 0 !important;
}
.lj-srv-links a { color: var(--wp--preset--color--green) !important; text-decoration: none !important; border-bottom: 1px solid var(--wp--preset--color--line); }
.lj-srv-links a:hover { border-color: var(--wp--preset--color--brass); }

.lj-providers__lead {
  font-size: 15.5px !important; line-height: 1.8 !important; color: #4d4e44 !important;
  max-width: 780px !important; margin: 0 auto 24px !important;
}
.lj-providers__links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lj-providers__btn {
  display: inline-block; padding: 11px 24px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--wp--preset--color--green) !important;
  border: 1px solid var(--wp--preset--color--brass);
  border-radius: 2px; text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lj-providers__btn:hover {
  background: var(--wp--preset--color--green); color: #F5EEDF !important; border-color: var(--wp--preset--color--green);
}
@media (max-width: 480px) { .lj-providers__btn { padding: 10px 18px; font-size: 10px; } }

@media (max-width: 900px) { .lj-srv { grid-template-columns: 1fr 1fr !important; gap: 38px 40px !important; } }
@media (max-width: 600px) { .lj-srv { grid-template-columns: 1fr !important; gap: 32px !important; } }

/* =========================================================
   PAGE « ACCÈS » / « LOCATION »
   Une section par adresse : carte (bandeau) + tableau des
   lignes de transport. Tableau sobre, filets laiton/filet.
   ========================================================= */
.lj-acces__addr {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important;
  font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
  line-height: 1.14 !important;
  color: var(--wp--preset--color--contrast) !important;
  margin-block: 0 4px !important;
}
.lj-acces__sub {
  font-size: 14px !important;
  color: var(--wp--preset--color--muted) !important;
  margin-block: 0 30px !important;
}
.lj-acces__map {
  position: relative !important;
  width: 100% !important;
  height: 380px !important;
  margin: 0 0 56px !important;
  overflow: hidden !important;
}
.lj-acces__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.lj-transit {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  background: transparent !important;
}
.lj-transit th,
.lj-transit td {
  text-align: left !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--wp--preset--color--line) !important;
  vertical-align: top !important;
}
.lj-transit thead th {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--muted) !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--wp--preset--color--brass) !important;
  padding-top: 0 !important;
}
.lj-transit tbody td { font-size: 15px !important; color: #4d4e44 !important; line-height: 1.5 !important; }
.lj-transit tbody tr:last-child td { border-bottom: 0 !important; }
.lj-transit__line { font-weight: 700 !important; color: var(--wp--preset--color--green) !important; white-space: nowrap !important; width: 15% !important; }
.lj-transit__stop { color: var(--wp--preset--color--contrast) !important; white-space: nowrap !important; width: 22% !important; }
.lj-transit__note {
  font-size: 14.5px !important;
  color: var(--wp--preset--color--muted) !important;
  margin-block: 22px 0 !important;
}
.lj-transit__note a { color: var(--wp--preset--color--green) !important; text-decoration: none !important; border-bottom: 1px solid var(--wp--preset--color--brass); }

@media (max-width: 640px) {
  .lj-acces__map { height: 280px !important; }
  .lj-transit th, .lj-transit td { padding: 10px 8px !important; }
  .lj-transit__stop, .lj-transit__line { white-space: normal !important; }
}

/* =========================================================
   ARTICLE (gabarit single.html) — page article de blog
   Bandeau titre blanc chaud, image à la une large, colonne
   de lecture 760 px, pied « retour au blog » + CTA vert.
   ========================================================= */
.lj-single { background: var(--wp--preset--color--base) !important; }

.lj-single-head {
  background-color: var(--wp--preset--color--white) !important;
  padding-block: 88px 34px !important;
  text-align: center !important;
}
.lj-single__cat,
.lj-single__cat a {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 11px !important;
  letter-spacing: .34em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--brass) !important;
  text-decoration: none !important;
  text-indent: .17em;
}
.lj-single__cat { margin-block: 0 var(--lj-gap-eyebrow) !important; }
.lj-single__title {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 4vw, 3.1rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .005em !important;
  color: var(--wp--preset--color--contrast) !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
.lj-single__date {
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--brass) !important;
  font-weight: 600 !important;
  margin-block: 22px 0 !important;
}

.lj-single-media {
  background-color: var(--wp--preset--color--white) !important;
  padding-block: 0 !important;
}
.lj-single__media { margin: 0 !important; }
.lj-single__media img {
  width: 100% !important;
  height: clamp(300px, 44vw, 500px) !important;
  object-fit: cover !important;
  display: block !important;
}

.lj-single-body { padding-block: 60px 84px !important; }

/* full-width header image */
.lj-single__hero { margin: 0 !important; }
.lj-single__hero img {
  width: 100% !important;
  height: clamp(300px, 42vw, 520px) !important;
  object-fit: cover !important;
  display: block !important;
}

/* hero cover: title + date over the featured image */
.lj-single-hero { text-align: center !important; }
.lj-single-hero .wp-block-cover__inner-container { color: #F5EEDF !important; }
.lj-single-hero .lj-single__title { color: #F5EEDF !important; text-shadow: 0 2px 30px rgba(20,25,15,.35); }
.lj-single-hero .lj-single__date { color: #E4DAC5 !important; }
@media (max-width: 640px) { .lj-single-hero { min-height: 380px !important; } }

/* body: article (left) + recent-posts sidebar (right) */
.lj-single__cols { display: flex !important; flex-wrap: wrap; gap: 60px; align-items: flex-start; margin: 0 !important; }
.lj-single__cols > .wp-block-column { margin: 0 !important; }
@media (min-width: 783px) {
  .lj-single__cols > .lj-single__main  { flex: 1 1 0 !important; min-width: 0; }
  .lj-single__cols > .lj-single__aside { flex: 0 0 33.333% !important; position: sticky; top: 92px; }
}
@media (max-width: 782px) { .lj-single__cols { gap: 44px; } }

/* recent-posts widget */
.lj-recent__h {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-size: 1.3rem !important; font-weight: 500 !important;
  color: var(--wp--preset--color--green) !important;
  margin: 0 0 18px !important; padding-bottom: 14px !important;
  border-bottom: 1px solid var(--wp--preset--color--brass) !important;
}
.lj-recent ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.lj-recent li { margin: 0 0 16px !important; }
.lj-recent li a { display: flex !important; gap: 14px !important; align-items: center !important; text-decoration: none !important; }
.lj-recent__thumb { flex: 0 0 62px; }
.lj-recent__thumb img { width: 62px !important; height: 62px !important; object-fit: cover !important; border-radius: 2px !important; display: block !important; }
.lj-recent__t { font-size: 14px !important; line-height: 1.35 !important; color: var(--wp--preset--color--contrast) !important; transition: color .15s; }
.lj-recent li a:hover .lj-recent__t { color: var(--wp--preset--color--green) !important; }
.lj-article { font-size: 17px !important; line-height: 1.85 !important; color: #3f4038 !important; }
.lj-article > * { margin-block: 0 22px !important; }
.lj-article > *:last-child { margin-block-end: 0 !important; }
.lj-article p { font-size: 17px !important; line-height: 1.85 !important; color: #3f4038 !important; }
.lj-article h2 {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 500 !important;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem) !important;
  line-height: 1.14 !important;
  color: var(--wp--preset--color--contrast) !important;
  margin-block: 46px 16px !important;
}
.lj-article h3 {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  color: var(--wp--preset--color--contrast) !important;
  margin-block: 36px 12px !important;
}
.lj-article ul, .lj-article ol { padding-left: 22px !important; margin-block: 0 22px !important; }
.lj-article li { margin-block: 0 8px !important; line-height: 1.7 !important; }
.lj-article a { color: var(--wp--preset--color--green) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
.lj-article img, .lj-article figure { margin-block: 32px !important; }
.lj-article figure img { margin-block: 0 !important; }
.lj-article figcaption { font-size: 12.5px !important; color: var(--wp--preset--color--muted) !important; text-align: center !important; margin-top: 10px !important; }
.lj-article blockquote {
  border-left: 2px solid var(--wp--preset--color--brass) !important;
  padding-left: 26px !important;
  margin-block: 32px !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  font-style: italic !important;
  font-size: 21px !important;
  line-height: 1.45 !important;
  color: var(--wp--preset--color--green) !important;
}

/* pied d'article : retour au blog + CTA (sortie du shortcode [josephines_article_footer]) */
.lj-single-back { text-align: center !important; padding-block: 8px 60px !important; }
.lj-backlink a {
  display: inline-block !important;
  font-size: 11.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--green) !important;
  border: 1px solid var(--wp--preset--color--green) !important;
  padding: 14px 30px !important;
  text-decoration: none !important;
}
.lj-backlink a:hover { background: var(--wp--preset--color--green) !important; color: #F3EFE4 !important; }

/* ============================================================
   MOT DES HÔTES — panneau encadré (page Nos services)
   Alternative à .lj-welcome (pas d'image). Texte repris tel quel
   de la page live /nos-services/.
   ============================================================ */
.lj-note {
  max-width: 920px !important;               /* bat .lj-sec > * (1068) */
  margin-inline: auto !important;
  background: var(--wp--preset--color--white) !important;   /* #FDFBF5 */
  border: 1px solid var(--wp--preset--color--line) !important;
  padding: clamp(40px, 3vw, 68px) clamp(32px, 4vw, 80px) !important;
}
.lj-note .lj-eyebrow { text-align: left !important; }
.lj-note .lj-h2 { text-align: left !important; margin-block: 0 var(--lj-gap-lead) !important; }
.lj-note .lj-body { margin-block: 0 !important; }
.lj-note .lj-body + .lj-body { margin-block-start: 20px !important; }
.lj-note__sign {
  margin-block-start: 34px !important;
  text-align: right !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  font-style: italic !important;
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  color: var(--wp--preset--color--green) !important;
}
@media (max-width: 640px) {
  .lj-note { padding: 36px 28px !important; }
  .lj-note__sign { text-align: left !important; }
}

/* ============================================================
   ACCÈS — onglets d'adresse (comme la page live : une carte +
   un tableau à la fois). CSS pur, sans JS (radios masqués).
   ============================================================ */
.lj-acces-tabs > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lj-acces-tabs__nav { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch !important; gap: 14px; margin-bottom: 40px; }
.lj-acces-tabs__nav label {
  cursor: pointer; padding: 14px 20px;
  display: block; text-align: center;
  font-family: var(--wp--preset--font-family--body); line-height: 1.35;
  color: var(--wp--preset--color--green); background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line); border-radius: 2px;
  transition: background .15s, color .15s, border-color .15s;
}
.lj-acces-tabs__name { display: block; font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.lj-acces-tabs__addr { display: block; font-size: .85rem; font-weight: 500; margin-top: 3px; opacity: .85; }
.lj-acces-tabs__nav label:hover { border-color: var(--wp--preset--color--brass); }
.lj-acces-tabs__panel { display: none; }
#lj-acces-1:checked ~ .lj-acces-tabs__nav label[for="lj-acces-1"],
#lj-acces-2:checked ~ .lj-acces-tabs__nav label[for="lj-acces-2"],
#lj-acces-3:checked ~ .lj-acces-tabs__nav label[for="lj-acces-3"] { background: var(--wp--preset--color--green); color: #F5EEDF; border-color: var(--wp--preset--color--green); }
#lj-acces-1:checked ~ .lj-acces-tabs__panel--1,
#lj-acces-2:checked ~ .lj-acces-tabs__panel--2,
#lj-acces-3:checked ~ .lj-acces-tabs__panel--3 { display: block; }
@media (max-width: 600px){
  .lj-acces-tabs__nav { gap: 10px; flex-wrap: wrap !important; }
  .lj-acces-tabs__nav label {
    flex: 1 1 100%; min-width: 0; text-align: center;
    padding: 12px 16px !important;
  }
}

/* ============================================================
   FAQ (accordéon <details>) + TARIFS (tableau de prix)
   Contenu repris tel quel des pages live /faq/ et /tarifs/.
   ============================================================ */
.lj-faq { max-width: 840px; margin-inline: auto !important; }
.lj-faq details { border-bottom: 1px solid var(--wp--preset--color--line); padding-inline: 22px; }
.lj-faq details:nth-of-type(odd) { background: #FAF5EC; }
.lj-faq details:nth-of-type(even) { background: #FEFCF7; }
.lj-faq details:first-of-type { border-top: 1px solid var(--wp--preset--color--line); }
.lj-faq summary { list-style: none; cursor: pointer; position: relative; padding: 25px 46px 25px 0; font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; line-height: 1.3; color: var(--wp--preset--color--green); }
.lj-faq summary::-webkit-details-marker { display: none; }
.lj-faq summary::after { content: "+"; position: absolute; right: 4px; top: 24px; font-family: var(--wp--preset--font-family--body); font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--wp--preset--color--brass); }
.lj-faq details[open] summary::after { content: "\2013"; }
.lj-faq__a { padding: 0 46px 28px 0; color: #4d4e44; font-size: 16px; line-height: 1.75; }
.lj-faq__a p { margin: 0; }
.lj-faq__a p + p { margin-top: 12px; }
.lj-faq__a ul { list-style: none; margin: 8px 0 0; padding: 0; }
.lj-faq__a li { position: relative; padding-left: 18px; margin: 4px 0; }
.lj-faq__a li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; background: var(--wp--preset--color--brass); border-radius: 50%; }
.lj-faq__a a { color: var(--wp--preset--color--green); border-bottom: 1px solid var(--wp--preset--color--brass); text-decoration: none; }

/* pricing table */
.lj-price-wrap { overflow-x: auto; }
.lj-price { width: 100%; border-collapse: collapse; }
.lj-price__cap { font-family: var(--wp--preset--font-family--heading); font-style: italic; color: #6f6a5c; font-size: 1.1rem; margin: 0 0 6px; }
.lj-price__res { font-size: 14px; color: #6f6a5c; margin: 0 0 42px; }
.lj-price__res a { color: var(--wp--preset--color--green); border-bottom: 1px solid var(--wp--preset--color--brass); text-decoration: none; }
.lj-price thead th { text-align: left; font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #8a8574; padding: 0 16px 12px; border-bottom: 1px solid var(--wp--preset--color--brass); }
.lj-price thead th + th { text-align: right; }
.lj-price td { padding: 16px; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; font-size: 15px; color: #3f4038; }
.lj-price td + td { text-align: right; white-space: nowrap; }
.lj-price__u { color: var(--wp--preset--color--green) !important; font-weight: 600; }
.lj-price__sub { display: block; color: #9a927f; font-size: 12.5px; font-weight: 400; margin-top: 3px; }
.lj-price__supp td:first-child { color: #3f4038; font-weight: 500; }
.lj-price__supp td { color: #6f6a5c; font-size: 14px; }

/* included services + payment + conditions */
.lj-tarif-notes { max-width: 840px; margin-inline: auto !important; }
.lj-incl__h { font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; color: var(--wp--preset--color--green); margin: 0 0 14px; }
.lj-incl { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; }
.lj-incl li { position: relative; padding-left: 20px; font-size: 15px; color: #3f4038; }
.lj-incl li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--wp--preset--color--brass); border-radius: 50%; }
.lj-incl__opt { font-size: 14px; color: #6f6a5c; margin: 30px 0 0; }
.lj-pay { font-size: 15px; color: #3f4038; margin: 34px 0 0; }
.lj-pay a { color: var(--wp--preset--color--green); border-bottom: 1px solid var(--wp--preset--color--brass); text-decoration: none; }
.lj-cond { font-size: 13px; line-height: 1.75; color: #7a7566; font-style: italic; margin: 26px 0 0; }
.lj-cond__h { font-style: normal; font-weight: 600; color: #5c5849; display: block; margin-bottom: 6px; }
.lj-cond ul { list-style: none; margin: 0; padding: 0; }
.lj-cond li { position: relative; padding-left: 16px; margin: 3px 0; }
.lj-cond li::before { content: "\2013"; position: absolute; left: 0; }
@media (max-width: 600px) { .lj-incl { grid-template-columns: 1fr; } .lj-price td, .lj-price thead th { font-size: 13.5px; padding: 12px 8px; } }

/* ============================================================
   TARIFS — cartes tarifaires (Option A) + suppléments + inclus
   ============================================================ */
.lj-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lj-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); padding: 28px 24px 24px; display: flex; flex-direction: column; }
.lj-card__sz { font-family: var(--wp--preset--font-family--heading); font-size: 2rem; line-height: 1; color: var(--wp--preset--color--contrast); }
.lj-card__cap { font-size: 12.5px; color: #8a8574; margin-top: 8px; line-height: 1.4; }
.lj-card__rule { width: 34px; height: 1px; background: var(--wp--preset--color--brass); margin: 18px 0 4px; }
.lj-card__rate { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid #efe7d6; }
.lj-card__rate:last-child { border-bottom: 0; padding-bottom: 0; }
.lj-card__lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a8574; }
.lj-card__val { font-size: 16px; font-weight: 600; color: var(--wp--preset--color--contrast); text-align: right; white-space: nowrap; }
.lj-card__val small { display: block; font-weight: 400; color: #9a927f; font-size: 11px; margin-top: 1px; }
.lj-card__rate--m .lj-card__val { color: #7a5f2e; }

.lj-supp-eye { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--brass); margin: 36px 0 14px; }
.lj-supp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lj-supp__item { background: #ECE3CE; padding: 20px 24px; }
.lj-supp__l { display: block; font-size: 13px; color: #6f6a5c; }
.lj-supp__v { display: block; font-size: 16px; font-weight: 600; color: var(--wp--preset--color--green); margin-top: 4px; }
.lj-supp__n { display: block; font-size: 11.5px; color: #8a8574; margin-top: 3px; }

.lj-incl-ic { display: flex; flex-wrap: wrap; gap: 16px 34px; justify-content: center; }
.lj-incl-ic__i { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #3f4038; }
.lj-incl-ic__i .ic { color: var(--wp--preset--color--brass); display: flex; }

@media (max-width: 900px) { .lj-cards { grid-template-columns: repeat(2, 1fr); } .lj-supp { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .lj-cards { grid-template-columns: 1fr; } }

/* ============================================================
   PAGES LÉGALES — mentions légales / politique de confidentialité
   (gabarit de texte long, lisible)
   ============================================================ */
.lj-legal-doc { max-width: 760px; margin-inline: auto !important; }
.lj-legal-doc h2 { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-weight: 500; color: var(--wp--preset--color--green); margin: 42px 0 12px; }
.lj-legal-doc > h2:first-child { margin-top: 0; }
.lj-legal-doc h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; font-weight: 600; color: var(--wp--preset--color--contrast); margin: 26px 0 8px; }
.lj-legal-doc p { font-size: 16px; line-height: 1.8; color: #3f4038; margin: 0 0 14px; }
.lj-legal-doc ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.lj-legal-doc li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.75; color: #3f4038; margin: 5px 0; }
.lj-legal-doc li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; background: var(--wp--preset--color--brass); border-radius: 50%; }
.lj-legal-doc a { color: var(--wp--preset--color--green); border-bottom: 1px solid var(--wp--preset--color--brass); text-decoration: none; }
.lj-legal-doc strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.lj-legal-doc mark { background: #FBEFD8; color: #7a5f2e; padding: 0 3px; border-radius: 2px; }
.lj-legal__updated { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9a927f; margin: 0 0 30px; }

/* ============================================================
   BADGE reCAPTCHA v3 — masqué partout, visible uniquement sur la
   page Contact (classe .lj-recaptcha-page posée par functions.php).
   Note : Google demande que la mention de confidentialité reste
   visible quelque part si le badge est masqué ; elle doit figurer
   près du formulaire sur la page Contact elle-même.
   ============================================================ */
.grecaptcha-badge { visibility: hidden !important; }
.lj-recaptcha-page .grecaptcha-badge { visibility: visible !important; }