/* ============================================================
   SECTIONS — Accueil (frame Figma 32:263, 1440×10875)
   ============================================================ */

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 822px;
  background: var(--c-ink);
  overflow: hidden;
}
.hero > picture, .hero > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-hero);
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-top: 215px;
  display: flex;
  justify-content: space-between;
  gap: 47px;
}
.hero-copy { width: 759px; max-width: 100%; display: flex; flex-direction: column; gap: 48px; }
.hero-copy .hero-txt { display: flex; flex-direction: column; gap: 24px; }
.hero-copy .hero-head { display: flex; flex-direction: column; gap: 8px; }
.hero-copy .hero-body { display: flex; flex-direction: column; gap: 16px; }
.hero h1 { color: var(--c-white); }
.hero-sub {
  font-size: 20px;
  line-height: 30px;
  color: var(--c-white);
}
.hero-chips { display: flex; align-items: center; gap: 16px; align-self: flex-start; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;            /* Figma : 32 px stroke compris */
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 14px;
  line-height: 17.6px;
  color: var(--c-white);
  white-space: nowrap;
}
.hero-chip .stars { display: flex; gap: 3px; }
.hero-chip .stars img { width: 12px; height: 11px; }
.hero-actions { display: flex; align-items: center; gap: 24px; align-self: flex-start; }
.hero-actions .btn { height: 46px; }

.hero-aside {
  position: absolute;      /* Figma : bloc ancré à y523, hors du flux de la colonne texte */
  top: 523px;              /* Figma : y du bloc « Parlez à nos experts » */
  right: 0;
  width: 383px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.hero-aside .scroll-ico { width: 17px; height: 16px; }
.hero-experts {
  width: 100%;
  padding: 6px;
  background: rgba(246, 246, 246, 0.2);
  border-radius: var(--r-full);
}
.hero-experts .he-in {
  position: relative;      /* ancre la zone de clic étendue de .he-call */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  background: var(--c-white);
  border-radius: var(--r-full);
  cursor: pointer;
}
/* Toute la pastille appelle, pas seulement le rond terracotta. La maquette ne nomme
   « Link » que le rond (32:309), mais le libellé « Parlez à nos experts » et les
   avatars invitent au clic sans rien déclencher. On étend la zone du lien existant
   plutôt que d'en ajouter un second : un seul lien, un seul nom accessible. */
.hero-experts .he-call::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
}
.hero-experts .he-left { display: flex; align-items: center; gap: 10px; }
.hero-experts .avatars { display: flex; }
.hero-experts .avatars span {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: #D9D9D9 center/cover no-repeat;
  border: 4px solid var(--c-white);
}
.hero-experts .avatars span + span { margin-left: -28px; }
.hero-experts .he-label {
  font-size: 16px;
  line-height: 20.2px;
  font-weight: 500;
  color: var(--c-ink);
}
.hero-experts .he-call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--c-primary);
  border-radius: var(--r-pill);
  transition: background 0.25s ease;
}
.hero-experts .he-call:hover { background: var(--c-primary-dark); }
.hero-experts .he-call img { width: 22px; height: 22px; }

/* ================= BANDE STATS ================= */
/* Figma : le crème n'est PAS le fond de la page, c'est un rectangle (32:265) qui va
   de y822 à y1994 — il ne couvre que la bande de chiffres et la section « problèmes ».
   Tout le reste est blanc, sauf les sections qui portent leur propre fond (processus,
   avis) ou une photo (tarifs, formulaire).
   Le `padding-bottom` prolonge l'aplat jusqu'à 1994 ; la marge négative l'annule dans
   le flux pour que le bento reste à y2052 (104 px après la fin de « problèmes »). */
