/* =========================================================
   MAISON STARLIT
   Base sobre : noir profond, crème et sable (BEIGE #b8ad9f).
   Le bleu de marque (#09314a) intervient par touches :
   lueurs de profondeur et onglet actif. Pas d'aplat coloré.
   ========================================================= */

:root {
  /* --- couleurs de marque --- */
  --brand-beige: #b8ad9f;
  --brand-blue: #09314a;
  --brand-blue-soft: #3d87b0;   /* bleu éclairci, lisible sur fond noir */

  /* --- fonds : noirs neutres --- */
  --bg: #0a0a0d;
  --bg-alt: #101012;
  --surface: #141417;
  --surface-2: #1a1a1e;

  --line: rgba(184, 173, 159, 0.16);
  --line-strong: rgba(184, 173, 159, 0.34);
  --text: #efe9df;
  --text-muted: #a9a49b;
  --text-faint: #7a756d;

  /* accents (noms conservés dans tout le CSS) */
  --gold: #b8ad9f;
  --gold-light: #d8cfc2;
  --gold-dim: #7c7267;

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Courbe des révélations : nettement moins abrupte au départ que --ease,
     qui parcourt l'essentiel de la distance dans les premiers instants. */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `hidden` fait du corps un conteneur de défilement et neutralise
   `position: sticky` (bloc Ascension). `clip` retient le débordement
   horizontal sans créer ce conteneur. */
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.08; font-weight: 500; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.15; }
h3 { font-size: 1.5rem; }

.section-head {
  max-width: 640px;
  margin-bottom: 64px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.lede {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 620px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: all 0.5s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--gold);
  background: rgba(184, 173, 159, 0.08);
  color: var(--gold-light);
}

.btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0d;
  font-weight: 400;
}

.btn.primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #0a0a0d;
}

.btn.small {
  padding: 12px 24px;
  font-size: 11px;
}

/* ---------- Preloader ---------- */

#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}

#preloader span {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  color: var(--gold);
  padding-left: 0.5em;
  opacity: 0;
  animation: preloaderFade 1.6s var(--ease) forwards;
}

@keyframes preloaderFade {
  0% { opacity: 0; letter-spacing: 0.9em; }
  100% { opacity: 1; letter-spacing: 0.5em; }
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Header ---------- */

header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
  padding: 26px 0;
  transition: background 0.5s var(--ease), padding 0.5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}

header.site-header.scrolled {
  padding: 16px 0;
  background: rgba(10, 10, 13, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* L'en-tête dispose d'une largeur propre, plus généreuse que le corps du site */
header.site-header .container {
  max-width: 1480px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
}

.logo em {
  font-style: normal;
  color: var(--gold);
}

.logo-icon {
  height: 36px;
  width: auto;
  display: block;
}

nav.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex: 1 1 auto;
  min-width: 0;
}

nav.main-nav a {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

nav.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--text);
  transition: width 0.4s var(--ease), background 0.4s var(--ease);
}

nav.main-nav a:hover {
  color: var(--text);
}

nav.main-nav a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-shrink: 0;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  border: 1px solid var(--line-strong);
  background: rgba(184, 173, 159, 0.06);
  padding: 8px 12px;
  border-radius: 999px;
}

.lang-toggle span {
  color: var(--text-faint);
  opacity: 0.6;
}

.lang-toggle button {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 3px;
  transition: color 0.3s var(--ease);
}

.lang-toggle button.active {
  color: var(--gold);
}

.lang-toggle:hover {
  border-color: var(--gold);
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
}

.burger span {
  width: 26px;
  height: 1px;
  background: var(--text);
  transition: all 0.35s var(--ease);
}

.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile nav ---------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 105;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
}

