/* ---------------------------------------------------------------------------
   Le panneau de filtres des pages de recherche
   ---------------------------------------------------------------------------
   Il reprend le langage déjà posé sur ces pages : les pastilles vert pâle des
   univers, leur rayon, leur compteur, et le vert #49714b quand on les choisit.
   Le panneau est une carte ivoire comme les autres blocs du site, centré sur la
   même largeur que la carte et la grille.

   Les mots sont des pastilles cochables plutôt que des cases en colonne : une
   famille de trente termes tient alors en trois lignes. Un mot que personne ne
   porte dans le résultat courant est retiré par le script — l'afficher grisé
   remplissait le panneau de mots morts.
   ------------------------------------------------------------------------ */

.ikn-filters {
  --ikn-f-vert: #49714b;
  --ikn-f-vert-pale: #eaf0ea;
  --ikn-f-vert-texte: #527746;
  --ikn-f-encre: #2f412f;

  margin: 0 auto 22px;
  padding: 0 20px;
  max-width: 1400px;
  font-size: 1rem;
}

/* -- La barre : le bouton, centré comme la rangée d'univers -------------- */

.ikn-filters__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ikn-filters .ikn-filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 25px;
  background: var(--ikn-f-vert-pale);
  color: var(--ikn-f-vert-texte);
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ikn-filters .ikn-filters__toggle:hover,
.ikn-filters .ikn-filters__toggle:focus-visible,
.ikn-filters.is-open .ikn-filters__toggle {
  background: var(--ikn-f-vert);
  border-color: var(--ikn-f-vert);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(73, 113, 75, 0.3);
}

.ikn-filters .ikn-filters__count {
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(73, 113, 75, 0.14);
  color: inherit;
  font-size: 0.8em;
  font-weight: 700;
}

.ikn-filters .ikn-filters__toggle:hover .ikn-filters__count,
.ikn-filters.is-open .ikn-filters__toggle .ikn-filters__count {
  background: rgba(255, 255, 255, 0.25);
}

.ikn-filters__result {
  margin: 0;
  color: #6f7a6b;
  font-size: 0.92em;
}

/* -- Le panneau ---------------------------------------------------------- */

.ikn-filters__panel {
  margin-top: 16px;
  padding: 22px 24px 18px;
  border: 1px solid #e3e9e1;
  border-radius: 18px;
  background: #fbfcfa;
  box-shadow: 0 6px 24px rgba(60, 100, 60, 0.07);
}

.ikn-filters__grid {
  display: grid;
  /* Des colonnes alignées en haut, pour que les familles courtes ne laissent
     pas de trous au milieu du panneau. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 20px 28px;
}

/* Un <fieldset> refuse de rétrécir dans une grille sans cette largeur minimale
   remise à zéro : sans elle, les colonnes se chevauchent. */
.ikn-filters__group {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  min-inline-size: 0;
}

.ikn-filters__group legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  color: var(--ikn-f-encre);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ikn-filters__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #4a5447;
  font-size: 0.94em;
}

.ikn-filters .ikn-filters__field input {
  width: 7em;
  padding: 8px 12px;
  border: 1px solid #dde4da;
  border-radius: 12px;
  background: #fff;
  color: var(--ikn-f-encre);
  font-size: 0.95em;
}

.ikn-filters .ikn-filters__field input:focus {
  outline: none;
  border-color: var(--ikn-f-vert);
  box-shadow: 0 0 0 3px rgba(73, 113, 75, 0.12);
}

.ikn-filters__help {
  margin: 8px 0 0;
  color: #8a9186;
  font-size: 0.8em;
  line-height: 1.5;
}

/* -- Les mots ------------------------------------------------------------ */

.ikn-filters__words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ikn-filters .ikn-filters__word {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 2px solid transparent;
  border-radius: 25px;
  background: var(--ikn-f-vert-pale);
  color: var(--ikn-f-vert-texte);
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.25s ease;
}