.band-cream {
  background: var(--bg-cream);
  padding-bottom: 46px;
  margin-bottom: -46px;
}
.stats {
  position: relative;
  z-index: 3;
  max-width: var(--w-container);
  margin: -100px auto 0;   /* cartes à cheval sur le héro (y722 vs héro 822) */
  display: grid;           /* grid plutôt que flex : 3 colonnes strictement égales (379 px) */
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.stat-card {
  position: relative;
  min-width: 0;
  min-height: 351px;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-card .sc-num {
  font-family: var(--f-head);
  font-size: 60px;
  line-height: 72px;
  font-weight: 500;
  color: var(--c-ink);
}
.stat-card .sc-body { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.stat-card .sc-body h2 {
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}
.stat-card .sc-body p { font-size: 18px; line-height: 27px; }
.stat-card .sc-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-primary);
}
.stat-card .sc-link img { width: 8px; height: 8px; }
.stat-card .sc-dot {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 13px;
  height: 13px;
  background: var(--c-gold);
  border-radius: var(--r-chip);
}
.stat-card--visual {
  align-self: start;       /* Figma : 341 px, 10 px de moins que les deux autres */
  justify-content: flex-start;
  padding: 0;
  height: 341px;
  min-height: 341px;
  background: linear-gradient(180deg, rgba(252, 193, 99, 0.3) 0%, rgba(252, 193, 99, 0.01) 100%), var(--c-white);
  overflow: hidden;
}
.stat-card--visual h2 {
  font-family: var(--f-head);
  font-size: 34px;
  line-height: 44.2px;
  font-weight: 500;
  color: #321F01;
  padding: 32px 32px 0;
  max-width: 331px;
  position: relative;      /* Figma : le titre passe devant la silhouette */
  z-index: 2;
}
/* Silhouette de palmier — Figma 32:394, @1131,699 294x424 dans une carte @941,722.
   Elle déborde volontairement de 23 px au-dessus de la carte, qui la rogne
   (`overflow: hidden`). Largeur en % pour qu'elle suive la carte hors 1440 px. */
.stat-card--visual .sc-palm {
  position: absolute;
  left: 50.13%;            /* 190 / 379 */
  top: -23px;
  width: 77.57%;           /* 294 / 379 */
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.stat-card--visual > img:not(.sc-palm) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 217px;
  object-fit: cover;
  object-position: top;
  z-index: 1;
}

/* ================= PROBLÈMES ================= */
.problems { padding-top: 88px; padding-bottom: 10px; }
.problems-intro { position: relative; }
.problems-intro img { width: 100%; height: 320px; object-fit: cover; }
.problems-intro .pi-txt { padding-inline: 24px; }

/* Composition Figma (photo à gauche, texte qui la chevauche) : à partir du grand format.
   Les % valent exactement les cotes Figma à 1440 px (794/1440, 528/1440, 792/1440)
   et se réduisent ensuite sans jamais déborder. */
@media (min-width: 1100px) {
  .problems-intro { height: 320px; }
  .problems-intro picture {
    position: absolute;
    left: 0;
    top: 0;
    width: 55.139%;        /* 794 px à 1440 */
    height: 320px;
    overflow: hidden;
  }
  /* Figma 32:401 est en STRETCH : la source 829x374 y est affichée à l'échelle 1,
     fenêtre (15,54)-(809,374). En « cover » l'image était réduite de 4 % et centrée
     verticalement, ce qui descendait la villa d'une trentaine de pixels. */
  .problems-intro img {
    position: absolute;
    left: -1.889%;         /* -15 / 794 */
    top: -16.875%;         /* -54 / 320 */
    width: 104.408%;       /* 829 / 794 */
    height: 116.875%;      /* 374 / 320 */
    max-width: none;
    object-fit: fill;
  }
  .problems-intro .pi-txt {
    position: absolute;
    left: 36.667%;         /* 528 px à 1440 */
    top: 0;
    width: 55%;            /* 792 px à 1440 */
    padding-inline: 0;
  }
}
.problems-grid {
  position: relative;
  max-width: var(--w-container);
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.problems-grid .pg-row { display: flex; gap: 32px; }
.problem-card {
  flex: 1;
  background: var(--c-white);
  border-radius: var(--r-tile);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.problem-card .pc-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--t-primary-08);
  display: grid;
  place-content: center;
}
.problem-card .pc-ico img { width: 18px; height: 18px; }
.problem-card h3 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}
.problem-card p { font-size: 16px; line-height: 24px; margin-top: 10px; }
.problems-note {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.problems-note p { width: 500px; font-size: 14px; line-height: 21px; }
.problems-note .btn { padding: 13px 24px; }

/* ================= BENTO SERVICES ================= */
.bento { max-width: var(--w-container); margin: 104px auto 0; }
.bento .section-head { align-items: center; text-align: center; margin-inline: auto; max-width: 918px; }
.bento-grid { margin-top: 48px; display: flex; flex-direction: column; gap: 32px; }
.bento-row { display: flex; gap: 32px; }
.bento-card {
  position: relative;
  height: 350px;
  border-radius: var(--r-tile);
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.bento-card.w-narrow { width: 486px; flex: none; }
.bento-card.w-wide { flex: 1; }
.bento-card > picture, .bento-card > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-photo);
  z-index: 1;
}
.bento-card .bc-arrow {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 58px;
  height: 58px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-content: center;
}
.bento-card .bc-arrow img { width: 22px; height: 22px; }
.bento-card .bc-txt {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* Figma : le bouton est en HUG (213 px), pas étiré */
  gap: 32px;
}
.bento-card .bc-txt > div { width: 100%; }
/* Une carte sans bouton doit réserver la hauteur de celui-ci, sinon son titre
   descend de ~50 px par rapport aux cartes voisines qui en ont un.
   La marge négative annule le `gap: 32px` du parent : on ne réserve que les
   46 px du bouton, pas 46 + 32. En rangée (≥1101 px) la réserve doit au contraire
   valoir bouton + gap, voir le bloc « parité Figma ». */