.mobile-nav.open {
  transform: translateY(0);
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.mobile-nav a.active {
  color: var(--brand-blue-soft);
}

/* Six entrées : on resserre légèrement pour tenir sur les petits écrans */
@media (max-width: 720px), (max-height: 700px) {
  .mobile-nav {
    gap: 26px;
  }

  .mobile-nav a {
    font-size: 1.55rem;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Lueur bleu nuit de la marque, fondue dans le noir */
  background:
    radial-gradient(ellipse at 50% 12%, rgba(9, 49, 74, 0.5) 0%, rgba(9, 49, 74, 0) 60%),
    var(--bg);
}

#starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 13,0) 40%, var(--bg) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding-top: 40px;
}

.hero h1 {
  margin: 0 auto 26px;
  max-width: 900px;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.hero .lede {
  margin: 0 auto 42px;
  max-width: 560px;
  text-align: center;
}

.hero-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.scroll-cue span {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.scroll-cue .line {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollCue 2.2s var(--ease) infinite;
}

@keyframes scrollCue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  /* Déplacement réduit et rendu sur la couche graphique : le texte se pose
     au lieu de surgir. */
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 1.25s var(--ease-soft),
    transform 1.15s var(--ease-soft);
  will-change: opacity, transform;
}

.reveal.in {
  will-change: auto;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }
.reveal-delay-5 { transition-delay: 0.6s; }

/* ---------- Sections generic ---------- */

section {
  position: relative;
  padding: 140px 0;
}

/* Sections alternées */
.section-alt {
  background: var(--bg-alt);
}

/* Filet lumineux en tête de section alternée */
.section-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 173, 159, 0.4), transparent);
}

.rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 28px;
}

.rule.center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Intro ---------- */

.intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}

/* ---------- Media placeholders (espaces images) ---------- */

.media-frame {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, var(--surface) 0%, var(--bg-alt) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-frame.ratio-portrait { aspect-ratio: 3 / 4; }
.media-frame.ratio-card { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); }
.media-frame.ratio-wide { aspect-ratio: 16 / 9; }

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Étalonnage commun : les photographies viennent de sources différentes.
     Une désaturation marquée et un contraste identique les font lire comme
     une même série, accordée au noir et au sable du site. */
  filter: grayscale(0.72) saturate(0.9) contrast(1.06) brightness(0.9);
  transition: transform 1.4s var(--ease), filter 0.6s var(--ease);
}

.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 13,0) 55%, rgba(10, 10, 13,0.4) 100%);
  pointer-events: none;
}

.univers-card:hover .media-frame img,
.media-frame:hover img {
  transform: scale(1.06);
  /* Au survol la couleur revient : la photographie s'anime sous le regard. */
  filter: grayscale(0.15) saturate(1.05) contrast(1.03) brightness(1);
}

.intro-text p {
  color: var(--text-muted);
  margin-bottom: 22px;
}

.intro-text p:first-child {
  color: var(--text);
  font-size: 1.15rem;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.6;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 48px;
}

.pillar {
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.pillar .num {
  display: block;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.pillar h4 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.pillar p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ---------- Univers / Services ---------- */

.univers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.univers-card {
  background: var(--bg);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Un filet sable se révèle au survol */
.univers-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--brand-beige);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  z-index: 2;
}

.univers-card:hover::before {
  transform: scaleX(1);
}

.univers-card:hover {
  background: var(--surface);
}

.univers-card-body {
  padding: 32px 34px 40px;
}

.univers-card-body-solo {
  padding-top: 52px;
}

.univers-card .icon {
  width: 34px;
  height: 34px;
  margin-bottom: 22px;
  color: var(--gold);
}

.univers-card .icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
}

.univers-card h3 {
  margin-bottom: 14px;
}

.univers-card p {
  color: var(--text-muted);
  font-size: 0.94rem;
}

/* ---------- Worldwide ---------- */

/* L'horizon baigne dans le bleu nuit de la marque */
.worldwide {
  text-align: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 92%, rgba(9, 49, 74, 0.55) 0%, rgba(9, 49, 74, 0) 70%),
    var(--bg);
}

/* ---------- Horizon terrestre (Nuit profonde) ---------- */

/* Pleine largeur d'écran : aucune boîte, aucune arête, le graphisme
   se pose directement sur le fond de la page. */
.globe-wrap {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -18px;
  margin-bottom: 30px;
  pointer-events: none;
}

.globe-wrap .route {
  pointer-events: auto;
}

.meridian {
  fill: none;
  stroke: rgba(184, 173, 159, 0.075);
  stroke-width: 1.1;
}

.globe-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Ciel : scintillement lent et désynchronisé */
.globe-svg .stars circle {
  animation: starTwinkle 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.62; }
}

/* Trajectoires vers les places internationales */
.route {
  cursor: pointer;
}

.route-arc {
  fill: none;
  stroke: rgba(184, 173, 159, 0.15);
  stroke-width: 1.2;
  transition: stroke 0.5s var(--ease);
}

