/* ==========================================================================
   LUCHON CONCIERGERIE — Custom styles
   Tailwind v4 (browser CDN) gère la majorité.
   Ce fichier : fonts, variables, animations, micro-interactions.
   ========================================================================== */

:root {
  --c-cream:        #F5F1E8;
  --c-cream-light:  #FAF7EF;
  --c-cream-dark:   #ECE5D3;
  --c-blue-dark:    #3D4A5C;
  --c-blue-deep:    #2C3845;
  --c-blue-mid:     #5A6B7C;
  --c-blue-light:   #A8C5D1;
  --c-sage:         #B8CFC8;
  --c-muted:        #8A8580;
  --c-line:         rgba(61, 74, 92, 0.18);
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--c-cream);
  color: var(--c-blue-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--c-blue-dark); color: var(--c-cream); }

/* ===== Font utility classes ===== */
.font-serif   { font-family: 'Cormorant Garamond', serif; font-feature-settings: "liga", "dlig"; }
.font-script  { font-family: 'Allura', cursive; }
.font-sans    { font-family: 'Inter', sans-serif; }

/* ===== Color utility classes ===== */
.bg-cream         { background-color: var(--c-cream); }
.bg-cream-light   { background-color: var(--c-cream-light); }
.bg-cream-dark    { background-color: var(--c-cream-dark); }
.bg-blue-dark     { background-color: var(--c-blue-dark); }
.bg-blue-deep     { background-color: var(--c-blue-deep); }
.bg-blue-mid      { background-color: var(--c-blue-mid); }
.bg-blue-light    { background-color: var(--c-blue-light); }
.bg-sage          { background-color: var(--c-sage); }

.text-cream       { color: var(--c-cream); }
.text-cream-light { color: var(--c-cream-light); }
.text-blue-dark   { color: var(--c-blue-dark); }
.text-blue-deep   { color: var(--c-blue-deep); }
.text-blue-mid    { color: var(--c-blue-mid); }
.text-blue-light  { color: var(--c-blue-light); }
.text-sage        { color: var(--c-sage); }
.text-muted       { color: var(--c-muted); }

.border-blue-dark { border-color: var(--c-blue-dark); }
.border-blue-mid  { border-color: var(--c-blue-mid); }
.border-line      { border-color: var(--c-line); }
.border-cream     { border-color: var(--c-cream); }

/* ===== Typography refinements ===== */
.tracking-widestx { letter-spacing: 0.3em; }
.tracking-x25     { letter-spacing: 0.25em; }

em.serif-em { font-style: italic; font-weight: 500; }
em.serif-em-bold { font-style: italic; font-weight: 600; }

/* ===== Animations ===== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-zoom-out {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes draw-stroke {
  to { stroke-dashoffset: 0; }
}

.animate-hero-zoom {
  animation: hero-zoom-out 3s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}
.animate-fade-up-1 { opacity: 0; animation: fade-up 1.2s cubic-bezier(0.25, 0.4, 0.25, 1) 0.2s forwards; }
.animate-fade-up-2 { opacity: 0; animation: fade-up 1.2s cubic-bezier(0.25, 0.4, 0.25, 1) 0.5s forwards; }
.animate-fade-up-3 { opacity: 0; animation: fade-up 1.2s cubic-bezier(0.25, 0.4, 0.25, 1) 0.9s forwards; }
.animate-fade-up-4 { opacity: 0; animation: fade-up 1.2s cubic-bezier(0.25, 0.4, 0.25, 1) 1.2s forwards; }
.animate-fade-up-5 { opacity: 0; animation: fade-up 1.2s cubic-bezier(0.25, 0.4, 0.25, 1) 1.4s forwards; }
.animate-fade-in   { opacity: 0; animation: fade-in 1s ease-out 0.1s forwards; }

/* ===== Scroll reveal (IntersectionObserver) ===== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.2s cubic-bezier(0.25, 0.4, 0.25, 1),
              transform 1.2s cubic-bezier(0.25, 0.4, 0.25, 1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== Header (transparent → solide au scroll) ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.5s ease, color 0.4s ease;
}
.site-header > div {
  transition: padding-top 0.4s ease, padding-bottom 0.4s ease;
}
.site-header .header-logo img {
  transition: height 0.4s ease;
}

.site-header.scrolled {
  background-color: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--c-blue-dark) !important;
  border-bottom: 1px solid var(--c-line);
}
.site-header.scrolled .header-link,
.site-header.scrolled .header-logo,
.site-header.scrolled .burger-line {
  color: var(--c-blue-dark);
  background-color: var(--c-blue-dark);
}
.site-header.scrolled .header-link,
.site-header.scrolled .header-logo {
  background-color: transparent;
}

/* Au scroll : header compact (padding réduit + logo plus petit) */
.site-header.scrolled > div {
  padding-top: 6px;
  padding-bottom: 6px;
}
.site-header.scrolled .header-logo img {
  height: 48px;
}
@media (min-width: 768px) {
  .site-header.scrolled .header-logo img {
    height: 56px;
  }
}