.ikn-filters .ikn-filters__word input {
  /* La case reste atteignable au clavier : on la cache sans la retirer. */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ikn-filters .ikn-filters__word:hover {
  background: #dfe8de;
}

.ikn-filters .ikn-filters__word:focus-within {
  outline: 2px solid var(--ikn-f-vert);
  outline-offset: 2px;
}

.ikn-filters .ikn-filters__word.is-on {
  background: var(--ikn-f-vert);
  border-color: var(--ikn-f-vert);
  color: #fff;
  box-shadow: 0 4px 15px rgba(73, 113, 75, 0.3);
}

.ikn-filters__word-count {
  padding: 1px 7px;
  border-radius: 12px;
  background: rgba(73, 113, 75, 0.14);
  font-size: 0.78em;
  font-weight: 700;
}

.ikn-filters .ikn-filters__word.is-on .ikn-filters__word-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Un mot que personne ne porte dans le résultat courant disparaît. Le garder
   grisé noyait les trois mots utiles sous trente mots morts. */
.ikn-filters .ikn-filters__word.is-empty {
  display: none;
}

/* Une famille dont plus aucun mot n'est visible se referme avec eux. */
.ikn-filters__group.is-empty {
  display: none;
}

.ikn-filters .ikn-filters__more {
  padding: 7px 4px;
  border: 0;
  background: none;
  color: var(--ikn-f-vert-texte);
  font-size: 0.86em;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* -- Le pied ------------------------------------------------------------- */

.ikn-filters__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #edf1eb;
}

.ikn-filters .ikn-filters__apply {
  padding: 10px 20px;
  border: 2px solid var(--ikn-f-vert);
  border-radius: 25px;
  background: var(--ikn-f-vert);
  color: #fff;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
}

.ikn-filters .ikn-filters__reset {
  padding: 10px 14px;
  border: 0;
  background: none;
  color: #7c857a;
  font-size: 0.9em;
  text-decoration: underline;
  cursor: pointer;
}

.ikn-filters .ikn-filters__reset:hover {
  color: var(--ikn-f-vert);
}

/* Le script prend la main sur l'envoi : le bouton ne sert plus qu'au cas où
   JavaScript ne tourne pas. */
.ikn-filters.is-live .ikn-filters__apply {
  display: none;
}

@media (max-width: 782px) {
  .ikn-filters {
    padding: 0 14px;
  }

  .ikn-filters__panel {
    padding: 16px;
    border-radius: 14px;
  }

  .ikn-filters__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------------------------------------------------------------------------
   La mise en colonne des pages de recherche
   ---------------------------------------------------------------------------
   Les maquettes posent les filtres à côté des résultats, et non au-dessus : on
   affine en gardant la carte sous les yeux, et le panneau reste atteignable
   pendant qu'on fait défiler la grille. Sous 1100 px il n'y a plus la place
   pour deux colonnes : le panneau repasse au-dessus, replié derrière son
   bouton, comme sur un téléphone.
   ------------------------------------------------------------------------ */

.ikn-search-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
  max-width: 1400px;
  margin: 0 auto 24px;
  padding: 0 20px;
}

.ikn-search-layout > .ikn-filters {
  margin: 0;
  padding: 0;
  position: sticky;
  top: 96px;
  /* Une famille très fournie ne doit pas pousser le panneau plus haut que
     l'écran : au-delà, il défile sur lui-même. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Dans la colonne, le bouton n'ouvre plus rien : le panneau est déjà là. */
.ikn-search-layout > .ikn-filters .ikn-filters__toggle {
  width: 100%;
  justify-content: flex-start;
  pointer-events: none;
}

.ikn-search-layout > .ikn-filters .ikn-filters__bar {
  justify-content: flex-start;
}

.ikn-search-layout > .ikn-filters .ikn-filters__panel {
  margin-top: 12px;
}

.ikn-search-layout > .ikn-filters .ikn-filters__grid {
  grid-template-columns: 1fr;
  gap: 18px;
}

.ikn-search-layout > .ikn-filters .ikn-filters__actions {
  justify-content: flex-start;
}

/* L'archive d'univers pose trois blocs côte à côte : le panneau, la carte,
   puis la grille. Sans ces deux règles, la grille tombait dans la colonne de
   gauche, sous les filtres. Tout ce qui n'est pas le panneau tient la colonne
   de droite, et le panneau occupe toute la hauteur pour pouvoir y rester
   collé pendant qu'on fait défiler les vignettes. */
.ikn-search-layout > .ikn-filters {
  grid-column: 1;
  grid-row: 1 / -1;
}

.ikn-search-layout > :not(.ikn-filters) {
  grid-column: 2;
  min-width: 0;
}

.ikn-picto {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  object-fit: contain;
}

/* Les pictos sont d'une seule couleur : sur un fond vert, on les renverse en
   blanc, comme le thème le fait déjà pour ses SVG. */
.ikn-filters .ikn-filters__word.is-on .ikn-picto,
.ikn-filters .ikn-filters__toggle:hover .ikn-picto,
.ikn-filters.is-open .ikn-filters__toggle .ikn-picto {
  filter: brightness(0) invert(1);
}

@media (max-width: 1100px) {
  .ikn-search-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }

  .ikn-search-layout > .ikn-filters,
  .ikn-search-layout > :not(.ikn-filters) {
    grid-column: 1;
    grid-row: auto;
  }

  .ikn-search-layout > .ikn-filters {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 20px;
  }

  .ikn-search-layout > .ikn-filters .ikn-filters__toggle {
    width: auto;
    pointer-events: auto;
  }

  .ikn-search-layout > .ikn-filters .ikn-filters__bar {
    justify-content: center;
  }
}

/* En colonne, le bouton n'est plus un bouton : c'est le titre du panneau, comme
   « Affiner votre recherche » sur les maquettes. Le fond plein le faisait lire
   comme une pastille enfoncée. */
.ikn-search-layout > .ikn-filters .ikn-filters__toggle,
.ikn-search-layout > .ikn-filters.is-open .ikn-filters__toggle {
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid #e3e9e1;
  border-radius: 0;
  background: none;
  color: #2f412f;
  font-size: 1em;
  font-weight: 700;
  transform: none;
  box-shadow: none;
}

.ikn-search-layout > .ikn-filters .ikn-filters__toggle .ikn-picto,
.ikn-search-layout > .ikn-filters.is-open .ikn-filters__toggle .ikn-picto {
  filter: none;
}

.ikn-search-layout > .ikn-filters .ikn-filters__toggle .ikn-filters__count,
.ikn-search-layout > .ikn-filters.is-open .ikn-filters__toggle .ikn-filters__count {
  margin-left: auto;
  background: var(--ikn-f-vert, #49714b);
  color: #fff;
}

.ikn-search-layout > .ikn-filters .ikn-filters__panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* La grille des vignettes suit la largeur qui lui reste, et non celle de
   l'écran : les colonnes du thème sont fixées par paliers de fenêtre, et dans
   une colonne réduite elles écrasaient les noms sur deux lignes. */
.ikn-search-layout .map-chateaux-grid,
.ikn-search-layout .map-archive-grid,
.ikn-search-layout .sejour-chateaux-grid {
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}

/* ---------------------------------------------------------------------------
   La barre de résultats
   ---------------------------------------------------------------------------
   Le nombre de lieux d'un côté, le tri de l'autre, posés entre la carte et la
   grille comme sur les maquettes. Le nombre est écrit gros : c'est la réponse
   à la question qu'on vient de poser aux filtres.
   ------------------------------------------------------------------------ */

.ikn-results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9eee7;
}

.ikn-results-bar__count {
  margin: 0;
  color: #4a5447;
  font-size: 1em;
}

.ikn-results-bar__count strong {
  margin-right: 5px;
  color: #26331f;
  font-size: 1.45em;
  font-weight: 700;
}

.ikn-results-bar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6f7a6b;
  font-size: 0.9em;
}