.route-dot {
  fill: rgba(216, 207, 194, 0.75);
  transition: fill 0.5s var(--ease);
}

.route-city {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  fill: rgba(178, 167, 154, 0.8);
  text-anchor: middle;
  transition: fill 0.5s var(--ease);
}

.route:hover .route-arc { stroke: rgba(216, 207, 194, 0.6); }
.route:hover .route-dot { fill: var(--gold-light); }
.route:hover .route-city { fill: rgba(216, 207, 194, 0.95); }

.paris-label {
  font-size: 14px;
  letter-spacing: 0.38em;
  fill: rgba(239, 231, 220, 0.85);
}

.paris-halo {
  animation: parisBreath 6.5s ease-in-out infinite;
}

@keyframes parisBreath {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .globe-svg .stars circle,
  .paris-halo {
    animation: none;
  }
}

.worldwide-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 56px;
  flex-wrap: wrap;
}

.worldwide-stats div {
  text-align: center;
}

.worldwide-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold-light);
  margin-bottom: 6px;
}

.worldwide-stats span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 10px 2px;
  transition: border-color 0.3s var(--ease);
}

.field select option {
  background: var(--surface);
  color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.field textarea {
  resize: vertical;
  min-height: 90px;
}

.field.checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.field.checkbox input {
  margin-top: 4px;
  accent-color: var(--gold);
}

.field.checkbox label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- Segmented control (type de demande) ---------- */

.segmented {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
}

.segment {
  position: relative;
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 14px;
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}

.segment:last-child {
  border-right: none;
}

.segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.35s var(--ease);
}

.segment:hover {
  background: rgba(184, 173, 159, 0.06);
}

.segment.active {
  background: rgba(184, 173, 159, 0.12);
}

.segment.active span {
  color: var(--gold-light);
}

@media (max-width: 720px) {
  .segmented {
    flex-direction: column;
  }

  .segment {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .segment:last-child {
    border-bottom: none;
  }
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* ---------- Honeypot (anti-spam, invisible) ---------- */

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Validation errors ---------- */

/* Bandeau récapitulatif dans le formulaire (visible, non flottant). */
.form-alert {
  display: none;
  border: 1px solid #ff5c4d;
  border-left-width: 3px;
  background: rgba(255, 92, 77, 0.1);
  color: #ffb3ab;
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 14px 18px;
}

.form-alert.visible {
  display: block;
}

.form-alert.success {
  border-color: var(--gold);
  background: rgba(184, 173, 159, 0.12);
  color: var(--gold-light);
}

.error-msg {
  display: none;
  color: #ff5c4d;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.field.error .error-msg {
  display: block;
}

/* Astérisque rouge devant le libellé du champ manquant. */
.field.error > label::before {
  content: "* ";
  color: #ff5c4d;
  font-weight: 500;
}

.field.error label {
  color: #ff5c4d;
}

.field.error input,
.field.error select,
.field.error textarea {
  border-color: #ff5c4d;
  border-bottom-width: 2px;
  background: rgba(255, 92, 77, 0.07);
  box-shadow: 0 0 0 3px rgba(255, 92, 77, 0.14);
}

.field.error .segmented {
  border-color: #ff5c4d;
  background: rgba(255, 92, 77, 0.07);
  box-shadow: 0 0 0 3px rgba(255, 92, 77, 0.14);
}

.field.error.checkbox {
  outline: 1px solid #ff5c4d;
  outline-offset: 6px;
  border-radius: 2px;
  flex-wrap: wrap;
}

.field.error.checkbox input {
  outline: 2px solid #ff5c4d;
  outline-offset: 2px;
}

.field.error.checkbox .error-msg {
  flex-basis: 100%;
  margin-left: 0;
}

.field.shake {
  animation: fieldShake 0.45s var(--ease);
}

@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.contact-card {
  border: 1px solid var(--line);
  padding: 34px;
  background: var(--surface);
}

.contact-card .eyebrow {
  margin-bottom: 14px;
}

.contact-card a.email-link {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-light);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease);
}

.contact-card a.email-link:hover {
  border-color: var(--gold);
}

.contact-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 14px;
}

