/* Site public de l'agence.
   L'habillage d'une agence, pas d'une application : la photo d'abord et en pleine largeur, des
   titres en serif fin (Newsreader), le reste en Inter, des filets au lieu de cartes à ombre, des
   angles droits, une seule couleur d'accent. Le bleu nuit reste celui des applications du client.
   Aucun style n'est écrit dans les pages : la politique de sécurité ne l'admet pas. */
:root {
  --navy:#192E46; --nuit:#0F1E30;
  --papier:#FBFAF7; --sable:#F3EFE8; --blanc:#FFFFFF;
  --trait:#E4DED3; --trait-fort:#CFC7B8;
  --texte:#1E2A39; --texte-2:#5B6572;
  --bronze:#7A5C2E; --or:#B9975B; --or-clair:#E2C992;
  --attente:#EAE4D9;   /* le fond d'une photo pas encore chargée, ou absente : visible sur le papier comme sur le sable */
  --vert:#0B6B5F; --orange:#8F5300; --rouge:#A62B3E;
  --serif:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235B6572' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Le pied reste en bas de l'écran même sur une page courte. */
body { margin:0; background:var(--papier); color:var(--texte); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
main { flex:1 0 auto; }
a { color:var(--navy); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
img { max-width:100%; display:block; }
button, input, select, textarea { font:inherit; color:inherit; }
h1, h2, h3 { font-family:var(--serif); font-weight:400; color:var(--navy); margin:0; }
:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }
/* Seules les marges de côté : une section peut porter cette classe et garder son haut et son bas. */
.cadre { max-width:1240px; margin:0 auto; padding-left:32px; padding-right:32px; }
.doux { color:var(--texte-2); }
.petit { font-size:13.5px; }
.evitement { position:absolute; left:-999px; top:8px; background:#fff; padding:10px 14px; z-index:30; }
.evitement:focus { left:12px; }
.icone { width:19px; height:19px; flex:none; }
.fleche { width:18px; height:18px; flex:none; transition:transform .25s; }

/* Le petit titre en capitales qui précède un grand titre */
.surtitre { font:600 12px/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin:0 0 16px; }

/* Bandeau */
.bandeau { background:var(--navy); color:#fff; position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(255,255,255,.1); }
.bandeau .cadre { display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px; }
.marque { font:400 25px/1.2 var(--serif); letter-spacing:.01em; color:#fff; }
.marque:hover { text-decoration:none; }
/* Un nom d'agence très long se coupe proprement au lieu de pousser le menu hors de l'écran. */
.bandeau .marque { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bandeau nav { display:flex; gap:30px; flex:none; }
.bandeau nav a { color:rgba(255,255,255,.86); font:600 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding:10px 0; border-bottom:1px solid transparent; transition:border-color .2s, color .2s; }
.bandeau nav a:hover { color:#fff; border-color:var(--or); text-decoration:none; }

/* Boutons et liens fléchés */
.principal-bouton { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--navy); color:#fff; border:1px solid var(--navy);
  border-radius:0; padding:17px 28px; font:600 12.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.principal-bouton:hover { background:var(--nuit); text-decoration:none; }
.principal-bouton:hover .fleche, .lien-fleche:hover .fleche, .une:hover .fleche { transform:translateX(4px); }
.principal-bouton:disabled { opacity:.6; cursor:progress; }
.secondaire { background:transparent; color:var(--navy); border:1px solid var(--trait-fort); border-radius:0; padding:17px 24px; font:600 12.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; }
.secondaire:hover { border-color:var(--navy); }
.lien-fleche { display:inline-flex; align-items:center; gap:10px; font:600 12.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  padding-bottom:8px; border-bottom:1px solid var(--or); white-space:nowrap; }
.lien-fleche:hover { text-decoration:none; }
/* Les mêmes, quand ils ouvrent le formulaire au lieu de mener à une page */
button.lien-fleche { background:none; border-width:0 0 1px; border-radius:0; padding:0 0 8px; cursor:pointer; }
.en-ligne { background:none; border:0; border-bottom:1px solid var(--or); border-radius:0; padding:0; color:var(--navy); cursor:pointer; }
.en-ligne:hover { border-color:var(--navy); }

/* Étiquettes de statut : la couleur ET le texte portent l'information */
.statut { display:inline-flex; align-items:center; gap:9px; font:600 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  padding:9px 12px 8px; background:#fff; color:var(--texte); border:1px solid var(--trait); align-self:flex-start; }
.statut::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.statut.vert::before { background:var(--vert); }
.statut.orange::before { background:var(--orange); }
.statut.rouge::before { background:var(--rouge); }
.statut.gris::before { background:#8A93A0; }   /* disponibilité pas encore confirmée par l'agence */

/* L'aperçu d'une annonce, montré à la gestion : un bandeau le dit, au-dessus de la page telle qu'elle paraîtra */
.apercu { background:#FFF6DF; color:#553E00; border-bottom:1px solid #E9D49A; font-size:14.5px; line-height:1.5; }
.apercu .cadre { display:flex; align-items:center; justify-content:space-between; gap:8px 28px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.apercu p { margin:0; }
.apercu strong { font:700 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; margin-right:8px; }
.apercu a { color:inherit; font-weight:600; border-bottom:1px solid currentColor; white-space:nowrap; }
.apercu a:hover { text-decoration:none; }

/* Accueil : la grande photo, puis la recherche posée à cheval sur elle */
.hero { position:relative; isolation:isolate; overflow:hidden; background:var(--navy); color:#fff; display:flex; align-items:flex-end; padding:72px 0 96px; }
.hero.avec-photo { min-height:min(78vh, 720px); padding:140px 0 124px; }
.hero .fond { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
/* Le voile garde le texte lisible sur n'importe quelle photo, même très claire à cet endroit. */
.hero.avec-photo::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(15,30,48,.55) 0%, rgba(15,30,48,.2) 46%, rgba(15,30,48,0) 78%),
             linear-gradient(180deg, rgba(15,30,48,.5) 0%, rgba(15,30,48,.08) 26%, rgba(15,30,48,.46) 56%, rgba(15,30,48,.92) 100%); }
.hero.avec-photo .cadre { text-shadow:0 1px 26px rgba(10,20,33,.55); }
.hero .cadre { width:100%; }
.hero .surtitre { color:var(--or-clair); }
.hero.avec-photo .surtitre { color:#fff; }
.hero h1 { font:300 clamp(40px, 6.2vw, 78px)/1.04 var(--serif); letter-spacing:-.015em; color:#fff; max-width:15em; text-wrap:balance; }
.une { display:inline-flex; align-items:center; gap:12px; margin-top:28px; color:#fff; font-size:15.5px; max-width:100%; }
.une span { font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-clair); padding-right:12px; border-right:1px solid rgba(255,255,255,.35); white-space:nowrap; }
.recherche { position:relative; z-index:2; margin-top:-46px; scroll-margin-top:96px; }
/* Les cases se partagent la largeur ; le filet entre elles est le fond qui paraît dans l'écart. */
.filtres { display:flex; gap:1px; background:var(--trait); border:1px solid var(--trait); box-shadow:0 26px 60px rgba(15,30,48,.12); }
.filtres label { flex:1 1 0; display:flex; flex-direction:column; justify-content:center; gap:7px; padding:17px 18px 15px; min-width:0; background:#fff;
  font:600 10.5px/1 var(--sans); letter-spacing:.17em; text-transform:uppercase; color:var(--bronze); }
.filtres select, .filtres input[type=number] { appearance:none; -webkit-appearance:none; border:0; border-radius:0; background:transparent; width:100%; padding:2px 22px 2px 0;
  font:500 16px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--texte); text-overflow:ellipsis; }
.filtres select { background:var(--chevron) no-repeat right 3px center / 11px 7px; cursor:pointer; }
.filtres .case { flex:0 0 auto; flex-direction:row; align-items:center; gap:11px; font:500 15px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--texte); cursor:pointer; white-space:nowrap; }
.filtres .case input { width:18px; height:18px; flex:none; margin:0; accent-color:var(--navy); }
.filtres button { flex:0 0 auto; min-height:74px; padding:0 32px; }

/* Les biens */
.biens { padding-top:84px; padding-bottom:104px; scroll-margin-top:72px; }
.entete-section { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.entete-section h2 { font:300 clamp(30px, 3.6vw, 44px)/1.1 var(--serif); letter-spacing:-.01em; text-wrap:balance; }
.entete-section .surtitre { margin-bottom:12px; }
.outils { display:flex; align-items:center; gap:14px 36px; flex-wrap:wrap; padding-bottom:6px; }
.tri { display:flex; align-items:baseline; gap:8px 22px; flex-wrap:wrap; font:600 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.tri span { color:var(--texte-2); }
.tri a { color:var(--texte-2); padding-bottom:7px; border-bottom:1px solid transparent; }
.tri a:hover { color:var(--navy); border-color:var(--trait-fort); text-decoration:none; }
.tri a[aria-current] { color:var(--navy); border-color:var(--or); }
.grille { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:56px 36px; }
.carte { color:inherit; display:flex; flex-direction:column; min-width:0; }
.carte:hover { text-decoration:none; }
.vue { position:relative; aspect-ratio:3 / 2; background:var(--attente); overflow:hidden; }
.vue img, .vue .sans-photo { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.2,.6,.2,1); }
.carte:hover .vue img { transform:scale(1.045); }
.vue .statut { position:absolute; left:14px; top:14px; border-color:transparent; }
.carte .texte { padding:20px 0 0; display:flex; flex-direction:column; gap:9px; flex:1; }
.genre { font:600 11.5px/1.35 var(--sans); letter-spacing:.17em; text-transform:uppercase; color:var(--bronze); }
.carte h3 { font:400 24px/1.2 var(--serif); letter-spacing:-.005em; text-wrap:balance; }
.carte:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.faits { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; color:var(--texte-2); font-size:14.5px; }
.faits li { display:inline-flex; align-items:center; gap:8px; }
.tarif { font-size:15px; color:var(--texte); }
.tarif strong { font:400 22px/1.2 var(--serif); color:var(--navy); }
/* Le prix se cale au pied de la carte : sur une rangée, les prix sont à la même hauteur. */
.carte .tarif { padding-top:11px; margin-top:auto; border-top:1px solid var(--trait); }
.carte .tarif.doux { color:var(--texte-2); }
.vide { border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); padding:76px 24px; text-align:center; margin:8px 0; }
.vide h1, .vide h2 { font:300 clamp(30px, 4vw, 44px)/1.12 var(--serif); margin:0 0 12px; }
.vide p { margin:0; color:var(--texte-2); }
.vide .surtitre { margin-bottom:14px; }
.vide a { border-bottom:1px solid var(--or); }
.vide a:hover { text-decoration:none; border-color:var(--navy); }
.vide p.suite { margin-top:30px; }
.introuvable { padding-top:72px; padding-bottom:104px; }

/* Une page de texte : les mentions légales */
.texte-page { max-width:880px; padding-top:72px; padding-bottom:104px; }
.texte-page h1 { font:300 clamp(34px, 4.6vw, 54px)/1.08 var(--serif); letter-spacing:-.015em; text-wrap:balance; }
.texte-page section { margin-top:54px; scroll-margin-top:96px; }
.texte-page h2 { font:400 28px/1.15 var(--serif); margin-bottom:16px; }
.texte-page p { margin:0 0 14px; max-width:68ch; line-height:1.68; }
.texte-page dl { margin:0; border-bottom:1px solid var(--trait); }
.texte-page dl div { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:13px 0 12px; border-top:1px solid var(--trait); font-size:16px; }
.texte-page dt { color:var(--texte-2); flex:none; }
.texte-page dd { margin:0; font-weight:600; color:var(--navy); text-align:right; overflow-wrap:anywhere; }
.texte-page a { border-bottom:1px solid var(--or); }
.texte-page a:hover { text-decoration:none; border-color:var(--navy); }

/* L'agence : une phrase, et ses chiffres — ceux de la base, aucun autre */
.agence { background:var(--sable); padding:96px 0; }
.agence .cadre { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:72px; align-items:end; }
.declaration { font:300 clamp(26px, 3vw, 38px)/1.24 var(--serif); color:var(--navy); margin:0 0 30px; max-width:22em; text-wrap:balance; }
.chiffres { display:flex; flex-direction:column; }
.chiffres div { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:16px 0 14px; border-top:1px solid var(--trait-fort); }
.chiffres div:last-child { border-bottom:1px solid var(--trait-fort); }
.chiffres strong { font:300 52px/1 var(--serif); color:var(--navy); }
.chiffres span { font:600 11.5px/1.3 var(--sans); letter-spacing:.17em; text-transform:uppercase; color:var(--texte-2); text-align:right; }
/* Sans texte de présentation, les chiffres occupent seuls la largeur, côte à côte. */
.agence.seule .cadre { display:block; }
.agence.seule .chiffres { flex-direction:row; gap:48px; }
.agence.seule .chiffres div { flex:1; flex-direction:column; align-items:flex-start; gap:12px; padding:22px 0 0; border-bottom:0; }
.agence.seule .chiffres span { text-align:left; }

/* Fiche d'un bien : les photos bord à bord, puis une colonne de lecture et son encart */
.galerie-cadre { position:relative; background:var(--attente); }
.galerie { display:grid; gap:4px; height:min(66vh, 640px); grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.galerie.seule { grid-template-columns:1fr; grid-template-rows:1fr; }
.galerie.g2 { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
.galerie.g3 { grid-template-columns:2fr 1fr; }
.vue-photo { border:0; padding:0; margin:0; background:var(--attente); cursor:zoom-in; overflow:hidden; min-width:0; min-height:0; border-radius:0; }
.galerie.g3 .vue-photo:first-child, .galerie.g5 .vue-photo:first-child { grid-row:1 / 3; }
.vue-photo.plus { display:none; }
.vue-photo img, .vue-photo .sans-photo { width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.6,.2,1); }
button.vue-photo:hover img { transform:scale(1.03); }
div.vue-photo { cursor:default; }
.toutes { position:absolute; right:32px; bottom:24px; background:#fff; color:var(--navy); border:0; border-radius:0; padding:15px 20px; cursor:pointer;
  font:600 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; box-shadow:0 10px 30px rgba(15,30,48,.22); }
.toutes:hover { background:var(--navy); color:#fff; }
/* Sans photo, un bandeau bas suffit : la page commence par son texte. */
.galerie-cadre.sans .galerie { height:min(32vh, 300px); }
.corps { padding-top:30px; padding-bottom:104px; }
.fil { font:600 11.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--texte-2); margin-bottom:34px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-bottom:4px; }
.fil a { color:var(--texte-2); border-bottom:1px solid var(--trait-fort); padding-bottom:3px; }
.fil a:hover { color:var(--navy); border-color:var(--navy); text-decoration:none; }
.fil span[aria-hidden] { margin:0 8px; color:var(--trait-fort); }
.colonnes { display:grid; grid-template-columns:minmax(0, 1fr) 372px; gap:80px; align-items:start; }
.tete h1 { font:300 clamp(34px, 4.6vw, 58px)/1.07 var(--serif); letter-spacing:-.015em; margin-top:14px; text-wrap:balance; }
.faits.grands { margin-top:34px; padding:24px 0 22px; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); gap:18px 56px; color:var(--navy); }
.faits.grands li { flex-direction:column; align-items:flex-start; gap:7px; }
.faits.grands .nombre { display:inline-flex; align-items:center; gap:11px; font:400 27px/1 var(--serif); }
.faits.grands .icone { width:23px; height:23px; color:var(--bronze); }
.faits.grands .libelle { font:600 10.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--texte-2); }
.principal section { margin-top:64px; }
.principal h2 { font:400 31px/1.15 var(--serif); margin-bottom:20px; }
.principal p { margin:0 0 15px; max-width:64ch; font-size:17.5px; line-height:1.68; }
.tables { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:34px 40px; }
.tables h3 { font:400 21px/1.2 var(--serif); margin-bottom:10px; }
.tables dl { margin:0; border-bottom:1px solid var(--trait); }
.tables dl div { display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:12px 0 11px; border-top:1px solid var(--trait); font-size:15.5px; }
.tables dt { color:var(--texte-2); }
.tables dd { margin:0; font-weight:600; color:var(--navy); text-align:right; }
.puces { list-style:none; margin:0; padding:0; columns:2 250px; column-gap:52px; }
.puces li { position:relative; break-inside:avoid; padding:12px 0 11px 30px; border-top:1px solid var(--trait); font-size:16px; }
.puces li::before { content:""; position:absolute; left:3px; top:19px; width:12px; height:6px; border-left:1.5px solid var(--bronze); border-bottom:1.5px solid var(--bronze); transform:rotate(-45deg); }
.encart { position:sticky; top:104px; background:#fff; border:1px solid var(--trait); padding:34px 32px; display:flex; flex-direction:column; gap:18px; }
.encart .tarif { font-size:16px; }
.encart .tarif strong { font:300 40px/1.05 var(--serif); }
.encart .tarif.doux { font:400 21px/1.3 var(--serif); color:var(--texte-2); }
.encart .principal-bouton { width:100%; }
.encart p { margin:0; }
.joindre { border-top:1px solid var(--trait); padding-top:18px; display:flex; flex-direction:column; gap:6px; }
.joindre span { font:600 10.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--texte-2); }
.joindre a { font:400 23px/1.2 var(--serif); }
.autres { background:var(--sable); padding:92px 0 104px; }
/* Les chambres et les lits d'un logement découpé, sous sa fiche */
.parties { border-top:1px solid var(--trait); padding:84px 0 96px; }
.parties + .autres { margin-top:0; }
.note-calendrier { margin-top:22px !important; }
.barre-mobile { display:none; }

/* Calendrier des disponibilités */
.legende { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--texte-2); margin-bottom:26px !important; }
.legende span { width:15px; height:15px; display:inline-block; margin-left:14px; }
.legende span:first-child { margin-left:0; }
.legende .libre { background:#fff; border:1px solid var(--trait-fort); }
.legende .pris, .jours .pris { background:repeating-linear-gradient(135deg, var(--sable) 0 4px, #E6DFD3 4px 8px); }
.calendrier { display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:38px 40px; }
.mois h3 { font:400 19px/1.2 var(--serif); text-transform:capitalize; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--trait); }
.semaine, .jours { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center; }
.semaine { margin-bottom:4px; }
.semaine b { font:600 10.5px/1 var(--sans); letter-spacing:.1em; color:var(--texte-2); padding:4px 0; }
.jours span { font-size:13.5px; font-weight:500; padding:7px 0; color:var(--texte); }
.jours .pris { color:var(--texte-2); text-decoration:line-through; }
.jours .passe { opacity:.38; }

/* Fenêtres : visionneuse et demande */
dialog { border:0; padding:0; color:var(--texte); font:inherit; }
dialog::backdrop { background:rgba(10,20,33,.9); }
#visionneuse { background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; margin:0; touch-action:pan-y; }
#visionneuse[open] { display:flex; align-items:center; justify-content:center; }
#visionneuse figure { margin:0; max-width:min(1320px, 92vw); text-align:center; }
#visionneuse img { max-height:84vh; max-width:100%; margin:0 auto; object-fit:contain; user-select:none; -webkit-user-drag:none; }
#visionneuse figcaption { color:#D9DEE5; font:500 12px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; margin-top:16px; }
#visionneuse button { position:fixed; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.34); border-radius:50%; width:50px; height:50px; font-size:26px; line-height:1; cursor:pointer; transition:background .2s, color .2s; }
#visionneuse button:hover { background:#fff; color:var(--navy); }
#visionneuse .fermer { right:22px; top:22px; }
#visionneuse .precedente { left:22px; top:50%; transform:translateY(-50%); }
#visionneuse .suivante { right:22px; top:50%; transform:translateY(-50%); }
#demande { width:min(600px, calc(100vw - 28px)); box-shadow:0 40px 100px rgba(10,20,33,.4); }
.formulaire { padding:40px 40px 34px; display:flex; flex-direction:column; gap:18px; position:relative; }
.formulaire .surtitre { margin:0; }
.formulaire h2 { font:300 31px/1.14 var(--serif); margin:-8px 40px 6px 0; text-wrap:balance; }
.formulaire label { display:flex; flex-direction:column; gap:6px; }
.intitule { font:600 10.5px/1.5 var(--sans); letter-spacing:.17em; text-transform:uppercase; color:var(--bronze); }
.intitule .doux { font-weight:500; letter-spacing:.03em; text-transform:none; font-size:12.5px; margin-left:4px; }
.formulaire input, .formulaire textarea { padding:12px 0 11px; border:0; border-bottom:1px solid var(--trait-fort); border-radius:0; background:transparent; width:100%;
  font:400 17px/1.4 var(--sans); letter-spacing:0; text-transform:none; color:var(--texte); }
.formulaire input:focus, .formulaire textarea:focus { outline:none; border-bottom-color:var(--navy); box-shadow:0 1px 0 var(--navy); }
.formulaire textarea { resize:vertical; }
.formulaire .deux { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.formulaire .fermer { position:absolute; right:20px; top:18px; background:transparent; border:0; font-size:28px; line-height:1; color:var(--texte-2); cursor:pointer; width:40px; height:40px; }
.formulaire .fermer:hover { color:var(--navy); }
.formulaire .boutons { display:flex; gap:12px; justify-content:flex-end; margin-top:4px; }
.piege { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* « Nous écrire », sans annonce : ni dates souhaitées, ni message facultatif */
#demande.agence .pour-bien { display:none; }
.formulaire .usage { margin:-6px 0 0; }
.formulaire .usage a { border-bottom:1px solid var(--trait-fort); }
.formulaire .usage a:hover { text-decoration:none; border-color:var(--navy); }
.retour { margin:0; font-size:15px; font-weight:500; min-height:1.5em; }
.retour.erreur { color:var(--rouge); }
.retour.succes { color:var(--vert); }

/* Pied */
.pied { background:var(--nuit); color:#B9C3CF; padding:84px 0 28px; font-size:15.5px; }
.pied .haut { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); gap:56px; }
.pied .marque { font-size:32px; }
.bloc-marque p { margin:16px 0 0; max-width:30em; }
.pied h2 { font:600 11.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--or-clair); margin:6px 0 18px; }
.coordonnees, .liens { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.pied a { color:#fff; }
/* « Nous écrire » : toujours là, que l'agence ait ou non renseigné ses coordonnées */
.ecrire { display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:0 0 8px; background:none; border:0; border-bottom:1px solid var(--or); border-radius:0;
  color:#fff; cursor:pointer; font:600 12.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.ecrire:hover .fleche { transform:translateX(4px); }
.pied .bas { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.12); margin-top:64px; padding-top:22px; font-size:13px; color:#8FA0B3; }

/* Sur une seule rangée, les cases de la recherche sont étroites : un corps un peu plus petit. */
@media (min-width: 1240px) {
  .filtres select, .filtres input[type=number] { font-size:15px; }
}
/* En deçà, la recherche passe sur deux rangées de trois cases, le bouton dessous. */
@media (max-width: 1239px) {
  .filtres { flex-wrap:wrap; }
  .filtres label, .filtres .case { flex:1 1 30%; }
  .filtres button { flex:1 1 100%; min-height:60px; }
}
@media (max-width: 1040px) {
  .grille { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:48px 28px; }
  .colonnes { grid-template-columns:minmax(0, 1fr) 320px; gap:48px; }
  .agence .cadre { grid-template-columns:1fr; gap:44px; align-items:start; }
}
@media (max-width: 900px) {
  .colonnes { grid-template-columns:1fr; gap:0; }
  .encart { position:static; margin-top:56px; }
  /* Sur téléphone, les photos se font défiler du doigt ; le bouton ouvre la visionneuse. */
  .galerie, .galerie.seule, .galerie.g2, .galerie.g3 { display:flex; height:auto; gap:3px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .galerie::-webkit-scrollbar { display:none; }
  .vue-photo, .vue-photo.plus { display:block; flex:0 0 100%; aspect-ratio:4 / 3; scroll-snap-align:start; }
  .galerie:has(.vue-photo:nth-child(2)) .vue-photo { flex-basis:92%; }
  .galerie-cadre.sans .galerie { height:auto; }
  .galerie-cadre.sans .vue-photo { aspect-ratio:5 / 2; }
  .toutes { right:16px; bottom:16px; padding:13px 16px; }
  /* Le bouton reste sous le pouce pendant toute la lecture. */
  .barre-mobile { display:flex; align-items:center; justify-content:space-between; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:9;
    background:#fff; border-top:1px solid var(--trait); padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -10px 30px rgba(15,30,48,.08); }
  .barre-mobile .statut { border:0; padding-left:0; padding-right:0; white-space:normal; line-height:1.3; }
  .barre-mobile .principal-bouton { padding:15px 18px; flex:none; }
  .page-bien .pied { padding-bottom:104px; }
  .pied .haut { grid-template-columns:1fr 1fr; gap:40px; }
  .bloc-marque { grid-column:1 / -1; }
}
@media (max-width: 640px) {
  body { font-size:16px; }
  .cadre { padding-left:20px; padding-right:20px; }
  .bandeau .cadre { height:62px; }
  .marque { font-size:22px; }
  /* Sur téléphone, le nom de l'agence garde la place : il mène déjà à la liste des biens, et peut tenir sur deux lignes. */
  .bandeau .marque { font-size:21px; line-height:1.12; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
  .bandeau nav { gap:18px; }
  .bandeau nav a { font-size:11px; letter-spacing:.14em; }
  .bandeau nav a:first-child { display:none; }
  .hero { padding:56px 0 84px; }
  .hero.avec-photo { min-height:min(72vh, 560px); padding:96px 0 96px; }
  .une { font-size:14.5px; flex-wrap:wrap; row-gap:8px; }
  .recherche { margin-top:-40px; }
  .filtres label { flex:1 1 40%; padding:14px 16px 12px; }
  .filtres .case { flex:1 1 100%; }
  .biens { padding-top:60px; padding-bottom:76px; }
  .entete-section { margin-bottom:32px; }
  .grille { grid-template-columns:1fr; gap:44px; }
  .agence, .autres { padding:68px 0; }
  .chiffres strong { font-size:44px; }
  .agence.seule .chiffres { flex-direction:column; gap:0; }
  .agence.seule .chiffres div { flex-direction:row; align-items:baseline; gap:20px; padding:16px 0 14px; }
  .agence.seule .chiffres div:last-child { border-bottom:1px solid var(--trait-fort); }
  .agence.seule .chiffres span { text-align:right; }
  .corps { padding-top:22px; padding-bottom:72px; }
  /* Du fil d'Ariane, il ne reste que le retour à la liste. */
  .fil { margin-bottom:24px; }
  .fil span { display:none; }
  .fil a:not(:last-of-type) { display:none; }      /* une chambre remonte à son logement, pas à la liste */
  .fil a::before { content:"←"; letter-spacing:0; margin-right:9px; }
  .faits.grands { display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; }
  .outils { padding-bottom:0; }
  .principal section { margin-top:50px; }
  .principal h2 { font-size:27px; }
  .principal p { font-size:16.5px; }
  .encart { padding:26px 22px; }
  /* Sur téléphone, la demande prend tout l'écran : rien ne dépasse, on fait défiler le formulaire. */
  #demande { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; box-shadow:none; }
  .formulaire { padding:30px 20px 24px; min-height:100%; }
  .formulaire .deux { grid-template-columns:1fr; gap:18px; }
  .formulaire .boutons { flex-direction:column-reverse; margin-top:auto; padding-top:8px; }
  .pied { padding-top:64px; }
  .pied .haut { grid-template-columns:1fr; }
  .texte-page { padding-top:48px; padding-bottom:72px; }
  .texte-page section { margin-top:42px; }
  .texte-page h2 { font-size:25px; }
  .texte-page dl div { flex-direction:column; align-items:flex-start; gap:2px; }
  .texte-page dd { text-align:left; }
  #visionneuse .precedente, #visionneuse .suivante { top:auto; bottom:22px; transform:none; }
  #visionneuse .precedente { left:calc(50% - 60px); }
  #visionneuse .suivante { right:calc(50% - 60px); }
}
@media (max-width: 380px) {
  .cadre { padding-left:16px; padding-right:16px; }
  .filtres label { padding-left:12px; padding-right:12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }