/*
  TERROVA — feuille de style unique.

  Écrite à la main, sans framework. Le site a vocation à vivre plusieurs années
  avec des mises à jour ponctuelles (un lot vendu, un programme qui s'ajoute) :
  un fichier CSS s'ouvre et se modifie tel quel, sans réinstaller d'outillage.

  La palette est relevée directement dans les planches commerciales et les plans
  de lots, aux mêmes valeurs hexadécimales — le site et les PDF remis en
  rendez-vous doivent se ressembler. Chaque programme garde son accent : le vert
  pour Élange, le doré pour Oeutrange, exactement comme sur leurs planches.
*/

:root {
  /* Fonds */
  --creme:        #f7f3ec;
  --creme-clair:  #fdfbf7;
  --creme-fonce:  #f2ede4;
  --blanc:        #ffffff;

  /* Encres */
  --encre:        #1e2820;
  --encre-douce:  #4a4a42;
  --encre-pale:   #8a8272;

  /* Filets */
  --filet:        #e2dbcc;
  --filet-fort:   #c9bfa8;
  --sable:        #ddd4c0;

  /* Verts TERROVA */
  --vert:         #3d6b47;
  --vert-fonce:   #2c3a2c;
  --vert-clair:   #7a9e7e;
  --vert-pale:    #edf1ea;

  /* Doré (Oeutrange) */
  --or:           #c4a86a;
  --or-fonce:     #a88d52;
  --or-pale:      #f5efe1;

  /* Accent contextuel : redéfini par .programme-elange / .programme-oeutrange */
  --accent:       var(--vert);
  --accent-fonce: var(--vert-fonce);
  --accent-pale:  var(--vert-pale);

  /* Une échelle d'arrondis plutôt que des valeurs semées au fil du fichier :
     tout se règle ici, et les rayons restent proportionnés entre eux. Les
     bulles de prestations étant des cercles parfaits, le reste du site adopte
     des angles adoucis pour leur répondre. */
  --arrondi-s:  0.5rem;
  --arrondi-m:  1rem;
  --arrondi-l:  1.5rem;
  --arrondi-xl: 2rem;
  --pastille:   999px;

  --ombre-douce:  0 2px 10px -4px rgba(30, 40, 32, 0.10);
  --ombre-levee:  0 26px 55px -30px rgba(30, 40, 32, 0.45);

  --largeur:  74rem;
  --texte:    44rem;
  --bandeau:  4.75rem;

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.programme-oeutrange {
  --accent:       var(--or-fonce);
  --accent-fonce: var(--encre);
  --accent-pale:  var(--or-pale);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme-clair);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* Le bandeau collant décalerait les ancres : on réserve sa hauteur. */
section[id], div[id] { scroll-margin-top: calc(var(--bandeau) + 1rem); }


/* ─────────────────────────  Typographie  ───────────────────────── */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
h3 { font-size: 1.75rem; }

p { margin: 0 0 1.1em; }

/* Le surtitre en capitales espacées : signature des planches. */
.surtitre {
  font-size: 0.88rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 1.15rem;
}

.chapeau {
  font-size: 1.4rem;
  line-height: 1.62;
  color: var(--encre-douce);
  max-width: var(--texte);
  font-weight: 300;
}

.mention {
  font-size: 0.92rem;
  color: var(--encre-pale);
  line-height: 1.55;
}


/* ─────────────────────────  Ossature  ───────────────────────── */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

section { padding-block: clamp(3.5rem, 8vw, 7rem); }

.section-creme  { background: var(--creme); }
.section-sombre { background: var(--vert-fonce); color: var(--creme); }
.section-sombre .chapeau { color: #c8cfc5; }
.section-sombre .surtitre { color: var(--vert-clair); }

.entete-section { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.entete-section h2 { margin-bottom: 1.1rem; }


/* ─────────────────────────  Bandeau  ───────────────────────── */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--filet);
}

.bandeau-interieur {
  height: var(--bandeau);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marque { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.marque-monogramme {
  height: 1.65rem;
  width: auto;
  color: var(--encre);
  flex: none;
}
.marque-texte { display: flex; flex-direction: column; line-height: 1; }
.marque-nom {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.marque-baseline {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-top: 0.22rem;
}

.navigation { display: flex; align-items: center; gap: 1.9rem; }

.navigation a {
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.navigation a:hover { color: var(--accent); }
.navigation a[aria-current="page"] {
  color: var(--encre);
  border-bottom-color: var(--accent);
}

/* Le sous-menu programmes s'ouvre au survol sur pointeur fin, au clic ailleurs. */
.menu-programmes { position: relative; }

.menu-programmes > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-block: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid transparent;
}
.menu-programmes > summary::-webkit-details-marker { display: none; }
.menu-programmes > summary::after {
  content: "";
  width: 0.34rem; height: 0.34rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform 0.18s;
}
.menu-programmes[open] > summary::after { transform: rotate(-135deg) translateY(-0.1em); }
.menu-programmes > summary:hover { color: var(--accent); }
.menu-programmes.actif > summary { color: var(--encre); border-bottom-color: var(--accent); }

.volet-programmes {
  border-radius: var(--arrondi-m);
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  width: 25rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  box-shadow: 0 18px 44px -20px rgba(30, 40, 32, 0.28);
  padding: 0.5rem;
}

.volet-programmes a {
  display: block;
  border-radius: var(--arrondi-s);
  padding: 0.85rem 1rem;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: none;
}
.volet-programmes a:hover { background: var(--creme); }
.volet-programmes .titre-volet {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--encre);
  display: block;
}
.volet-programmes .detail-volet {
  font-size: 0.88rem;
  text-wrap: nowrap;
  color: var(--encre-pale);
  display: block;
  margin-top: 0.15rem;
}

.bouton-menu { display: none; }


/* ─────────────────────────  Boutons  ───────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--creme-clair);
  border-radius: var(--pastille);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
  font-family: inherit;
}
.bouton:hover {
  background: var(--accent-fonce);
  border-color: var(--accent-fonce);
  transform: translateY(-2px);
  box-shadow: var(--ombre-douce);
}

.bouton-fantome {
  background: transparent;
  color: var(--encre);
  border-color: var(--filet-fort);
}
.bouton-fantome:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.section-sombre .bouton-fantome,
.hero .bouton-fantome {
  color: var(--creme-clair);
  border-color: rgba(247, 243, 236, 0.55);
}
.section-sombre .bouton-fantome:hover { border-color: var(--vert-clair); color: var(--vert-clair); }
.hero .bouton-fantome:hover {
  background: rgba(247, 243, 236, 0.14);
  border-color: var(--creme-clair);
  color: var(--creme-clair);
}

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }


/* ─────────────────────────  Hero  ───────────────────────── */

.hero {
  position: relative;
  min-height: clamp(30rem, 78vh, 46rem);
  display: flex;
  align-items: flex-end;
  color: var(--creme-clair);
  overflow: hidden;
}

.hero-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Diaporama : les vues sont empilées, seule celle qui porte .visible est
   opaque. Le fondu dure moins longtemps que l'intervalle, sinon les deux
   images se croisent en permanence et l'ensemble paraît flou. */
.hero-diaporama .hero-image {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-diaporama .hero-image.visible { opacity: 1; }

/* Sans JavaScript, la première vue reste affichée. */
.hero-diaporama .hero-image:first-of-type { opacity: 1; }
.hero-diaporama.anime .hero-image:first-of-type { opacity: 0; }
.hero-diaporama.anime .hero-image.visible { opacity: 1; }

/* Les pastilles de position, discrètes, en bas du hero. */
.hero-points {
  position: absolute;
  z-index: 2;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
}
.hero-point {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 236, 0.7);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.hero-point[aria-current="true"] { background: var(--creme-clair); }

@media (prefers-reduced-motion: reduce) {
  .hero-diaporama .hero-image { transition: none; }
}

/* Dégradé plutôt qu'un voile uniforme : le rendu garde sa lumière en haut. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(24, 32, 26, 0.92) 0%,
              rgba(24, 32, 26, 0.72) 32%,
              rgba(24, 32, 26, 0.46) 62%,
              rgba(24, 32, 26, 0.40) 100%);
}

.hero-contenu {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  width: 100%;
  /* Ceinture et bretelles : l'ombre portée rattrape les zones où la photo reste
     claire malgré le dégradé — un ciel de fin de journée, par exemple. */
  text-shadow: 0 1px 24px rgba(18, 24, 19, 0.55), 0 1px 3px rgba(18, 24, 19, 0.4);
}
.hero .surtitre { color: rgba(247, 243, 236, 0.92); }
.hero h1 { color: var(--creme-clair); }
.hero .bouton { text-shadow: none; }

.hero-lieu {
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.9);
  margin-top: 1.1rem;
}

/* Bandeau éditorial sous le hero de l'accueil.

   Il remplace une rangée de chiffres qui donnait l'impression d'un tableau :
   quatre valeurs de longueurs inégales (« 2 », « 100% », « VEFA ») surmontant
   des légendes de une ou deux lignes, séparées par des filets verticaux — rien
   ne pouvait s'y aligner. Une phrase unique, centrée, n'a rien à aligner. */

.bandeau-phrase {
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.accroche {
  margin: 0 auto;
  max-width: 50rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.accroche-monogramme {
  width: 1.9rem;
  height: auto;
  color: var(--encre);
  margin-bottom: 1.75rem;
}

.accroche blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.32;
  font-weight: 400;
  color: var(--encre);
  text-wrap: balance;
}

/* La partie forte passe en italique et prend la couleur d'accent : c'est elle
   qu'on doit retenir si l'on ne lit qu'un fragment. */
.accroche blockquote em {
  font-style: italic;
  color: var(--vert);
}

/* Le filet est court et centré : il sépare la phrase de la signature sans
   couper la colonne en deux. */
.accroche figcaption {
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  position: relative;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--encre-pale);
}
.accroche figcaption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5rem;
  height: 1px;
  background: var(--filet-fort);
}

/* Trois repères courts, lisibles d'un coup d'œil : ils donnent la preuve du
   « comment » à qui ne lira pas la page en entier. */
.preuves {
  list-style: none;
  margin: 2.75rem auto 0;
  padding: 1.75rem 0 0;
  max-width: 56rem;
  border-top: 1px solid var(--filet-fort);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2.25rem;
  text-align: center;
}
.preuves li {
  font-size: 1rem;
  color: var(--encre-douce);
}
.preuves strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--encre);
}