.availability-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.availability-list li {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.availability-list li span:last-child {
  color: var(--text);
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 70px 0 30px;
  background: var(--bg-alt);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 50px;
}

.footer-brand .logo {
  margin-bottom: 18px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 320px;
}

.footer-col h4 {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.3s var(--ease);
}

.footer-col a:hover {
  color: var(--gold-light);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 14px;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: var(--text-faint);
}

.footer-social {
  display: flex;
  gap: 18px;
}

.footer-social a {
  font-size: 0.78rem;
  color: var(--text-faint);
}

.footer-social a:hover {
  color: var(--gold-light);
}

/* ---------- Cookie banner ---------- */

#cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  padding: 26px 28px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(140%);
  transition: transform 0.7s var(--ease);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

#cookie-banner.visible {
  transform: translateY(0);
}

#cookie-banner p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

#cookie-banner a {
  color: var(--gold-light);
  border-bottom: 1px solid var(--line-strong);
}

.cookie-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Toast (mailto confirmation) ---------- */

#toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--surface-2);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 16px 22px;
  font-size: 0.85rem;
  z-index: 300;
  max-width: 320px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s var(--ease);
  pointer-events: none;
}

#toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Pages intérieures (Conciergerie, Investissements, Contact) ---------- */

.subpage {
  padding-top: 190px;
}

.subpage h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  line-height: 1.14;
  margin-bottom: 18px;
}

/* Onglet de la page courante : soulignement bleu de la marque */
nav.main-nav a.active {
  color: var(--text);
}

nav.main-nav a.active::after {
  width: 100%;
  background: var(--brand-blue-soft);
  height: 2px;
}

.mobile-nav a.active {
  color: var(--brand-blue-soft);
}

/* Cartes cliquables (renvoi vers une autre page) */
a.univers-card {
  color: inherit;
  text-decoration: none;
}

.card-link {
  display: inline-block;
  margin: 20px 0 0;
  padding-bottom: 2px;
}