/* ===== Underline link animation ===== */
.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.link-underline:hover::after {
  transform-origin: left center;
  transform: scaleX(0);
  animation: underline-redraw 0.9s 0.25s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}
@keyframes underline-redraw {
  from { transform-origin: left center; transform: scaleX(0); }
  to   { transform-origin: left center; transform: scaleX(1); }
}

/* ===== Burger menu icon ===== */
.burger-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.burger-line {
  display: block;
  height: 1px;
  width: 28px;
  background-color: currentColor;
  transition: transform 0.4s, width 0.4s, opacity 0.3s;
}
.burger-line:nth-child(2) { width: 22px; margin-left: auto; }
.burger-btn:hover .burger-line:nth-child(2) { width: 28px; }
.burger-btn.open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 28px; }
.burger-btn.open .burger-line:nth-child(2) { opacity: 0; }
.burger-btn.open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Full menu overlay ===== */
.full-menu {
  position: fixed;
  inset: 0;
  background-color: var(--c-blue-deep);
  color: var(--c-cream);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.full-menu.open {
  opacity: 1;
  visibility: visible;
}
body.menu-open { overflow: hidden; }

/* ===== Image zoom container ===== */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform 1.2s cubic-bezier(0.25, 0.4, 0.25, 1);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-zoom:hover img { transform: scale(1.05); }

/* ===== Services slider (polaroïd + texte piloté) ===== */
.service-img {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.25, 0.4, 0.25, 1);
}
.service-img.active {
  opacity: 1;
}

.services-current-number,
.services-title,
.services-script,
.services-body,
.services-caption {
  transition: opacity 280ms ease;
}
.services-fading {
  opacity: 0 !important;
}

.services-dot {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--c-blue-dark);
  opacity: 0.35;
  font-weight: 300;
  transition: opacity 0.35s, font-weight 0.35s;
  letter-spacing: 0.05em;
}
.services-dot:hover { opacity: 0.7; }
.services-dot.active {
  opacity: 1;
  font-weight: 500;
}
/* Petit trait à gauche du dot actif pour insister visuellement */
.services-dot.active::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  transform-origin: left;
  animation: dot-line-grow 0.4s ease-out;
}
@keyframes dot-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Italic spécifique au chiffre du slider services */
.services-current-number {
  font-style: italic;
}

/* ===== Tag "recommandation" — petit libellé discret avec picto étoile ===== */
.formula-recommendation-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-blue-dark);
}
.formula-recommendation-tag svg {
  width: 12px;
  height: 12px;
  color: var(--c-blue-mid);
  flex-shrink: 0;
}

/* ===== Watermark géant éditorial ===== */
.formulas-watermark {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(280px, 38vw, 480px);
  line-height: 0.85;
  color: var(--c-blue-dark);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ===== Diptyque d'intro formules ===== */
.formula-intro {
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.formula-intro[data-formula]:hover {
  transform: translateY(-3px);
}

/* Numéro géant italique à gauche de chaque intro */
.formula-numeral {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--c-blue-dark);
  opacity: 0.15;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* Séparateur central (& + ligne verticale) */
.formulas-amp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: var(--c-cream);
  padding: 8px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  color: var(--c-blue-mid);
  opacity: 0.55;
}

/* ===== Container 2 fiches : empilées mobile, côte à côte desktop ===== */
.formulas-grid {
  margin-top: 6rem;
}
@media (min-width: 1024px) {
  .formulas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
  .formulas-grid > .formulas-fiche-divider {
    display: none;
  }
  .formulas-grid .formula-fiche {
    max-width: none;
    margin: 0;
  }
  .formulas-grid .formula-fiche--featured::before {
    inset: -28px -24px;
  }
}

/* ===== Fiche formule — chaque formule sa propre carte verticale ===== */
.formula-fiche {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* Tableau des prestations encadré par 2 lignes horizontales nettes */
.formula-table {
  border-top: 1px solid var(--c-blue-dark);
  border-bottom: 1px solid var(--c-blue-dark);
  padding: 6px 0;
}
.formula-services {
  list-style: none;
  padding: 0;
  margin: 0;
}
.formula-services li {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-line);
  transition: background-color 0.45s ease,
              padding-left 0.45s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.formula-services li:last-child { border-bottom: none; }
.formula-services li:hover {
  background-color: rgba(236, 229, 211, 0.55);
  padding-left: 36px;
}
.formula-services .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--c-blue-mid);
  opacity: 0.55;
  font-size: 14px;
}
.formula-services .name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  color: var(--c-blue-dark);
  letter-spacing: 0.005em;
}
.formula-services .status {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--c-blue-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.formula-services .status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--c-blue-dark);
}