@media (max-width: 40rem) {
  .accroche figcaption { letter-spacing: 0.16em; font-size: 0.74rem; }
  .preuves { flex-direction: column; align-items: center; gap: 0.75rem; }
}


/* Le bandeau de chiffres sous le hero, repris des planches. */
.bandeau-chiffres {
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
}
.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem 1.5rem;
}

/* Les filets verticaux faisaient « colonnes de tableau » : on les retire et on
   laisse l'espace séparer les repères. */
.chiffre {
  text-align: center;
  padding: 2.4rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Les valeurs n'ont ni la même longueur ni la même hauteur de glyphe : « 2 »,
   « 100% », « R+2 », « Vue ». On leur réserve une boîte de hauteur fixe et on
   les pose sur une ligne de pied commune — sinon chaque colonne démarre sa
   légende à une hauteur différente. */
.chiffre-valeur {
  font-family: var(--serif);
  font-size: 2.9rem;
  color: var(--accent);
  line-height: 1;
  height: 3rem;
  display: flex;
  align-items: flex-end;
}

/* Les légendes tiennent sur une ou deux lignes selon le repère : on réserve la
   place des deux, pour que les détails s'alignent tous entre eux. */
.chiffre-nom {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 1rem;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  max-width: 12rem;
}
.chiffre-detail {
  font-size: 0.92rem;
  color: var(--encre-pale);
  margin-top: 0.15rem;
  max-width: 13rem;
  line-height: 1.45;
}


/* ─────────────────────────  Cartes programmes (accueil)  ───────────────────────── */

.grille-programmes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.carte-programme {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--arrondi-l);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s, transform 0.22s;
}
.carte-programme:hover {
  box-shadow: var(--ombre-levee);
  transform: translateY(-4px);
}