.bento-card .bc-txt:not(:has(.btn))::after {
  content: '';
  display: block;
  height: 46px;
  margin-top: -32px;
}
.bento-card h3 {
  font-size: 24px;
  line-height: 31.2px;
  font-weight: 500;
  color: var(--c-white);
}
.bento-card p {
  font-size: 16px;
  line-height: 24px;
  color: var(--c-white);
  margin-top: 10px;
}
.bento-card .btn { padding: 13px 24px; }
.bento-cta {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* ================= PROCESSUS ================= */
.process {
  margin-top: 104px;
  background: var(--bg-process);
  padding: 60px var(--pad-page);
}
.process-in { max-width: var(--w-container); margin-inline: auto; }
.process .section-head { align-items: center; text-align: center; }
.process-steps {
  position: relative;
  margin-top: 56px;
  display: flex;
  gap: 24px;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 39px;
  left: 168px;
  right: 168px;
  height: 2px;
  background: var(--l-sand-2);
  border: 1px solid var(--l-sand);
  border-radius: var(--r-pill);
}
.step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.step .st-ico {
  position: relative;
  width: 80px;
  height: 80px;
  background: var(--bg-card);
  border: 1px solid var(--l-sand);
  border-radius: var(--r-pill);
  display: grid;
  place-content: center;
}
.step .st-ico > img { width: 25px; height: 24px; }
.step .st-num {
  position: absolute;
  top: -7px;
  right: -13px;
  width: 20px;
  height: 20px;
  background: var(--c-primary);
  border-radius: var(--r-pill);
  display: grid;
  place-content: center;
  font-size: 10px;
  line-height: 12.6px;
  font-weight: 600;
  color: var(--bg-cream);
}
.step .st-txt { display: flex; flex-direction: column; gap: 10px; min-height: 132px; }
.step h3 { font-size: 20px; line-height: 26px; font-weight: 500; }
.step .st-tag {
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-top: 5px;
}
.step p { font-size: 16px; line-height: 24px; }

/* ================= VILLAS ================= */
.villas { max-width: var(--w-container); margin: 104px auto 0; }
.villas .section-head { align-items: center; text-align: center; }
/* Les puces de filtre par ville sont passees dans components.css : elles
   servent aussi sur toutes-les-villas, qui ne charge pas cette feuille. */
.villas-cards {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ================= SERVICES (6 cartes) ================= */
.services { max-width: var(--w-container); margin: 104px auto 0; }
.services-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 99px;
}
.services-head .section-head { max-width: 888px; }
.services-head .btn { flex: none; padding: 16px 30px; height: 50px; }
.services-grid { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
.services-grid .sg-row { display: flex; gap: 24px; }
.service-card {
  flex: 1;
  background: var(--bg-soft);
  border-radius: var(--r-box);
  padding: 30px;
}
.service-card .sc-top { display: flex; align-items: center; gap: 16px; }
.service-card .sc-ico {
  width: 62px;
  height: 62px;
  flex: none;
  background: var(--t-primary-05);
  border: 0.5px solid var(--t-primary-10);
  border-radius: var(--r-pill);
  display: grid;
  place-content: center;
}
.service-card .sc-ico img { width: 28px; height: 28px; }
.service-card h3 { font-size: 22px; line-height: 27.5px; font-weight: 400; }
.service-card hr {
  border: 0;
  border-top: 1px solid var(--l-line);
  margin: 24px 0;
}
.service-card p { font-size: 16px; line-height: 24px; }

/* ================= SERVICES ANNEXES ================= */
.annexes { max-width: var(--w-container); margin: 104px auto 0; }
.annexes .section-head { align-items: center; text-align: center; max-width: 918px; margin-inline: auto; }
.annexes-cta { margin-top: 24px; display: flex; justify-content: center; gap: 24px; }
.annexes-cta .btn { height: 46px; }
.annexes-cta .btn--outline img { width: 16px; height: 16px; }
.annexes-cta .btn--outline { font-size: 15px; line-height: 18.9px; font-weight: 400; }   /* valeurs Figma */
.annexes-row { margin-top: 48px; display: flex; gap: 32px; }
.annexe-card {
  position: relative;
  flex: 1;
  height: 400px;
  border-radius: var(--r-block);
  overflow: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.annexe-card > picture, .annexe-card > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.annexe-card .ac-body {
  position: relative;
  z-index: 1;
  background: var(--bg-soft);
  border-radius: var(--r-box);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.annexe-card h3 { font-size: 20px; line-height: 25px; font-weight: 500; }
.annexe-card p { font-size: 16px; line-height: 24px; }

/* ================= TARIFS ================= */
.pricing {
  position: relative;
  margin-top: 104px;
  padding: 56px var(--pad-page);
  overflow: hidden;
}
.pricing > picture, .pricing > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pricing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.pricing-in {
  position: relative;
  z-index: 2;
  max-width: var(--w-container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 88px;
}
.pricing-head .section-head { max-width: 812px; }
.pricing-head h2, .pricing-head .badge { color: var(--c-white); }
.pricing-head .btn { flex: none; height: 50px; padding: 16px 30px; }
.pricing-body { display: flex; align-items: center; gap: 48px; }
.pricing-body .pb-txt {
  width: 430px;
  flex: none;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-white);
}
.pricing-cards { display: flex; gap: 24px; flex: 1; justify-content: flex-end; }
.pricing-card {
  background: var(--c-white);
  border-radius: var(--r-block);
  padding: 24px;
  height: 252px;           /* Figma : hauteur FIXED des deux cartes tarifs */
}
.pricing-card--list { width: 374px; flex: none; }   /* Figma : largeurs FIXED */
.pricing-card--rate {
  width: 324px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.pricing-card h3 {
  font-size: 32px;
  line-height: 41.6px;
  text-align: center;
}
.pricing-card ul {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.pricing-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
}
.pricing-card li img { width: 20px; height: 20px; flex: none; }
.pricing-card--rate .rate-big {
  font-family: var(--f-head);
  font-size: 0;
  line-height: 1;
  color: var(--c-ink);
  white-space: nowrap;
}
.pricing-card--rate .rate-value { font-size: 50px; line-height: 1; font-weight: 600; }
.pricing-card--rate .rate-tax { font-size: 26px; line-height: 1; font-weight: 500; }
.pricing-card--rate .rate-sub {
  font-family: var(--f-head);
  font-size: 20px;
  line-height: 25px;
  color: var(--c-ink);
  margin-top: 24px;
}
.pricing-card--rate p { font-size: 16px; line-height: 24px; margin-top: 10px; }

/* ================= À PROPOS ================= */
.about {
  max-width: var(--w-container);
  margin: 104px auto 0;
  display: flex;
  gap: 56px;
}
.about-txt {
  width: 588px;
  flex: none;
  align-self: flex-start;
  margin-top: 8px;         /* Figma : la colonne texte démarre 8 px sous la section */
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about-txt .at-intro {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--c-body);
  margin-top: 6px;
}
.about-txt .at-desc { font-size: 14px; line-height: 21px; }
.about-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.about-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 17.6px;
}
.about-list img { width: 16px; height: 16px; flex: none; }
.about-actions { display: flex; gap: 24px; }
.about-visual {
  position: relative;
  flex: 1;
  min-height: 456px;
}
.about-visual::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 250px;
  height: 258px;
  background: rgba(196, 106, 74, 0.5);
  border-radius: var(--r-card);
}
.about-visual::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 250px;
  height: 258px;
  background: rgba(252, 193, 99, 0.5);
  border-radius: var(--r-card);
}
.about-visual img {
  position: absolute;
  left: 9px;
  top: 8px;
  width: calc(100% - 17px);
  height: 440px;
  object-fit: cover;
  border-radius: var(--r-box);
  z-index: 1;
}

/* ================= AVIS ================= */
.reviews {
  margin-top: 104px;
  background: var(--bg-cream);
  padding: 56px var(--pad-page);
}
.reviews-in { max-width: var(--w-container); margin-inline: auto; }
.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.reviews-head .section-head { max-width: 888px; }
.airbnb-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 10px 28px 10px 10px;
  background: var(--c-white);
  border-radius: 107px;
}
.airbnb-pill .ab-logo {
  width: 57px;
  height: 57px;
  border: 0.53px solid rgba(255, 56, 92, 0.2);
  border-radius: 107px;
  display: grid;
  place-content: center;
}
.airbnb-pill .ab-logo img { width: 31px; height: 34px; }
.airbnb-pill .ab-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-head);
  font-size: 18px;
  line-height: 21px;
  font-weight: 600;
  color: #171414;
}
.airbnb-pill .ab-score img { width: 15px; height: 15px; }
.airbnb-pill .ab-count {
  font-family: var(--f-manrope);
  font-size: 12.8px;
  line-height: 19.2px;
  color: var(--c-body);
  margin-top: 4px;
}
.reviews-slider { margin-top: 48px; }
.slider-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc((100vw - var(--w-container)) / -2);
  padding-inline: calc((100vw - var(--w-container)) / 2);
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: center; }
.slider-dots {
  margin-top: 32px;
  height: 14px;            /* Figma : la puce active porte un anneau de 14 px */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.slider-dots button {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: #652A2A;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.slider-dots button.is-active {
  opacity: 1;
  background: var(--c-primary-deep);
  outline: 0.64px solid rgba(138, 70, 45, 0.6);
  outline-offset: 3px;
}

/* ================= CTA FORMULAIRE ================= */
.cta-form {
  position: relative;
  margin-top: 104px;
  padding: 60px var(--pad-page);
  overflow: hidden;
}
.cta-form > picture, .cta-form > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cta-form::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.cta-form-in {
  position: relative;
  z-index: 2;
  max-width: var(--w-container);
  margin-inline: auto;
  display: flex;
  gap: 48px;
}
.cta-copy { width: 494px; flex: none; display: flex; flex-direction: column; justify-content: flex-start; gap: 66px;   /* Figma pose la pastille 66 px sous le texte, pas en bas de colonne */ }
.cta-copy .cc-txt { display: flex; flex-direction: column; gap: 66px; }
.cta-copy h2 {
  font-size: 62px;
  line-height: 77.5px;
  color: var(--c-white);
}
.cta-copy .cc-sub {
  font-size: 18px;
  line-height: 27px;
  color: var(--c-white);
  margin-top: 6px;   /* 6 + le gap 10 de .section-head = les 16 px de Figma */
}
.cta-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-pill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cta-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  line-height: 28.8px;
  color: var(--c-primary-dark);
  min-width: 0;   /* l’e-mail réel déborde de la pastille : on le laisse se compresser */
}
.cta-contact a:hover { color: var(--c-primary); }
.cta-contact img { width: 22px; height: 18px; }
.cta-card {
  flex: 1;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 40px;
}
.cta-card h2 {
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 500;
  margin-bottom: 32px;
}
/* Figma met le formulaire en HUG (539 px) dans une carte de 658 : il y restait
   cale a gauche, 79 px de vide a droite contre 40 a gauche — et jusqu'a 425 px
   de vide a 1100 px, ou la carte passe pleine largeur sans que le formulaire
   suive. Ecart assume vis-a-vis de la maquette, a la demande du client : le
   formulaire remplit sa carte, marges egales a toutes les largeurs. */
