/* Immogex — feuille de style du site. Jetons : Charte Immogex (palette Encre et laiton). */
@font-face { font-family: "Gloock"; src: url(../fonts/Gloock-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
/* Gloock dessine les tirets (– —) en filet d'un pixel, invisible dans les titres : on prend ceux d'Albert Sans */
@font-face { font-family: "Gloock"; src: url(../fonts/AlbertSans-300.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+2013-2014; }
@font-face { font-family: "Albert Sans"; src: url(../fonts/AlbertSans-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url(../fonts/AlbertSans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url(../fonts/AlbertSans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url(../fonts/AlbertSans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ivoire: #F6F3EE; --pierre: #E6E0D6; --blanc-casse: #FBFAF7; --filet: #D9D2C6;
  --encre: #1E2B33; --ardoise: #56646C; --laiton: #A8844F; --laiton-texte: #7F6134;
  --font-display: Gloock, Didot, "Bodoni 72", Georgia, serif;
  --font-sans: "Albert Sans", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-5: 24px; --espace-6: 32px; --espace-7: 48px; --espace-8: 64px; --espace-9: 96px;
  --rayon-fin: 2px; --rayon: 6px;
  --gutter: var(--espace-7); --max: 1320px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
a, button, select, label, summary { touch-action: manipulation; }
.btn, .nav a, .menu-btn, .pills button, .lien-plan, .plan-liens a { -webkit-user-select: none; user-select: none; }
body { margin: 0; background: var(--ivoire); color: var(--encre); font: 400 17px/28px var(--font-sans); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
::selection { background: #E6D6B8; color: #1E2B33; }
input, textarea { caret-color: var(--laiton-texte); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--encre); }
.l-faits, .l-prix, .faits-liste dd, .plan-prix { font-variant-numeric: lining-nums tabular-nums; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* type */
.surtitre { font: 500 12px/16px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ardoise); margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.6vw, 70px); line-height: 1.04; letter-spacing: -.012em; }
h2 { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.008em; }
h3 { font-size: 28px; line-height: 34px; }
.lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; margin: 0; text-wrap: pretty; }
p { margin: 0; max-width: 60ch; }
.legende { font: 400 13px/18px var(--font-sans); color: var(--ardoise); }

/* boutons */
.btn { display: inline-flex; align-items: center; gap: var(--espace-2); font: 500 13px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 15px 22px; border-radius: var(--rayon-fin); border: 1px solid var(--encre); color: var(--encre); transition: color .15s, border-color .15s, background .15s, transform 160ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { color: var(--laiton-texte); border-color: var(--laiton-texte); }
@media (hover: hover) and (pointer: fine) { .btn:hover { color: var(--laiton-texte); border-color: var(--laiton-texte); } }
.btn.plein { background: var(--encre); color: var(--ivoire); }
.btn.plein:focus-visible { background: var(--laiton-texte); border-color: var(--laiton-texte); color: var(--ivoire); }
@media (hover: hover) and (pointer: fine) { .btn.plein:hover { background: var(--laiton-texte); border-color: var(--laiton-texte); color: var(--ivoire); } }
.btn.clair { border-color: var(--ivoire); color: var(--ivoire); }
.btn.clair:focus-visible { background: var(--ivoire); color: var(--encre); }
@media (hover: hover) and (pointer: fine) { .btn.clair:hover { background: var(--ivoire); color: var(--encre); } }
:focus-visible { outline: 2px solid var(--laiton-texte); outline-offset: 3px; }
.sur-encre :focus-visible, .hero :focus-visible, .entete:not(.entete-claire) :focus-visible { outline-color: var(--ivoire); }

/* en-tête */
.entete { position: absolute; inset: 0 0 auto; z-index: 10; color: var(--ivoire); }
.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-5); padding-block: var(--espace-5); padding-top: calc(var(--espace-5) + env(safe-area-inset-top, 0px)); }
.entete .logo img { width: 150px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--espace-6); }
.nav a { font: 500 12px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent; }
.nav a:focus-visible { border-bottom-color: var(--laiton); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { border-bottom-color: var(--laiton); } }
.nav .tel { letter-spacing: .08em; }
.nav a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1240px) { .nav { gap: var(--espace-4); } .nav a { letter-spacing: .12em; } }
.menu-btn { display: none; }

/* hero */
.hero { position: relative; height: clamp(560px, 92svh, 860px); color: var(--ivoire); overflow: hidden; background: var(--encre); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.hero > img.hero-large { object-position: 42% 20%; }
/* écrans larges : l'accueil prend un peu plus de hauteur (sans dépasser l'écran) pour montrer tout l'immeuble et la pelouse */
@media (min-width: 961px) and (min-aspect-ratio: 16/10) { .hero:has(> img.hero-large) { height: max(92svh, min(50vw, 100svh)); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30, 43, 51, .38), rgba(30, 43, 51, 0) 180px), rgba(30, 43, 51, .42); }   /* haut assombri : menu lisible sur un ciel clair */
.hero .wrap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--espace-5); padding-bottom: var(--espace-8); }
.hero .surtitre { color: var(--ivoire); }
.hero h1 { max-width: 14ch; }

/* sections */
.section { padding-block: clamp(64px, 7vw, 104px); }
.tete { display: flex; flex-direction: column; gap: var(--espace-3); padding-bottom: var(--espace-6); }
.tete .filet { border-top: 1px solid var(--filet); padding-top: var(--espace-3); display: flex; justify-content: space-between; gap: var(--espace-4); }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espace-6); align-items: center; }
.texte { display: flex; flex-direction: column; gap: var(--espace-5); align-items: flex-start; }
.photo { border-radius: var(--rayon); overflow: hidden; position: relative; background: var(--pierre); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* intro */
.intro .texte { grid-column: 1 / span 6; }
.intro .photo { grid-column: 8 / span 5; aspect-ratio: 1 / 1; }
.intro .photo img { object-position: 50% 78%; }  /* photo d'équipe : garder l'affiche et les pieds quand le cadre est plus large que haut (mobile) */
.intro .texte { gap: var(--espace-5); }
.faits { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-3) var(--espace-7); padding-block: var(--espace-8) 0; text-align: center; }
.faits div { display: flex; flex-direction: column; gap: 4px; }
.faits strong { font: 400 30px/34px var(--font-display); }

/* à louer */
.louer .photo { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.louer .texte { grid-column: 9 / span 4; }

/* immeubles */
.immeubles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-7) var(--espace-6); }
.immeuble { display: flex; flex-direction: column; gap: var(--espace-3); text-decoration: none; }
.immeuble .photo { aspect-ratio: 4 / 3; }
.immeuble .photo img { transition: transform 300ms var(--ease-out); }
.immeuble .vide { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ardoise); font: 500 12px/16px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; }
.immeuble h3 { margin-top: var(--espace-2); }
.immeuble .voir { font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--laiton-texte); }
.immeuble:focus-visible .voir { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .immeuble:hover .voir { text-decoration: underline; text-underline-offset: 4px; } }
.pastille { align-self: flex-start; font: 500 12px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--laiton-texte); }