/* Marque chapitre "— 01 —" décoratif */
.formula-chapter-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--c-blue-mid);
  opacity: 0.7;
  letter-spacing: 0.15em;
}

/* "Idéal pour..." petit kicker */
.formula-ideal {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-blue-mid);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.formula-ideal::before {
  content: '↳';
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  opacity: 0.6;
}

/* Variante : fiche 02 avec léger halo cream-dark */
.formula-fiche--featured { position: relative; }
.formula-fiche--featured::before {
  content: '';
  position: absolute;
  inset: -40px -56px;
  background-color: var(--c-cream-dark);
  opacity: 0.4;
  z-index: -1;
}

/* Séparateur entre les 2 fiches */
.formulas-fiche-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 72px auto;
  max-width: 380px;
}
.formulas-fiche-divider .line {
  flex: 1;
  height: 1px;
  background-color: var(--c-line);
}
.formulas-fiche-divider .ornament {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: var(--c-blue-mid);
  opacity: 0.6;
}

@media (max-width: 900px) {
  .formula-services li {
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    padding: 14px 12px;
  }
  .formula-services .name { font-size: 16px; }
  .formula-services .status { font-size: 12px; }
  .formula-fiche--featured::before { inset: -20px -24px; }
  .formulas-fiche-divider { margin: 48px auto; }
}


/* ===== Tabs ===== */
.tab-btn {
  position: relative;
  padding-bottom: 10px;
  transition: color 0.3s, opacity 0.3s;
  opacity: 0.5;
  cursor: pointer;
}
.tab-btn:hover { opacity: 0.85; }
.tab-btn.active { opacity: 1; }
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
}
.tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.tab-content.active {
  display: grid;
  opacity: 1;
  animation: fade-up 0.7s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}

/* ===== Form ===== */
.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  padding: 12px 0;
  color: var(--c-blue-dark);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s;
}
.form-input:focus { border-color: var(--c-blue-dark); }
.form-input::placeholder { color: var(--c-muted); }
textarea.form-input { resize: vertical; min-height: 90px; }
.form-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--c-muted);
  margin-bottom: 4px;
}

/* Variante : formulaire sur fond image sombre */
.form-on-dark .form-input {
  color: var(--c-cream);
  border-bottom-color: rgba(245, 241, 232, 0.25);
}
.form-on-dark .form-input:focus {
  border-bottom-color: var(--c-cream);
}
.form-on-dark .form-input::placeholder {
  color: rgba(245, 241, 232, 0.45);
}
.form-on-dark .form-label {
  color: rgba(245, 241, 232, 0.6);
}
/* Selects : flèche dropdown native passe en cream */
.form-on-dark select.form-input {
  color: var(--c-cream);
  /* override la flèche native pour qu'elle soit visible sur fond sombre */
  background-image: linear-gradient(45deg, transparent 50%, rgba(245, 241, 232, 0.6) 50%),
                    linear-gradient(135deg, rgba(245, 241, 232, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 14px) 22px, calc(100% - 9px) 22px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  appearance: none;
}
.form-on-dark select.form-input option {
  background-color: var(--c-blue-deep);
  color: var(--c-cream);
}

/* ===== Button outline ===== */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border: 1px solid currentColor;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: background-color 0.4s, color 0.4s, transform 0.3s;
  cursor: pointer;
}
.btn-outline:hover {
  background-color: var(--c-blue-dark);
  color: var(--c-cream);
}
.btn-outline.on-light:hover {
  background-color: var(--c-blue-dark);
  color: var(--c-cream);
}