.carte-image { aspect-ratio: 4 / 3; overflow: hidden; }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.carte-programme:hover .carte-image img { transform: scale(1.035); }

.carte-corps { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.carte-corps h3 { font-size: 2rem; margin-bottom: 0.35rem; }
.carte-lieu {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 1rem;
}
.carte-resume { font-size: 1.05rem; color: var(--encre-douce); flex: 1; }

.carte-pied {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.carte-prix { font-family: var(--serif); font-size: 1.45rem; }
.carte-lien {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Étiquette d'état commercial. */
.etiquette {
  display: inline-block;
  border-radius: var(--pastille);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-pale);
}
.etiquette-vendu { border-color: var(--filet-fort); color: var(--encre-pale); background: var(--creme-fonce); }


/* ─────────────────────────  Prestations, en bulles  ─────────────────────────
   Une grille de cases faisait « tableau de spécifications ». Les prestations
   sont l'argument de vente : elles méritent d'être regardées une par une.
   D'où des médaillons ronds, décalés en quinconce, photographiques quand une
   image existe et typographiques sinon — le liseré d'accent unifie les deux.  */

.bulles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3.5vw, 3.5rem);
  padding-block: 1.5rem 4rem;
}

/* Largeur fixe plutôt qu'élastique : trois bulles par rangée sur grand écran,
   quoi qu'il arrive. Une base élastique donnait tantôt trois tantôt quatre
   colonnes selon la largeur, et les rangées ne s'alignaient plus entre elles.
   Le `flex-wrap` centre naturellement une dernière rangée incomplète — ce que
   ne ferait pas une grille. */