a.univers-card:hover .card-link {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ---------- Bande d'appel au contact ---------- */

.cta-band {
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}

.cta-band .lede {
  margin: 0 auto 34px;
}

.cta-band h2 {
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .subpage {
    padding-top: 140px;
  }
}

/* ---------- Legal pages ---------- */

.legal-page {
  padding-top: 180px;
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-content h2 {
  margin-top: 48px;
  margin-bottom: 18px;
  font-size: 1.5rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p, .legal-content li {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.legal-content ul {
  list-style: disc;
  padding-left: 22px;
}

.legal-content .placeholder {
  color: var(--gold-light);
  background: rgba(184, 173, 159, 0.1);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.85em;
}

.legal-content .updated {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 40px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 46px;
}

.back-link:hover {
  color: var(--gold-light);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .intro-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .univers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* En dessous de cette largeur, les onglets ne tiennent plus sans se serrer :
   on bascule sur le menu burger plutôt que de tout comprimer. */
@media (max-width: 1400px) {
  nav.main-nav {
    display: none;
  }

  .burger {
    display: flex;
  }

  .header-inner {
    gap: 24px;
  }
}

/* Le bouton "Nous contacter" déborde sur petit écran : on le retire,
   l'onglet Contact du menu burger prend le relais. */
@media (max-width: 720px) {
  .header-actions > .btn.small {
    display: none;
  }
}

@media (max-width: 720px) {
  section {
    padding: 90px 0;
  }

  /* ----- En-tête mobile : logo compact, pastille FR/EN + burger à droite ----- */
  .container {
    padding: 0 20px;
  }

  header.site-header {
    padding: 14px 0;
  }

  header.site-header.scrolled {
    padding: 10px 0;
  }

  .header-inner {
    gap: 12px;
  }

  .logo {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
  }

  .logo span {
    white-space: nowrap;
  }

  .logo-icon {
    height: 28px;
  }

  .header-actions {
    gap: 12px;
    flex-shrink: 0;
  }

  .lang-toggle {
    padding: 6px 10px;
    gap: 4px;
  }

  .lang-toggle button {
    font-size: 12px;
    padding: 2px 4px;
    min-width: 24px;
  }

  .univers-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .worldwide-stats {
    gap: 34px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  /* Horizon : libellés et traits renforcés pour rester lisibles sur mobile */
  .route-city {
    font-size: 34px;
    letter-spacing: 0.16em;
    fill: rgba(178, 167, 154, 0.95);
  }

  .paris-label {
    font-size: 36px;
    letter-spacing: 0.26em;
  }

  .route-arc {
    stroke: rgba(184, 173, 159, 0.28);
    stroke-width: 2.6;
  }

  .route-dot {
    r: 5;
  }

  .meridian {
    stroke: rgba(184, 173, 159, 0.1);
    stroke-width: 1.8;
  }

  .globe-wrap {
    margin-top: -8px;
    margin-bottom: 20px;
  }
}

/* =========================================================
   REDESIGN — Actualités, Sélection Exclusive, Écosystème
   ========================================================= */

/* ---------- Pill / tag ---------- */

/* Pastille : sable discret */
.pill {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(184, 173, 159, 0.10);
  border: 1px solid rgba(184, 173, 159, 0.32);
  padding: 5px 12px;
  margin-bottom: 16px;
}

/* ---------- Actualités ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.news-card {
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(184, 173, 159, 0.08);
}

.news-card-body {
  padding: 28px 30px 32px;
}

.news-card-body h3 {
  margin-bottom: 12px;
}

.news-card-body p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 18px;
}

.news-date {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Carousel : Sélection Exclusive ---------- */

.carousel-wrap {
  position: relative;
  margin-top: 20px;
}

.carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 32px 28px;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.carousel-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-strong);
  box-shadow: 0 28px 70px -22px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(184, 173, 159, 0.1);
}

.carousel-card .media-frame.ratio-wide {
  aspect-ratio: 4 / 3;
}

.carousel-card-body {
  padding: 24px 26px 30px;
}

.carousel-card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.carousel-card-body p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.carousel-arrows {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.carousel-arrow {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}

.carousel-arrow:hover {
  border-color: var(--gold);
  background: rgba(184, 173, 159, 0.08);
  color: var(--gold-light);
}

@media (max-width: 720px) {
  .carousel-arrows {
    display: none;
  }
}

/* ---------- Explorer accordion (Services / Produits / Histoire) ---------- */

.explorer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.explorer-item {
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease);
}

.explorer-item.open,
.explorer-item:hover {
  border-color: var(--line-strong);
}

.explorer-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 28px 30px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-align: left;
}

.explorer-toggle {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-size: 1rem;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}

.explorer-item.open .explorer-toggle {
  transform: rotate(45deg);
  background: rgba(184, 173, 159, 0.12);
}

.explorer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease);
}

.explorer-item.open .explorer-panel {
  max-height: 420px;
}

.explorer-panel p {
  color: var(--text-muted);
  font-size: 0.92rem;
  padding: 0 30px;
  margin-bottom: 18px;
}

.explorer-link {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  border-bottom: 1px solid var(--line-strong);
  margin: 0 30px 28px;
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease);
}

.explorer-link:hover {
  border-color: var(--gold);
}

@media (max-width: 980px) {
  .explorer-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pôles (Conciergerie / Investissements) ---------- */

.subgroup-title {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 56px 0 24px;
}

.subgroup-title:first-of-type {
  margin-top: 0;
}

.univers-grid.pole-grid.two-col {
  grid-template-columns: repeat(2, 1fr);
}

.univers-grid.pole-grid.three-col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
  .univers-grid.pole-grid.two-col,
  .univers-grid.pole-grid.three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .news-grid {
    grid-template-columns: 1fr;
  }

  .univers-grid.pole-grid.two-col,
  .univers-grid.pole-grid.three-col {
    grid-template-columns: 1fr;
  }

  .explorer-head {
    padding: 22px 22px;
    font-size: 1.15rem;
  }

  .explorer-panel p,
  .explorer-link {
    padding-left: 22px;
    padding-right: 22px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* =========================================================
   ASCENSION — ouverture au défilement
   La caméra s'élève de la crête vers le zénith : la nuit
   s'épaissit, les étoiles se révèlent, puis le monogramme
   apparaît. Un seul écran collé, la hauteur de
   la section ne servant qu'à donner la course.
   ========================================================= */

.asc {
  position: relative;
  height: 360vh;
  padding: 0;                       /* neutralise le padding générique des sections */
}
.asc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #05060a;
}

/* --- le plateau photographique --- */
.asc-plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 50% 0;
  will-change: transform;
  z-index: 0;
}
.asc-plate img { width: 100%; height: auto; }

/* --- étoiles procédurales, par-dessus la photo --- */
.asc-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