.btn-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.btn-outline:hover .btn-arrow { transform: translateX(4px); }

/* ===== Filigrane chapter number ===== */
.chapter-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(120px, 14vw, 180px);
  line-height: 1;
  color: var(--c-blue-dark);
  opacity: 0.10;
  font-weight: 300;
  letter-spacing: -0.04em;
}

/* ===== Quote bloc background ===== */
.quote-block {
  position: relative;
  isolation: isolate;
}
.quote-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(44, 56, 69, 0.55), rgba(44, 56, 69, 0.7));
  z-index: -1;
}

/* ===== Hero gradient overlay (subtil pour lisibilité) ===== */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(44, 56, 69, 0.15) 0%,
    rgba(44, 56, 69, 0.05) 30%,
    rgba(44, 56, 69, 0.05) 60%,
    rgba(44, 56, 69, 0.45) 100%
  );
  pointer-events: none;
}

/* ===== Trustindex (widget mockup Google reviews) ===== */
.trustindex-google-logo {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.trustindex-star {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #FBBC04;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center/contain no-repeat;
}
.trustindex-star--lg { width: 20px; height: 20px; }

.trustindex-card {
  background-color: var(--c-cream-light);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.trustindex-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(61, 74, 92, 0.08);
}

.trustindex-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--c-blue-light);
  color: var(--c-blue-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.trustindex-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-blue-dark);
  flex: 1;
  margin: 0;
}

.trustindex-readmore {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-blue-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.trustindex-readmore:hover { color: var(--c-blue-dark); }

.trustindex-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background-color: var(--c-cream);
  color: var(--c-blue-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  cursor: pointer;
  z-index: 2;
}
.trustindex-arrow:hover {
  background-color: var(--c-blue-dark);
  color: var(--c-cream);
  border-color: var(--c-blue-dark);
  transform: translateY(-50%) translateX(2px);
}

@media (max-width: 768px) {
  .trustindex-arrow { display: none; }
}

/* ===== Star rating ===== */
.star {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center/contain no-repeat;
}

/* ===== Polaroid effect (carte témoignage) ===== */
.polaroid {
  background-color: var(--c-cream-light);
  padding: 32px 28px 40px;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.polaroid:hover { transform: translateY(-6px) rotate(0deg) !important; }

/* ===== Recommended badge ===== */
.badge-recommended {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-cream);
  background-color: var(--c-blue-dark);
  padding: 6px 14px;
}

/* ===== Pin avatar (témoignages) ===== */
.avatar-pin {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--c-blue-light);
  color: var(--c-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
}

/* ===== Resource card ===== */
.resource-card {
  border-top: 1px solid var(--c-line);
  padding: 32px 0;
  transition: padding-left 0.5s cubic-bezier(0.25, 0.4, 0.25, 1);
  cursor: pointer;
}
.resource-card:hover { padding-left: 16px; }
.resource-card:last-of-type { border-bottom: 1px solid var(--c-line); }

/* ===== Decorative pine tree silhouettes (bloc final) ===== */
.pine-decoration {
  position: absolute;
  height: 480px;
  width: auto;
  opacity: 0.18;
  pointer-events: none;
}

/* =========================================================================
   PAGE "Nos services" — composants spécifiques
   ========================================================================= */

/* ===== Frise horizontale "étapes projet" (5 cercles + ligne pointillée) ===== */
.frise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}
/* Ligne pointillée horizontale qui relie les numéros */
.frise-grid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 10%;
  right: 10%;
  height: 0;
  border-top: 1px dashed var(--c-blue-mid);
  opacity: 0.45;
  z-index: 0;
}
.frise-step {
  position: relative;
  text-align: center;
  z-index: 1;
}
.frise-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--c-blue-dark);
  border: 1px solid var(--c-blue-dark);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  color: var(--c-cream);
  margin: 0 auto;
}
.frise-title {
  margin-top: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-blue-dark);
  line-height: 1.2;
}
.frise-desc {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-blue-mid);
  font-weight: 300;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile : repli en frise verticale gauche (ligne pointillée verticale) */
@media (max-width: 900px) {
  .frise-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .frise-grid::before {
    top: 32px;
    bottom: 32px;
    left: 32px;
    right: auto;
    width: 0;
    height: auto;
    border-top: none;
    border-left: 1px dashed var(--c-blue-mid);
  }
  .frise-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    text-align: left;
    align-items: start;
  }
  .frise-num { margin: 0; flex-shrink: 0; }
  .frise-title { margin-top: 16px; font-size: 17px; }
  .frise-desc { margin: 8px 0 0; max-width: none; }
}

