/* Pages villes « Immobilier neuf à … » (ville.php) — charte premium : nuit, or, rayons de soleil */

.page-ville { background: var(--off-white); }

.ville-hero { background: var(--night-rays); border-bottom: 3px solid var(--champagne-gold); color: #fff; padding: 130px 0 56px; }
.ville-hero-inner { display: flex; flex-direction: column; gap: 28px; }
.ville-ariane { font-size: 0.8rem; color: #C9CCE0; }
.ville-ariane a { color: #C9CCE0; text-decoration: none; }
.ville-ariane a:hover { color: #fff; }
.ville-hero-ligne { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.ville-hero-texte { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ville-surtitre { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne-gold); }
.ville-surtitre.or { color: var(--champagne-dark); }
.ville-hero h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.08; color: #fff; text-transform: none; text-wrap: balance; }
.ville-chapo { margin: 0; font-size: 1.08rem; line-height: 1.6; color: #D5D8EA; max-width: 640px; }
.ville-boutons { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.btn-or-ville { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--gold-gradient); color: var(--navy-night); font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-or-ville:hover { filter: brightness(1.05); color: var(--navy-night); }
.btn-contour-ville { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.4);
  color: #fff; font-weight: 700; text-decoration: none; }
.btn-contour-ville:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ville-avis { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 12px; color: #D5D8EA; font-size: 0.85rem; }
.ville-avis-note { font-family: var(--font-heading); font-size: 2.1rem; color: var(--champagne-gold); }
.ville-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; }
.ville-chiffres > div { background: rgba(20,24,52,0.72); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.ville-chiffres .lib { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #C9CCE0; }
.ville-chiffres .val { font-family: var(--font-heading); font-size: 1.7rem; color: #fff; font-variant-numeric: tabular-nums; }
.ville-chiffres .note { font-size: 0.78rem; color: #C9CCE0; }

.ville-section { padding-top: 56px; }
.ville-section h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; color: var(--navy-night); text-transform: none; text-wrap: balance; }
.ville-entete-liste { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ville-entete-liste > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ville-filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.ville-filtres button, .ville-vide button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--light-gray); background: #fff;
  color: var(--navy-night); font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.ville-filtres button.actif { background: var(--navy-night); border-color: var(--navy-night); color: #fff; }
.ville-filtres button:focus-visible, .ville-carte a:focus-visible, .btn-or-ville:focus-visible { outline: 3px solid var(--champagne-gold); outline-offset: 2px; }

.ville-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ville-carte { background: #fff; border: 1px solid #E6E6EC; border-radius: 14px; box-shadow: 0 6px 20px rgba(20,24,52,0.06); overflow: hidden; display: flex; flex-direction: column; }
.ville-carte[hidden] { display: none; }
.ville-carte-image { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--night-gradient); overflow: hidden; }
.ville-carte-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ville-carte:hover .ville-carte-image img { transform: scale(1.04); }
.ville-pastilles { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.pastille { background: #fff; color: var(--navy-night); font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(20,24,52,0.15); }
.pastille.tva { background: #E7F6EC; color: #1E7B3C; }
.ville-carte-corps { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.ville-carte h3 { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.2; text-transform: none; }
.ville-carte h3 a { color: var(--navy-night); text-decoration: none; }
.ville-carte-info { margin: 0; font-size: 0.85rem; color: var(--medium-gray); }
.ville-carte-prix { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid #E6E6EC; }
.ville-carte-prix span { font-size: 0.8rem; color: var(--medium-gray); }
.ville-carte-prix strong { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--navy-night); font-variant-numeric: tabular-nums; }
.ville-carte-lien, .ville-lien { font-size: 0.9rem; font-weight: 700; color: var(--navy-blue); text-decoration: none; }
.ville-carte-lien:hover, .ville-lien:hover { color: var(--navy-night); }
.ville-vide { margin: 20px 0 0; text-align: center; color: var(--medium-gray); }

.ville-deux { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ville-budget { flex: 999 1 560px; min-width: 0; background: #fff; border: 1px solid #E6E6EC; border-radius: 14px; box-shadow: 0 6px 20px rgba(20,24,52,0.06); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.ville-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ville-champs label, .ville-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--dark-text); }
.ville-champs input, .ville-champs select, .ville-form input[type=text], .ville-form input[type=tel], .ville-form input[type=email], .ville-form select {
  padding: 12px; border: 1px solid #DCDDE6; border-radius: 10px; font: inherit; font-weight: 500; background: #fff; color: var(--dark-text); min-height: 46px; }
.ville-champs input:focus, .ville-champs select:focus, .ville-form input:focus, .ville-form select:focus { outline: none; border-color: var(--navy-blue); box-shadow: 0 0 0 3px rgba(216,177,102,0.3); }
.ville-resultat { background: var(--night-rays); --rx: 92%; --ry: 0%; border-radius: 14px; padding: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; color: #fff; }
.ville-resultat > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ville-resultat .petit { font-size: 0.82rem; color: #C9CCE0; }
.ville-resultat .montant { font-family: var(--font-heading); font-size: 2.4rem; color: var(--champagne-gold); font-variant-numeric: tabular-nums; }
.ville-resultat-droite { align-items: flex-start; }
.lien-clair { background: none; border: 0; padding: 0; color: var(--champagne-light); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 32px; }
.ville-mention { margin: 0; font-size: 0.78rem; color: var(--medium-gray); line-height: 1.5; }
.ville-aides { flex: 1 1 320px; min-width: 0; background: #F4EFE3; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ville-aides h2 { font-size: 1.6rem; }
.ville-aides strong { color: var(--navy-night); }
.ville-aides p { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--dark-text); }

.ville-contact { background: var(--night-rays); border-radius: 16px; border-bottom: 3px solid var(--champagne-gold); box-shadow: 0 10px 30px rgba(20,24,52,0.18);
  padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 40px; }
.ville-contact-texte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ville-contact h2 { color: #fff; }
.ville-contact ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: #D5D8EA; }
.ville-contact li i { color: var(--champagne-gold); margin-right: 6px; }
.ville-form, .ville-merci { flex: 1 1 420px; min-width: 0; background: #fff; border-radius: 14px; padding: 24px; }
.ville-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ville-form .large { grid-column: 1 / -1; }
.ville-form .case { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; }
.ville-form .case input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ville-form .petit { font-size: 0.78rem; color: var(--medium-gray); }
.ville-erreur { margin: 0; color: #B42318; background: #FDECEA; border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; }
.ville-merci h3 { margin: 0 0 8px; font-family: var(--font-heading); color: var(--navy-night); text-transform: none; }
.ville-merci p { margin: 0; color: var(--dark-text); }

.ville-faq { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ville-faq details { background: #fff; border: 1px solid #E6E6EC; border-radius: 14px; padding: 18px 20px; }
.ville-faq summary { font-weight: 700; color: var(--navy-night); cursor: pointer; }
.ville-faq details p { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.6; }
.ville-voisines { flex: 1 1 280px; min-width: 0; background: #fff; border: 1px solid #E6E6EC; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.ville-voisines .titre { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-night); }
.ville-voisines a { color: var(--navy-blue); font-weight: 600; text-decoration: none; }
.ville-voisines a:hover { color: var(--navy-night); }
.page-ville main { padding-bottom: 64px; }

/* Page « Immobilier neuf par ville » */
.villes-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.villes-carte { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #E6E6EC; border-radius: 14px; padding: 18px 20px;
  text-decoration: none; box-shadow: 0 6px 20px rgba(20,24,52,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.villes-carte:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,24,52,0.1); }
.villes-carte:focus-visible { outline: 3px solid var(--champagne-gold); outline-offset: 2px; }
.villes-nom { font-family: var(--font-heading); font-size: 1.2rem; color: var(--navy-night); line-height: 1.25; }
.villes-nom small { font-family: var(--font-body); font-size: 0.8rem; color: var(--medium-gray); }
.villes-info { font-size: 0.88rem; color: var(--dark-text); }
.villes-prix { font-weight: 700; color: var(--navy-blue); font-size: 0.95rem; }
.ville-mention a { color: var(--navy-blue); }

/* Texte propre à la ville */
.ville-texte h2 { margin-top: 8px; }
.ville-texte-intro { margin: 14px 0 0; max-width: 820px; font-size: 1.05rem; line-height: 1.65; color: var(--dark-text); }
.ville-texte-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.ville-texte-bloc { background: #fff; border: 1px solid #E6E6EC; border-radius: 14px; padding: 22px; border-top: 3px solid var(--champagne-gold); }
.ville-texte-bloc h3 { margin: 0 0 10px; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.25; color: var(--navy-night); text-transform: none; }
.ville-texte-bloc p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.65; color: var(--dark-text); }
.ville-texte-bloc p:last-child { margin-bottom: 0; }
.ville-texte-sources { margin: 16px 0 0; font-size: 0.78rem; color: var(--medium-gray); line-height: 1.6; }
.ville-texte-sources a { color: var(--navy-blue); }

/* Bandeau avec la photo d'un programme de la ville, fondue dans le bleu nuit, rayons au-dessus */
.ville-hero--photo { position: relative; overflow: hidden; isolation: isolate; }
.ville-hero-photo { position: absolute; inset: 0 0 0 auto; width: 64%; z-index: -2; }
.ville-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ville-hero-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #141834 0%, rgba(20,24,52,0.82) 22%, rgba(20,24,52,0.42) 58%, rgba(20,24,52,0.28) 100%),
              linear-gradient(0deg, rgba(20,24,52,0.92) 0%, rgba(20,24,52,0) 42%),
              linear-gradient(180deg, rgba(20,24,52,0.75) 0%, rgba(20,24,52,0) 30%); }
.ville-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-conic-gradient(from 3deg at 78% 0%, rgba(220, 225, 255, 0.22) 0deg 0.2deg, transparent 0.16deg 9deg),
    repeating-conic-gradient(from 7deg at 78% 0%, rgba(214, 220, 255, 0.12) 0deg 0.13deg, transparent 0.11deg 13deg),
    radial-gradient(circle at 78% 0%, rgba(90, 97, 150, 0.45) 0%, rgba(90, 97, 150, 0) 45%); }
.ville-hero--photo { background: #141834; }
.ville-hero--photo .ville-chiffres > div { background: rgba(20,24,52,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

@media (max-width: 900px) {
  .ville-hero-photo { width: 100%; }
  .ville-hero-photo::after { background: linear-gradient(180deg, rgba(20,24,52,0.78) 0%, rgba(20,24,52,0.7) 40%, rgba(20,24,52,0.95) 75%, #141834 100%); }
}

@media (max-width: 640px) {
  .ville-hero { padding-top: 110px; }
  .ville-form { grid-template-columns: 1fr; }
  .ville-grille { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ville-carte-image img { transition: none; } }