/* =========================================================
   Le Kapokier – feuille de style unique
   Couleurs et polices modifiables ici, dans :root
   ========================================================= */

:root {
  --vert: #1f4d3a;        /* vert jardin, couleur principale */
  --vert-fonce: #143428;
  --terracotta: #c4622d;  /* accent, boutons */
  --terracotta-fonce: #a54f22;
  --sable: #f6f1e7;       /* fonds alternés */
  --texte: #23302a;
  --texte-doux: #5b665f;
  --blanc: #ffffff;
  --bord: #e3dccd;
  --vert-logo: #2f8a4c;  /* vert feuillage du logo, pour les illustrations */
  --encre: #1d211f;      /* noir du trait du logo */

  --police-titre: "Fraunces", Georgia, serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rayon: 14px;
  --ombre: 0 10px 30px rgba(20, 52, 40, .10);
  --largeur: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  overflow-x: clip; /* le bandeau d'avis déborde volontairement de la grille */
  margin: 0;
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc);
}
img { max-width: 100%; display: block; }
a { color: var(--terracotta); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--vert-fonce); }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.3rem; }

.container { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: 88px 0; }
.section-alt { background: var(--sable); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; color: var(--terracotta); margin: 0 0 .6em; }
.section-lead { font-size: 1.12rem; color: var(--texte-doux); max-width: 680px; margin: 0 0 2.5rem; }

/* Boutons */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--terracotta); color: var(--blanc);
  font: 600 1rem var(--police-texte);
  padding: 14px 24px; border-radius: 999px; text-decoration: none; text-align: center;
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--terracotta-fonce); transform: translateY(-1px); }
.btn-small { padding: 9px 18px; font-size: .92rem; }
.btn-outline { background: transparent; color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert); }
.btn-outline:hover { background: var(--vert); color: var(--blanc); }

/* En-tête */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; gap: 2px; }
.brand-logo { height: 38px; width: auto; }
.brand-name { font-family: var(--police-titre); font-size: 1.45rem; font-weight: 600; color: var(--vert-fonce); }
.brand-sub { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a:not(.btn) { color: var(--texte); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav a:not(.btn):hover { color: var(--terracotta); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--vert-fonce); margin: 5px 0; transition: transform .2s, opacity .2s; }

/* Hero */
.hero { position: relative; min-height: min(88vh, 860px); display: flex; align-items: flex-end; color: var(--blanc); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,30,22,.45) 0%, rgba(10,30,22,.55) 45%, rgba(10,30,22,.85) 100%); }
.hero-content { position: relative; padding-top: 120px; padding-bottom: 64px; }
/* Sur-titre sur fond blanc pour rester lisible sur la photo */
.hero .eyebrow { display: inline-block; background: rgba(255,255,255,.94); color: var(--terracotta-fonce); font-weight: 700; padding: 6px 12px; border-radius: 999px; line-height: 1.4; margin-bottom: 1.1rem; }
.hero h1 { color: var(--blanc); max-width: 760px; }
.hero-lead { font-size: 1.2rem; max-width: 620px; margin: 0 0 2rem; opacity: .95; }
.hero-note { font-size: .92rem; opacity: .9; margin: 1rem 0 0; }

.booking-bar {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr) auto; gap: 12px; align-items: end;
  background: var(--blanc); color: var(--texte); padding: 16px; border-radius: var(--rayon); box-shadow: var(--ombre);
  max-width: 820px;
}
.booking-bar label { min-width: 0; display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); gap: 4px; }
.booking-bar input, .booking-bar select, .newsletter input {
  font: 500 1rem var(--police-texte); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 10px; padding: 11px 12px; background: var(--blanc); width: 100%;
}
/* iOS donne aux champs date une largeur minimale qui fait déborder la grille */
.booking-bar input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; min-height: 46px; }
.booking-bar input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Pourquoi */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature { padding: 28px 24px; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); }
.feature-icon { width: 56px; height: 56px; display: block; margin-bottom: 14px; }
.feature p { color: var(--texte-doux); margin: 0; }
.feature .feature-highlight { white-space: nowrap; display: inline-block; margin-top: 12px; background: var(--terracotta); color: var(--blanc); font-weight: 600; font-size: .82rem; padding: 5px 11px; border-radius: 999px; }