.cta-card form { width: 100%; }

/* ================= GALERIE ================= */
.gallery { max-width: var(--w-container); margin: 104px auto 0; }
.gallery .section-head { align-items: center; text-align: center; }
.gallery-row { margin-top: 48px; display: flex; gap: 24px; }
.gallery-item {
  position: relative;
  flex: 1;
  height: 422px;
  border-radius: var(--r-img);
  overflow: hidden;
}
.gallery-item picture, .gallery-item picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-gallery);
  z-index: 1;
}
/* Le pictogramme « lecture » a été retiré de la galerie : les visuels sont des
   photos, pas des vidéos, et le bouton ne menait nulle part. Le dégradé
   `.gallery-item::after` et la légende restent, eux, inchangés. */
.gallery-item figcaption {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 15px;
  text-align: center;
  font-family: var(--f-head);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-white);
}
.gallery-social {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 32px;
}
.social-card {
  width: 253px;
  height: 108px;           /* Figma : hauteur FIXED de la carte réseau social */
  padding: 16px 44px;
  background: #FEFEFE;
  border: 0.88px solid rgba(84, 58, 48, 0.08);
  border-radius: var(--r-box);
  box-shadow: var(--sh-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.social-card img { width: 41px; height: 41px; }
.social-card img[alt="YouTube"] { width: 52px; height: 40px; }
.social-card span {
  font-size: 18px;
  line-height: 22.7px;
  font-weight: 300;
  color: var(--c-handle);
}
/* ================= AJUSTEMENTS DESKTOP — PARITÉ FIGMA ACCUEIL ================= */
@media (min-width: 1101px) {
  /* La capitalisation de chaque mot (`textCase: TITLE` en Figma) a ete
     retiree le 28.08.2026 : en francais un titre ne prend pas une majuscule
     a chaque mot, et les memes phrases s'affichaient en casse normale sur
     les pages qui n'avaient pas cette regle. */

  /* Figma : les 4 descriptions bento occupent 2 lignes (48 px). Les nôtres n'en font
     qu'une sur les cartes 2 et 3, ce qui remontait leur titre de 24 px par rapport
     à la carte voisine de la même rangée. */
  .bento-card .bc-txt > div p { min-height: 48px; }
  /* Dès que les cartes sont côte à côte, celle qui n'a pas de bouton doit réserver
     sa hauteur ET le `gap: 32px` — sinon son titre reste 30 px au-dessus du voisin. */
  .bento-card .bc-txt:not(:has(.btn))::after { height: 44px; margin-top: 0; }

  .nav-links { margin-right: 26px; }
  .nav-links a[aria-current="page"] { min-width: 51px; text-align: center; }

  .hero > picture img {
    inset: auto;
    left: -0.02%;
    top: -3.14%;
    width: 107.64%;
    height: 125.71%;
    max-width: none;
    object-fit: fill;
  }

  .stat-card--visual > img:not(.sc-palm) { bottom: -8px; }
  .step .st-num { right: -7px; }
  .villa-card .vc-meta ul:last-child { min-width: 114px; }

  .services-head { align-items: flex-start; }
  .services-head > .btn { margin-top: 74px; }

  .annexes-cta .btn--outline { gap: 8px; }
  .annexes-cta .btn--outline img { width: 16px; height: 16px; }

  /* Cadrage des deux photos annexes — Figma 32:754 et 32:758 sont en STRETCH avec un
     recadrage (imageTransform), pas en « cover » centré : la source y est plus zoomée
     et décalée. Sans ça la scène est ~18 % trop large et mal centrée. */
  .annexe-card > picture img {
    inset: auto;
    max-width: none;
    object-fit: fill;
  }
  .annexes-row .annexe-card:nth-child(1) > picture img {
    left: -2.322%;
    top: -4.233%;
    width: 121.58%;
    height: 118.24%;
  }
  .annexes-row .annexe-card:nth-child(2) > picture img {
    left: -3.220%;
    top: -12.178%;
    width: 115.41%;
    height: 112.23%;
  }

  .pricing > picture img {
    inset: auto;
    left: 0;
    top: -46.87%;
    width: 100%;
    height: 165.23%;
    max-width: none;
    object-fit: fill;
  }

  .about-txt .at-desc { margin-top: 14px; }
  .about-list { margin-top: 0; }

  .cta-contact a {
    font-size: 16px;
    line-height: 25.6px;
    white-space: nowrap;
  }

  .footer-bottom strong,
  .footer-bottom a { font-weight: 500; }
}

/* ================= FAQ ================= */
.faq {
  max-width: var(--w-container);
  height: 476px;           /* Figma : hauteur FIXED de la section FAQ */
  margin: 104px auto;
  display: flex;
  gap: 48px;
}
.faq-side { width: 421px; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;   /* le gap ne doit jamais dépasser l’espace libre : sinon l’encart sort de la section */ }
.faq-side .fs-intro {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  margin-top: 6px;         /* 6 + gap 10 du .section-head = 16 px (Figma) */
}
.faq-help {
  background: var(--t-primary-05);
  border-radius: var(--r-box);
  padding: 24px;
}
.faq-help h3 {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  opacity: 0.88;
}
.faq-help p {
  font-size: 12px;
  line-height: 18px;
  opacity: 0.7;
  margin-top: 14px;
}
.faq-help .btn--outline {
  margin-top: 32px;
  height: 40px;
  padding: 5px 24px;
  font-family: var(--f-manrope);
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
}
.faq-help .btn--outline img { width: 11px; height: 11px; }
.faq-list { flex: 1; display: flex; flex-direction: column; gap: 16px; }

/* ================= POP-UP ================= */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.popup-overlay.is-open { display: flex; }
.popup {
  width: 1023px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--c-white);
  border-radius: 58px;
  box-shadow: 0 0 39px 0 rgba(0, 0, 0, 0.04);
  padding: 40px 24px;
}
/* Bouton de fermeture : posé dans un conteneur collant de hauteur nulle, il
   reste visible pendant que la pop-up défile sans décaler son contenu. */
.popup-close-zone {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 0;
  display: flex;
  justify-content: flex-end;
}
.popup-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  border: 0.8px solid var(--l-card);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease;
}
.popup-close:hover { background: var(--bg-cream); }
.popup-close img { width: 14px; height: 14px; }

