/* ============================================================
   COMPOSANTS PARTAGÉS — header, footer, formulaires, cartes
   ============================================================ */

/* ================= HEADER ================= */
/* La barre reste visible pendant le defilement (`fixed` et non `absolute` :
   elle flottait deja au-dessus du heros sans occuper de place dans le flux,
   le passage a `fixed` ne decale donc aucune section). Au-dela des 40 px de
   marge haute, le JS pose `is-stuck` et la pilule se compacte pour rendre de
   la hauteur d'ecran au contenu. */
.site-header {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--w-container), calc(100% - 48px));
  z-index: 100;
  transition: top 0.3s ease;
}
.site-header.is-stuck { top: 12px; }
.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 12px 40px;
  background: var(--c-white);
  border: 0.75px solid rgba(151, 151, 151, 0.1);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-nav);
  transition: height 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-stuck .nav-pill {
  height: 78px;
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.10);
}
.nav-logo img { width: 143px; height: 67px; transition: width 0.3s ease, height 0.3s ease; }
.site-header.is-stuck .nav-logo img { width: 118px; height: 55px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .nav-pill, .nav-logo img { transition: none; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a {
  position: relative;
  font-size: 14px;
  line-height: 17.6px;
  color: var(--c-ink);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--c-primary); }
.nav-links a[aria-current="page"] { color: var(--c-primary); font-weight: 500; }
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;
  width: 10px;
  border-bottom: 1.5px solid var(--c-gold);
}
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 8px 12px 8px 8px;
  background: #FBFBFB;
  border: 0.5px solid #F5F5F5;
  border-radius: var(--r-pill);
}
.nav-phone .wa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--c-whatsapp);
}
.nav-phone .wa img { width: 15px; height: 15px; }
.nav-phone span {
  font-size: 15px;
  line-height: 18.9px;
  font-weight: 500;
  color: #272422;
}
.nav-book {
  display: inline-flex;
  align-items: center;
  gap: 16px;   /* valeur Figma : 6 px rendait le bouton 12 px trop étroit */
  height: 46px;
  padding: 13px 20px;
  background: var(--c-primary);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-pill);
  color: var(--c-white);
  font-size: 15px;
  line-height: 18.9px;
  transition: background 0.25s ease;
}
.nav-book:hover { background: var(--c-primary-dark); }
.nav-burger { display: none; }

/* ================= FOOTER ================= */
.site-footer {
  background: var(--bg-footer);
  color: var(--c-white);
  padding: 64px var(--pad-page);
  overflow: hidden;
}
.footer-inner { max-width: var(--w-container); margin-inline: auto; }
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.footer-brand { max-width: 421px; display: flex; flex-direction: column; gap: 32px; }
.footer-logo img { width: 208px; height: 97px; }
.footer-brand p {
  font-size: 18px;
  line-height: 30.6px;
  font-weight: 300;
  color: var(--c-white);
}
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  transition: transform 0.2s ease;
}
.footer-social a:hover { transform: translateY(-2px); }
.footer-social img { width: 16px; height: 16px; }
.footer-cols { display: flex; gap: 119px; }   /* valeur Figma */
.footer-col h2 {
  font-family: var(--f-head);
  font-size: 18px;
  line-height: 23.4px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--c-white);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li {
  font-size: 14px;
  line-height: 16px;
  font-weight: 300;
  color: var(--c-white);
}
.footer-col a:hover { color: var(--c-gold); }
.footer-col .fc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-col .fc a { overflow-wrap: anywhere; }
.footer-col .fc img { width: 12px; height: 14px; }
.footer-bottom {
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 300;
}
.footer-bottom a:hover { color: var(--c-gold); }