/* projet vedette */

/* ville */
/* Accueil : « Chez vous, à chaque étape de la vie » (photos d'ambiance en collage) */
/* titre, texte et bouton empilés dans une seule colonne, alignés à gauche */
.amb-tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-4); max-width: 760px; margin-bottom: var(--espace-7); }
.amb-tete h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; }
.amb-texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-4); }
.amb-texte p { margin: 0; color: var(--ardoise); max-width: 60ch; }
.amb-collage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--espace-3); height: clamp(420px, 40vw, 600px); }
.amb-collage figure { margin: 0; border-radius: var(--rayon); overflow: hidden; background: var(--pierre); }
.amb-collage img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  .amb-tete { margin-bottom: var(--espace-6); }
  .amb-collage { grid-template-columns: minmax(0, 1fr); height: auto; gap: var(--espace-2); }
  .amb-collage figure { aspect-ratio: 4 / 3; }
}

/* espace locataire */
.locataire { background: var(--pierre); }
.liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-6); }
.lien { display: flex; flex-direction: column; gap: var(--espace-3); padding-top: var(--espace-5); border-top: 1px solid var(--filet); text-decoration: none; }
.lien h3 { font-size: 26px; line-height: 32px; }
.lien:focus-visible h3 { color: var(--laiton-texte); }
@media (hover: hover) and (pointer: fine) { .lien:hover h3 { color: var(--laiton-texte); } }
.lien p { color: var(--ardoise); font-size: 15px; line-height: 24px; }
.lien-urgence { border-top: 2px solid var(--laiton); }

/* pied */
.pied { text-align: center; padding-block: var(--espace-9) var(--espace-7); }
.pied .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--espace-5); }
.pied .logo img { width: 200px; }
.pied address { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.pied address a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pied address a:hover { color: var(--laiton-texte); } }
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-3) var(--espace-6); }
.pied nav a { font: 500 12px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pied nav a:hover { color: var(--laiton-texte); } }
.pied .bas { border-top: 1px solid var(--filet); padding-top: var(--espace-5); width: 100%; }

/* page d'immeuble */
.hero-immeuble { height: clamp(460px, 72svh, 700px); }
.hero-immeuble.sans-photo::after { display: none; }
.hero-immeuble h1 { max-width: none; }
.fiche .texte { grid-column: 1 / span 6; }
.faits-liste { grid-column: 8 / span 5; margin: 0; align-self: start; }
.faits-liste div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--espace-4); padding-block: var(--espace-3); border-top: 1px solid var(--filet); }
.faits-liste div:last-child { border-bottom: 1px solid var(--filet); }
.faits-liste dt { font: 500 12px/24px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ardoise); }
.faits-liste dd { margin: 0; font-size: 16px; line-height: 24px; }
.inclusions { background: var(--blanc-casse); }
.groupes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-7); }
.groupe h3 { font-size: 24px; line-height: 30px; margin-bottom: var(--espace-4); }
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); font-size: 15px; line-height: 24px; }
.points li { display: flex; gap: var(--espace-3); align-items: baseline; }
.points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--laiton); transform: translateY(-2px); }
.emplacement .texte { grid-column: 1 / span 5; }
.emplacement .photo { grid-column: 7 / span 6; aspect-ratio: 4 / 3; }
.emplacement.avec-carte .texte { grid-column: 1 / span 4; }
.emplacement.avec-carte .prox-carte { grid-column: 5 / span 8; }
.appel { background: var(--encre); color: var(--ivoire); }
.appel .surtitre { color: var(--pierre); }
.appel .texte { grid-column: 1 / span 6; }
.appel .contacts { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: var(--espace-4); justify-content: flex-end; }
.autres { padding-block: var(--espace-8) 0; }
.autres .wrap { display: flex; flex-direction: column; gap: var(--espace-4); }
.autres-liens { border-bottom: 1px solid var(--filet); padding-bottom: var(--espace-6); }
.autres-liens { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-6); }
.autres-liens a { font: 400 22px/30px var(--font-display); text-decoration: none; }
.autres-liens a:focus-visible { color: var(--laiton-texte); }
@media (hover: hover) and (pointer: fine) { .autres-liens a:hover { color: var(--laiton-texte); } }
@media (max-width: 960px) {
  .groupes { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  .appel .contacts { justify-content: flex-start; }
}

/* pages sans photo (À louer, visite) */
.page-tete { height: auto; min-height: 0; }
.page-tete::after { display: none; }
.page-tete .wrap { padding-top: 160px; padding-bottom: var(--espace-8); gap: var(--espace-4); }
.page-tete .intro { max-width: 56ch; color: var(--pierre); }

/* À louer */
.liste { padding-top: var(--espace-7); }
.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espace-4) var(--espace-5); padding-bottom: var(--espace-6); border-bottom: 1px solid var(--filet); }
.champ label { display: block; font: 500 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ardoise); }
.filtres label { display: flex; flex-direction: column; gap: 6px; font: 500 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ardoise); }
select, input, textarea { font: 400 16px/24px var(--font-sans); color: var(--encre); background: var(--blanc-casse); border: 1px solid var(--ardoise); border-radius: var(--rayon-fin); padding: 11px 14px; min-height: 48px; }
/* Une seule hauteur de contrôle (48 px) : champs, dates et listes s'alignent sur les boutons */
select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]) { height: 48px; }
/* Champs côte à côte : alignés par le bas, même si une étiquette passe sur deux lignes */
.deux > .champ { justify-content: flex-end; }
select { min-width: 220px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--laiton-texte); outline-offset: 1px; }
[aria-invalid="true"] { border-color: #9B2C2C; }
.compte { margin-left: auto; color: var(--ardoise); font-size: 15px; }
.logements { list-style: none; margin: 0; padding: 0; }
.logement { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) auto; gap: var(--espace-5); align-items: center; padding-block: var(--espace-5); border-bottom: 1px solid var(--filet); }
.l-nom { display: flex; flex-direction: column; gap: 4px; }
.l-app { font: 400 38px/42px var(--font-display); margin: 0; }
.l-app span { font-size: 22px; color: var(--ardoise); }
.l-faits, .l-dispo { display: flex; flex-direction: column; gap: 4px; }
.l-faits p, .l-dispo p { margin: 0; }
.l-statut { font-weight: 500; }
.l-prix, .plan-prix { margin: 2px 0 0; }
.plan-prix { min-height: 30px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.l-prix .montant, .plan-prix .montant { font: 400 24px/30px var(--font-display); white-space: nowrap; }
.a-partir { font-size: 13px; color: var(--ardoise); }
.l-prix .a-partir:first-child { display: block; }
.l-actions { display: flex; align-items: center; gap: var(--espace-5); }
.lien-plan { font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--laiton-texte); text-decoration: none; white-space: nowrap; }
.lien-plan:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .lien-plan:hover { text-decoration: underline; text-underline-offset: 4px; } }
.vide-etat { padding-block: var(--espace-8); display: flex; flex-direction: column; gap: var(--espace-4); align-items: flex-start; }