.popup-in { max-width: 762px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 32px; }   /* valeur Figma */
.popup-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }   /* valeur Figma */
.popup-rating {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 7px 18px;
  background: #FCFBF8;
  border: 0.5px solid var(--l-card);
  border-radius: var(--r-pill);
}
.popup-rating .pr-logo {
  width: 28px;
  height: 28px;
  background: var(--c-white);
  border-radius: 15px;
  display: grid;
  place-content: center;
}
.popup-rating .pr-logo img { width: 16px; height: 17px; }
.popup-rating .stars { display: flex; gap: 4px; }
.popup-rating .stars img { width: 12px; height: 12px; }
.popup-rating span { font-size: 14px; line-height: 17.6px; color: #000; }
.popup-head p { font-size: 16px; line-height: 24px; color: var(--c-body); }
.popup-choices { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.popup-choice {
  position: relative;
  width: 350px;
  height: 500px;
  border-radius: 32px;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.popup-choice > picture, .popup-choice > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.popup-choice::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}
.popup-choice .bc-arrow {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: var(--c-white);
  display: grid;
  place-content: center;
}
.popup-choice .bc-arrow img { width: 12px; height: 12px; }
.popup-choice .pc-txt {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.popup-choice h3 {
  font-size: 24px;
  line-height: 31.2px;
  font-weight: 500;
  color: var(--c-white);
}
.popup-choice p {
  min-height: 84px;   /* aligne les titres des deux cartes, comme en maquette */
  font-size: 15px;
  line-height: 21px;
  color: var(--c-white);
  margin-top: 8px;
}
.popup-choice .btn { width: 100%; height: 46px; font-weight: 400; font-size: 15px; }
/* Toute la carte est cliquable, pas seulement le bouton : le lien de celui-ci
   est étiré sur la carte entière. Un seul <a> dans le DOM — pas de lien
   dupliqué pour les lecteurs d'écran, contrairement à une carte enveloppée. */
/* Toute la carte est cliquable, pas seulement le bouton (voir main.js). Le
   lien étiré en `::after` a été écarté : la photo et `.pc-txt` créent chacune
   leur contexte d'empilement, et le pseudo-élément, pourtant bien dimensionné
   sur la carte, ne recevait pas le clic au-dessus de la photo. */
.popup-choice { cursor: pointer; }
.popup-continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 20.2px;
  font-weight: 500;
  /* Le doré ne contraste qu'à 1,62:1 sur le blanc de la pop-up — sous le
     minimum de 4,5:1, le lien se voyait à peine. Le terracotta foncé monte à
     6,27:1 et reste dans la palette. Le soulignement dit qu'il est cliquable. */
  color: var(--c-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.popup-continue:hover { color: var(--c-primary-deep); }

/* Défilement de la page neutralisé tant que la pop-up est ouverte : elle
   couvre tout l'écran, faire glisser le fond derrière n'a aucun sens. */
body.popup-ouverte { overflow: hidden; }
.popup-continue img { width: 9px; height: 9px; }

/* ================= RESPONSIVE ACCUEIL ================= */
@media (max-width: 1240px) {
  .hero-inner { padding-inline: 24px; }
  /* `.problems-note` manquait : elle collait aux deux bords de l'écran alors que
     les cartes juste au-dessus sont rentrées de 24 px. */
  .stats, .problems-grid, .problems-note, .bento, .villas, .services, .annexes, .about, .gallery, .faq { padding-inline: 24px; }
  .slider-track { margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 1100px) {
  .hero::after { background: var(--g-hero-etroit); }
  .h-hero { font-size: 52px; line-height: 1.2; }
  .h-section { font-size: 40px; line-height: 1.3; }
  .hero-aside { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .problems-intro { display: flex; flex-direction: column; gap: 24px; }
  .bento-row { flex-direction: column; }
  .bento-card.w-narrow { width: 100%; }
  .process-steps { flex-wrap: wrap; gap: 40px 24px; }
  .process-steps::before { display: none; }
  .step { flex: 1 1 40%; }
  .step .st-txt { min-height: 0; }
  .services-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .services-grid .sg-row { flex-direction: column; }
  /* `flex: 1` vaut `flex-basis: 0` : en colonne il écrase le `height: 400px` de la
     carte, qui retombe à la hauteur de son encart de texte — la photo, en fond
     absolu, se retrouvait entièrement recouverte. Même piège que `.aps-row`. */
  .annexes-row { flex-direction: column; }
  .annexes-row > .annexe-card {
    flex: none;
    height: auto;
    min-height: 400px;
    padding-top: 150px;    /* réserve la photo au-dessus de l'encart, quelle que soit
                              la longueur du texte (sinon 76 px seulement à 320 px) */
  }
  .pricing-body { flex-direction: column; align-items: stretch; }
  .pricing-body .pb-txt { width: 100%; }
  .about { flex-direction: column; }
  .about-txt { width: 100%; }
  .about-visual { min-height: 420px; }
  .reviews-head { flex-direction: column; align-items: flex-start; }
  .cta-form-in { flex-direction: column; }
  .cta-copy { width: 100%; gap: 32px; }
  .cta-copy .cc-txt { gap: 32px; }
  .cta-copy h2 { font-size: 44px; line-height: 1.25; }
  .gallery-row { flex-wrap: wrap; }
  .gallery-item { flex: 1 1 45%; }
  .gallery-social { flex-wrap: wrap; gap: 16px; }
  .faq { flex-direction: column; height: auto; }
  .faq-side { width: 100%; }
}
@media (max-width: 640px) {
  .h-hero { font-size: 38px; }
  .h-section { font-size: 30px; }
  .hero { min-height: 0; }
  .hero-inner { padding-top: 140px; padding-bottom: 56px; }
  .hero-chips { flex-wrap: wrap; }
  .hero-actions { flex-wrap: wrap; gap: 12px; }
  .stats { margin-top: 32px; grid-template-columns: 1fr; }
  .stat-card { min-height: 0; gap: 24px; }
  .stat-card--visual { min-height: 341px; }
  .problems { padding-top: 56px; }
  .bento, .process, .villas, .services, .annexes, .about, .gallery, .faq { margin-top: 64px; }
  .process { padding: 48px 20px; }
  .step { flex: 1 1 100%; }
  .pricing { padding: 48px 20px; margin-top: 64px; }
  .pricing-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pricing-cards { flex-direction: column; }
  .pricing-card { height: auto; min-height: 0; }
  .pricing-card--list, .pricing-card--rate { width: 100%; }
  .pg-row { flex-direction: column; }
  .problems-note { flex-direction: column; align-items: flex-start; }
  .cta-card form { width: 100%; }
  .problems-note p { width: auto; }
  .reviews { padding: 48px 20px; margin-top: 64px; }
  .cta-form { padding: 48px 20px; }
  .cta-copy h2 { font-size: 34px; }
  .cta-card { padding: 24px; }
  .cta-contact { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gallery-item { flex: 1 1 100%; }
  .bento-cta, .annexes-cta, .about-actions { flex-wrap: wrap; gap: 12px; }
  .popup-overlay { padding: 12px; }
  .popup { border-radius: 32px; padding: 24px 16px; }
  .popup-in { gap: 24px; }
  .popup-head h2 { font-size: 26px; line-height: 1.2; }
}

/* Placé en fin de fichier pour passer après la règle de base .problems-grid :
   en grand format la grille remonte sur le bas de la photo (Figma y1434). */
@media (min-width: 1100px) {
  .problems-grid { margin-top: -47px; }
}

@media (max-width: 1080px) {
  /* Deux cartes de 350 px + 40 de gouttière = 740 px : sous cette largeur elles
     sortaient du cadre arrondi de la pop-up. */
  .popup-choices { flex-direction: column; align-items: center; gap: 16px; }

  /* Empilées, deux cartes de 420 px de haut plus l'en-tête dépassaient de loin
     la hauteur d'un téléphone : le second choix restait invisible tant qu'on
     ne faisait pas défiler, et rien ne suggérait qu'il existait. Les cartes
     passent donc en rangées compactes — photo à gauche, texte à droite — ce
     qui fait tenir les deux à l'écran. */
  .popup-choice {
    width: 100%;
    max-width: 420px;
    height: auto;
    min-height: 128px;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-radius: 20px;
    background: var(--c-white);
    border: 0.8px solid var(--l-card);
  }
  .popup-choice > picture {
    position: relative;
    inset: auto;
    flex: none;
    width: 112px;
    height: auto;
  }
  .popup-choice > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* Le dégradé ne servait qu'à poser du texte blanc sur la photo. */
  .popup-choice::after { display: none; }
  .popup-choice .bc-arrow { display: none; }
  /* `min-width: 0` : sans cela la colonne de texte refuse de descendre sous la
     largeur du bouton (`white-space: nowrap`), et la carte débordait de la
     pop-up de 67 px sur un écran de 320 px. */
  .popup-choice .pc-txt { gap: 10px; padding: 12px 14px; min-width: 0; }
  .popup-choice h3 { font-size: 16px; line-height: 21px; color: var(--c-ink); }
  .popup-choice p {
    min-height: 0;
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--c-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .popup-choice .btn { height: 38px; font-size: 13px; }
}

/* Très petits écrans : la vignette et le bouton se resserrent pour que le
   libellé du bouton, qui ne se coupe pas, tienne dans la colonne de texte. */
@media (max-width: 400px) {
  .popup-choice > picture { width: 84px; }
  .popup-choice .pc-txt { padding: 10px 12px; }
  .popup-choice .btn { font-size: 12px; padding-left: 12px; padding-right: 12px; }
}

/* Écrans courts (petits téléphones, fenêtres basses) : on sacrifie le
   sous-titre et les marges avant le second choix, qui doit rester visible
   sans défilement. */
@media (max-width: 1080px) and (max-height: 660px) {
  .popup { padding: 16px 14px; }
  .popup-in { gap: 16px; }
  .popup-head { gap: 8px; }
  .popup-head p { display: none; }
  .popup-head h2 { font-size: 22px; }
  .popup-choices { gap: 12px; }
  .popup-choice p { -webkit-line-clamp: 1; }
}

/* ---------- Bloc tarifs : rien ne doit sortir du cadre ----------
   Le bloc fait exactement 1200 px (430 + 48 + 374 + 24 + 324), la largeur utile
   a 1440. Sous cette largeur la section garde ses 120 px de marge laterale : la
   place tombe a `fenetre - 240` pendant que les trois blocs gardaient leur
   largeur FIXED Figma. La carte de droite sortait alors du cadre et
   `overflow: hidden` la coupait sans bruit (160 px a 1280, 339 px a 1101).
   Meme cause entre 641 et 1100 px, ou les cartes restent cote a cote dans une
   section a 48 px de marge : 722 px de cartes pour 672 de place a 768 px.
   On les laisse se comprimer ; a 1440 les valeurs Figma sont inchangees. */
@media (min-width: 641px) and (max-width: 1439px) {
  /* `flex-grow: 0` : avec 1, le texte absorbait toute la place libre et ecrasait
     les cartes a 161 px (le « 20%* TTC » debordait alors de la sienne). Chaque
     bloc part de sa largeur Figma et ne fait que se comprimer, au prorata. */
  .pricing-body .pb-txt { width: auto; flex: 0 1 430px; min-width: 0; }
  .pricing-cards { min-width: 0; }
  .pricing-card--list { width: auto; flex: 0 1 374px; min-width: 0; }
  .pricing-card--rate { width: auto; flex: 0 1 324px; min-width: 0; }
  /* La hauteur FIXED de 252 px vient aussi de Figma : une fois la carte plus
     etroite, les listes passent sur plus de lignes et sortaient par le bas. */
  .pricing-card, .pricing-card--list, .pricing-card--rate { height: auto; min-height: 252px; }
}