.ikn-results-bar__sort select {
  padding: 7px 12px;
  border: 1px solid #dde4da;
  border-radius: 12px;
  background: #fff;
  color: #2f412f;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
}

.ikn-results-bar__sort select:focus {
  outline: none;
  border-color: #49714b;
  box-shadow: 0 0 0 3px rgba(73, 113, 75, 0.12);
}

@media (max-width: 600px) {
  .ikn-results-bar {
    padding: 0 20px 12px;
  }
}

/* ---------------------------------------------------------------------------
   Les outils de la carte
   ---------------------------------------------------------------------------
   Deux boutons poses sur la carte, comme sur les maquettes : chercher dans la
   zone visible, et agrandir. En grand, la carte prend l'ecran et le reste de
   la page s'efface : c'est le moment ou l'on explore, pas ou l'on lit.
   ------------------------------------------------------------------------ */

.ikn-map-tools {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ikn-map-tools .ikn-map-tool {
  padding: 8px 14px;
  border: 1px solid #dde4da;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #2f412f;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ikn-map-tools .ikn-map-tool:hover {
  background: #fff;
  border-color: #49714b;
}

.ikn-map-tools .ikn-map-tool.is-on {
  background: #49714b;
  border-color: #49714b;
  color: #fff;
}

/* La carte en grand. Le script la deplace a la racine du document avant de
   l'agrandir : dans son conteneur d'origine, une transformation Elementor
   faisait que "position: fixed" se rapportait au conteneur et non a l'ecran. */
body.ikn-map-grand > #map-chateaux-map,
body.ikn-map-grand > #map-archive {
  /* Leaflet ecrit "position: relative" en style inline sur son conteneur, et
     un style inline bat une feuille : d'ou ces deux "important", qui ne sont
     pas de la commodite mais la seule facon de reprendre la main. */
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border-radius: 0;
}

body.ikn-map-grand .ikn-filters,
body.ikn-map-grand .ikn-results-bar,
body.ikn-map-grand .map-chateaux-grid,
body.ikn-map-grand .map-archive-grid,
body.ikn-map-grand #load-more-chateaux,
body.ikn-map-grand #map-chateaux-searchbar {
  display: none;
}