/* formulaire */
.form { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--espace-5); }
.aide { grid-column: 9 / span 4; align-self: start; display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-5); background: var(--blanc-casse); border-radius: var(--rayon); }
.aide a { color: var(--laiton-texte); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ input, .champ select, .champ textarea { width: 100%; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); }
.facultatif { text-transform: none; letter-spacing: 0; font-weight: 400; }
.case { display: flex; gap: var(--espace-3); align-items: flex-start; font-size: 15px; line-height: 24px; }
.case input { min-height: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--encre); flex: none; }
.case a { color: var(--laiton-texte); }
.erreur { color: #9B2C2C; font-size: 14px; line-height: 20px; margin: 0; min-height: 0; }
.erreur:empty { display: none; }
.cache { position: absolute; left: -9999px; }
.form .btn { align-self: flex-start; cursor: pointer; }
@media (max-width: 960px) {
  .logement { grid-template-columns: minmax(0, 1fr); gap: var(--espace-3); }
  .compte { margin-left: 0; width: 100%; }
  select { min-width: 0; width: 100%; }
  .filtres label { width: 100%; }
  .deux { grid-template-columns: minmax(0, 1fr); }
  .urgence, .liens-loc, .aide-col { grid-column: 1 / -1 !important; }
  .grille > .urgence, .grille > .aide-col { order: -1; }
  .page-tete .wrap { padding-top: 120px; }
}

.prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--espace-4); }
.prose h2 { font-size: 28px; line-height: 34px; margin-top: var(--espace-5); }
.prose h2:first-child { margin-top: 0; }

.hero .intro { max-width: 46ch; font-size: 19px; line-height: 30px; color: var(--ivoire); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--espace-4); }
.avis-3d { margin-top: var(--espace-4); }