/* Offres */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.offer { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--ombre); position: relative; }
.offer-for { color: var(--texte-doux); margin: 0 0 1rem; }
.price { font-size: 1rem; color: var(--texte-doux); margin: 0 0 1.2rem; }
.price strong { font-family: var(--police-titre); font-size: 2rem; color: var(--vert-fonce); }
.price s { color: var(--texte-doux); margin-right: 4px; }
.price span { margin-left: 2px; }
.price-note { font-size: .88rem; color: var(--texte-doux); margin: -.8rem 0 1.2rem; }
.offer-featured .price-note { color: #cfe0d6; }
.offers-note { text-align: center; color: var(--texte-doux); font-size: .92rem; margin: 2rem 0 0; }
.offer ul { padding: 0; margin: 0 0 1.8rem; list-style: none; flex: 1; }
.offer li { padding: 6px 0 6px 26px; position: relative; }
.offer li::before { content: "✓"; position: absolute; left: 0; color: var(--terracotta); font-weight: 700; }
.offer-featured { background: var(--vert); color: var(--blanc); }
.offer-featured h3, .offer-featured .price strong { color: var(--blanc); }
.offer-featured .offer-for, .offer-featured .price, .offer-featured .price s { color: #cfe0d6; }
.offer-featured li::before { color: #ffb68a; }
.badge { position: absolute; top: -13px; left: 28px; background: var(--terracotta); color: var(--blanc); font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; }

/* Chambres */
.rooms { display: grid; gap: 40px; }
.room { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center; }
.room:nth-child(even) .room-gallery { order: 2; }
.room-gallery { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.room-gallery img { width: 100%; height: 340px; object-fit: cover; border-radius: var(--rayon); }
.room h3 { font-size: 1.9rem; }
.room h3 span { font-family: var(--police-texte); font-size: .95rem; font-weight: 500; color: var(--texte-doux); margin-left: 8px; }
.room-hook { color: var(--terracotta); font-weight: 600; margin: 0 0 .6rem; }
.tags { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { background: var(--sable); border-radius: 999px; padding: 5px 12px; font-size: .85rem; }

/* La maison */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; margin-bottom: 2.5rem; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--rayon); }
.mosaic .m-wide { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 500; }
.amenities { columns: 2; gap: 40px; padding-left: 20px; color: var(--texte-doux); margin: 0; }
.amenities li { margin-bottom: 6px; break-inside: avoid; }

/* Le Nord */
.nord { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Collage façon moodboard : photos posées, inclinées, qui se chevauchent */
.nord-board {
  position: relative;
  width: 100%;
  aspect-ratio: 768 / 560;
  container-type: inline-size;
}
.nb-photo {
  position: absolute;
  margin: 0;
  background: #fff;
  padding: 1.1cqw 1.1cqw 4.6cqw;
  box-shadow: 0 1.2cqw 3cqw rgba(20, 52, 40, .18);
  transition: transform .35s, z-index 0s;
}
.nb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: .9cqw;
  text-align: center;
  font-family: 'Caveat', cursive; font-size: 3.1cqw; color: var(--vert-fonce);
}
.nb-photo:hover { transform: rotate(0deg) scale(1.06); z-index: 10; }
.nb-cascade  { left: 3%;  top: 16%; width: 27%; height: 62%; transform: rotate(-5deg); z-index: 3; }
.nb-pelee    { left: 31%; top: 3%;  width: 40%; height: 40%; transform: rotate(3deg);  z-index: 2; }
.nb-mer      { right: 2%; top: 21%; width: 37%; height: 40%; transform: rotate(-3deg); z-index: 4; }
.nb-memorial { left: 25%; top: 52%; width: 38%; height: 40%; transform: rotate(2deg);  z-index: 5; }
.nb-ruines   { right: 4%; top: 66%; width: 28%; height: 34%; transform: rotate(6deg);  z-index: 6; }
.nb-title {
  position: absolute; left: 2%; top: -2%; z-index: 7;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 8cqw; color: var(--vert-fonce);
  transform: rotate(-6deg);
}
.nb-dots {
  position: absolute; right: 1%; top: 0; width: 22%; height: 22%;
  background-image: radial-gradient(var(--terracotta) 22%, transparent 24%);
  background-size: 2.6cqw 2.6cqw;
  opacity: .55;
}
.nb-leaf { position: absolute; left: 0; bottom: -2%; width: 7%; transform: rotate(-18deg); z-index: 7; }
.distances { list-style: none; padding: 0; margin: 0; }
.distances li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--bord); }
.distances strong { color: var(--vert); white-space: nowrap; }

/* Avis */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { margin: 0; background: var(--blanc); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre); }
.review p { font-family: var(--police-titre); font-size: 1.15rem; margin: 0 0 1rem; color: var(--vert-fonce); }
.review cite { font-style: normal; color: var(--texte-doux); font-size: .9rem; }
.review-todo { outline: 2px dashed var(--terracotta); }
.reviews-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.review-score { font-family: var(--police-texte) !important; font-size: .85rem !important; font-weight: 600; color: var(--terracotta) !important; margin: 0 0 .5rem !important; }
.btn-whatsapp { background: #25d366; }
.btn-whatsapp:hover { background: #1ebe5b; }

/* Réserver en direct */
.direct { background: var(--vert); color: var(--blanc); }
.direct h2 { color: var(--blanc); }
.direct .eyebrow { color: #ffb68a; }
.direct-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.direct-list { list-style: none; padding: 0; margin: 0; font-size: 1.1rem; }
.direct-list li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.newsletter { background: var(--blanc); color: var(--texte); padding: 32px; border-radius: var(--rayon); display: grid; gap: 14px; }
.newsletter h3 { margin: 0; }
.newsletter p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.newsletter label { display: grid; gap: 4px; font-size: .88rem; font-weight: 600; }
.newsletter .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--texte-doux); }
.newsletter .consent input { width: auto; margin-top: 4px; }

/* FAQ + contact */
.faq-contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
details { background: var(--blanc); border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; }
summary { font-weight: 600; cursor: pointer; }
details p { margin: .6rem 0 0; color: var(--texte-doux); }
.contact-card { background: var(--blanc); border-radius: var(--rayon); padding: 32px; box-shadow: var(--ombre); display: grid; gap: 14px; }
.contact-line { color: var(--texte); text-decoration: none; margin: 0; }
a.contact-line:hover { color: var(--terracotta); }

/* Pied de page */
.site-footer { background: var(--vert-fonce); color: #cfe0d6; padding: 32px 0; font-size: .92rem; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer p { margin: 0; }
.footer-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-brand img { height: 34px; width: auto; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: #cfe0d6; }

/* Bouton fixe mobile */
.sticky-cta { display: none; }

/* ===== Tablette ===== */
@media (max-width: 960px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .offers { grid-template-columns: 1fr; max-width: 520px; }
  .room, .nord, .direct-inner, .faq-contact { grid-template-columns: 1fr; gap: 24px; }
  .room:nth-child(even) .room-gallery { order: 0; }
  .reviews, .reviews-2 { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .booking-bar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .booking-bar .btn { grid-column: span 2; }
}

/* ===== Mobile ===== */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .container { padding: 0 16px; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc); border-bottom: 1px solid var(--bord);
    padding: 8px 16px 16px; display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--bord); }
  .nav .btn { margin-top: 12px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { min-height: min(92vh, 760px); }
  .hero-content { padding-bottom: 40px; }
  .hero-lead { font-size: 1.05rem; }
  .booking-bar { padding: 12px; gap: 10px; }
  .booking-bar input, .booking-bar select { padding: 10px 8px; font-size: .95rem; }
  .features { grid-template-columns: 1fr; }
  .room-gallery img { height: 240px; }
  .amenities { columns: 1; }
  .site-footer { padding-bottom: 96px; }
  .sticky-cta { display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; box-shadow: var(--ombre); transform: translateY(150%); transition: transform .3s; }
  .sticky-cta.visible { transform: none; }
}

/* Avis en défilement continu (pause au survol) */
.reviews-marquee { overflow: hidden; margin: 0 -20px; padding: 10px 0 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-track { display: flex; gap: 24px; width: max-content; animation: defile 55s linear infinite; padding: 0 20px; }
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
.reviews-track .review { width: 340px; flex: 0 0 auto; margin: 0; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
@media (max-width: 760px) { .reviews-track .review { width: 280px; } .reviews-track { animation-duration: 45s; } }
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
  .reviews-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .reviews-track .review[aria-hidden="true"] { display: none; }
}

/* Mot qui change dans « … à 30 min max » */
.rotator { display: inline-block; transition: opacity .3s, transform .3s; }
.rotator.out { opacity: 0; transform: translateY(-6px); }

/* Champ piège anti-spam du formulaire d'offres (invisible pour les visiteurs) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pages légales */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.45rem; margin-top: 2.2em; }
.legal h3 { font-size: 1.1rem; margin-top: 1.6em; }
.legal p, .legal li { color: var(--texte); }
.legal ul { padding-left: 1.2em; }
.legal .maj { color: var(--texte-doux); font-size: .92rem; }