/* =============================================================================
 *  custom.css — project-specific styles layered on top of the compiled
 *  Tailwind build (main.css). Covers behaviour the original achieved with
 *  React: nav reveal, scroll animations, modals, lightbox and the contact form.
 *  Only NEW class names are defined here so nothing in main.css is overridden.
 * ========================================================================== */

/* ---- Base font (Gotham with the site's system fallback stack) ------------ */
body {
  font-family: Gotham, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1f2937;
  background: #fff;
}

/* ---- Safety fallbacks for arbitrary aspect ratios ------------------------ */
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-4\/3    { aspect-ratio: 4 / 3; }
.aspect-16\/10  { aspect-ratio: 16 / 10; }
.aspect-2\/1    { aspect-ratio: 2 / 1; }

/* ---- Primary navigation ---------------------------------------------------
 * Always visible on every breakpoint (no hover/tap reveal) — the row scrolls
 * horizontally on narrow viewports instead of collapsing behind a toggle.
 */
.nav-collapse { grid-template-rows: 1fr; }

/* ---- Scroll-reveal animations -------------------------------------------- */
.es-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.es-reveal--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .es-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Modals (contact / film) -------------------------------------------- */
.es-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.es-modal.is-open { display: flex; }
.es-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}
.es-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: esModalIn .25s ease;
}
.es-modal__dialog--sm { max-width: 380px; }
@keyframes esModalIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.es-modal__close {
  position: absolute;
  top: .6rem;
  right: .85rem;
  font-size: 1.9rem;
  line-height: 1;
  color: #9ca3af;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
}
.es-modal__close:hover { color: #111; }

/* ---- Contact form fields ------------------------------------------------- */
.es-field { margin-bottom: 1rem; }
.es-field label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  margin-bottom: .35rem;
}
.es-field .req { color: #9D7B38; }
.es-field input,
.es-field select,
.es-field textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .95rem;
  color: #1f2937;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.es-field input:focus,
.es-field select:focus,
.es-field textarea:focus {
  outline: none;
  border-color: #9D7B38;
  box-shadow: 0 0 0 3px rgba(157, 123, 56, .18);
}
.es-field textarea { resize: vertical; }

.es-feedback { font-size: .85rem; margin: .25rem 0 1rem; min-height: 1.1em; }
.es-feedback--ok  { color: #157347; }
.es-feedback--err { color: #b02a37; }

/* Pot de miel anti-spam : sorti de l'écran (pas display:none, que certains
   bots détectent), hors tabulation et hors arbre d'accessibilité. */
.es-field--hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Floor-plan lightbox ------------------------------------------------- */
.es-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .85);
}
.es-lightbox.is-open { display: flex; }
.es-lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.es-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 2.4rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---- Legal pages: paragraph styling to match the original ---------------- */
.legal-body p {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
}
/* Scoped legal typography — restores headings/lists that Tailwind's reset
   removes, so the migrated Privacy Policy (numbered sections + bullet lists)
   renders correctly. Affects only .legal-body. */
.legal-body h2 {
  font-size: 18px;
  font-weight: 600;
  color: #A3832A;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.legal-body ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.5rem 0 1rem;
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
}
.legal-body li { margin-bottom: 0.35rem; }
.legal-body a { color: #A3832A; text-decoration: underline; }
.legal-body strong { font-weight: 600; }
.legal-body em { font-style: italic; color: #6b7280; }

/* =============================================================================
 *  PREMIUM UI/UX POLISH PASS — purely visual refinements layered on top.
 *  No structural or content changes; the design system, colours and gold accent
 *  (#A3832A / #9D7B38) are preserved.
 * ========================================================================== */

/* ---- 1. Luxury typography -------------------------------------------------- *
 * Cormorant Garamond (elegant display serif) for headings, Jost (refined
 * geometric sans) for body / UI / labels. Applied through the existing
 * gotham-* classes and heading tags so no templates need to change.            */
:root {
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
body { font-family: var(--font-sans); letter-spacing: 0.005em; }
.gotham-book   { font-family: var(--font-sans); font-weight: 400; }
.gotham-medium { font-family: var(--font-sans); }

/* Display serif for headings. The `h*.gotham-medium` selectors carry higher
   specificity than the plain `.gotham-medium` rule above, so the big gold
   titles become serif while small span/p labels stay in the sans face. */
h1, h2, h3,
h1.gotham-medium, h2.gotham-medium, h3.gotham-medium, h4.gotham-medium {
  font-family: var(--font-display);
}
h1.gotham-medium, h2.gotham-medium, h3.gotham-medium {
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Concept-card / “Autres équipements” headings use font-bold utilities — give
   the serif a touch more air so the caps breathe. */
h3.font-bold, h4.font-bold { font-family: var(--font-display); letter-spacing: 0.03em; }

/* Slightly tighter, more elegant leading for large display headings. */
h2.gotham-medium { line-height: 1.15; }

/* ---- 2. Global micro-polish ---------------------------------------------- */
html { scroll-behavior: smooth; }
::selection { background: rgba(163, 131, 42, 0.92); color: #fff; }

/* Accessible, on-brand keyboard focus ring (improves a11y without affecting
   mouse users). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #9D7B38;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Premium image reveal on the homepage project cards & residence links:
   a slow, refined zoom under the existing dark overlay. Scoped to the card
   anchors (block + aspect + overflow-hidden + cursor-pointer). */
a.overflow-hidden.cursor-pointer > img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
a.overflow-hidden.cursor-pointer:hover > img { transform: scale(1.045); }

/* Buttons & interactive elements: smoother, consistent easing. */
button, a { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a.overflow-hidden.cursor-pointer:hover > img { transform: none; }
}

/* ---- 3. Premium footer — deep navy & metallic gold (logo aesthetic) ------ *
 * A dark, boutique-luxury footer that matches the Palladium logo: midnight
 * navy ground, warm metallic gold accents, soft champagne text, a barely-there
 * embossed "P" watermark, and slow gold micro-interactions.                    */
/* Bleu de marque extrait de logos/LOGO PALLADIUM PROPERTIES TX BLUE 2-01.jpg
   (fond texturé du mockup, échantillonné loin du monogramme : moyenne et
   couleur dominante convergent sur #162C41) — désormais l'accent du pied de
   page, remplaçant le bleu nuit générique utilisé jusqu'ici. Le or reste
   l'accent métallique du site (titres, filets, icônes) : seule la teinte de
   fond change, la structure « nuit + or » de la maquette est conservée. */
.pd-footer {
  position: relative;
  isolation: isolate;
  color: rgba(233, 223, 200, 0.70);           /* champagne body text */
  background-color: #15293D;                   /* bleu de marque (TX Blue) */
  background-image:
    radial-gradient(90% 130% at 50% -25%, rgba(201, 162, 76, 0.10), transparent 55%),
    linear-gradient(180deg, #1C3852 0%, #102030 100%);
  overflow: hidden;
}
/* Fine gold hairline along the very top edge. */
.pd-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 76, 0.55), transparent);
}
/* Barely-visible embossed "P" watermark. */
.pd-footer__watermark {
  position: absolute;
  right: -1%; bottom: -28%;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #C9A24C;
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
}
.pd-footer__inner { position: relative; z-index: 2; }

/* Column headings — gold spaced caps with a fading gold underline
   (centred on mobile, left-aligned from the small breakpoint up). */
/* Or du logo (échantillonné sur palladium-logo.png, texte « PALLADIUM » —
   maquette client PDF_MODIF_FOOTER) : plus clair et plus chaud que l'or
   d'accent générique du site (#C9A24C), utilisé ailleurs dans le pied de page. */
.pd-footer__heading {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #D5BE8A;
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  position: relative;
}
.pd-footer__heading::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,76,0), #C9A24C, rgba(201,162,76,0));
}
@media (min-width: 640px) {
  .pd-footer__heading::after {
    left: 0; transform: none;
    background: linear-gradient(90deg, #C9A24C, rgba(201, 162, 76, 0));
  }
}

/* Links — champagne with a gold underline that grows on hover. */
.pd-footer__link {
  display: inline;
  color: rgba(233, 223, 200, 0.72);
  text-decoration: none;
  background-image: linear-gradient(#C9A24C, #C9A24C);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
.pd-footer__link:hover,
.pd-footer__link:focus-visible { color: #F4EAD0; background-size: 100% 1px; }

/* Contact rows with gold icons. */
.pd-footer__contact { color: rgba(233, 223, 200, 0.66); }
.pd-footer__contact a { color: inherit; transition: color 0.3s ease; }
.pd-footer__contact a:hover { color: #F4EAD0; }
.pd-footer__ico { color: #C9A24C; opacity: 0.9; }

/* Social — gold-outlined discs that invert with a glow. */
.pd-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 9999px;
  border: 1px solid rgba(201, 162, 76, 0.35);
  color: rgba(233, 223, 200, 0.9);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease,
    box-shadow 0.4s ease, transform 0.4s ease;
}
.pd-footer__social:hover {
  background: #C9A24C;
  color: #15293D;
  border-color: #C9A24C;
  box-shadow: 0 8px 24px rgba(201, 162, 76, 0.3);
  transform: translateY(-2px);
}

/* Elegant gold divider + bottom bar. */
.pd-footer__rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 76, 0.4), transparent);
}
.pd-footer__copy,
.pd-footer__credit {
  color: rgba(233, 223, 200, 0.5);
  letter-spacing: 0.14em;
}
.pd-footer__credit { transition: color 0.3s ease; }
.pd-footer__credit:hover { color: #C9A24C; }

/* ---- 3b. Footer layout (maquette PDF_SITE) --------------------------------- *
 * Logo centré en tête, puis deux colonnes SOCIÉTÉ / CONTACT centrées dans une
 * mesure courte ; barre inférieure copyright · crédit · réseaux sociaux.
 * Le CSS utilitaire compilé (main.css) ne contient pas les classes responsives
 * nécessaires : toute la mise en page est définie ici, scopée .pd-footer.      */

/* Aplombs de la section (pt-20 / md:pt-28 / pb-10 absents du build). */
.pd-footer__inner { padding-top: 4.5rem; padding-bottom: 3rem; }
@media (min-width: 768px) {
  .pd-footer__inner { padding-top: 6rem; padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* Logo centré. */
.pd-footer__logo { width: 13rem; margin-left: auto; margin-right: auto; }
.pd-footer__logo img { width: 100%; height: auto; }

/* Deux colonnes Société / Contact — séparation accrue entre les deux
   sections (maquette client PDF_MODIF_FOOTER), d'où le column-gap élargi et
   le max-width relevé en conséquence pour ne pas resserrer leur contenu. */
.pd-footer__cols {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 4.5rem;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (min-width: 640px) {
  .pd-footer__cols { grid-template-columns: 1fr 1.45fr; gap: 3rem 8rem; max-width: 54rem; text-align: left; }
  .pd-footer__cols li { justify-content: flex-start; }
}
.pd-footer__cols li { line-height: 1.55; }
.pd-footer__pipe { color: #C9A24C; margin: 0 0.5rem; }

/* Filet doré : respiration au-dessus (mt-16 absent du build). */
.pd-footer__rule { margin-top: 4rem; }

/* Barre inférieure : petites capitales 11px, réseaux sociaux en premier sur
   mobile, répartition copyright / crédit / réseaux sur desktop. */
.pd-footer__copy, .pd-footer__credit { font-size: 11px; }
.pd-footer__credit { order: 3; }
@media (min-width: 768px) {
  .pd-footer__bottom { justify-content: space-between; }
  .pd-footer__credit { order: 2; }
  .pd-footer__socials { order: 3; }
}

/* ---- 4. Typography polish -------------------------------------------------- *
 * Corps de texte plus aéré, largeur de paragraphe limitée à une mesure
 * confortable (~72 caractères) et boutons capitales légèrement plus espacés.
 * Réglages volontairement discrets : la hiérarchie existante est conservée.  */
.gotham-book p,
p.gotham-book { line-height: 1.8; }

/* Mesure de lecture des paragraphes d'introduction / de section (centrés). */
section .max-w-4xl > p,
section .max-w-3xl > p,
section .mx-auto.max-w-7xl > p {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* Boutons pilule (héro, or) : capitales plus respirées, graisse médium. */
.btn-hover-ltr,
.btn-hover-ltr-gold {
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* =============================================================================
 *  MAQUETTE PDF_SITE — nouveaux blocs de la page d'accueil
 *  (bande signature, cartes équipement, adresse d'exception, modale vidéo)
 * ========================================================================== */

/* ---- Utilitaires absents du build Tailwind compilé (main.css) ------------- *
 * Le CSS utilitaire d'origine ne contient que les classes du site initial ;
 * les nouveaux blocs en utilisent quelques autres, définies ici à l'identique. */
.mt-12 { margin-top: 3rem; }
.mt-5  { margin-top: 1.25rem; }
.mb-3  { margin-bottom: 0.75rem; }
.pt-6  { padding-top: 1.5rem; }
.pb-7  { padding-bottom: 1.75rem; }
.w-56  { width: 14rem; }
.h-\[2px\]   { height: 2px; }
.h-\[200px\] { height: 200px; }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 768px) {
  .md\:w-72 { width: 18rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:h-\[300px\] { height: 300px; }
}
@media (min-width: 768px) {
  .md\:gap-6 { gap: 1.5rem; }
  .md\:gap-8 { gap: 2rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Modale « Visite Vidéo » : dialogue large pour la lecture 16/9 -------- */
.es-modal__dialog--video { max-width: 900px; }
.es-modal__video { display: block; background: #000; }

/* ---- Cartes équipement (bloc partagé) ------------------------------------- */
.pd-amenity-card {
  border: 1px solid #EFE7D8;
  box-shadow: 0 10px 30px rgba(16, 26, 49, 0.06);
}

/* ---- Typologies (« Découvrez nos typologies ») ---------------------------- *
 * Présentation unique, calquée sur la maquette client PDF_SITE_PAGE_LIMOUNE et
 * partagée par The Pearl Plaza, Limoune et Bo Living : libellé au-dessus du
 * plan, filet doré, plan détouré sur le fond crème de la section — ni cadre ni
 * bouton, le plan lui-même ouvre le lightbox.
 * Le losange de l'ornement doit masquer le filet : sa couleur suit donc le fond
 * de la section via --pd-typo-bg (blanc par défaut, crème dans .pd-typo-section).
 */
.pd-typo-ornament { display: flex; justify-content: center; margin: -0.5rem 0 2.5rem; }
.pd-typo-ornament span {
  position: relative;
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A24C, transparent);
}
.pd-typo-ornament span::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.55rem;
  color: #C9A24C;
  background: var(--pd-typo-bg, #fff);
  padding: 0 0.4rem;
  line-height: 1;
}

/* -- Présentation maquette (Limoune / Bo Living) --------------------------- */
.pd-typo-section {
  --pd-typo-bg: #F7F3F0;
  background: #F7F3F0;
}

/* Limoune : 4 typologies → une grille, pour que les fourchettes de surface
   ci-dessous s'alignent exactement sous leur paire de plans. */
.pd-typo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 1.5rem;
}
@media (min-width: 640px) {
  .pd-typo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pd-typo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bo Living : 5 typologies → un flux centré (3 + 2), sans colonne orpheline. */
.pd-typo-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 1.5rem;
}
.pd-typo-flow > .pd-typo { width: 100%; }
@media (min-width: 640px) {
  .pd-typo-flow > .pd-typo { width: calc(50% - 0.75rem); }
  /* Plan double (duplex étage 0 + étage 1) : pleine largeur dès qu'il partage
     une rangée, sinon ses deux niveaux deviennent illisibles. */
  .pd-typo-flow > .pd-typo--wide { width: 100%; }
}
@media (min-width: 1024px) {
  .pd-typo-flow > .pd-typo { width: calc(33.333% - 1rem); }
  .pd-typo-flow > .pd-typo--wide { width: calc(66.666% - 0.5rem); }
}
.pd-typo--wide .pd-typo__plan { aspect-ratio: 16 / 9; }

.pd-typo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pd-typo__label {
  font-size: 1rem;
  font-weight: 500;
  color: #9D7B38;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .pd-typo__label { font-size: 1.125rem; }
}
.pd-typo__rule {
  width: 46px;
  height: 1px;
  background: #C9A24C;
  margin: 0.75rem 0 1.15rem;
}

/* Le plan reste cliquable (lightbox) : la loupe apparaît au survol, sans cadre
   ni bouton, pour ne rien ajouter à la maquette. */
/* Cadre carré : les plans sont quasi carrés ou en portrait, un ratio 4/3 les
   aurait bridés en hauteur et laissé de larges marges latérales. */
.pd-typo__plan {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* Position absolue (et non `height:100%` dans le flux) : sur un parent à hauteur
   auto, la hauteur en % est indéfinie, l'image reprend donc sa taille intrinsèque
   et un plan en portrait étirait son cadre au-delà du ratio demandé — les plans
   d'une même rangée n'avaient alors plus la même hauteur. */
.pd-typo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pd-typo__plan:hover .pd-typo__img,
.pd-typo__plan:focus-visible .pd-typo__img { transform: scale(1.05); }
.pd-typo__plan:focus-visible { outline: 2px solid #9D7B38; outline-offset: 4px; }
.pd-typo__zoom {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  color: #9D7B38;
  box-shadow: 0 4px 14px rgba(16, 26, 49, 0.12);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pd-typo__plan:hover .pd-typo__zoom,
.pd-typo__plan:focus-visible .pd-typo__zoom { opacity: 1; transform: none; }

/* Fourchettes de surface (Limoune) — deux affichages selon la largeur :
 *   • ≥ 1024px : la rangée de quatre plans est intacte, on peut donc reprendre
 *     la légende commune de la maquette (une par paire, .pd-typo-ranges) ;
 *   • < 1024px : la grille se réorganise (2 colonnes puis 1), les paires ne
 *     sont plus côte à côte — une légende commune désignerait les mauvais
 *     plans. Chaque plan porte alors sa propre fourchette (.pd-typo__range).
 */
.pd-typo__range { margin-top: 1rem; width: 100%; }
.pd-typo-ranges { display: none; }
@media (min-width: 1024px) {
  /* La fourchette portée par chaque plan ne s'efface qu'au profit d'une légende
     commune (.pd-typo-grid--paired : Limoune). Ailleurs — Pearl Plaza, où
     chaque typologie a sa propre surface — elle reste affichée.
     Sélecteur descendant : .pd-typo-range (display:flex) est défini plus bas
     dans ce fichier, il faut donc l'emporter en spécificité, pas en ordre. */
  .pd-typo-grid--paired .pd-typo__range { display: none; }
  .pd-typo-ranges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.75rem;
  }
}

/* Révélation en cascade, déclenchée quand la section entre dans le viewport
   (l'observateur global bascule .es-reveal--in sur la <section>). */
.pd-typo {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.es-reveal--in .pd-typo { opacity: 1; transform: none; }
.es-reveal--in .pd-typo:nth-child(1) { transition-delay: 0.05s; }
.es-reveal--in .pd-typo:nth-child(2) { transition-delay: 0.12s; }
.es-reveal--in .pd-typo:nth-child(3) { transition-delay: 0.19s; }
.es-reveal--in .pd-typo:nth-child(4) { transition-delay: 0.26s; }
.es-reveal--in .pd-typo:nth-child(5) { transition-delay: 0.33s; }
@media (prefers-reduced-motion: reduce) {
  .pd-typo, .pd-typo__img, .pd-typo__zoom { transition: none; }
  .pd-typo { opacity: 1; transform: none; }
}

/* Fourchette de surface — commune à une paire de plans (Limoune) ou propre à
   chaque typologie (Pearl Plaza) ; encadrée de filets dorés comme sur la
   maquette. */
.pd-typo-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #9D7B38;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .pd-typo-range { font-size: 0.875rem; }
}
.pd-typo-range::before,
.pd-typo-range::after {
  content: "";
  flex: 1 1 0;
  max-width: 7rem;
  height: 1px;
  background: #C9A24C;
}

/* ---- Section « Une adresse d'exception » ---------------------------------- */
.pd-adresse { background: #FBF8F2; }

/* Ornement sous le titre : filet doré + losange central. */
.pd-adresse__ornament { display: flex; justify-content: center; margin-bottom: 2rem; }
.pd-adresse__ornament span {
  position: relative;
  width: 170px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A24C, transparent);
}
.pd-adresse__ornament span::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.55rem;
  color: #C9A24C;
  background: #FBF8F2;
  padding: 0 0.4rem;
  line-height: 1;
}

/* « Voir plus » : capitales or très espacées, filet en soulignement. */
.pd-adresse__more {
  color: #A3832A;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 162, 76, 0.55);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.pd-adresse__more:hover { color: #8a6f24; border-color: #8a6f24; }

/* ---- Logo du héros ---------------------------------------------------------
 * ~70 % de la taille précédente (maquette client) : 220×190 → 154×133 sur
 * mobile, 356×307 → 249×215 à partir de md. Le logo garde son ratio via
 * object-fit: contain sur l'image.                                            */
/* Largeur explicite (et non width:100% + max-width) : la colonne flex du héros
   se dimensionne sur son contenu, si bien qu'un width:100% ferait dépendre le
   logo de la largeur du texte « Signature Living » placé en dessous. */
.pd-hero__logo {
  position: relative;
  width: 154px;
  height: 133px;
}
@media (min-width: 768px) {
  .pd-hero__logo { width: 249px; height: 215px; }
}

/* ---- Signature du héros ----------------------------------------------------
 * « SIGNATURE LIVING » sous le logo : texte blanc sur la photo assombrie
 * (maquette client). Capitales très espacées, dans le langage du site.       */
.pd-hero__signature {
  color: #FFFFFF;
  font-size: clamp(0.72rem, 2.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;             /* recentre malgré l'espacement final */
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);   /* lisible sur toute photo */
}

/* ---- Filet doré + sous-titre « The Pearl Plaza » (intro résidences) --------
 * NB : main.css est un build Tailwind figé — les classes arbitraires inédites
 * (bg-[#A3832A], w-24…) n'y existent pas et resteraient sans effet. Ces styles
 * vivent donc ici, dans la feuille propre au thème.                           */
.pd-residences__rule {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.pd-residences__rule span {
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #A3832A, transparent);
}

.pd-residences__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: #A3832A;
}

/* ---- Orbite de proximité « The Pearl Plaza » -------------------------------
 * Un seul composant pour tous les écrans (mobile → ultrawide) : le logo au
 * centre, quatre destinations en orbite. Le positionnement des destinations
 * est piloté par main.js §12 (translate3d uniquement, composé sur le GPU) ;
 * le CSS ne fournit que l'échelle (--pp-size) et la disposition de repli.
 *
 * Deux règles structurantes :
 *  - les destinations ne subissent QUE des translations, jamais de rotation :
 *    le texte reste donc toujours droit, sans contre-rotation à compenser ;
 *  - sans JS (ou en mouvement réduit) le losange CSS ci-dessous s'applique,
 *    donc la section est complète et lisible même si le script ne tourne pas.
 * ------------------------------------------------------------------------- */
.pp-orbit {
  --pp-size: clamp(19rem, 92vw, 26rem);   /* mobile */
  /* Repli seulement : main.js recalcule --pp-radius à partir de la taille
     réelle des cartes, pour qu'aucune destination ne déborde de la scène
     (les libellés se replient sur deux lignes selon la langue et la police). */
  --pp-radius: calc(var(--pp-size) * 0.33);
  /* Sur téléphone, la scène est bornée par la largeur de l'écran : cartes
     compactes et cœur réduit, sinon les destinations viennent chevaucher le
     disque central (il n'y a pas la place pour les deux). */
  --pp-node: clamp(5.5rem, 23vw, 7rem);
  --pp-core: calc(var(--pp-size) * 0.32);
  --pp-gold: #C9A24C;
  --pp-gold-deep: #A3832A;
  --pp-navy: #16233C;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 640px)  { .pp-orbit { --pp-size: 30rem; --pp-node: 8rem;   --pp-core: calc(var(--pp-size) * 0.38); } }  /* tablette */
@media (min-width: 1024px) { .pp-orbit { --pp-size: 35rem; --pp-node: 9.5rem; --pp-core: calc(var(--pp-size) * 0.40); } }  /* portable */
@media (min-width: 1280px) { .pp-orbit { --pp-size: 39rem; --pp-node: 10rem;  --pp-core: calc(var(--pp-size) * 0.40); } }  /* bureau   */
@media (min-width: 1600px) { .pp-orbit { --pp-size: 43rem; --pp-node: 10.5rem;--pp-core: calc(var(--pp-size) * 0.40); } }  /* ultrawide*/

.pp-orbit__stage {
  position: relative;
  width: var(--pp-size);
  height: var(--pp-size);   /* carré explicite : pas de dépendance à aspect-ratio */
}

/* Chemin de l'orbite : un simple cercle doré, statique. */
.pp-orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pp-radius) * 2);
  height: calc(var(--pp-radius) * 2);
  margin: calc(var(--pp-radius) * -1) 0 0 calc(var(--pp-radius) * -1);
  border: 1px solid rgba(201, 162, 76, 0.35);
  border-radius: 9999px;
  pointer-events: none;
}

.pp-orbit__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pp-core) * 1.9);
  height: calc(var(--pp-core) * 1.9);
  margin: calc(var(--pp-core) * -0.95) 0 0 calc(var(--pp-core) * -0.95);
  border-radius: 9999px;
  background: radial-gradient(circle,
    rgba(201, 162, 76, 0.28) 0%,
    rgba(201, 162, 76, 0.10) 45%,
    rgba(201, 162, 76, 0) 70%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.pp-orbit.is-engaged .pp-orbit__glow { opacity: 1; }

/* Cœur : disque marine + logo. Le disque est sombre parce que la marque
   « The Pearl Plaza » est or/argent : c'est là qu'elle a le plus de contraste. */
.pp-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pp-core);
  height: var(--pp-core);
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 1px solid rgba(201, 162, 76, 0.55);
  background: radial-gradient(circle at 50% 30%, #22304d 0%, var(--pp-navy) 70%);
  box-shadow: 0 0 0 8px rgba(201, 162, 76, 0.07), 0 18px 45px rgba(22, 35, 60, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Marge intérieure calculée sur le diamètre du disque : un padding en %
     se résoudrait contre la LARGEUR DU PARENT (la scène), pas contre le
     disque — le logo se retrouvait écrasé à quelques pixels. */
  padding: calc(var(--pp-core) * 0.14);
  overflow: hidden;              /* rien ne peut déborder du disque */
}
/* <picture> est transparent à la mise en page : sans cela, le max-height:100%
   de l'image se résout contre la hauteur *auto* du <picture> (indéterminée) et
   le logo se réduit à quelques pixels. L'image devient donc l'enfant flex direct
   du disque, dont la hauteur est, elle, définie. */
.pp-orbit__core picture { display: contents; }

/* Ratio d'origine préservé (jamais étiré) : le logo tient dans le disque. */
.pp-orbit__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Légende sous le cercle. Hauteur réservée : l'apparition ne décale rien
   (opacité + translation seules, aucun reflow). */
.pp-orbit__readout {
  min-height: 1.5em;
  text-align: center;
  font-size: clamp(0.78rem, 3vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6f24;                /* 4.8:1 sur le fond crème */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.pp-orbit.is-engaged .pp-orbit__readout { opacity: 1; transform: translateY(0); }

/* Destinations en orbite. */
.pp-orbit__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.pp-orbit__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  will-change: transform;
  /* Repli (sans JS / mouvement réduit) : losange haut / droite / bas / gauche. */
  transform: rotate(calc(var(--pp-i) * 90deg))
             translate(0, calc(var(--pp-radius) * -1))
             rotate(calc(var(--pp-i) * -90deg));   /* contre-rotation : texte droit */
}

.pp-orbit__node {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pp-node);
  transform: translate(-50%, -50%);
  transform-origin: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.4rem 0.7rem;
  border: 1px solid rgba(201, 162, 76, 0.45);
  border-radius: 1rem;
  background: rgba(251, 248, 242, 0.94);
  box-shadow: 0 6px 20px rgba(22, 35, 60, 0.10);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;    /* pas de délai de 300 ms sur iOS */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease,
              background-color 0.45s ease;
}
.pp-orbit__num {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--pp-gold);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--pp-gold-deep);
  transition: background-color 0.45s ease, color 0.45s ease;
}
.pp-orbit__name {
  font-size: clamp(0.63rem, 2.4vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1F2937;          /* 12.6:1 sur le fond crème */
  text-align: center;
  line-height: 1.25;
}
.pp-orbit__time {
  font-size: clamp(0.62rem, 2.3vw, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5B6472;          /* 5.9:1 sur le fond crème */
  text-align: center;
  opacity: 0.75;
  transition: opacity 0.45s ease, color 0.45s ease;
}

/* État actif (survol, focus clavier ou tap) — transform + opacité uniquement. */
.pp-orbit__slot.is-active .pp-orbit__node {
  transform: translate(-50%, -50%) scale(1.09);
  border-color: var(--pp-gold);
  background: #FFFDF8;
  box-shadow: 0 12px 34px rgba(201, 162, 76, 0.34);
}
.pp-orbit__slot.is-active .pp-orbit__num {
  background: var(--pp-gold);
  color: #FFFFFF;
}
.pp-orbit__slot.is-active .pp-orbit__time {
  opacity: 1;
  color: var(--pp-gold-deep);
}
.pp-orbit__slot:not(.is-active) .pp-orbit__node:active {
  transform: translate(-50%, -50%) scale(1.04);
}

/* Focus clavier visible et net (et jamais masqué par un nœud voisin). */
.pp-orbit__node:focus-visible {
  outline: 2px solid var(--pp-gold-deep);
  outline-offset: 3px;
}
.pp-orbit__slot:focus-within { z-index: 2; }
.pp-orbit__slot.is-active { z-index: 2; }

/* Mouvement réduit : aucune rotation, disposition statique en losange
   (le JS ne démarre pas la boucle et ne pose aucune transform en ligne). */
@media (prefers-reduced-motion: reduce) {
  .pp-orbit__slot,
  .pp-orbit__node,
  .pp-orbit__glow,
  .pp-orbit__readout { transition: none; }
  .pp-orbit__slot { will-change: auto; }
}

/* =============================================================================
 *  ACTION « VOIR LA LOCALISATION » — pages résidence
 * -----------------------------------------------------------------------------
 * Lien Google Maps (nouvel onglet) dans la rangée d'appels à l'action de
 * l'intro. Reprend la pastille or .btn-hover-ltr-gold du site et y ajoute :
 * épingle animée, halo doré et légère élévation au survol, focus visible,
 * cible tactile élargie sur écrans tactiles.                                  */
.pd-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  transition: color 0.4s ease-in-out,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
}
.pd-loc:hover,
.pd-loc:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(163, 131, 42, 0.55),
              0 0 0 1px rgba(201, 162, 76, 0.28);
}
.pd-loc:active { transform: translateY(0); }
.pd-loc:focus-visible {
  outline: 2px solid #C9A24C;
  outline-offset: 3px;
}

.pd-loc__pin { position: relative; display: inline-flex; }
.pd-loc__pin svg { width: 17px; height: 17px; display: block; }
/* Onde émise par l'épingle au survol ; currentColor suit le passage or → blanc. */
.pd-loc__pin::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid currentColor;
  border-radius: 9999px;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pd-loc:hover .pd-loc__pin svg,
  .pd-loc:focus-visible .pd-loc__pin svg {
    animation: pdLocHop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .pd-loc:hover .pd-loc__pin::after,
  .pd-loc:focus-visible .pd-loc__pin::after {
    animation: pdLocRing 1.6s ease-out 0.15s infinite;
  }
}
@keyframes pdLocHop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  70%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes pdLocRing {
  0%   { opacity: 0.6; transform: scale(0.4); }
  100% { opacity: 0;   transform: scale(1.5); }
}

@media (pointer: coarse) {
  .pd-loc { min-height: 44px; padding-top: 0.65rem; padding-bottom: 0.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-loc { transition: color 0.4s ease-in-out; }
  .pd-loc:hover,
  .pd-loc:focus-visible { transform: none; }
}

/* =============================================================================
 *  SECTION « LOCALISATION » — carte intégrée des pages résidence
 * -----------------------------------------------------------------------------
 * Iframe Google Maps (sans clé d'API) dans un cadre doré à double filet.
 * La carte est inerte tant que la pastille « Explorer la carte » n'a pas été
 * activée : le défilement de la page n'est jamais capturé par l'iframe. Un
 * léger voile sépia accorde la carte à la palette ; il se dissipe à
 * l'activation.                                                               */
.pd-map__rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto 1.1rem;
  background: linear-gradient(90deg, transparent, #C9A24C, transparent);
}
.pd-map__address {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
}

.pd-map__frame {
  position: relative;
  margin-top: 2.5rem;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  border: 1px solid rgba(201, 162, 76, 0.35);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(16, 26, 49, 0.35);
  background: #E4DAC4;
}
/* Second filet doré, en retrait, au-dessus de la carte. */
.pd-map__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 162, 76, 0.3);
  border-radius: 0.3rem;
  pointer-events: none;
}
.pd-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;                /* inerte avant activation */
  filter: grayscale(0.18) sepia(0.07) saturate(0.9);
  transition: filter 0.6s ease;
}
.pd-map__frame.is-active .pd-map__iframe {
  pointer-events: auto;
  filter: none;
}

/* Pastille d'activation, centrée en bas du cadre. */
.pd-map__unlock {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(201, 162, 76, 0.55);
  border-radius: 9999px;
  background: rgba(16, 26, 49, 0.82);
  color: #F4EAD0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.35s ease, color 0.35s ease,
              opacity 0.45s ease, transform 0.45s ease;
}
.pd-map__unlock svg { width: 15px; height: 15px; }
.pd-map__unlock:hover {
  background: rgba(201, 162, 76, 0.92);
  color: #101A31;
}
.pd-map__unlock:focus-visible {
  outline: 2px solid #C9A24C;
  outline-offset: 3px;
}
.pd-map__frame.is-active .pd-map__unlock {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

@media (max-width: 640px) {
  .pd-map__frame { aspect-ratio: 4 / 5; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-map__iframe,
  .pd-map__unlock { transition: none; }
}

/* =============================================================================
 *  PAGE « À PROPOS » (/a-propos)
 * -----------------------------------------------------------------------------
 * Bannière navy sur image, cartes statistiques en chevauchement, citation
 * signature, chronologie « Notre parcours », cartes collections et grille
 * « Pourquoi nous choisir ». Même vocabulaire que le reste du site : or
 * #A3832A / #C9A24C, crème #FBF8F2, navy #16233C, serif display + sans Jost.
 * ========================================================================== */

/* ---- Bannière ------------------------------------------------------------- */
.pd-about-hero {
  position: relative;
  isolation: isolate;
  height: clamp(380px, 55vh, 560px);
  overflow: hidden;
}
.pd-about-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Voile navy — même famille que le pied de page (logo aesthetic). */
.pd-about-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(201, 162, 76, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(13, 21, 38, 0.55) 0%, rgba(13, 21, 38, 0.62) 55%, rgba(11, 17, 32, 0.78) 100%);
}
.pd-about-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Les cartes statistiques chevauchent le bas de la bannière. */
  padding-bottom: 3.5rem;
}
.pd-about-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 24px rgba(11, 17, 32, 0.45);
}
.pd-about-hero__ornament {
  display: flex;
  justify-content: center;
  margin: 1.1rem 0 1.2rem;
}
.pd-about-hero__ornament span {
  position: relative;
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A24C, transparent);
}
.pd-about-hero__ornament span::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5rem;
  color: #C9A24C;
  line-height: 1;
}
.pd-about-hero__tagline {
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: rgba(233, 223, 200, 0.88);
}
@media (min-width: 768px) {
  .pd-about-hero__tagline { font-size: 1.05rem; }
}

/* ---- Cartes statistiques (chevauchent la bannière) ------------------------ */
.pd-about-stats {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
}
.pd-about-stats__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.5rem 0.75rem 1.35rem;
  background: #fff;
  border: 1px solid #EFE7D8;
  box-shadow: 0 14px 34px rgba(16, 26, 49, 0.08);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease,
    border-color 0.45s ease;
}
.pd-about-stats__card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 76, 0.55);
  box-shadow: 0 20px 40px rgba(163, 131, 42, 0.16);
}
.pd-about-stats__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  color: #A3832A;
}
.pd-about-stats__label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #6b7280;
}
@media (min-width: 768px) {
  .pd-about-stats { margin-top: -4rem; }
  .pd-about-stats__card { padding: 2rem 1rem 1.75rem; }
  .pd-about-stats__value { font-size: 2.9rem; }
  .pd-about-stats__label { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-about-stats__card,
  .pd-about-stats__card:hover { transform: none; }
}

/* ---- Ornement titre (sections blanches — losange sur fond blanc) ---------- */
.pd-about-ornament { display: flex; justify-content: center; margin-bottom: 2rem; }
.pd-about-ornament span {
  position: relative;
  width: 170px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A24C, transparent);
}
.pd-about-ornament span::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.55rem;
  color: #C9A24C;
  background: #fff;
  padding: 0 0.4rem;
  line-height: 1;
}