/* ================= FORMULAIRE ================= */
.form-grid { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: flex; gap: 24px; }
.form-row > * { flex: 1; }
.input, .textarea {
  width: 100%;
  padding: 18px;
  background: var(--bg-input);
  border-radius: var(--r-input);
  font-size: 14px;
  line-height: 21px;
  font-weight: 300;
  color: var(--c-ink);
}
.input { height: 58px; }
.input::placeholder, .textarea::placeholder { color: var(--c-muted); }
.textarea { height: 120px; border-radius: var(--r-textarea); resize: vertical; }
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--c-muted);
}
.form-check input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  background: var(--c-white);
  border: 1px solid var(--l-input-check);
  border-radius: var(--r-check);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.form-check input:checked { background: var(--c-primary); border-color: var(--c-primary); }
.form-check input:checked::before {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
  transform: rotate(-45deg) translateY(-1px);
}
/* Le libellé tient sur une ligne à 1440 px, pas sur un téléphone : sans padding
   horizontal, le texte replié occupait toute la largeur et poussait la flèche
   sur l'arrondi, hors de la pastille (visible dès 360 px). On reprend le
   `pad13/28` de la maquette — invisible en grand format, le contenu y étant
   centré et bien plus étroit que le bouton — et `height` devient `min-height`
   pour que le bouton grandisse avec deux lignes au lieu de les serrer. */
.form-submit {
  width: 100%;
  min-height: 58px;
  padding: 13px 28px;
  margin-top: 8px;         /* Figma : 32 px avant le bouton (24 de gap + 8) */
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 16px;
  line-height: 20.2px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  box-shadow: var(--sh-btn);
  transition: background 0.25s ease;
}
.form-submit:hover { background: var(--c-primary-dark); }
.form-submit[disabled] { opacity: 0.6; cursor: progress; }
.form-submit[disabled]:hover { background: var(--c-primary); }
.form-status { font-size: 14px; margin-top: 8px; display: none; }
.form-status.ok { display: block; color: var(--c-ok); }
.form-status.err { display: block; color: var(--c-err); }
.form-status.info { display: block; color: var(--c-muted); }

/* Honeypot anti-spam : invisible pour les humains, laissé dans le flux DOM
   pour que les robots le remplissent. Pas de display:none (certains bots
   l'ignorent). */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================= CARTE VILLA ================= */
.villa-card {
  width: 384px;
  flex: none;   /* sans quoi une rangée de 4 cartes les rétrécit à 282 px */
  background: var(--c-white);
  /* `outline` plutôt que `border` : la bordure rognait 1,5 px de contenu. */
  outline: 0.75px solid var(--l-card);
  outline-offset: -0.75px;
  border-radius: var(--r-villa);
  box-shadow: var(--sh-pop);
  padding: 8px;
}
.villa-card > .vc-in { display: flex; flex-direction: column; gap: 8px; }

/* ---- Carte entierement cliquable ----
   Le visiteur cliquait la photo ou le titre sans que rien ne se passe : seul le
   bouton « Decouvrir » menait a la fiche. On etire la zone de clic de ce bouton
   a toute la carte plutot que d'imbriquer un second lien, ce qui serait invalide
   et doublerait les arrets au clavier. Le bouton reste visible et garde son
   focus : rien ne change pour la navigation au clavier ni pour un lecteur
   d'ecran. */
.villa-card { position: relative; }
/* `est-cliquable` est posee par le script sur les blocs dont il relaie le clic :
   le curseur ne ment donc jamais, meme si le lien attendu venait a manquer. */
.est-cliquable { cursor: pointer; }
/* Le clic sur la carte est relaye vers le bouton « Decouvrir » par le script :
   une zone etiree en CSS (`::after` sur le lien) passait bien au-dessus au sens
   de `elementFromPoint`, mais ne declenchait pas la navigation au clic reel. */
/* Un leger relief au survol signale que la carte entiere reagit. Pas de zoom
   sur la photo : la carte n'a pas d'`overflow: hidden` et l'image agrandie
   deborderait de l'angle arrondi. */