/* en-tête sur fond clair (page projet) */
.entete-claire { position: relative; background: #F6F3EE; color: #1E2B33; border-bottom: 1px solid #D9D2C6; }
.entete-claire .nav a:focus-visible { border-bottom-color: #A8844F; }
@media (hover: hover) and (pointer: fine) { .entete-claire .nav a:hover { border-bottom-color: #A8844F; } }
@media (max-width: 960px) { .entete-claire .nav.ouvert { color: #F6F3EE; } }
/* mouvement (retenu : rétroaction et changements d'état seulement) */
.erreur { transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
@starting-style { .erreur { opacity: 0; transform: translateY(-2px); } }

/* espace locataire */
.urgence { grid-column: 9 / span 4; align-self: start; background: var(--encre); color: var(--ivoire); border-radius: var(--rayon); padding: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-3); }
.urgence .surtitre { color: #E6C89A; }
.urg-titre { font: 400 24px/30px var(--font-display); margin: 0; }
.urgence p { margin: 0; }
.urg-tel { font: 400 30px/36px var(--font-display); color: var(--ivoire); text-decoration: none; white-space: nowrap; }
.urg-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.urg-options li { display: flex; align-items: center; gap: var(--espace-3); }
.touche { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(246, 243, 238, .5); display: grid; place-items: center; font: 400 18px/1 var(--font-display); }
.urgence .legende { color: var(--pierre); }
.liens-loc { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--espace-5); }
.carte-loc { display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-6); background: var(--blanc-casse); border-radius: var(--rayon); text-decoration: none; transition: background .15s ease; }
.carte-loc h2 { font-size: 34px; line-height: 40px; }
.carte-loc p { color: var(--ardoise); margin: 0; }
.carte-loc .voir { font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--laiton-texte); }
@media (hover: hover) and (pointer: fine) { .carte-loc:hover { background: #F1EDE5; } .carte-loc:hover .voir { text-decoration: underline; text-underline-offset: 4px; } }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-5); }
.form legend { font: 400 26px/32px var(--font-display); padding: 0; margin-bottom: var(--espace-4); }
.form fieldset + fieldset { padding-top: var(--espace-6); border-top: 1px solid var(--filet); }
.radios { display: flex; flex-direction: column; gap: var(--espace-3); }
.radios-titre { font: 500 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ardoise); margin: 0; }
.aide-col { grid-column: 9 / span 4; align-self: start; display: flex; flex-direction: column; gap: var(--espace-5); }
.aide-col .urgence, .aide-col .aide { grid-column: auto; width: 100%; box-sizing: border-box; }
.coord .surtitre { margin-top: var(--espace-3); }
.coord .surtitre:first-child { margin-top: 0; }
.coord a { color: var(--encre); text-decoration: none; }
/* champ de photos : bouton en français, fichiers choisis listés */
.fichiers input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fichiers-zone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-4); padding: var(--espace-4); border: 1px dashed var(--ardoise); border-radius: var(--rayon-fin); background: var(--blanc-casse); }
.fichiers-zone .btn { cursor: pointer; padding: 11px 16px; white-space: nowrap; }
.fichiers-liste { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.fichiers input[type="file"]:focus-visible + .fichiers-zone .btn { outline: 2px solid var(--laiton-texte); outline-offset: 3px; }
.fichiers-liste { font-size: 14px; color: var(--ardoise); }

/* ============ accueil : densité et mouvement ============ */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-5); margin: var(--espace-3) 0 0; padding-top: var(--espace-5); border-top: 1px solid var(--filet); width: 100%; }
.chiffres div { display: flex; flex-direction: column-reverse; gap: 4px; }
.chiffres dd { margin: 0; font: 400 clamp(34px, 3.4vw, 46px)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.chiffres dt { font-size: 13px; line-height: 18px; color: var(--ardoise); }
.chiffres.clairs dt { color: var(--pierre); }
.chiffres.clairs { border-top-color: rgba(246, 243, 238, .25); }

.atouts-louer { list-style: none; margin: 0; padding: 0; width: 100%; }
.atouts-louer li { display: flex; flex-direction: column; gap: 2px; padding-block: var(--espace-3); border-top: 1px solid var(--filet); }
.atouts-louer li:last-child { border-bottom: 1px solid var(--filet); }
.atouts-louer li > span:first-child { font: 400 22px/28px var(--font-display); }
.texte .actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
.louer .texte { grid-column: 8 / span 5; }
.louer .grille { align-items: center; }
/* photo verticale recadrée à l'horizontale : canapé et porte-patio au centre, plafond rogné */
.louer .photo { aspect-ratio: 4 / 3; }
.louer .photo img { object-position: 50% 68%; }


/* Rivia II (accueil) : bloc publicitaire aux couleurs du projet + galerie à glisser (doigt, pavé tactile ou souris), sans détourner le défilement */
.rvp { --rvp-foret: #3F4F3A; --rvp-or: #E6C89A; position: relative; background: var(--rvp-foret); color: var(--ivoire); padding-block: var(--espace-8) var(--espace-7); overflow: hidden; }
.rvp-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--espace-7); align-items: center; }
.rvp-marque { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.rvp-marque h2 { margin: 0; line-height: 0; width: min(100%, 520px); text-align: center; }
.rvp-marque h2 img { width: min(100%, 520px); height: auto; margin-inline: auto; }
.rvp-texte { display: flex; flex-direction: column; gap: var(--espace-4); align-items: flex-start; }
.rvp-texte > p:not(.lead) { margin: 0; color: rgba(246, 243, 238, .82); max-width: 52ch; }
.rvp-texte .lead { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; }
.rvp-chiffres { border-top-color: rgba(246, 243, 238, .22); margin-top: var(--espace-2); }
.rvp .actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin-top: var(--espace-2); }
.rvp .chiffres.clairs dt { color: rgba(246, 243, 238, .7); }
.btn.rvp-plein { background: var(--ivoire); border-color: var(--ivoire); color: var(--rvp-foret); }
@media (hover: hover) and (pointer: fine) { .btn.rvp-plein:hover { background: var(--rvp-or); border-color: var(--rvp-or); color: var(--encre); } }
.btn.rvp-plein:focus-visible { outline: 2px solid var(--rvp-or); outline-offset: 3px; }
.rvp-galerie { margin-top: var(--espace-8); }
.rvp-piste { --bord: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: flex; gap: var(--espace-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); padding-inline: var(--bord); scrollbar-width: none; cursor: grab; outline: none; }
.rvp-piste::-webkit-scrollbar { display: none; }
.rvp-piste.tire { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rvp-piste:focus-visible { outline: 2px solid var(--rvp-or); outline-offset: 4px; }
.rvp-diapo { flex: none; width: min(64vw, 900px); margin: 0; scroll-snap-align: start; }
.rvp-diapo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); background: #34432F; pointer-events: none; }
.rvp-bas { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-3) var(--espace-6); margin-top: var(--espace-5); }
.rvp-points { display: flex; gap: 0; margin-inline: -8px; }
.rvp-points button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.rvp-points button::before { content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2px; border-radius: 2px; background: rgba(246, 243, 238, .3); transition: background .2s; }
.rvp-points button[aria-current="true"]::before { background: var(--rvp-or); }
.rvp-points button:focus-visible { outline: 2px solid var(--rvp-or); outline-offset: 0; border-radius: 4px; }
.rvp-indice { margin: 0; font: 500 12px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rvp-or); }
.rvp-indice span { display: inline-block; margin-left: 6px; animation: indice 1.8s var(--ease-out) infinite; }
@keyframes indice { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.rvp .legende { margin: 0 0 0 auto; color: rgba(246, 243, 238, .8); }
@media (max-width: 960px) {
  .rvp-tete { grid-template-columns: minmax(0, 1fr); gap: var(--espace-5); }
  .rvp-marque h2 img { width: min(80%, 320px); }
  .rvp-galerie { margin-top: var(--espace-7); }
  .rvp-diapo { width: 84vw; }
  .rvp .legende { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rvp-indice span { animation: none; } }

/* ouverture de l'accueil : la photo de la Phase II apparaît et se dézoome lentement, une fois chargée.
   « scale » est une propriété distincte de « transform » : la parallaxe continue de fonctionner. */
.hero > img.hero-large { will-change: scale, opacity; }
.mv .hero > img.hero-large { opacity: 0; scale: 1.3; transition: opacity 1000ms var(--ease-out), scale 5000ms cubic-bezier(0.25, 0.46, 0.3, 1); }
.mv .hero.pret > img.hero-large { opacity: 1; scale: 1; }
.hero .wrap { z-index: 2; }
.ligne { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ligne > span { display: block; }
.mv .ligne > span { animation: monte 1000ms var(--ease-expo) both; animation-delay: calc(420ms + var(--d) * 90ms); }
.mv .hero-el { animation: apparait 900ms var(--ease-expo) both; animation-delay: calc(380ms + var(--d) * 90ms); }
@keyframes monte { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes apparait { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* apparitions au défilement (contenu visible par défaut sans JS) */
.mv [data-monte] { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 70ms); }
.mv [data-monte].vu { opacity: 1; transform: none; }
.mv [data-rideau] > img { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-expo), transform 1400ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 90ms); }
.mv [data-rideau].vu > img { clip-path: inset(0 0 0 0); }
.mv [data-rideau] > img:not([data-parallaxe]) { transform: scale(1.1); }
.mv [data-rideau].vu > img:not([data-parallaxe]) { transform: none; }
.mv [data-rideau] > :is(.legende, figcaption) { opacity: 0; transition: opacity 600ms var(--ease-out) 500ms; }
.mv [data-rideau].vu > :is(.legende, figcaption) { opacity: 1; }

/* galerie, plans 3D et visites vidéo (pages d'immeuble) */
.galerie { background: var(--blanc-casse); }
.galerie-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espace-4); }
.galerie-grille figure { margin: 0; position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 10; grid-column: span 3; }
.galerie-grille figure:nth-child(1), .galerie-grille figure:nth-child(2) { grid-column: span 6; }
.galerie-grille img { width: 100%; height: 100%; object-fit: cover; }
.plans3d-grille, .videos-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-5); }
.videos-grille { margin-top: var(--espace-7); }
.plan3d, .video { margin: 0; display: flex; flex-direction: column; gap: var(--espace-3); }
.plan3d img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); background: #53575A; }
.video video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--rayon); background: var(--encre); display: block; }
.plan3d figcaption, .video figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-3); }
.plan3d-nom { font: 400 24px/30px var(--font-display); }

