/*
Theme Name: tophote
Theme URI: http://underscores.me/
Author: aircode
Author URI: http://aircodev.com
Description: Theme for Top Hote
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tophote
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

tophote is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ========================================
   Protection anti-FOUC (Flash of Unstyled Content)
   ======================================== */

.container {
  @media (width >= 96rem) {
    max-width: 80rem;
  }
}

/* ========================================
   Styles pour les pages d'archive et cartes
   ======================================== */

/* Styles pour les cartes de logements */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Styles pour la pagination */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  margin: 0 0.25rem;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.page-numbers:hover {
  background-color: #fef2f0;
  border-color: #f59389;
  color: #a64d38;
}

.page-numbers.current {
  background-color: #bf573f;
  border-color: #bf573f;
  color: #ffffff;
}

.page-numbers.dots {
  border: none;
  background: none;
  cursor: default;
}

.page-numbers.dots:hover {
  background: none;
  border: none;
  color: #374151;
}

/* Navigation pagination */
.navigation.pagination {
  text-align: center;
  margin: 2rem 0;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ========================================
   Styles pour le blog
   ======================================== */

/* Styles pour le contenu prose */
.prose {
  color: #374151;
  line-height: 1.75;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: #111827;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 1em;
}

.prose h1 {
  font-size: 2.25em;
  line-height: 1.1111;
}

.prose h2 {
  font-size: 1.875em;
  line-height: 1.3333;
}

.prose h3 {
  font-size: 1.5em;
  line-height: 1.5;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose a {
  color: #bf573f;
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: #a64d38;
}

.prose ul,
.prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose blockquote {
  font-style: italic;
  border-left: 0.25rem solid #bf573f;
  padding-left: 1em;
  margin: 1.6em 0;
  color: #6b7280;
}

.prose img {
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.75rem;
}

.prose figure {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose figcaption {
  color: #6b7280;
  font-size: 0.875em;
  line-height: 1.4286;
  margin-top: 0.8571em;
  text-align: center;
}

.prose code {
  color: #111827;
  font-weight: 600;
  font-size: 0.875em;
  background-color: #f3f4f6;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
}

.prose pre {
  color: #e5e7eb;
  background-color: #1f2937;
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.7143;
  margin-top: 1.7143em;
  margin-bottom: 1.7143em;
  border-radius: 0.375rem;
  padding: 0.8571em 1.1429em;
}

.prose pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7143;
}

.prose thead {
  border-bottom-width: 1px;
  border-bottom-color: #d1d5db;
}

.prose thead th {
  color: #111827;
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714em;
  padding-bottom: 0.5714em;
  padding-left: 0.5714em;
}

.prose tbody tr {
  border-bottom-width: 1px;
  border-bottom-color: #e5e7eb;
}

.prose tbody td {
  vertical-align: baseline;
  padding: 0.5714em;
}

/* Styles pour les liens de navigation des articles */
.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  transition: all 0.2s ease-in-out;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
  border-color: #bf573f;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.post-navigation .nav-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-navigation .nav-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-top: 0.5rem;
  display: block;
}

@media (max-width: 768px) {
  .post-navigation .nav-links {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Styles pour le WYSIWYG en beige sur fond coloré
   ======================================== */

.wysiwyg-beige,
.wysiwyg-beige p,
.wysiwyg-beige h1,
.wysiwyg-beige h2,
.wysiwyg-beige h3,
.wysiwyg-beige h4,
.wysiwyg-beige h5,
.wysiwyg-beige h6,
.wysiwyg-beige li,
.wysiwyg-beige span,
.wysiwyg-beige div,
.wysiwyg-beige strong,
.wysiwyg-beige em,
.wysiwyg-beige b,
.wysiwyg-beige i,
.wysiwyg-beige a {
  color: #fffff0 !important; /* beige-light */
}

/* Liens avec couleur spéciale en beige plus clair */
.wysiwyg-beige a {
  color: #faf8f5 !important; /* beige encore plus clair */
  text-decoration: underline;
}

.wysiwyg-beige a:hover {
  color: #ffffff !important; /* blanc au hover */
}