/*
Theme Name: AtypikHouse
Theme URI: https://atypikhouse.fr
Author: AtypikHouse
Description: Thème WordPress responsive pour une plateforme d'hébergements insolites et écoresponsables.
Version: 1.0.0
Text Domain: atypikhouse
*/

:root {
  --green: #789a7d;
  --green-dark: #274d37;
  --green-soft: #eaf0e8;
  --cream: #f7f4ee;
  --paper: #fff;
  --ink: #343532;
  --muted: #7a7d78;
  --line: #e4e6e0;
  --yellow: #f6bf00;
  --shadow: 0 7px 22px rgba(44, 54, 45, .10);
  --radius: 18px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: "Montserrat", system-ui, sans-serif; line-height: 1.12; }
h1 { font-size: clamp(2.25rem, 5vw, 4.7rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: 1.2rem; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 82px 0; }
.section-title { margin-bottom: 44px; text-align: center; }
.section-title p { color: var(--muted); margin: 10px auto 0; max-width: 670px; }
.eyebrow { color: var(--green-dark); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.button {
  align-items: center;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  transition: .2s ease;
}
.button:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-2px); }
.button--light { background: #fff; color: var(--green-dark); border-color: #fff; }
.button--outline { background: transparent; border-color: currentColor; color: var(--green-dark); }
.icon-button {
  align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; display: inline-flex;
  height: 42px; justify-content: center; width: 42px;
}
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.header-inner { align-items: center; display: flex; gap: 26px; min-height: 104px; }
.brand { align-items: center; display: flex; flex: 0 0 142px; gap: 10px; }
.brand-logo, .custom-logo {
  height: 82px;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 118px;
}
.custom-logo-link { align-items: center; display: flex; }
.brand-mark { height: 62px; width: 72px; }
.brand-name { color: var(--green-dark); font: 800 .7rem/1.1 "Montserrat", sans-serif; letter-spacing: .12em; }
.brand-name small { color: #c49c3d; display: block; font-size: .38rem; margin-top: 5px; }
.main-nav { margin-left: auto; }
.main-nav ul { align-items: center; display: flex; gap: clamp(17px, 2vw, 34px); list-style: none; margin: 0; padding: 0; }
.main-nav a { font-size: .92rem; font-weight: 700; }
.main-nav a:hover, .main-nav .current-menu-item > a { color: var(--green); }
.header-actions { align-items: center; display: flex; gap: 10px; }
.header-actions .button { min-height: 46px; padding-inline: 25px; }
.menu-toggle { background: none; border: 0; display: none; font-size: 1.5rem; padding: 8px; }
.search-tabs { background: #fff; border-bottom: 1px solid var(--line); padding: 22px 0; }
.search-tabs__inner { align-items: center; display: flex; gap: 20px; justify-content: center; }
.search-tabs__label { color: var(--muted); font-weight: 700; }
.search-tab { align-items: center; border: 1px solid var(--line); border-radius: 999px; display: flex; gap: 12px; padding: 10px 20px; }
.search-tab strong, .search-tab small { display: block; }
.search-tab small { color: var(--muted); font-size: .7rem; }
.search-tab.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.search-tab.is-active small { color: #eef6ef; }
.hero {
  align-items: center; background: linear-gradient(90deg, rgba(16, 42, 28, .65), rgba(16, 42, 28, .35)),
  url("https://images.unsplash.com/photo-1439853949127-fa647821eba0?auto=format&fit=crop&w=2000&q=88") center/cover;
  color: #fff; display: flex; min-height: 600px; text-align: center;
}
.hero__content { margin: auto; max-width: 960px; }
.hero h1 { margin-bottom: 18px; }
.hero p { font-size: 1.15rem; margin: 0 auto 30px; max-width: 700px; }
.booking-search {
  align-items: center; background: #fff; border-radius: 18px; box-shadow: var(--shadow); color: var(--ink);
  display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr auto; margin-top: 38px; padding: 10px;
}
.field-inline { border-right: 1px solid var(--line); padding: 8px 16px; text-align: left; }
.field-inline label { color: var(--muted); display: block; font-size: .72rem; font-weight: 800; }
.field-inline input { border: 0; outline: 0; padding: 3px 0; width: 100%; }
.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.image-card { border-radius: var(--radius); min-height: 310px; overflow: hidden; position: relative; }
.image-card img { height: 100%; object-fit: cover; width: 100%; transition: .45s; }
.image-card:hover img { transform: scale(1.04); }
.image-card::after { background: linear-gradient(transparent 35%, rgba(0, 0, 0, .75)); content: ""; inset: 0; position: absolute; }
.image-card__content { bottom: 0; color: #fff; left: 0; padding: 25px; position: absolute; z-index: 1; }
.image-card__content h3 { font-size: 1.5rem; margin-bottom: 3px; }
.experience-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.experience-grid .image-card { min-height: 360px; }
.destination-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.destination-grid .image-card { min-height: 220px; }
.listing-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 3px 8px rgba(0,0,0,.06); overflow: hidden; position: relative; }
.listing-card__image { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.listing-card__body { padding: 18px; }
.listing-card h3 { margin-bottom: 5px; }
.listing-card .place { color: var(--muted); font-size: .86rem; }
.listing-card .price { font-size: 1.12rem; font-weight: 900; margin: 12px 0 0; }
.rating { color: var(--yellow); font-weight: 900; }
.rating span { color: var(--ink); }
.favorite { position: absolute; right: 12px; top: 12px; z-index: 2; }
.favorite.is-active { background: #ff4365; color: #fff; }
.listing-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.green-band { background: var(--green); color: #fff; }
.commitments { display: grid; gap: 36px; grid-template-columns: repeat(3, 1fr); text-align: center; }
.commitment-icon { align-items: center; background: rgba(255,255,255,.17); border-radius: 50%; display: flex; font-size: 1.5rem; height: 64px; justify-content: center; margin: 0 auto 18px; width: 64px; }
.testimonial-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.testimonial { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.testimonial p { font-size: .9rem; }
.newsletter-cta { background: var(--green); color: #fff; padding: 68px 0; text-align: center; }
.newsletter-form { display: flex; gap: 10px; justify-content: center; margin: 24px auto 0; max-width: 580px; }
.newsletter-form input { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; min-width: 0; padding: 13px 20px; width: 100%; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.8); }
.site-footer { background: var(--green); color: rgba(255,255,255,.88); padding: 68px 0 24px; }
.footer-grid { display: grid; gap: 55px; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; }
.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { border-radius: 8px; height: 116px; mix-blend-mode: multiply; object-fit: contain; width: 150px; }
.footer-grid h4 { color: #fff; font-size: 1rem; margin-bottom: 22px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: 9px 0; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.2); margin-top: 55px; padding-top: 24px; text-align: center; }
.socials { display: flex; gap: 15px; margin-top: 22px; }
.page-hero { background: var(--green); color: #fff; padding: 76px 0; text-align: center; }
.page-hero--image { background: linear-gradient(rgba(35,76,48,.62), rgba(35,76,48,.62)), url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1800&q=85") center/cover; padding: 120px 0; }
.page-hero h1 { margin-bottom: 12px; }
.page-hero p { font-size: 1.1rem; margin: 0 auto; max-width: 700px; }
.filters { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.filter-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 17px; }
.filter-chip.is-active { background: var(--green); color: #fff; }
.catalog-layout { display: grid; gap: 32px; grid-template-columns: 1fr; }
.notice { background: var(--green-soft); border-radius: 12px; color: var(--green-dark); padding: 14px 18px; }
.detail-gallery { display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
.detail-gallery img { border-radius: 14px; height: 100%; object-fit: cover; width: 100%; }
.detail-gallery img:first-child { grid-row: 1 / 3; }
.detail-layout { display: grid; gap: 45px; grid-template-columns: minmax(0, 1fr) 360px; }
.detail-content section { border-bottom: 1px solid var(--line); padding: 28px 0; }
.detail-content p { color: #555; }
.booking-box { align-self: start; background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 24px; position: sticky; top: 126px; }
.booking-box input, .booking-box select, .form-control {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 48px; padding: 10px 14px; width: 100%;
}
.booking-box .two-col { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.booking-box label { display: block; font-size: .75rem; font-weight: 800; margin: 13px 0 5px; }
.booking-box .button { margin-top: 18px; width: 100%; }
.feature-list { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; }
.review { border-top: 1px solid var(--line); padding: 22px 0; }
.map-placeholder { align-items: center; background: #ece8df; border-radius: 15px; color: var(--muted); display: flex; flex-direction: column; font-size: 1.1rem; justify-content: center; min-height: 340px; }
.experience-cards { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
.experience-cards .image-card { min-height: 420px; }
.cta-panel { background: var(--green); border-radius: 20px; color: #fff; padding: 55px; text-align: center; }
.split-panel { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 1fr; }
.split-panel img { border-radius: 18px; box-shadow: var(--shadow); width: 100%; }
.value-grid, .team-grid { display: grid; gap: 30px; grid-template-columns: repeat(4, 1fr); text-align: center; }
.team-grid { grid-template-columns: repeat(3, 1fr); }
.team-grid img { border-radius: 50%; height: 180px; margin: 0 auto 18px; object-fit: cover; width: 180px; }
.blog-featured { background: #fff; border-radius: 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.blog-featured img { height: 100%; object-fit: cover; }
.blog-featured__content { padding: 50px; }
.blog-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
.blog-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.blog-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.blog-card__body { padding: 20px; }
.tag { background: var(--green-soft); border-radius: 999px; color: var(--green); display: inline-block; font-size: .72rem; font-weight: 800; padding: 5px 10px; }
.contact-layout { display: grid; gap: 70px; grid-template-columns: 1fr 1fr; }
.contact-form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-item { display: flex; gap: 18px; margin-bottom: 28px; }
.contact-icon { align-items: center; background: var(--green-soft); border-radius: 50%; color: var(--green); display: flex; flex: 0 0 48px; height: 48px; justify-content: center; }
.faq { margin: 70px auto 0; max-width: 950px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 12px 0; overflow: hidden; }
.faq-question { align-items: center; background: none; border: 0; display: flex; font-weight: 800; justify-content: space-between; padding: 20px; text-align: left; width: 100%; }
.faq-answer { display: none; padding: 0 20px 20px; }
.faq-item.is-open .faq-answer { display: block; }
.map-layout { display: grid; gap: 0; grid-template-columns: 1fr 390px; min-height: 580px; }
.map-canvas { align-items: center; background: #edeae2; color: var(--muted); display: flex; flex-direction: column; justify-content: center; }
.map-canvas { display: block; min-height: 580px; z-index: 1; }
.map-results { background: #fff; max-height: 580px; overflow: auto; padding: 24px; }
.map-result { border-bottom: 1px solid var(--line); display: grid; gap: 16px; grid-template-columns: 100px 1fr; padding: 18px 0; }
.map-result { cursor: pointer; transition: background .2s, padding .2s; }
.map-result.is-selected { background: var(--green-soft); margin-inline: -12px; padding-inline: 12px; }
.map-result img { border-radius: 12px; height: 100px; object-fit: cover; width: 100px; }
.map-result__link { color: var(--green-dark); display: inline-block; font-size: .82rem; font-weight: 900; margin-top: 5px; }
.map-popup { display: grid; gap: 10px; grid-template-columns: 86px 1fr; }
.map-popup img { border-radius: 9px; height: 86px; object-fit: cover; width: 86px; }
.map-popup strong, .map-popup span, .map-popup b, .map-popup a { display: block; }
.map-popup span { color: var(--muted); font-size: .78rem; margin: 4px 0; }
.map-popup a { color: var(--green-dark); font-weight: 900; margin-top: 5px; }
.account-layout { display: grid; gap: 36px; grid-template-columns: 250px 1fr; }
.auth-intro { margin: 0 auto 38px; max-width: 720px; text-align: center; }
.auth-grid { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; margin: auto; max-width: 940px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 34px; }
.stack-form { display: grid; gap: 17px; }
.stack-form label { display: grid; font-size: .86rem; font-weight: 800; gap: 6px; }
.stack-form .two-col { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.stack-form .check-label { align-items: center; display: flex; font-weight: 600; }
.stack-form .check-label input { width: auto; }
.empty-state { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 55px 30px; text-align: center; }
.notice--error { background: #fff0f0; color: #8c2626; }
.account-sidebar { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 28px; }
.avatar { align-items: center; background: var(--green-soft); border-radius: 50%; color: var(--green); display: flex; font-size: 2rem; height: 90px; justify-content: center; margin: auto; width: 90px; }
.account-nav { list-style: none; margin: 28px 0 0; padding: 0; }
.account-nav li { border-radius: 10px; margin: 5px 0; padding: 12px; }
.account-nav li:first-child { background: var(--green-soft); color: var(--green-dark); }
.booking-row { align-items: center; background: #fff; border-radius: 16px; box-shadow: 0 3px 9px rgba(0,0,0,.07); display: grid; gap: 20px; grid-template-columns: 190px 1fr auto; margin-bottom: 18px; padding: 20px; }
.booking-row img { border-radius: 13px; height: 140px; object-fit: cover; width: 190px; }
.toast { background: var(--green-dark); border-radius: 10px; bottom: 24px; color: #fff; opacity: 0; padding: 14px 20px; pointer-events: none; position: fixed; right: 24px; transform: translateY(10px); transition: .25s; z-index: 200; }
.toast.is-error { background: #8c2626; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner { background: #fff; border: 1px solid var(--line); border-radius: 18px; bottom: 20px; box-shadow: 0 12px 45px rgba(24,45,31,.22); left: 50%; padding: 22px; position: fixed; transform: translateX(-50%); width: min(calc(100% - 32px), 1080px); z-index: 500; }
.cookie-banner__content { align-items: center; display: grid; gap: 26px; grid-template-columns: 1fr auto; }
.cookie-banner h2 { font-size: 1.15rem; margin: 0 0 5px; }
.cookie-banner p { color: var(--muted); font-size: .9rem; margin: 0; }
.cookie-banner p a { color: var(--green-dark); font-weight: 900; text-decoration: underline; }
.cookie-banner__icon { float: left; font-size: 2rem; margin: 2px 14px 10px 0; }
.cookie-banner__actions, .cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner__actions .button { min-height: 42px; padding-inline: 17px; }
.cookie-settings-button { background: var(--green-dark); border: 0; border-radius: 999px; bottom: 14px; color: #fff; font-size: .78rem; font-weight: 800; left: 14px; padding: 9px 14px; position: fixed; z-index: 450; }
.cookie-modal { align-items: center; background: rgba(20,31,23,.62); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 550; }
.cookie-modal[hidden], .cookie-banner[hidden], .cookie-settings-button[hidden] { display: none; }
.cookie-modal__panel { background: #fff; border-radius: 20px; box-shadow: var(--shadow); max-height: min(760px, calc(100vh - 40px)); max-width: 650px; overflow: auto; padding: 32px; position: relative; width: 100%; }
.cookie-modal__close { background: var(--green-soft); border: 0; border-radius: 50%; font-size: 1.45rem; height: 38px; position: absolute; right: 20px; top: 20px; width: 38px; }
.cookie-choice { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 1fr auto; padding: 20px 0; }
.cookie-choice p { color: var(--muted); font-size: .85rem; margin: 5px 0 0; }
.cookie-switch { align-items: center; display: flex; flex-direction: column; font-size: .7rem; gap: 4px; }
.cookie-switch input { accent-color: var(--green); height: 22px; width: 22px; }
.cookie-modal-open { overflow: hidden; }
.empty-image { align-items: center; aspect-ratio: 4/3; background: #ebe6dc; color: var(--muted); display: flex; justify-content: center; }

@media (max-width: 1000px) {
  .main-nav { background: #fff; display: none; inset: 104px 0 0; margin: 0; padding: 35px 25px; position: fixed; }
  .main-nav.is-open { display: block; }
  .main-nav ul { align-items: flex-start; flex-direction: column; }
  .main-nav a { font-size: 1.2rem; }
  .menu-toggle { display: block; margin-left: auto; }
  .header-actions .icon-button { display: none; }
  .search-tabs__label { display: none; }
  .experience-grid { grid-template-columns: repeat(2, 1fr); }
  .listing-grid, .card-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-layout, .contact-layout, .split-panel { grid-template-columns: 1fr; }
  .booking-box { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured img { max-height: 420px; width: 100%; }
  .map-layout { grid-template-columns: 1fr; }
  .map-results { max-height: none; }
  .account-layout { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 58px 0; }
  .header-inner { min-height: 78px; }
  .brand { flex-basis: 100px; }
  .brand-logo, .custom-logo { height: 62px; width: 88px; }
  .brand-mark { height: 50px; width: 58px; }
  .brand-name { display: none; }
  .main-nav { inset-block-start: 78px; }
  .header-actions .button { min-height: 40px; padding: 0 15px; }
  .search-tabs { overflow-x: auto; }
  .search-tabs__inner { justify-content: flex-start; width: max-content; }
  .search-tab { padding: 8px 13px; }
  .hero { min-height: 640px; }
  .booking-search { grid-template-columns: 1fr; }
  .field-inline { border-bottom: 1px solid var(--line); border-right: 0; }
  .booking-search .button { width: 100%; }
  .card-grid, .listing-grid, .experience-grid, .destination-grid, .experience-cards, .blog-grid,
  .commitments, .testimonial-grid, .value-grid, .team-grid { grid-template-columns: 1fr; }
  .destination-grid { grid-template-columns: 1fr 1fr; }
  .detail-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 250px 150px; }
  .detail-gallery img:first-child { grid-column: 1 / -1; grid-row: 1; }
  .detail-gallery img:nth-child(n+4) { display: none; }
  .feature-list { grid-template-columns: 1fr; }
  .cta-panel { padding: 38px 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .full { grid-column: auto; }
  .booking-row { grid-template-columns: 1fr; }
  .booking-row img { height: 210px; width: 100%; }
  .account-sidebar { text-align: center; }
  .stack-form .two-col { grid-template-columns: 1fr; }
  .cookie-banner__content { grid-template-columns: 1fr; }
  .cookie-banner__actions .button { flex: 1 1 100%; }
  .cookie-choice { align-items: start; grid-template-columns: 1fr; }
  .cookie-switch { align-items: center; flex-direction: row; }
}