.villa-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.villa-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .villa-card { transition: none; }
  .villa-card:hover { transform: none; }
}
.villa-card .vc-img {
  height: 240px;
  border-radius: var(--r-media);
  object-fit: cover;
  width: 100%;
}
.villa-card .vc-body { padding: 10px; display: flex; flex-direction: column; gap: 32px; }
.villa-card .vc-txt { display: flex; flex-direction: column; gap: 20px; }
.villa-card h3 {
  font-size: 18px;
  line-height: 28.8px;
  font-weight: 400;
}
.villa-card .vc-meta {
  display: flex;
  justify-content: space-between;
  gap: 28px;
}
.villa-card .vc-meta ul { display: flex; flex-direction: column; gap: 12px; }
.villa-card .vc-meta li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-ink-2);
  white-space: nowrap;
}
.villa-card .vc-meta img { flex: none; }
.villa-card .btn { width: 100%; padding: 16px 30px; height: 44px; }

/* ================= CARTE AVIS ================= */
.review-card {
  width: 517px;
  height: 266px;           /* Figma : hauteur FIXED de la carte avis */
  flex: none;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 28px;
  overflow: hidden;
}
.review-card .rv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.review-card .rv-who { display: flex; align-items: center; gap: 13px; }
.review-card .rv-who img { width: 48px; height: 48px; border-radius: var(--r-pill); object-fit: cover; }
.review-card .rv-name {
  font-family: var(--f-head);
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-ink);
}
.review-card .rv-from { font-size: 12px; line-height: 12px; margin-top: 7px; }
.review-card .rv-brand img { width: 30px; height: 32px; }
.review-card .rv-stars { display: flex; gap: 6px; margin-top: 24px; }
.review-card .rv-stars img { width: 16px; height: 16px; }
.review-card blockquote {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--c-body);
}

/* ================= BLOC FAQ ================= */
.faq-item {
  background: var(--c-white);
  border: 1px solid #F8F8F8;
  border-radius: var(--r-faq);
}
/* La maquette fixe la hauteur de la question (62 px) parce qu'elle y tient sur
   une ligne à 1440 px. Sur un petit écran la même question passe à 2 ou 3
   lignes : le texte sortait alors du cadre blanc, 3 px au-dessus et 3 px en
   dessous (mesuré à 320 px sur les 5 questions de la page contact).
   `min-height` garde les 62 px exacts tant que la question tient sur une ligne,
   et laisse le cadre grandir avec le texte au lieu de le rogner. */
.faq-item:not([open]) summary { min-height: 60px; }   /* 60 + 2 px de bordure = 62 px (Figma) */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 56px;
  min-height: 62px;
  padding: 14px 20px;      /* n'agit qu'à partir de 2 lignes : 14+21,6+14 < 62 */
  font-family: var(--f-head);
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 400;
  color: var(--c-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
}
.faq-item[open] {
  border: 0;
  box-shadow: var(--sh-faq);
  padding: 10px 10px 20px;
}
.faq-item[open] summary {
  background: var(--t-primary-10);
  border-radius: var(--r-faq-q);
  font-weight: 500;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a {
  margin-top: 20px;
  min-height: 52px;        /* Figma : bloc réponse de 52 px */
  padding: 0 20px;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-review);
}


/* ================= FILTRES PAR VILLE (accueil + toutes les villas) ================= */
/* Deplaces depuis sections-accueil.css le 28.08.2026 : la barre sert sur deux
   pages, et toutes-les-villas ne charge pas la feuille de l'accueil — les puces
   y sortaient en texte brut, alignees a gauche hors du conteneur. */
.villas-filters {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.villas-filters button {
  height: 42px;
  padding: 17px 26px;
  display: inline-flex;
  align-items: center;
  border: 0.75px solid var(--l-line-2);
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 21px;
  color: #4D4D4D;
  transition: background 0.2s ease, color 0.2s ease;
}
.villas-filters button:hover { background: var(--bg-cream); }
.villas-filters button.is-active {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #3A1D13;
  font-weight: 500;
}