.bulle {
  flex: 0 0 auto;
  width: clamp(13rem, 26vw, 17rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* La quinconce porte sur la bulle centrale de chaque rangée : l'ensemble
   ondule au lieu d'alterner en dents de scie. */
@media (min-width: 62rem) {
  .bulle:nth-child(3n + 2) { margin-top: 5rem; }
}

.bulle-medaillon {
  position: relative;
  width: 100%;
  max-width: 11.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-pale);
  display: grid;
  place-items: center;
  transition: transform 0.4s ease;
}

/* Le liseré est porté par un pseudo-élément : il reste net au-dessus de la
   photo, que le rognage circulaire écrêterait autrement. */
.bulle-medaillon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.7;
}

.bulle:hover .bulle-medaillon { transform: translateY(-6px) scale(1.02); }

.bulle-medaillon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bulle-icone {
  width: 50%;
  height: auto;
  color: var(--accent);
  transition: transform 0.4s ease;
}
.bulle:hover .bulle-icone { transform: scale(1.06); }
.section-sombre .bulle-icone { color: #a9c9a6; }
.programme-oeutrange .section-sombre .bulle-icone { color: var(--or); }

.bulle-numero {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  color: var(--accent);
  line-height: 1;
}

.bulle-titre {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.25;
  margin-top: 1.5rem;
  min-height: 2.4em;          /* aligne les paragraphes sous des titres d'une ou deux lignes */
  display: flex;
  align-items: center;
  justify-content: center;
}

.bulle-detail {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--encre-douce);
  margin: 0.6rem 0 0;
}

/* Sur fond sombre, le liseré et le fond des bulles typographiques changent. */
.section-sombre .bulle-medaillon { background: rgba(247, 243, 236, 0.06); }
.section-sombre .bulle-medaillon::after { border-color: var(--vert-clair); opacity: 0.5; }
.section-sombre .bulle-icone {
  width: 50%;
  height: auto;
  color: var(--accent);
  transition: transform 0.4s ease;
}
.bulle:hover .bulle-icone { transform: scale(1.06); }
.section-sombre .bulle-icone { color: #a9c9a6; }
.programme-oeutrange .section-sombre .bulle-icone { color: var(--or); }

.bulle-numero { color: var(--vert-clair); }
.section-sombre .bulle-detail { color: #b9c2b6; }
.programme-oeutrange .section-sombre .bulle-medaillon::after { border-color: var(--or); }
.programme-oeutrange .section-sombre .bulle-icone {
  width: 50%;
  height: auto;
  color: var(--accent);
  transition: transform 0.4s ease;
}
.bulle:hover .bulle-icone { transform: scale(1.06); }
.section-sombre .bulle-icone { color: #a9c9a6; }
.programme-oeutrange .section-sombre .bulle-icone { color: var(--or); }

.bulle-numero { color: var(--or); }

@media (max-width: 40rem) {
  .bulles { gap: 2.75rem 1.25rem; }
  .bulle { width: calc(50% - 0.75rem); }
  .bulle-medaillon { max-width: 9.5rem; }
  .bulle-titre { font-size: 1.12rem; margin-top: 1rem; min-height: 0; }
  .bulle-detail { font-size: 0.95rem; }
}


/* ─────────────────────────  Grille tarifaire  ───────────────────────── */

.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--filet);
  background: var(--blanc);
  /* Le tableau garde son fond clair même posé sur une section sombre : il doit
     donc reprendre l'encre, sinon il hérite du crème et devient illisible. */
  color: var(--encre);
  border-radius: var(--arrondi-l);
  box-shadow: var(--ombre-douce);
}
.section-sombre .tableau-enveloppe { border-color: rgba(247, 243, 236, 0.2); }

table.grille-tarifaire {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  font-size: 1.02rem;
}

.grille-tarifaire thead th {
  background: var(--vert-fonce);
  color: var(--creme);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 1rem 1.1rem;
  white-space: nowrap;
}

.grille-tarifaire td { padding: 1rem 1.1rem; border-top: 1px solid var(--filet); }
.grille-tarifaire tbody tr:hover { background: var(--creme); }
.grille-tarifaire .lot { font-family: var(--serif); font-size: 1.25rem; }
.grille-tarifaire .prix { font-family: var(--serif); font-size: 1.35rem; white-space: nowrap; }
.grille-tarifaire .prix-m2 { color: var(--encre-pale); font-size: 0.92rem; white-space: nowrap; }
.grille-tarifaire tfoot td {
  border-top: 2px solid var(--filet-fort);
  background: var(--creme);
  font-size: 0.85rem;
  color: var(--encre-douce);
}


/* ─────────────────────────  Fiches de lot  ───────────────────────── */

.liste-lots { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }

.lot-fiche {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  border: 1px solid var(--filet);
  background: var(--blanc);
  border-radius: var(--arrondi-l);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
}

.lot-plan { padding: 1.5rem; background: var(--creme-clair); display: flex; align-items: center; }
.lot-plan img { width: 100%; height: auto; border-radius: var(--arrondi-m); }

.lot-detail { padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; }

.lot-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.lot-entete-seul { display: block; }
.lot-numero { font-family: var(--serif); font-size: 2.4rem; line-height: 1.1; }
.lot-type {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-top: 0.3rem;
}

.lot-pieces { list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: 1.02rem; }
.lot-pieces li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px dotted var(--filet);
}
.lot-pieces li span:last-child { color: var(--encre-douce); white-space: nowrap; }