/* ---- Citation signature ---------------------------------------------------- */
.pd-quote {
  position: relative;
  max-width: 46rem;
  margin-top: 3.5rem;
  padding: 2.5rem 1.75rem 2.25rem;
  background: #FBF8F2;
  border-left: 2px solid #C9A24C;
}
.pd-quote__mark {
  position: absolute;
  top: 0.4rem;
  left: 1.1rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(201, 162, 76, 0.45);
  pointer-events: none;
  user-select: none;
}
.pd-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.55;
  color: #16233C;
}
@media (min-width: 768px) {
  .pd-quote { padding: 3rem 3.25rem 2.75rem; }
  .pd-quote__mark { left: 1.4rem; }
  .pd-quote__text { font-size: 1.45rem; }
}

/* ---- Chronologie « Notre parcours » ---------------------------------------- *
 * Mobile : filet doré à gauche, jalons empilés.
 * Desktop : filet central, cartes alternées gauche / droite.                   */
.pd-tl {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.pd-tl::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 28px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(201, 162, 76, 0) 0%,
    rgba(201, 162, 76, 0.55) 6%,
    rgba(201, 162, 76, 0.55) 94%,
    rgba(201, 162, 76, 0) 100%);
}
.pd-tl__item { position: relative; padding: 0 0 2.25rem 76px; }
.pd-tl__item:last-child { padding-bottom: 0; }