/* mobile */
@media (max-width: 960px) {
  :root { --gutter: var(--espace-4); }
  .section { padding-block: var(--espace-8); }
  .grille { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  .grille > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .intro .photo { aspect-ratio: 4 / 3; }
  .louer .photo { min-height: 0; aspect-ratio: 4 / 3; }
  .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-3); }
  .chiffres dt { font-size: 12px; line-height: 16px; }
  .chiffres dd { font-size: 26px; }
  .immeubles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liens { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .nav.ouvert { display: flex; position: absolute; top: 72px; left: var(--gutter); right: var(--gutter); flex-direction: column; align-items: flex-start; gap: var(--espace-4); background: var(--encre); padding: var(--espace-5); border-radius: var(--rayon); }
  .nav.ouvert { transform-origin: top right; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  @starting-style { .nav.ouvert { opacity: 0; transform: scale(0.96) translateY(-4px); } }
  .menu-btn { all: unset; display: inline-flex; cursor: pointer; font: 500 12px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; }
  }
@media (max-width: 600px) { .immeubles { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
  .nav.ouvert, .erreur { transition: opacity 150ms ease; }
  @starting-style { .nav.ouvert, .erreur { transform: none; } }
}

/* galerie et visites : mobile (placé en fin de fichier pour l'emporter sur les règles de base) */
@media (max-width: 960px) {
  .galerie-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); }
  .galerie-grille figure, .galerie-grille figure:nth-child(2) { grid-column: span 1; }
  .galerie-grille figure:nth-child(1), .galerie-grille figure:last-child:nth-child(even) { grid-column: span 2; }
  .plans3d-grille, .videos-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Espace locataire : portail sur invitation */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portail .grille { align-items: start; }
.portail-texte { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--espace-5); align-items: flex-start; }
.portail-texte h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; }
.portail-texte > p { margin: 0; color: var(--ardoise); max-width: 52ch; }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-4); }
.etapes li { display: flex; gap: var(--espace-4); align-items: baseline; }
.etape-no { font: 400 28px/1 var(--font-display); color: var(--laiton-texte); min-width: 20px; }
.form.invitation { grid-column: 8 / span 5; padding: var(--espace-6); background: var(--blanc-casse); border-radius: var(--rayon); gap: var(--espace-5); }
.form-titre { font: 400 26px/32px var(--font-display); margin: 0; }
.aide-champ { margin: 0; font-size: 14px; line-height: 20px; color: var(--ardoise); }
.loc-services { border-top: 1px solid var(--filet); }

/* Guide du locataire */
.guide .grille { align-items: start; }
.g-principal { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--espace-7); }
.g-recherche { display: flex; flex-direction: column; gap: var(--espace-3); position: sticky; top: 0; z-index: 2; background: var(--ivoire); padding-block: var(--espace-4); margin-block: calc(-1 * var(--espace-4)); }
.g-recherche input { width: 100%; box-sizing: border-box; }
.g-suggestions { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.g-sugg { font: 400 14px/20px var(--font-sans); color: var(--encre); background: transparent; border: 1px solid var(--filet); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.g-sugg[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--ivoire); }
@media (hover: hover) and (pointer: fine) { .g-sugg:hover { border-color: var(--encre); } }
.g-compte { margin: 0; font-size: 14px; color: var(--ardoise); }
.g-cat { display: flex; flex-direction: column; }
.g-cat h2 { font-size: 28px; line-height: 34px; margin: 0 0 var(--espace-4); }
.g-section { border-top: 1px solid var(--filet); }
.g-cat .g-section:last-child { border-bottom: 1px solid var(--filet); }
.g-cat + .g-cat { margin-top: var(--espace-7); }
.g-section summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); padding-block: var(--espace-4); cursor: pointer; }
.g-section summary::-webkit-details-marker { display: none; }
.g-titre { font: 500 18px/26px var(--font-sans); }
.g-signe { position: relative; width: 14px; height: 14px; flex: none; }
.g-signe::before, .g-signe::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--encre); transition: transform 200ms var(--ease-out); }
.g-signe::after { transform: rotate(90deg); }
.g-section[open] .g-signe::after { transform: rotate(0deg); }
.g-section summary:focus-visible { outline: 2px solid var(--laiton-texte); outline-offset: 2px; }
.g-corps { padding-bottom: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-4); align-items: flex-start; }
.g-corps ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--espace-2); color: var(--ardoise); }
.g-corps li::marker { color: var(--laiton); }
.g-corps .voir { font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--laiton-texte); }
.g-principal mark { background: #EADBBF; color: inherit; border-radius: 2px; padding: 0 1px; }
.g-vide, .g-note { margin: 0; color: var(--ardoise); }
.g-vide a { color: var(--laiton-texte); }
.g-note { font-size: 14px; }
@media (max-width: 960px) {
  .portail-texte, .form.invitation, .g-principal { grid-column: 1 / -1; }
  .form.invitation { padding: var(--espace-5); }
}
@media (prefers-reduced-motion: reduce) { .g-signe::before, .g-signe::after { transition: none; } }
.champ label.fichiers-zone { display: flex; font: 400 15px/22px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--encre); }