.lot-totaux {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--arrondi-m);
  overflow: hidden;
}
.lot-total-ligne {
  background: var(--accent-pale);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.05rem;
  font-size: 1.02rem;
}
.lot-total-ligne strong { font-weight: 600; }
.lot-total-ligne.secondaire { background: var(--creme); color: var(--encre-douce); }

.lot-prix {
  margin-top: 1.35rem;
  padding: 1rem 1.2rem;
  background: var(--accent);
  color: var(--creme-clair);
  font-family: var(--serif);
  font-size: 1.95rem;
  text-align: center;
  border-radius: var(--arrondi-m);
}
.lot-prix .lot-prix-m2 {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 0.3rem;
}

.lot-actions { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lot-actions .bouton { padding: 0.8rem 1.3rem; font-size: 0.78rem; }


/* ─────────────────────────  Galerie  ───────────────────────── */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.galerie { align-items: start; }
.galerie figure { margin: 0; }
.galerie img {
  width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 2;
  border-radius: var(--arrondi-m);
}
.galerie figcaption {
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-top: 0.6rem;
}

/* Deux respirations dans la grille pour éviter le damier régulier. */
.galerie .large { grid-column: span 2; }
.galerie .large img { aspect-ratio: 2 / 1; }
.galerie .haute img { aspect-ratio: 3 / 4; }

@media (max-width: 46rem) {
  .galerie .large { grid-column: span 1; }
  .galerie .large img { aspect-ratio: 3 / 2; }
}


/* ─────────────────────────  Colonnes texte / image  ───────────────────────── */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.duo-texte h2 { margin-bottom: 1.2rem; }
/* Les images de colonne s'arrondissent — sauf celles de la mosaïque, qui
   portent leur propre arche. Sans cette exclusion, ce sélecteur, plus
   spécifique que `.mosaique img`, écraserait l'arche. */
.duo > div:not(.mosaique) > img {
  border-radius: var(--arrondi-l);
  box-shadow: var(--ombre-douce);
}


/* ─────────────────────────  Mosaïque de matières  ─────────────────────────
   Une seule photo dans la colonne de droite flottait sans tenir la hauteur du
   texte. Quatre planches matières remplissent la colonne et disent mieux le
   propos : ce sont les échantillons que l'acquéreur choisit.                */

.mosaique {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
}

.mosaique img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Arche : le haut est un demi-cercle parfait — d'où un rayon égal à la
     moitié de la largeur — et le bas reste simplement adouci. */
  border-radius: 50vw 50vw var(--arrondi-m) var(--arrondi-m);
  box-shadow: var(--ombre-douce);
}