/* Pastille année — même langage que les pastilles du schéma de proximité. */
.pd-tl__year {
  position: absolute;
  left: 28px;
  top: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 1.5px solid #C9A24C;
  background: #FBF8F2;
  box-shadow: 0 0 18px rgba(201, 162, 76, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: #A3832A;
}
.pd-tl__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: #16233C;
  padding-top: 0.35rem;
  margin-bottom: 0.4rem;
}
.pd-tl__text {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #4b5563;
  max-width: 30rem;
}

@media (min-width: 768px) {
  .pd-tl::before { left: 50%; }
  .pd-tl__item {
    width: 50%;
    padding: 0 4rem 2.75rem 0;
    text-align: right;
  }
  .pd-tl__item .pd-tl__text { margin-left: auto; }
  .pd-tl__year {
    left: auto;
    right: 0;
    transform: translateX(50%);
  }
  .pd-tl__item--alt {
    margin-left: 50%;
    padding: 0 0 2.75rem 4rem;
    text-align: left;
  }
  .pd-tl__item--alt .pd-tl__text { margin-left: 0; }
  .pd-tl__item--alt .pd-tl__year {
    right: auto;
    left: 0;
    transform: translateX(-50%);
  }
}

/* ---- Cartes collections ----------------------------------------------------- */
.pd-ccard {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem 2rem;
  background: #fff;
  border: 1px solid #EFE7D8;
  box-shadow: 0 10px 30px rgba(16, 26, 49, 0.06);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease,
    border-color 0.45s ease;
}
.pd-ccard:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 162, 76, 0.55);
  box-shadow: 0 22px 44px rgba(163, 131, 42, 0.15);
}
.pd-ccard__eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: #A3832A;
  margin-bottom: 0.85rem;
}
.pd-ccard__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  color: #16233C;
}
.pd-ccard__rule {
  width: 40px;
  height: 2px;
  background: #C9A24C;
  margin: 1rem 0 1.1rem;
}
.pd-ccard__text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #4b5563;
}
.pd-ccard__links {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.pd-ccard__link {
  display: inline-flex;
  align-items: baseline;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9D7B38;
  text-decoration: none;
  background-image: linear-gradient(#C9A24C, #C9A24C);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
.pd-ccard__link span { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.pd-ccard__link:hover,
.pd-ccard__link:focus-visible { color: #8a6f24; background-size: 100% 1px; }
.pd-ccard__link:hover span,
.pd-ccard__link:focus-visible span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .pd-ccard,
  .pd-ccard:hover { transform: none; }
  .pd-ccard__link span { transition: none; }
}

/* ---- Grille « Pourquoi nous choisir » --------------------------------------- */
.pd-why {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.pd-why__num {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  border: 1px solid rgba(201, 162, 76, 0.65);
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #A3832A;
}
.pd-why__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: #16233C;
  padding-top: 0.5rem;
  margin-bottom: 0.35rem;
}
.pd-why__text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #4b5563;
  max-width: 34rem;
}

/* =============================================================================
 *  REDESIGN PASS — hero drama, button hierarchy, tonal rhythm, card polish,
 *  404, back-to-top, mobile nav stagger, a11y skip-link. Same vocabulary as
 *  the rest of the site (gold #C9A24C/#A3832A, navy #15293D/#16233C, cream
 *  #FBF8F2) — no new palette, just used more deliberately.
 * ========================================================================== */

/* ---- Skip-to-content link (keyboard/screen-reader users only) ------------ */
.pd-skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10050;
  background: #101A31;
  color: #F4EAD0;
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.25s ease;
}
.pd-skip-link:focus { top: 0; }

/* ---- Primary CTA — filled gold, for the single most important action per
 *      section (hero contact, residence "book a visit", contact form submit).
 *      Everything else keeps the existing outline .btn-hover-ltr-gold, so the
 *      hierarchy reads at a glance instead of every button competing equally. */
.pd-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2.15rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #E4C67C 0%, #C9A24C 45%, #9D7B38 100%);
  color: #14213A;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 30px -10px rgba(157, 123, 56, 0.65);
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, filter 0.3s ease;
}
.pd-btn-primary:hover,
.pd-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(157, 123, 56, 0.75);
  filter: brightness(1.05);
}
.pd-btn-primary:active { transform: translateY(0); }
.pd-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pd-btn-primary { transition: filter 0.3s ease; }
  .pd-btn-primary:hover, .pd-btn-primary:focus-visible { transform: none; }
}