/* ===== Vignettes uniformes (entretien & intendance) ===== */
.service-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* Cadre cream-dark autour de chaque vignette (polaroïd) */
.service-tile-frame {
  background-color: var(--c-cream-dark);
  padding: 8px;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.25, 0.4, 0.25, 1), box-shadow 0.5s;
}
@media (min-width: 768px) {
  .service-tile-frame { padding: 12px; }
}
.service-tile-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(61, 74, 92, 0.08);
}

.service-tile {
  display: flex;
  flex-direction: column;
  background-color: var(--c-cream-light);
  overflow: hidden;
  flex: 1; /* remplit toute la hauteur du cadre → bordure uniforme partout */
}
.service-tile .tile-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
}
.service-tile .tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.service-tile-frame:hover .tile-image img { transform: scale(1.06); }
.service-tile .tile-content {
  padding: 26px 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  justify-content: center;
  min-height: 170px;
}
.service-tile .tile-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--c-blue-dark);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.service-tile .tile-desc {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-blue-mid);
  margin-top: 10px;
  font-weight: 300;
}

@media (max-width: 1024px) {
  .service-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .service-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ===== Bento grid (gardée pour compat, plus utilisée) ===== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 12px;
}
.bento-card {
  position: relative;
  background-color: var(--c-cream-light);
  padding: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.25, 0.4, 0.25, 1),
              box-shadow 0.5s;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(61, 74, 92, 0.08);
}
.bento-card .bento-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--c-blue-mid);
  opacity: 0.55;
}
.bento-card .bento-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--c-blue-dark);
  margin-top: 8px;
  line-height: 1.15;
}
.bento-card .bento-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-blue-mid);
  margin-top: 12px;
  font-weight: 300;
}
.bento-card .bento-icon {
  width: 32px;
  height: 32px;
  color: var(--c-blue-mid);
  margin-top: auto;
  align-self: flex-end;
}
.bento-card--image {
  padding: 0;
  background-color: var(--c-blue-deep);
  color: var(--c-cream);
}
.bento-card--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.bento-card--image:hover img { transform: scale(1.06); }
.bento-card--image .bento-overlay {
  position: relative;
  z-index: 1;
  background: linear-gradient(to top, rgba(44, 56, 69, 0.9) 0%, rgba(44, 56, 69, 0.2) 60%, transparent 100%);
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bento-card--image .bento-num { color: rgba(245, 241, 232, 0.65); opacity: 1; }
.bento-card--image .bento-title { color: var(--c-cream); }
.bento-card--image .bento-desc { color: rgba(245, 241, 232, 0.85); }

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(200px, auto);
  }
  .bento-card { grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* ===== Pills "service à la carte" ===== */
.service-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--c-line);
  background-color: var(--c-cream-light);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--c-blue-dark);
  transition: background-color 0.4s, border-color 0.4s, transform 0.4s, color 0.4s;
  cursor: pointer;
}
.service-pill:hover {
  background-color: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
  color: var(--c-cream);
  transform: translateY(-2px);
}
.service-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-blue-mid);
  transition: background-color 0.4s;
}
.service-pill:hover::before { background-color: var(--c-cream); }

/* ===== Highlight block (Accompagnement immobilier) ===== */
.highlight-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.highlight-block .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.highlight-block .bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(44, 56, 69, 0.88) 0%, rgba(44, 56, 69, 0.7) 100%);
  z-index: -1;
}

/* ===== Manifeste cards (Notre engagement · Les biens) ===== */
.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.manifesto-card {
  position: relative;
  background-color: var(--c-cream-dark);
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.25, 0.4, 0.25, 1), box-shadow 0.5s;
}
.manifesto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(61, 74, 92, 0.08);
}
.manifesto-card .manifesto-inner {
  background-color: var(--c-cream-light);
  padding: 36px 32px 32px;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.manifesto-card .manifesto-num {
  position: absolute;
  top: 10px;
  right: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 80px;
  line-height: 1;
  color: var(--c-blue-dark);
  opacity: 0.10;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.manifesto-card .manifesto-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1.25;
  color: var(--c-blue-dark);
  letter-spacing: 0.005em;
  position: relative;
}
.manifesto-card .manifesto-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-blue-mid);
  margin-top: 18px;
  font-weight: 300;
  position: relative;
}