/* La colonne de droite descend : même respiration ondulée que les bulles. */
@media (min-width: 48rem) {
  .mosaique img:nth-child(even) { margin-top: 2.5rem; }
}


/* ─────────────────────────  Documents  ───────────────────────── */

.liste-documents { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }

.document {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--filet);
  background: var(--blanc);
  text-decoration: none;
  color: inherit;
  border-radius: var(--pastille);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.document:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--ombre-douce);
}
.document-icone {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  border-radius: 50%;
}
.document-nom { font-size: 1.05rem; }
.document-poids { font-size: 0.85rem; color: var(--encre-pale); }


/* ─────────────────────────  Chronologie  ───────────────────────── */

.chronologie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; }

.jalon { padding: 1.5rem 1.4rem 1.5rem 0; border-top: 2px solid var(--filet); position: relative; }
.jalon.fait { border-top-color: var(--accent); }
.jalon-date {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 0.4rem;
}
.jalon.fait .jalon-date { color: var(--accent); }
.jalon-nom { font-family: var(--serif); font-size: 1.35rem; }


/* ─────────────────────────  Contact  ───────────────────────── */

.bloc-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }

.coordonnee { margin-bottom: 1.75rem; }
.coordonnee-nom {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 0.35rem;
}
.coordonnee a { text-decoration: none; border-bottom: 1px solid var(--filet-fort); }
.coordonnee a:hover { border-bottom-color: var(--accent); color: var(--accent); }

form.formulaire { display: flex; flex-direction: column; gap: 1.1rem; }

.champ { display: flex; flex-direction: column; gap: 0.4rem; }
.champ label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.champ input, .champ select, .champ textarea {
  font-family: inherit;
  font-size: 1.05rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--filet-fort);
  background: var(--blanc);
  color: var(--encre);
  border-radius: var(--arrondi-m);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-color: var(--accent);
}
.champ textarea { resize: vertical; min-height: 7rem; }

.duo-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem; }


/* ─────────────────────────  Pied  ───────────────────────── */

.pied { background: var(--vert-fonce); color: #b9c2b6; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 1rem; }
.pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.5rem; }
.pied h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-clair);
  margin: 0 0 1rem;
  font-weight: 500;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.55rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--creme); }
.pied .marque-nom, .pied .marque-baseline { color: var(--creme); }
.pied .marque-monogramme { color: var(--creme); }
.pied .marque-baseline { color: var(--vert-clair); }

.pied-bas {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 243, 236, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: #8d968b;
}


/* ─────────────────────────  Petits écrans  ───────────────────────── */

@media (max-width: 62rem) {
  .lot-fiche { grid-template-columns: 1fr; }
  .lot-plan { border-bottom: 1px solid var(--filet); }
}

@media (max-width: 52rem) {
  .bouton-menu {
    display: grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    background: none;
    border: 1px solid var(--filet-fort);
    cursor: pointer;
    color: var(--encre);
  }
  .bouton-menu span { display: block; width: 1.05rem; height: 1px; background: currentColor; position: relative; }
  .bouton-menu span::before, .bouton-menu span::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  }
  .bouton-menu span::before { top: -0.32rem; }
  .bouton-menu span::after  { top:  0.32rem; }

  .navigation {
    display: none;
    position: absolute;
    top: var(--bandeau);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme-clair);
    border-bottom: 1px solid var(--filet);
    padding: 0.5rem clamp(1.25rem, 5vw, 3rem) 1.5rem;
  }
  .navigation.ouverte { display: flex; }
  .navigation a, .menu-programmes > summary { padding-block: 0.85rem; border-bottom: 1px solid var(--filet); }
  .navigation a[aria-current="page"] { border-bottom-color: var(--filet); color: var(--accent); }

  .volet-programmes {
    position: static;
    transform: none;
    width: auto;
    border: none;
    box-shadow: none;
    background: var(--creme);
    padding: 0.25rem 0;
  }
  .chiffre { padding-block: 1.5rem; }
  .chiffre-nom { min-height: 0; margin-top: 0.7rem; }
}

/* ─────────────────────────  Apparition au défilement  ─────────────────────
   Les blocs montent de quelques pixels en se révélant. L'état de départ n'est
   posé que si JavaScript est actif (classe .anime sur <html>) : sans script,
   rien n'est masqué et la page reste entièrement lisible.                    */

.anime .revele {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.anime .revele.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anime .revele { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .bandeau, .pied, .groupe-boutons, .lot-actions { display: none; }
  body { background: #fff; }
}