/* Finition : surfaces du navigateur */
html { scrollbar-color: #B8AD9B var(--ivoire); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ivoire); }
::-webkit-scrollbar-thumb { background: #C9BFAE; border: 3px solid var(--ivoire); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #A99D89; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Titres : l'information complémentaire passe sous le titre */
.hero-lieu { margin: 0; color: var(--pierre); font-size: 17px; letter-spacing: .02em; }
.hero-adresse { margin: var(--espace-3) 0 0; color: var(--pierre); font-size: 17px; letter-spacing: .02em; }
.defile-meta { margin: calc(-1 * var(--espace-3)) 0 0; color: var(--pierre); font-size: 15px; letter-spacing: .02em; }

/* Espace locataire : connexion */
.connexion-loc .grille { align-items: stretch; }
.connexion-carte { grid-column: 1 / span 8; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espace-5) var(--espace-7); padding: clamp(28px, 4vw, 48px); background: var(--blanc-casse); border-radius: var(--rayon); }
.connexion-intro { display: flex; flex-direction: column; gap: var(--espace-4); }
.connexion-intro h2 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; }
.connexion-intro p { margin: 0; color: var(--ardoise); }
.connexion-form { grid-column: auto; gap: var(--espace-4); }
.connexion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-5); }
.connexion-actions .btn { cursor: pointer; }
.lien-discret { font-size: 15px; color: var(--laiton-texte); }
.connexion-message { margin: 0; padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-fin); background: #F6E3E1; color: #7A2320; font-size: 15px; line-height: 22px; }
.connexion-deja { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-4); }
.connexion-invit { grid-column: 1 / -1; margin: 0; padding-top: var(--espace-4); border-top: 1px solid var(--filet); color: var(--ardoise); font-size: 15px; }
.connexion-invit a { color: var(--laiton-texte); }
.admin-carte { grid-column: 9 / span 4; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--espace-4); padding: clamp(28px, 3vw, 40px); background: var(--encre); color: var(--ivoire); border-radius: var(--rayon); }
.admin-carte h2 { font-size: 28px; line-height: 34px; color: var(--ivoire); }
.admin-carte p { margin: 0; color: var(--pierre); }
.admin-carte .btn.clair:focus-visible { outline: 2px solid #E6C89A; outline-offset: 3px; }
.connexion-loc + .portail { border-top: 1px solid var(--filet); }

/* Espace locataire : services en rangées */
.liens-loc { gap: 0; }
.rangee-loc { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre fleche" "texte fleche"; gap: 4px var(--espace-5); align-items: center; padding: var(--espace-5) 0; border-top: 1px solid var(--filet); text-decoration: none; color: var(--encre); }
.rangee-loc:last-child { border-bottom: 1px solid var(--filet); }
.rangee-titre { grid-area: titre; font: 400 30px/36px var(--font-display); }
.rangee-texte { grid-area: texte; color: var(--ardoise); }
.rangee-fleche { grid-area: fleche; width: 28px; height: 28px; color: var(--laiton-texte); transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rangee-loc:hover .rangee-fleche { transform: translateX(6px); } .rangee-loc:hover .rangee-titre { color: var(--laiton-texte); } }
.rangee-loc:focus-visible { outline: 2px solid var(--laiton-texte); outline-offset: 4px; }

@media (max-width: 960px) {
  .connexion-carte, .admin-carte { grid-column: 1 / -1; }
  .connexion-carte { grid-template-columns: minmax(0, 1fr); }
  .connexion-deja { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .rangee-fleche { transition: none; } }

/* Revue UX (UI UX Pro Max) */
/* Lien d'évitement : visible seulement au clavier */
.saut { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 12px 18px; background: var(--encre); color: var(--ivoire); border-radius: var(--rayon-fin); font: 500 14px/20px var(--font-sans); text-decoration: none; }
.saut:focus { top: 12px; outline: 2px solid #E6C89A; outline-offset: 2px; }
main:focus { outline: none; }
/* Réactivité au toucher et texte d'exemple lisible (4,5:1) */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
::placeholder { color: #6B7277; opacity: 1; }
/* Mot de passe : bouton Afficher / Masquer */
.mdp-cadre { position: relative; display: block; }
.mdp-cadre input { width: 100%; box-sizing: border-box; padding-right: 104px; }
.mdp-voir { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 14px; background: none; border: 0; border-radius: var(--rayon-fin); font: 500 12px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--laiton-texte); cursor: pointer; }
.mdp-voir:focus-visible { outline: 2px solid var(--laiton-texte); outline-offset: -2px; }
/* La barre de recherche collante ne cache jamais le champ sélectionné au clavier */
html:has(.g-recherche) { scroll-padding-top: 160px; }
/* Au doigt : zones d'au moins 44 px */
@media (pointer: coarse) {
  .lien-discret, .case { min-height: 44px; display: inline-flex; align-items: center; }
  .mdp-voir { min-height: 44px; }
  .case { display: flex; }
}

.services-titre { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; margin: 0 0 var(--espace-3); }
.services-texte { margin: 0 0 var(--espace-5); color: var(--ardoise); max-width: 52ch; }
.services-texte a { color: var(--laiton-texte); }

/* Pied de page : liens assez grands au doigt */
@media (pointer: coarse) { .pied nav a { display: inline-flex; align-items: center; min-height: 44px; } .menu-btn { min-height: 44px; min-width: 44px; } }

/* Pages d'immeubles : visite mise en avant */
.fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-5); margin-top: var(--espace-3); }
.btn.inverse { background: var(--ivoire); color: var(--encre); border-color: var(--ivoire); }
@media (hover: hover) and (pointer: fine) { .btn.inverse:hover { background: #E6C89A; border-color: #E6C89A; color: var(--encre); } }
.btn.inverse:focus-visible { outline: 2px solid #E6C89A; outline-offset: 3px; }
.contacts-second { margin: 0; color: var(--pierre); }
.contacts-second a { color: var(--ivoire); }
.flottant-visite { display: none; }
@media (max-width: 960px) {
  .flottant-visite { position: fixed; z-index: 30; left: var(--gutter); right: var(--gutter); bottom: calc(var(--espace-4) + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; align-items: center; min-height: 52px; background: var(--encre); color: var(--ivoire); border-radius: var(--rayon-fin); font: 500 13px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 28px rgba(30, 43, 51, .28); }
  .flottant-visite[hidden] { display: none; }
}
.appel .contacts { flex-direction: column; align-items: flex-end; }
@media (max-width: 960px) { .appel .contacts { align-items: flex-start; } }
/* À louer : comment lire les logements */
.lexique { margin: var(--espace-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-4) var(--espace-6); font-size: 15px; }
.lexique div { display: flex; flex-direction: column; gap: 4px; }
.lexique dt { font: 400 20px/26px var(--font-display); }
.lexique dd { margin: 0; color: var(--ardoise); }
@media (max-width: 960px) { .lexique { grid-template-columns: minmax(0, 1fr); } }

/* « À proximité des services » : carte SVG dessinée depuis OpenStreetMap (_outils/cartes.py) */
.prox-carte { margin: 0; container-type: inline-size; }
.prox-carte .carte-svg { background: var(--ivoire); }
.prox-carte figcaption { margin-top: var(--espace-3); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--espace-2) var(--espace-5); font-size: 12px; line-height: 18px; color: var(--ardoise); }
.prox-credit { margin-left: auto; }
.prox-carte figcaption a { color: inherit; }
.prox-autres { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.prox-autres .pastille-or { margin-top: 4px; }
.pastille-or { width: 14px; height: 10px; border: 1.4px solid var(--laiton); border-radius: 2px; background: var(--ivoire); flex: none; }
/* Liste des services : lue par les lecteurs d'écran ; affichée sous la carte quand celle-ci est trop étroite pour lire les noms */
.prox-liste { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; list-style: none; margin: 0; padding: 0; }
.prox-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.prox-liste .num { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--encre); font: 500 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.prox-liste .nom { font-size: 15px; line-height: 22px; }
.prox-liste .type { grid-column: 2; font-size: 13px; line-height: 18px; color: var(--ardoise); }
@container (max-width: 600px) {
  .c-lib, .c-lib-trait { display: none; }
  .prox-liste { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--espace-4); margin-top: var(--espace-4); }
}
@container (max-width: 400px) { .prox-liste { grid-template-columns: minmax(0, 1fr); } }
.carte-svg { display: block; width: 100%; height: auto; }
.c-parc path { fill: #CDD3C1; }
.c-eau path { fill: #D5DEE2; }
.c-riviere path { fill: none; stroke: #D5DEE2; stroke-width: 10; stroke-linecap: round; }
.c-rue-min path { fill: none; stroke: var(--encre); stroke-opacity: .26; stroke-width: 1; }
.c-rue-moy-bord path, .c-rue-maj-bord path { fill: none; stroke: var(--encre); stroke-linecap: round; stroke-linejoin: round; }
.c-rue-moy-bord path { stroke-opacity: .5; stroke-width: 5.2; }
.c-rue-maj-bord path { stroke-opacity: .66; stroke-width: 7.5; }
.c-rue-moy path, .c-rue-maj path { fill: none; stroke: var(--ivoire); stroke-linecap: round; stroke-linejoin: round; }
.c-rue-moy path { stroke-width: 3.4; }
.c-rue-maj path { stroke-width: 5.4; }
.c-nom-rue { font: 500 12.5px var(--font-sans); letter-spacing: .06em; fill: var(--ardoise); paint-order: stroke; stroke: var(--ivoire); stroke-width: 3px; }
.c-service rect { fill: var(--ivoire); stroke: var(--encre); stroke-width: 1.2; }
.c-service text { font: 600 14px var(--font-sans); text-anchor: middle; fill: var(--encre); }
.c-ici rect, .c-ici path { fill: var(--encre); }
.c-ici text { font: 400 22px var(--font-display); text-anchor: middle; fill: var(--ivoire); }
.c-autre rect { fill: var(--ivoire); stroke: var(--laiton); stroke-width: 1.4; }
.c-autre path { fill: var(--laiton); }
.c-autre text { font: 500 13px var(--font-sans); text-anchor: middle; fill: var(--laiton-texte); }
.c-route rect { fill: #7A3E2E; }
.c-route text { font: 600 13px var(--font-sans); text-anchor: middle; fill: #FBFAF7; }
.c-autre line { stroke: var(--laiton); stroke-width: 1.2; }
.c-autre circle { fill: var(--laiton); }
.c-lib text { paint-order: stroke; stroke: var(--ivoire); stroke-width: 5px; stroke-linejoin: round; }
.c-lib-nom { font: 600 17px var(--font-sans); fill: var(--encre); }
.c-lib-type { font: 400 13.5px var(--font-sans); fill: var(--ardoise); }
.c-lib-trait { stroke: var(--encre); stroke-opacity: .55; stroke-width: 1.2; }
.galerie-grille figcaption.virtuel { position: absolute; left: var(--espace-3); bottom: var(--espace-3); padding: 5px 10px; border-radius: var(--rayon-fin); background: rgba(30, 43, 51, .78); color: var(--ivoire); font: 500 11px/14px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
/* galerie de quatre photos verticales : une rangée de quatre (deux par rangée sur mobile) */
.galerie-grille.quatre figure, .galerie-grille.quatre figure:nth-child(1), .galerie-grille.quatre figure:nth-child(2) { grid-column: span 3; aspect-ratio: 3 / 4; }
@media (max-width: 960px) {
  .galerie-grille.quatre figure, .galerie-grille.quatre figure:nth-child(1), .galerie-grille.quatre figure:nth-child(2), .galerie-grille.quatre figure:last-child:nth-child(even) { grid-column: span 1; }
  .galerie-grille figcaption.virtuel { left: var(--espace-2); bottom: var(--espace-2); padding: 4px 8px; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
}
/* Carrousel de photos (accueil) : fondu enchaîné, même cadre 4:3 pour toutes les photos */
.carrousel > img { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms var(--ease-out); }
.carrousel > img.actif { opacity: 1; }
.mv .carrousel[data-rideau] > img { transition: clip-path 1100ms var(--ease-expo), transform 1400ms var(--ease-expo), opacity 800ms var(--ease-out); }
/* Rivia II (accueil), ordinateur : toute la section tient dans l'écran, les photos prennent la hauteur qui reste */
@media (min-width: 961px) {
  .rvp { height: max(100svh, 620px); display: flex; flex-direction: column; padding-block: clamp(28px, 5vh, 56px) clamp(20px, 3.5vh, 40px); }
  .rvp-tete { flex: none; gap: var(--espace-6); }
  .rvp-marque h2 img { width: min(100%, 400px); }
  .rvp-texte { gap: var(--espace-3); }
  .rvp-texte .lead { font-size: clamp(26px, 2.3vw, 34px); }
  .rvp-texte > p:not(.lead) { font-size: 16px; line-height: 25px; }
  .rvp-chiffres { padding-top: var(--espace-3); margin-top: 0; }
  .rvp .chiffres dd { font-size: clamp(30px, 2.6vw, 38px); }
  .rvp .actions { margin-top: var(--espace-1, 4px); }
  .rvp-galerie { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: clamp(20px, 4vh, 40px); }
  .rvp-piste { flex: 1; min-height: 0; }
  .rvp-diapo { height: 100%; width: auto; aspect-ratio: 3 / 2; }
  .rvp-diapo img { height: 100%; aspect-ratio: auto; }
  .rvp-bas { flex: none; width: 100%; margin-top: var(--espace-3); }
  .rvp-tete { width: 100%; }
}
/* À louer : cartes avec photo */
.annonces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-6) var(--espace-5); }
.annonce a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.annonce-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: var(--pierre); }
.annonce-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.annonce-dispo { position: absolute; left: var(--espace-3); top: var(--espace-3); padding: 6px 12px; border-radius: 999px; background: rgba(246, 243, 238, .94); color: var(--encre); font: 500 12px/16px var(--font-sans); letter-spacing: .06em; }
.annonce-corps { display: flex; flex-direction: column; gap: 4px; padding-top: var(--espace-4); }
.annonce-corps p { margin: 0; }
.annonce-titre { font: 400 28px/34px var(--font-display); }
.annonce-titre span { font-size: 20px; color: var(--ardoise); }
.annonce-adresse { color: var(--ardoise); font-size: 15px; }
.annonce-prix { margin-top: var(--espace-2) !important; font-size: 15px; color: var(--ardoise); }
.annonce-prix strong { font: 400 24px/30px var(--font-display); color: var(--encre); font-variant-numeric: lining-nums; }
.annonce-lien { margin-top: var(--espace-3); font: 500 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--laiton-texte); }
.annonce a:focus-visible { outline: 2px solid var(--encre); outline-offset: 6px; border-radius: var(--rayon); }
@media (hover: hover) and (pointer: fine) { .annonce a:hover .annonce-photo img { transform: scale(1.04); } .annonce a:hover .annonce-lien { color: var(--encre); } }
@media (max-width: 960px) {
  .annonces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .annonces { grid-template-columns: minmax(0, 1fr); } }

/* Fiche d'un logement à louer */
.fl { padding-block: var(--espace-6) var(--espace-8); }
.fl-retour { display: inline-block; margin-bottom: var(--espace-5); color: var(--ardoise); font-size: 15px; text-decoration: none; }
.fl-retour:hover { color: var(--encre); }
.fl-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--espace-7); align-items: start; }
.fl-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--rayon); aspect-ratio: 4 / 3; background: var(--pierre); outline: none; }
.fl-piste::-webkit-scrollbar { display: none; }
.fl-piste:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
.fl-piste img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.fl-vignettes { display: flex; gap: var(--espace-2); margin-top: var(--espace-3); overflow-x: auto; scrollbar-width: none; }
.fl-vignettes button { flex: none; width: 88px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer; opacity: .55; outline-offset: 2px; transition: opacity .2s; background: var(--pierre); }
.fl-vignettes button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--encre); }
.fl-vignettes img { width: 100%; height: 100%; object-fit: cover; }
.fl-resume { position: sticky; top: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-3); }
.fl-resume h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.02; }
.fl-resume h1 span { font-size: .5em; color: var(--ardoise); }
.fl-prix { margin: 0; color: var(--ardoise); }
.fl-prix strong { font: 400 34px/40px var(--font-display); color: var(--encre); font-variant-numeric: lining-nums; }
.fl-faits { margin-top: var(--espace-2); width: 100%; grid-column: auto; align-self: stretch; }
.fl-faits div { grid-template-columns: 130px minmax(0, 1fr); }
.fl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-5); margin-top: var(--espace-3); }
.fl-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-7); margin-top: var(--espace-8); padding-top: var(--espace-7); border-top: 1px solid var(--filet); }
.fl-bloc h2 { font-size: 30px; line-height: 36px; margin-bottom: var(--espace-4); }
.fl-bloc p { margin: 0 0 var(--espace-4); max-width: 56ch; }
.fl-plan { width: 100%; height: auto; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; }
@media (max-width: 960px) {
  .fl-grille, .fl-details { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  .fl-resume { position: static; }
  .fl-details { margin-top: var(--espace-7); }
}
.fl-noter { margin-top: var(--espace-4) !important; }
/* Page À propos */
.ap-histoire .texte { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--espace-4); }
.ap-histoire .texte > * { margin: 0; }
.ap-histoire .photo { grid-column: 8 / span 5; aspect-ratio: 1 / 1; }
.ap-histoire .photo img { object-position: 50% 78%; }
.ap-forces { background: var(--blanc-casse); }
.ap-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-7) var(--espace-5); }
.ap-force { display: flex; flex-direction: column; gap: var(--espace-3); align-items: flex-start; }
.ap-force .photo { width: 100%; aspect-ratio: 4 / 3; margin-bottom: var(--espace-2); }
.ap-force h3 { font-size: 26px; line-height: 32px; }
.ap-force p { margin: 0; color: var(--ardoise); }
.ap-equipe .texte { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--espace-4); align-items: flex-start; }
.ap-equipe .texte > p { margin: 0; max-width: 60ch; }
.roles { list-style: none; margin: var(--espace-2) 0 0; padding: 0; width: 100%; }
.roles li { display: flex; flex-direction: column; gap: 2px; padding-block: var(--espace-3); border-top: 1px solid var(--filet); }
.roles li:last-child { border-bottom: 1px solid var(--filet); }
.roles li > span:first-child { font: 400 22px/28px var(--font-display); }
.ap-equipe .roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--espace-6); }
.ap-equipe .roles li:last-child { border-bottom: 0; }
.ap-equipe .roles li { border-bottom: 1px solid var(--filet); padding-block: var(--espace-4); }
@media (max-width: 760px) { .ap-equipe .roles { grid-template-columns: minmax(0, 1fr); } .ap-equipe .roles li + li { border-top: 0; } }
.membres { list-style: none; margin: var(--espace-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--espace-5); width: 100%; }
.membre img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); margin-bottom: var(--espace-3); }
.membre p { margin: 0; }
.membre-nom { font: 400 22px/28px var(--font-display); }
.membre-role { color: var(--ardoise); font-size: 15px; }
@media (max-width: 960px) { .ap-grille { grid-template-columns: minmax(0, 1fr); } }