body.ikn-map-grand {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   La banniere d'un univers
   ---------------------------------------------------------------------------
   Les maquettes montrent une photographie de chateau derriere le titre. Ce que
   le site possede aujourd'hui, ce sont les vignettes de categorie : des
   pictogrammes a plat, en deux verts. Etires en fond, ils donnaient un titre
   illisible sur un dessin agrandi. On les traite donc pour ce qu'ils sont, une
   illustration posee a cote du texte, et la banniere garde son fond clair.

   Le jour ou Guillaume fournira de vraies photographies par univers, c'est ici
   qu'elles prendront la place du pictogramme.
   ------------------------------------------------------------------------ */

.map-archive-hero__eyebrow {
  margin: 0 0 6px;
  color: #6f7a6b;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Une grille et non une rangee : en flex, le lien de retour, le surtitre, le
   titre et l'accroche se retrouvaient tous les quatre cote a cote sur une seule
   ligne. Ici le texte s'empile dans la premiere colonne, l'illustration occupe
   la seconde sur toute la hauteur. */
.map-archive-hero.map-archive-hero--illustre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 32px;
  text-align: left;
}

.map-archive-hero.map-archive-hero--illustre > :not(.map-archive-hero__illustration) {
  grid-column: 1;
  min-width: 0;
}

.map-archive-hero__illustration {
  grid-column: 2;
  grid-row: 1 / -1;
}

.map-archive-hero.map-archive-hero--illustre .map-archive-hero__description,
.map-archive-hero.map-archive-hero--illustre h1 {
  max-width: 52ch;
}

.map-archive-hero__illustration {
  width: 150px;
  height: 150px;
  object-fit: contain;
  /* Le pictogramme accompagne le titre, il ne le concurrence pas. */
  opacity: 0.85;
}

@media (max-width: 782px) {
  .map-archive-hero.map-archive-hero--illustre {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    justify-items: center;
  }

  .map-archive-hero.map-archive-hero--illustre > :not(.map-archive-hero__illustration),
  .map-archive-hero__illustration {
    grid-column: 1;
    grid-row: auto;
  }

  .map-archive-hero__illustration {
    width: 96px;
    height: 96px;
  }
}

/* ---------------------------------------------------------------------------
   Le bloc editorial de bas de page
   ---------------------------------------------------------------------------
   Les descriptions de categorie font parfois mille cinq cents caracteres. Elles
   comptent pour le referencement, mais elles n'ont rien a faire dans une
   banniere. Elles sont rendues ici, repliees sur quatre lignes, et se deplient
   pour qui veut les lire. Le texte est bien dans la page : c'est l'affichage
   qui est plie, pas le contenu.
   ------------------------------------------------------------------------ */

.ikn-seo-block {
  margin: 10px 0 24px;
  padding: 20px 22px;
  border: 1px solid #e9eee7;
  border-radius: 16px;
  background: #fbfcfa;
}

.ikn-seo-block__title {
  margin: 0 0 10px;
  color: #26331f;
  font-size: 1.05em;
  font-weight: 700;
}

.ikn-seo-block__text {
  color: #55604f;
  font-size: 0.92em;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.ikn-seo-block.is-open .ikn-seo-block__text {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

.ikn-seo-block .ikn-seo-block__toggle {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #527746;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* La banniere avec sa photographie : c'est la forme que montrent les maquettes.
   Le voile sombre rend le titre blanc lisible sur n'importe quel ciel. */
.map-archive-hero.map-archive-hero--photo {
  position: relative;
  background-size: cover;
  background-position: center;
  text-align: left;
  overflow: hidden;
}

.map-archive-hero.map-archive-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 32, 20, 0.80) 0%, rgba(20, 32, 20, 0.50) 55%, rgba(20, 32, 20, 0.15) 100%);
}

.map-archive-hero.map-archive-hero--photo > * {
  position: relative;
}

.map-archive-hero.map-archive-hero--photo h1,
.map-archive-hero.map-archive-hero--photo .map-archive-hero__description,
.map-archive-hero.map-archive-hero--photo .map-archive-hero__eyebrow,
.map-archive-hero.map-archive-hero--photo .map-archive-back-link {
  color: #fff;
}

.map-archive-hero.map-archive-hero--photo .map-archive-hero__description,
.map-archive-hero.map-archive-hero--photo h1 {
  max-width: 46ch;
}

.map-archive-hero.map-archive-hero--photo .map-archive-back-link {
  border-color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 900px) {
  .map-archive-hero.map-archive-hero--photo {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 48px;
    padding-right: 48px;
  }
}