/* ---- Hero: richer scrim (was a flat bg-black/40) + slow Ken Burns zoom on
 *      the active slide + a gently bouncing scroll cue. Transform/opacity
 *      only, so this stays off the main thread and costs nothing on mobile. */
.pd-hero__scrim {
  background:
    linear-gradient(180deg, rgba(8, 14, 26, 0.46) 0%, rgba(8, 14, 26, 0.16) 32%, rgba(8, 14, 26, 0.34) 64%, rgba(8, 14, 26, 0.68) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(0, 0, 0, 0.32), transparent 60%);
}
@keyframes pdKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
.hero-slide img { will-change: transform; }
.hero-slide.opacity-100 img {
  animation: pdKenBurns 7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.pd-hero__scroll-cue { animation: pdScrollBounce 2.4s ease-in-out infinite; }
@keyframes pdScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.opacity-100 img { animation: none; }
  .pd-hero__scroll-cue { animation: none; }
}

/* ---- Homepage statistics band: white like the rest of the page (le bandeau
 *      bleu foncé a été retiré à la demande du client). Or sur blanc (#A3832A)
 *      pour l'eyebrow, le titre et les compteurs — le même que les titres des
 *      sections blanches voisines ; gris foncé pour le texte courant. */
.pd-band-stats         { background-color: #FFFFFF; }
.pd-band-stats__eyebrow { color: #A3832A; }
.pd-band-stats__heading { color: #A3832A; }
.pd-band-stats__body    { color: #1F2937; }
.pd-band-stats__stat    { color: #A3832A; }
.pd-band-stats__label   { color: #4B5563; }

/* ---- Residence grid cards (homepage): gradient scrim + a "Découvrir" call-
 *      to-action that reveals on hover/focus, replacing the flat centred
 *      label. Supersedes the generic `a.overflow-hidden.cursor-pointer > img`
 *      zoom rule above for this component (still used elsewhere, untouched). */
.pd-rcard {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.pd-rcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pd-rcard:hover .pd-rcard__img,
.pd-rcard:focus-visible .pd-rcard__img { transform: scale(1.06); }
.pd-rcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 17, 32, 0) 45%, rgba(11, 17, 32, 0.8) 100%);
}
.pd-rcard__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pd-rcard__label {
  color: #fff;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.pd-rcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #F4EAD0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pd-rcard__cta svg { width: 14px; height: 14px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.pd-rcard:hover .pd-rcard__cta,
.pd-rcard:focus-visible .pd-rcard__cta { opacity: 1; transform: none; }
.pd-rcard:hover .pd-rcard__cta svg,
.pd-rcard:focus-visible .pd-rcard__cta svg { transform: translateX(3px); }
.pd-rcard:focus-visible { outline: 2px solid #C9A24C; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pd-rcard__img, .pd-rcard__cta, .pd-rcard__cta svg { transition: none; }
  .pd-rcard:hover .pd-rcard__img { transform: none; }
}

/* ---- Residence collection bands: was a flat #9D7B38 fill, repeated once per
 *      collection — a soft top-lit gradient + gold hairline gives it the same
 *      considered depth as the footer/stats bands instead of a flat swatch. */
.pd-collection-band {
  position: relative;
  isolation: isolate;
  background-color: #9D7B38;
  background-image:
    radial-gradient(120% 140% at 50% -20%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(180deg, #A9884A 0%, #8A6F3C 100%);
}
.pd-collection-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 220, 0.45), transparent);
}

/* ---- Amenity cards + homepage concept features: same restrained hover
 *      language as the rest of the site — lift + gold warmth + slow zoom. */
.pd-amenity-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.pd-amenity-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 76, 0.55);
  box-shadow: 0 22px 44px rgba(163, 131, 42, 0.16);
}
.pd-amenity-card img { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.pd-amenity-card:hover img { transform: scale(1.06); }

.pd-feature img { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.pd-feature:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .pd-amenity-card, .pd-amenity-card img, .pd-feature img { transition: none; }
  .pd-amenity-card:hover, .pd-amenity-card:hover img, .pd-feature:hover img { transform: none; }
}

/* ---- 404 page: on-brand navy/gold treatment instead of a bare white screen,
 *      with a second path forward (active residences) besides "go home". --- */
.pd-404 {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pd-404__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-404__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(201, 162, 76, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(11, 17, 32, 0.76) 0%, rgba(11, 17, 32, 0.84) 60%, rgba(9, 14, 26, 0.93) 100%);
}
.pd-404__content { position: relative; z-index: 2; max-width: 40rem; text-align: center; padding: 3rem 1rem; }
.pd-404__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 14vw, 7.5rem);
  line-height: 1;
  color: #C9A24C;
  text-shadow: 0 0 60px rgba(201, 162, 76, 0.35);
}
.pd-404__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2rem); color: #fff; margin-bottom: 1rem; }
.pd-404__text { color: rgba(233, 223, 200, 0.82); font-size: 0.95rem; line-height: 1.75; margin-bottom: 2.25rem; }
.pd-404__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.85rem; margin-bottom: 2.5rem; }
.pd-404__secondary { background: transparent; transition: color 0.3s ease, background-color 0.3s ease; }
.pd-404__secondary:hover { background: rgba(201, 162, 76, 0.12); }
.pd-404__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem;
  list-style: none; margin: 0; padding-top: 1.75rem;
  border-top: 1px solid rgba(201, 162, 76, 0.25);
}
.pd-404__links a {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(233, 223, 200, 0.78); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.pd-404__links a:hover, .pd-404__links a:focus-visible { color: #F4EAD0; border-color: rgba(201, 162, 76, 0.55); }

/* ---- Back-to-top: plain anchor to #top, so it works with zero JS; main.js
 *      only toggles visibility once the user has scrolled past the hero. --- */
.pd-totop {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: rgba(16, 26, 49, 0.85);
  color: #F4EAD0;
  border: 1px solid rgba(201, 162, 76, 0.45);
  box-shadow: 0 10px 26px rgba(16, 26, 49, 0.28);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.pd-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.pd-totop:hover, .pd-totop:focus-visible { background: #C9A24C; color: #101A31; border-color: #C9A24C; }
.pd-totop:focus-visible { outline: 2px solid #C9A24C; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pd-totop { transition: opacity 0.35s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
}


/* ---- Whole-page fade-in on load: the one animation every page gets, so
 *      first paint feels considered rather than an abrupt flash of content. */
body { animation: pdPageIn 0.5s ease both; }
@keyframes pdPageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}