/* Emploi : métiers et formulaire de candidature */
.emp-postes .grille { align-items: start; }
.emp-intro { grid-column: 1 / span 5; }
.emp-intro p { max-width: 46ch; }
.emp-roles { grid-column: 7 / span 6; margin: 0; }
.emp-choix { gap: var(--espace-3) !important; }
.form .emp-choix legend { font: 500 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ardoise); margin-bottom: var(--espace-3); }
.form .emp-choix legend .facultatif { letter-spacing: 0; text-transform: none; }
.form .emp-choix + .emp-choix { padding-top: 0; border-top: 0; }
.emp-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-2) var(--espace-5); }
.emp-etapes { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--espace-2); }
.emp-etapes li::marker { color: var(--laiton-texte); font-weight: 500; }
@media (max-width: 600px) { .emp-cases { grid-template-columns: minmax(0, 1fr); } }


/* Accueil : rythme (après le retrait de la bande défilante)
   L'intro devient une déclaration éditoriale avec une photo décalée vers le bas ; « Trouvez votre prochain chez-vous »
   passe sur une surface sable pleine largeur. L'alternance ivoire / sable / ivoire / forêt / ivoire / pierre donne la cadence. */
:root { --sable: #EFEAE1; }
.louer { background: var(--sable); }
@media (min-width: 961px) {
  .intro { padding-bottom: clamp(56px, 6vw, 88px); }
  .intro .grille { align-items: start; }
  .intro .texte { grid-column: 1 / span 7; gap: var(--espace-6); }
  .intro .lead { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.16; letter-spacing: -.01em; max-width: 21ch; text-wrap: balance; }
  .intro .texte > p:not(.lead) { max-width: 54ch; }
  .intro .photo { grid-column: 9 / span 4; aspect-ratio: 4 / 5; margin-top: clamp(48px, 7vw, 120px); }
  .intro .photo img { object-position: 50% 70%; }
  .louer { padding-block: clamp(72px, 8vw, 120px); }
  .louer .photo { aspect-ratio: 5 / 4; }
}

/* Au doigt : zones d'au moins 44 px (pied de page, logo, autres immeubles) */
@media (pointer: coarse) {
  .pied address a, .entete .logo, .pied .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .autres-liens a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Accueil : deux chiffres, rapprochés et centrés */
.chiffres.chiffres-centre { display: flex; justify-content: center; gap: clamp(40px, 8vw, 112px); }
.chiffres.chiffres-centre div { align-items: center; text-align: center; }