@media (max-width: 768px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 12px; }
  .manifesto-card .manifesto-inner { padding: 28px 24px 26px; }
  .manifesto-card .manifesto-num { font-size: 60px; }
  .manifesto-card .manifesto-quote { font-size: 19px; }
}

/* ===== USP grid (Pourquoi nous choisir) ===== */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.usp-card {
  position: relative;
  padding: 36px 28px;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
  transition: background-color 0.4s, padding-left 0.5s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.usp-card:hover {
  background-color: var(--c-cream-light);
  padding-left: 48px;
}
.usp-card:nth-child(-n+1) { border-top: none; }
.usp-card:nth-child(2) { border-top: none; }
.usp-card:nth-child(odd) { border-left: none; }
.usp-card .usp-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 30px;
  color: var(--c-blue-mid);
  opacity: 0.55;
  display: block;
  margin-bottom: 10px;
}
.usp-card .usp-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-blue-dark);
}
.usp-card .usp-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-blue-mid);
  margin-top: 12px;
  font-weight: 300;
}

@media (max-width: 768px) {
  .usp-grid { grid-template-columns: 1fr; }
  .usp-card { border-left: none !important; }
  .usp-card:nth-child(2) { border-top: 1px solid var(--c-line); }
}

/* =========================================================================
   PAGE "Les biens" — carousel de biens premium
   ========================================================================= */
.biens-carousel { position: relative; }
.biens-carousel .scroll-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line) transparent;
}
.biens-carousel .scroll-track::-webkit-scrollbar { height: 4px; }
.biens-carousel .scroll-track::-webkit-scrollbar-track { background: transparent; }
.biens-carousel .scroll-track::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 2px; }
.biens-carousel .scroll-track::-webkit-scrollbar-thumb:hover { background: var(--c-blue-mid); }

.bien-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 460px;
  max-width: 88vw;
  background-color: var(--c-cream-dark);
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.25, 0.4, 0.25, 1), box-shadow 0.5s;
}
.bien-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(61, 74, 92, 0.10);
}
.bien-card .bien-inner {
  background-color: var(--c-cream-light);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bien-card .bien-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--c-blue-deep);
}
.bien-card .bien-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.bien-card:hover .bien-image img { transform: scale(1.04); }
.bien-card .bien-image-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--c-cream);
  color: var(--c-blue-dark);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 6px 12px;
  font-weight: 500;
}
.bien-card .bien-body {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bien-card .bien-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--c-blue-dark);
  line-height: 1.12;
  letter-spacing: 0.01em;
}
.bien-card .bien-meta {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--c-blue-mid);
  margin-top: 8px;
}
.bien-card .bien-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-blue-mid);
  margin-top: 14px;
  font-weight: 300;
  flex: 1;
}
.bien-card .bien-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-blue-dark);
  align-self: flex-start;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-blue-dark);
  transition: gap 0.4s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.bien-card .bien-cta:hover { gap: 20px; }

@media (max-width: 640px) {
  .bien-card { width: 88vw; padding: 8px; }
  .bien-card .bien-body { padding: 24px 20px 26px; }
  .bien-card .bien-name { font-size: 22px; }
}

/* ===== Custom scrollbar discret ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--c-cream); }
::-webkit-scrollbar-thumb { background: var(--c-blue-mid); border-radius: 4px; }

/* ===== Carousel horizontal (Les environs) ===== */
.environs-carousel .scroll-track {
  scrollbar-width: thin;
  scrollbar-color: var(--c-line) transparent;
}
.environs-carousel .scroll-track::-webkit-scrollbar {
  height: 4px;
}
.environs-carousel .scroll-track::-webkit-scrollbar-track {
  background: transparent;
}
.environs-carousel .scroll-track::-webkit-scrollbar-thumb {
  background: var(--c-line);
  border-radius: 2px;
}
.environs-carousel .scroll-track::-webkit-scrollbar-thumb:hover {
  background: var(--c-blue-mid);
}

/* ===== Responsive (priorité desktop dans le brief, mais base mobile correcte) ===== */
@media (max-width: 768px) {
  .chapter-number { font-size: 100px; }
  .pine-decoration { display: none; }
}

/* ===== Anti-FOUC pour fonts ===== */
.font-serif, .font-script { font-display: swap; }