/* --- la nuit qui tombe --- */
.asc-night {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 88%, rgba(5, 7, 12, 0.28), rgba(4, 5, 9, 0.74) 62%, rgba(3, 4, 7, 0.86) 100%);
}
/* --- la nuit « moins sombre » du départ, qui se retire --- */
.asc-dawn {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;                       /* la lueur d'horizon n'arrive qu'a la fin */
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(90% 46% at 50% 100%, rgba(94, 138, 143, 0.55), transparent 72%),
    linear-gradient(to top, rgba(70, 104, 112, 0.34), rgba(24, 40, 56, 0.14) 46%, transparent 78%);
}
/* --- le fondu du bas : la photo se dissout dans le noir de la page
   en fin de course, comme le faisait l'ancien héros. Il n'apparaît
   qu'au moment de quitter la section, pour ne pas masquer la crête
   pendant qu'elle entre dans le cadre. --- */
.asc-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;                     /* -1px : évite un liseré au sous-pixel */
  height: 46svh;
  z-index: 4;
  opacity: 0;                       /* piloté au défilement : voir main.js */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 13, 0) 0%,
    rgba(10, 10, 13, 0.28) 34%,
    rgba(10, 10, 13, 0.68) 64%,
    rgba(10, 10, 13, 0.92) 85%,
    var(--bg) 100%
  );
}

.asc-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(78% 62% at 50% 46%, transparent 42%, rgba(3, 4, 7, 0.72) 100%);
}

/* --- le monogramme qui se révèle --- */
.asc-mark {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  width: min(20vw, 26svh);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.asc-mark img {
  width: 100%;
  height: auto;
  display: block;
}
.asc-halo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  width: min(86vw, 112svh);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(120, 150, 180, 0.16), rgba(90, 120, 160, 0.05) 42%, transparent 68%);
}


/* --- l'accroche d'ouverture --- */
.asc-intro {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 26svh;
  text-align: center;
  pointer-events: none;
}
.asc-intro h1 {
  margin: 0 auto 26px;
  max-width: 900px;
}
.asc-intro h1 em {
  font-style: italic;
  color: var(--gold-light);
}
.asc-intro .lede {
  margin: 0 auto 42px;
  max-width: 560px;
}
.asc-cta {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  pointer-events: auto;             /* le bouton reste cliquable */
}

/* --- signature finale --- */
/* Signature composée en texte et non en image : le fichier d'origine
   ne faisait que 327 px de large, il était donc étiré au-delà du double
   de sa définition et paraissait granuleux. Le texte reste net à toute
   taille et sur tout écran. */
.asc-sign {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 13svh;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;            /* compense l'espacement final : recentrage optique */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}

/* --- invite à défiler --- */
.asc-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.asc-cue span {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.asc-cue .line {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--gold), transparent);
}

@media (max-width: 767px) {
  .asc-mark { width: min(38vw, 22svh); }
  .asc-halo { width: min(160vw, 96svh); }
  .asc-intro { top: 20svh; }
  .asc-sign { bottom: 11svh; letter-spacing: 0.28em; text-indent: 0.28em; }
}

/* Mouvement réduit : l'image d'arrivée, sans la montée. */
@media (prefers-reduced-motion: reduce) {
  .asc { height: 100svh; }
  .asc-stage { position: relative; }
}

/* =========================================================
   LA MAISON / PRINCIPES
   Reprend le contenu qui accompagnait la photo de crête : la
   photo étant devenue l'ascension elle-même, le propos passe
   en pleine largeur, centré, sur le même noir. L'enchaînement
   se lit comme une descente du ciel vers les principes.
   ========================================================= */

.principes .section-head {
  margin-bottom: 40px;
}
.principes-lede,
.principes-note {
  max-width: 720px;
  margin: 0 auto 22px;
  text-align: center;
}
.principes-lede {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.6;
}
.principes-note {
  color: var(--text-muted);
}
.principes .pillars {
  margin-top: 64px;
}

@media (max-width: 980px) {
  .principes .pillars { margin-top: 48px; }
}


/* Révélations : aucune animation si le visiteur a réduit les mouvements. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =====================================================================
   CATALOGUE IMMOBILIER
   Fiches sans photographie : le bien se lit comme une ligne de
   catalogue, pas comme une annonce. Ajouter un bien = recopier un
   bloc <article class="bien"> dans immobilier.html.
   ===================================================================== */

.subpage-tight { padding-top: 0; }

/* Même principe que les catalogues : aujourd'hui trois biens tombent
   juste, mais un quatrième créerait deux trous dans une grille rigide. */
.biens-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 46px;
}

.biens-grid > .bien { flex: 1 1 320px; }

.bien {
  background: var(--surface);
  padding: 54px 38px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  transition: background 0.6s var(--ease);
}

.bien:hover { background: var(--surface-2); }

.bien-nom {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--text);
  margin: 0 0 22px;
}

.bien-prix {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: 0.06em;
  color: var(--gold-light);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;     /* les chiffres s'alignent d'une fiche à l'autre */
}

.bien-note {
  font-size: 0.74rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.biens-pied {
  margin: 44px 0 0;
  color: var(--text-muted);
  max-width: 54ch;
}

.biens-action { margin-top: 26px; }

@media (max-width: 680px) {
  .biens-grid > .bien { flex-basis: 100%; }
  .bien { min-height: 0; padding: 40px 28px 36px; }
}


/* =====================================================================
   CATALOGUES ARTISTES ET MARQUES
   Même langage que le catalogue immobilier, en plus dense : il y a
   quinze artistes et six marques, pas trois biens.
   ===================================================================== */

/* Disposition souple plutôt que grille à colonnes fixes : les fiches de
   la dernière ligne s'étirent pour occuper la largeur restante. Quel que
   soit leur nombre — trois, cinq, quinze — et quelle que soit la largeur
   de l'écran, il ne reste jamais de case vide. */
.lots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 46px;
}

.lots-grid > .lot { flex: 1 1 260px; }          /* environ cinq par ligne */
.lots-grid-large > .lot { flex: 1 1 420px; }    /* environ trois par ligne */

.lot {
  background: var(--surface);
  padding: 36px 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
  transition: background 0.6s var(--ease);
}

.lot:hover { background: var(--surface-2); }

.lot-nom {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.26;
  color: var(--text);
  margin: 0 0 16px;
}

.lot-nombre {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}

.lot-note {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

@media (max-width: 560px) {
  .lots-grid > .lot,
  .lots-grid-large > .lot { flex-basis: 100%; }
  .lot { min-height: 0; padding: 28px 24px 26px; }
}


/* =====================================================================
   CATALOGUES EN ACCORDÉON
   ===================================================================== */

.cat-accordion {
  margin-top: 46px;
  border-top: 1px solid var(--line);
}

.cat-item { border-bottom: 1px solid var(--line); }

.cat-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 22px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 30px 4px;
  text-align: left;
  transition: color 0.4s var(--ease);
}

.cat-head:hover { color: var(--gold-light); }

.cat-titre {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  flex: none;
}

.cat-compte {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex: 1;
}

/* Le signe se construit en CSS : deux traits, dont l'un pivote. */
.cat-toggle {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  align-self: center;
}

.cat-toggle::before,
.cat-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--gold-light);
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}

.cat-toggle::after { transform: rotate(90deg); }
.cat-item.open .cat-toggle::after { transform: rotate(0deg); opacity: 0; }

/* La hauteur réelle est posée par le script : une valeur fixe
   conviendrait aux trois maisons horlogères mais pas aux quinze
   artistes, dont le panneau s'ouvrirait d'un coup puis stagnerait. */
.cat-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease);
}

.cat-panel-inner { padding-bottom: 38px; }

.cat-panel-inner .lots-grid { margin-top: 0; }

/* Cible du défilement : la barre fixe ne doit pas recouvrir le titre. */
.cat-item { scroll-margin-top: 110px; }

/* Les trois cartes du haut deviennent cliquables. */
.univers-card-lien {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.univers-card-lien .univers-card-body::after {
  content: attr(data-voir);
  display: block;
  margin-top: 18px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  transition: color 0.4s var(--ease);
}

.univers-card-lien:hover .univers-card-body::after { color: var(--gold-light); }

@media (max-width: 680px) {
  .cat-head { flex-wrap: wrap; gap: 6px 16px; padding: 24px 4px; }
  .cat-compte { flex: 1 0 100%; order: 3; }
}


/* Lien de retour en tête des pages de catalogue. */
.retour {
  margin: 0 0 26px;
  font-size: 0.74rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.retour a {
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}

.retour a:hover { color: var(--gold-light); }