/*
  ============================================================================
  COMPOSANTS — boutons, étiquettes, cartes, panneaux, formulaires...
  ============================================================================
  Chaque bloc ci-dessous est un composant réutilisable, indépendant des
  autres : on peut poser un .bouton ou une .carte-bien n'importe où dans la
  page, il s'affichera toujours pareil. C'est le principe de responsabilité
  unique appliqué au CSS.
*/

/* Surfaces "verre dépoli" : le dégradé du fond reste visible en transparence
   derrière les cartes/panneaux, ce qui unifie visuellement toute la page. */
.carte-bien, .panneau, .filtres, .caracteristique, .etape, .formule,
.formulaire input, .formulaire textarea, .controle{
  backdrop-filter: var(--flou-surface);
  -webkit-backdrop-filter: var(--flou-surface);
}
.carte-bien, .panneau, .formule{ box-shadow: var(--elevation) }

/* ---- Boutons ---- */
.bouton{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--police-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1em 1.5em; border-radius: 2px; border: 1px solid transparent;
  transition: background .2s var(--transition-douce), border-color .2s var(--transition-douce), color .2s var(--transition-douce), transform .2s var(--transition-douce);
}
.bouton:active{ transform: translateY(1px) }
.bouton--principal{ background: var(--ambre); color: var(--encre-sur-ambre); border-color: var(--ambre) }
.bouton--principal:hover{ background: var(--ambre-fonce); border-color: var(--ambre-fonce) }
.bouton--fantome{ border-color: var(--sable-attenue); color: var(--sable); background: transparent }
.bouton--fantome:hover{ border-color: var(--ambre); color: var(--ambre) }
.heros .bouton--fantome{ backdrop-filter: blur(3px) }
.bouton--petit{ padding: .7em 1.1em; font-size: .68rem }
.rangee-boutons{ display: flex; flex-wrap: wrap; gap: .9rem }

/* ---- Étiquettes (badges) ---- */
.etiquette{
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--police-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .4em .7em; border-radius: 2px;
  border: 1px solid var(--ligne); color: var(--sable-attenue);
}
.etiquette--360{ color: var(--ambre); border-color: rgba(231,162,76,.5); background: rgba(231,162,76,.07) }
.etiquette--verifie{ color: var(--succes); border-color: rgba(127,178,122,.4) }
.etiquette--location{ color: var(--crepuscule); border-color: rgba(124,141,163,.4) }
.etiquette--vente{ color: var(--sable); border-color: var(--sable-pale) }
.etiquette--programme-neuf{ color: #8FBAD8; border-color: rgba(143,186,216,.45) }

/* ---- Grille de biens (cartes façon magazine, tailles mélangées) ---- */
.liste-biens{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); grid-auto-flow: dense;
}
.carte-bien{
  display: flex; flex-direction: column;
  background: var(--encre-elevee); border: 1px solid var(--ligne); border-radius: 3px;
  overflow: hidden; text-align: left;
  transition: border-color .25s var(--transition-douce), transform .25s var(--transition-douce);
}
.carte-bien:hover{ border-color: var(--sable-pale); transform: translateY(-3px) }
.carte-bien:hover .carte-bien__media::after{ opacity: 1 }
.carte-bien__media{ position: relative; aspect-ratio: 4/3; background-color: #20180f; background-image: var(--degrade-media) }
/* halo chaud + ombrage bas : transforme un aplat de couleur en "photo d'intérieur" stylisée */
.carte-bien__media::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(42% 56% at 76% 20%, rgba(255,214,156,.18), transparent 62%),
    linear-gradient(0deg, rgba(9,6,4,.55), rgba(9,6,4,0) 46%);
}
.carte-bien__media::after{
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--transition-douce);
  background: radial-gradient(120% 90% at 20% 15%, rgba(231,162,76,.2), transparent 55%);
}
.carte-bien__etiquettes{ position: absolute; top: .7rem; left: .7rem; display: flex; gap: .4rem }
.carte-bien__prix{
  position: absolute; left: .8rem; bottom: .7rem;
  font-family: var(--police-mono); font-size: .9rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--sable);
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.carte-bien__prix small{ display: block; font-size: .6rem; letter-spacing: .08em; color: var(--sable-attenue); text-shadow: none; margin-top: .15rem }
.carte-bien__corps{ padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 }
.carte-bien__titre{ font-family: var(--police-serif); font-weight: 400; font-size: var(--taille-1); line-height: 1.2 }
.carte-bien__lieu{ font-family: var(--police-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ambre) }
.carte-bien__caracteristiques{
  margin-top: auto; display: flex; gap: 1rem; flex-wrap: wrap;
  font-family: var(--police-mono); font-size: .68rem; letter-spacing: .06em; color: var(--sable-attenue);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px){
  .carte-bien--large{ grid-column: span 2 }
  .carte-bien--large .carte-bien__media{ aspect-ratio: 16/9 }
  .carte-bien--haute{ grid-row: span 2 }
  .carte-bien--haute .carte-bien__media{ aspect-ratio: auto; height: 100%; min-height: 340px }
}

/* ---- Barre de filtres (page Explorer) ---- */
.filtres{
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  padding: 1rem; border: 1px solid var(--ligne); border-radius: 3px; background: var(--encre-elevee);
}
/* Champ de recherche texte : occupe sa propre ligne (flex-basis 100 %),
   les autres filtres se répartissent sur la ou les lignes suivantes. */
.recherche{
  flex: 1 1 100%;
  background: var(--encre); color: var(--sable);
  border: 1px solid var(--ligne); border-radius: 2px;
  padding: .8em 1em;
  font-family: var(--police-mono); font-size: .78rem; letter-spacing: .04em;
}
.recherche::placeholder{ color: var(--sable-pale); text-transform: none }
.recherche:focus{ border-color: var(--ambre); outline: none }
#reinitialiser-filtres{ margin-left: auto } /* repoussé à droite de la barre */

.selecteur-segmente{ display: inline-flex; border: 1px solid var(--ligne); border-radius: 2px; overflow: hidden }
.selecteur-segmente button{
  background: none; border: 0; padding: .6em 1em;
  font-family: var(--police-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sable-attenue); transition: background .2s var(--transition-douce), color .2s var(--transition-douce);
}
.selecteur-segmente button[aria-pressed="true"]{ background: var(--ambre); color: var(--encre-sur-ambre) }
.champ{ position: relative; display: inline-flex }
select.controle{
  -webkit-appearance: none; appearance: none;
  background: var(--encre-elevee); color: var(--sable);
  border: 1px solid var(--ligne); border-radius: 2px;
  padding: .7em 2.4em .7em .9em;
  font-family: var(--police-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.champ::after{
  content: ""; position: absolute; right: .9em; top: 50%; width: 6px; height: 6px;
  border-right: 1px solid var(--sable-attenue); border-bottom: 1px solid var(--sable-attenue);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.interrupteur{ display: inline-flex; align-items: center; gap: .6rem; font-family: var(--police-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sable-attenue) }
.interrupteur input{ position: absolute; opacity: 0; pointer-events: none }
.interrupteur .glissiere{
  width: 38px; height: 20px; border-radius: 100px; border: 1px solid var(--ligne);
  background: var(--encre); position: relative; transition: background .2s var(--transition-douce), border-color .2s var(--transition-douce);
}
.interrupteur .glissiere::after{
  content: ""; position: absolute; left: 2px; top: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sable-pale); transition: transform .2s var(--transition-douce), background .2s var(--transition-douce);
}
.interrupteur input:checked + .glissiere{ background: rgba(231,162,76,.25); border-color: var(--ambre) }
.interrupteur input:checked + .glissiere::after{ transform: translateX(18px); background: var(--ambre) }
.interrupteur input:focus-visible + .glissiere{ outline: 2px solid var(--contour-focus); outline-offset: 3px }

.resultats__info{
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 2rem 0 1.2rem; font-family: var(--police-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sable-attenue);
}
.resultats__outils{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap }
.tri{ display: inline-flex; align-items: center; gap: .5em; text-transform: none; letter-spacing: normal }
.tri__select{
  -webkit-appearance: none; appearance: none;
  background: var(--encre-elevee); color: var(--sable);
  border: 1px solid var(--ligne); border-radius: 2px;
  padding: .45em 1.8em .45em .7em;
  font-family: var(--police-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  background-image: linear-gradient(45deg, transparent 50%, var(--sable-attenue) 50%), linear-gradient(135deg, var(--sable-attenue) 50%, transparent 50%);
  background-position: right .85em center, right .6em center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.tri__select:focus{ border-color: var(--ambre); outline: none }

/* ---- Carte interactive des biens (page Explorer, mode "Carte") ---- */
.carte-biens{
  position: relative; aspect-ratio: 800 / 460;
  border: 1px solid var(--ligne); border-radius: 3px; overflow: hidden;
  background: var(--encre-elevee-opaque);
}
.carte-biens[hidden]{ display: none }
.carte-biens__fond{ position: absolute; inset: 0; width: 100%; height: 100% }
.carte-biens__epingles{ position: absolute; inset: 0 }
.carte-epingle{
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; cursor: pointer;
}
.carte-epingle__prix{
  font-family: var(--police-mono); font-size: .6rem; letter-spacing: .03em; white-space: nowrap;
  background: rgba(7,17,28,.82); color: var(--sable);
  border: 1px solid var(--ligne); border-radius: 100px; padding: .28em .6em;
  backdrop-filter: blur(4px);
  transition: background .15s var(--transition-douce), color .15s var(--transition-douce), border-color .15s var(--transition-douce);
}
.carte-epingle__point{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ambre); border: 2px solid var(--encre);
  box-shadow: 0 0 0 4px rgba(231,162,76,.18);
}
.carte-epingle:hover, .carte-epingle:focus-visible{ z-index: 3; outline: none }
.carte-epingle:hover .carte-epingle__prix,
.carte-epingle:focus-visible .carte-epingle__prix{ background: var(--ambre); color: var(--encre-sur-ambre); border-color: var(--ambre) }
.carte-epingle--programme-neuf .carte-epingle__point{ background: #8FBAD8; box-shadow: 0 0 0 4px rgba(143,186,216,.18) }
.carte-biens__vide{ position: absolute; inset: 0; z-index: 600; display: grid; place-items: center; font-size: .9rem; text-transform: none; letter-spacing: normal; background: rgba(10, 21, 32, .82); pointer-events: none }
.carte-biens__vide[hidden]{ display: none }

/* ---- Simulateur diaspora (panneau de la fiche bien) ---- */
.simulateur__devise{
  display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem;
  font-family: var(--police-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sable-attenue);
}
.simulateur__prix{ font-family: var(--police-mono); font-size: var(--taille-1); color: var(--sable); font-variant-numeric: tabular-nums }
.simulateur__credit{ margin-top: 1.2rem; border-top: 1px solid var(--ligne); padding-top: 1rem; display: flex; flex-direction: column; gap: .9rem }
.simulateur__titre-credit{ font-family: var(--police-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sable-attenue) }
.simulateur label{ display: flex; flex-direction: column; gap: .35rem; font-family: var(--police-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sable-attenue) }
.simulateur label span{ color: var(--sable); font-size: .72rem; letter-spacing: .02em }
.simulateur input[type="range"]{ width: 100%; accent-color: var(--ambre); background: transparent; margin: 0 }
.simulateur__mensualite{ font-family: var(--police-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sable-attenue) }
.simulateur__mensualite strong{ display: block; margin-top: .3rem; font-size: 1.3rem; color: var(--ambre); letter-spacing: 0; font-variant-numeric: tabular-nums }
.simulateur__avert{ font-size: .72rem; color: var(--sable-pale); font-style: italic }

/* ---- Favoris : cœur sur les cartes, cœur sur la fiche, pastille de nav ---- */
.carte-bien__favori{
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(234,224,209,.2);
  background: rgba(7,17,28,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer;
  transition: border-color .15s var(--transition-douce), background .15s var(--transition-douce);
}
.carte-bien__favori svg{ width: 15px; height: 15px; fill: none; stroke: var(--sable); stroke-width: 2 }
.carte-bien__favori:hover{ border-color: var(--ambre) }
.carte-bien__favori[aria-pressed="true"]{ border-color: var(--ambre); background: rgba(231,162,76,.15) }
.carte-bien__favori[aria-pressed="true"] svg{ fill: var(--ambre); stroke: var(--ambre) }

.favori-fiche{
  align-self: flex-start; margin-top: .4rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55em 1em; border-radius: 100px;
  border: 1px solid var(--ligne); background: rgba(8,19,31,.4);
  font-family: var(--police-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--sable-attenue);
  transition: border-color .15s var(--transition-douce), color .15s var(--transition-douce), background .15s var(--transition-douce);
}
.favori-fiche svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2 }
.favori-fiche:hover{ border-color: var(--ambre); color: var(--ambre) }
.favori-fiche[aria-pressed="true"]{ border-color: var(--ambre); color: var(--ambre); background: rgba(231,162,76,.12) }
.favori-fiche[aria-pressed="true"] svg{ fill: var(--ambre) }

.pastille{
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 100px; background: var(--ambre); color: var(--encre-sur-ambre);
  font-family: var(--police-mono); font-size: .55rem; font-weight: 500; letter-spacing: 0;
}

/* ---- Écran "Mes favoris" + comparateur ---- */
.favoris__entete{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem }
.favori-item{ position: relative }
.carte-bien__comparer{ position: absolute; top: .6rem; left: .6rem; z-index: 3; display: none; cursor: pointer }
.liste-biens--comparaison .carte-bien__comparer{ display: block }
.carte-bien__comparer input{ position: absolute; opacity: 0; width: 0; height: 0 }
.carte-bien__comparer span{
  position: relative; display: block; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--sable); background: rgba(7,17,28,.7); backdrop-filter: blur(4px);
}
.carte-bien__comparer input:checked + span{ background: var(--ambre); border-color: var(--ambre) }
.carte-bien__comparer input:checked + span::after{
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--encre-sur-ambre); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.carte-bien__comparer input:focus-visible + span{ outline: 2px solid var(--contour-focus); outline-offset: 2px }

.comparateur{ overflow-x: auto }
.comparateur__table{ width: 100%; border-collapse: collapse; font-size: .88rem }
.comparateur__table th, .comparateur__table td{
  padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top;
}
.comparateur__table thead th{ font-family: var(--police-serif); font-weight: 400; font-size: var(--taille-1); color: var(--sable) }
.comparateur__table tbody th{
  font-family: var(--police-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sable-attenue); white-space: nowrap; width: 1%;
}
.comparateur__table td{ color: var(--sable); font-variant-numeric: tabular-nums }

/* ---- Back-office : sélecteur de rôle, espaces agence / architecte / admin ---- */
.selecteur-role{ display: flex; flex-direction: column; gap: .4rem }
.selecteur-theme{ display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem }
.selecteur-theme__libelle{ font-family: var(--police-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sable-pale) }
.selecteur-theme .selecteur-segmente{ align-self: flex-start }
@media (max-width: 959px){ .selecteur-theme{ display: none } }

/* Bouton de bascule du thème dans la barre supérieure (mobile / tablette).
   Contrepartie du sélecteur segmenté du rail, invisible sous 960 px. */
.bascule-theme{
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ligne); background: var(--encre-elevee); color: var(--sable);
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
  transition: border-color .2s var(--transition-douce), color .2s var(--transition-douce);
}
.bascule-theme:hover{ border-color: var(--ambre); color: var(--ambre) }
@media (min-width: 960px){ .bascule-theme{ display: none } }
.selecteur-role label{ font-family: var(--police-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sable-pale) }
.selecteur-role select{
  -webkit-appearance: none; appearance: none;
  background: var(--encre-elevee); color: var(--sable); border: 1px solid var(--ligne); border-radius: 2px;
  padding: .55em .7em; font-family: var(--police-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
}
.selecteur-role select:focus{ border-color: var(--ambre); outline: none }
@media (max-width: 959px){ .selecteur-role{ display: none } } /* rail masqué en mobile ; on garde la nav mobile */

/* tuiles d'indicateurs (admin) */
.admin-tuiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: 3px; overflow: hidden; margin-top: 1.8rem }
.admin-tuile{ background: var(--encre-elevee); padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .4rem }
.admin-tuile__valeur{ font-family: var(--police-mono); font-size: 1.5rem; font-weight: 500; color: var(--sable); font-variant-numeric: tabular-nums; line-height: 1 }
.admin-tuile__libelle{ font-family: var(--police-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sable-attenue) }

/* lignes de biens (espace agence, modération admin) */
.table-biens{ display: flex; flex-direction: column; gap: .8rem }
.ligne-bien{
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--ligne); border-radius: 3px; background: var(--encre-elevee);
  padding: 1rem 1.1rem;
}
.ligne-bien__info{ display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 200px }
.ligne-bien__titre{ font-family: var(--police-serif); font-size: var(--taille-1) }
.ligne-bien__meta{ font-size: .82rem; color: var(--sable-attenue) }
.ligne-bien__meta b{ color: var(--sable); font-weight: 500 }
.ligne-bien__actions{ display: flex; gap: .5rem; flex-wrap: wrap }

.etat-pub{
  font-family: var(--police-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35em .7em; border-radius: 100px; border: 1px solid var(--ligne); color: var(--sable-attenue); white-space: nowrap;
}
.etat-pub--publie{ color: var(--succes); border-color: rgba(127,178,122,.4) }
.etat-pub--en-attente{ color: var(--ambre); border-color: rgba(231,162,76,.4) }
.etat-pub--refuse{ color: #d98a7a; border-color: rgba(217,138,122,.4) }
.etat-pub--brouillon{ color: var(--sable-pale) }

/* Locataires & suivi des loyers (panneau déplié sous un bien en location,
   voir 21-espace-agence.js). Volontairement sobre : un tableau à cocher, pas
   un module de facturation. */
.locataires-panneau{
  width: 100%; margin: -.3rem 0 .2rem; padding: .9rem 1rem;
  border: 1px dashed var(--ligne); border-radius: 3px; background: var(--encre-elevee-2);
  display: flex; flex-direction: column; gap: .7rem;
}
.locataire-ligne{ display: flex; align-items: center; gap: .8rem; flex-wrap: wrap }
.locataire-ligne__info{ flex: 1; min-width: 180px; font-size: .88rem }
.locataire-ligne__mois{ display: flex; gap: .35rem; flex-wrap: wrap }
.pastille-mois{
  font-family: var(--police-mono); font-size: .6rem; letter-spacing: .04em;
  padding: .32em .55em; border-radius: 100px; border: 1px solid var(--ligne);
  background: var(--encre); color: var(--sable-attenue); white-space: nowrap;
  transition: border-color .15s var(--transition-douce), color .15s var(--transition-douce);
}
.pastille-mois--paye{ color: var(--succes); border-color: rgba(127,178,122,.4) }
.pastille-mois--impaye{ color: #d98a7a; border-color: rgba(217,138,122,.35) }
.pastille-mois:hover{ border-color: var(--ambre); color: var(--ambre) }
.locataire-ajout{
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding-top: .6rem; border-top: 1px solid var(--ligne-douce);
}
.locataire-ajout input{
  flex: 1 1 140px; min-width: 0;
  background: var(--encre); color: var(--sable); border: 1px solid var(--ligne); border-radius: 2px;
  padding: .55em .7em; font-family: var(--police-sans); font-size: .85rem;
}
.locataire-ajout input:focus{ border-color: var(--ambre); outline: none }

.ligne-bien__vignette{ width: 68px; height: 52px; object-fit: cover; border-radius: 3px; border: 1px solid var(--ligne); flex: none }
.fiche-bien__photo{ width: 100%; border-radius: 3px; border: 1px solid var(--ligne); margin-bottom: 1.5rem; display: block }
.agence-photo-info{ font-size: .74rem; display: block; margin-top: .3rem; text-transform: none; letter-spacing: normal }

/* Bande d'aperçu des photos choisies dans le formulaire agence.
   Chaque vignette est un bouton : un clic la retire de la galerie. */
.agence-photos-apercu{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .3rem }
.agence-photos-apercu__vignette{
  position: relative; width: 108px; height: 80px; padding: 0;
  border: 1px solid var(--ligne); border-radius: 3px;
  background-size: cover; background-position: center;
}
.agence-photos-apercu__vignette:hover{ border-color: var(--ambre) }
.agence-photos-apercu__croix{
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: .9rem; line-height: 1;
  background: rgba(6,14,22,.72); color: #fff;
}
.agence-photos-apercu__couverture{
  position: absolute; left: 0; bottom: 0; right: 0;
  font-family: var(--police-mono); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .18em 0; background: var(--ambre); color: var(--encre-sur-ambre); text-align: center;
}

/* ---- Annuaire public des architectes (écran « Architectes ») ---- */
.annuaire{ display: grid; gap: 1.5rem }
.annuaire__carte{ padding: 1.6rem }
.annuaire__entete{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem }
.annuaire__identite{ display: flex; align-items: center; gap: .9rem }
.annuaire__avatar{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ligne); flex: none }
.annuaire__avatar--vide{
  display: grid; place-items: center;
  background: var(--encre-elevee); color: var(--ambre);
  font-family: var(--police-serif); font-size: 1.5rem;
}
.annuaire__carte .liste-biens{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) }
.annuaire__carte .carte-bien{ cursor: pointer; text-align: left }
.annuaire__carte .carte-bien__media{ aspect-ratio: 4/3 }

/* Fenêtre de détail d'une réalisation d'architecte */
.realisation-modale{
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 9, 15, .9); padding: clamp(1rem, 4vw, 3rem);
}
.realisation-modale__boite{ position: relative; max-width: 780px; width: 100%; max-height: 90vh; overflow-y: auto }
.realisation-modale__fermer{
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ligne); background: var(--encre-elevee); color: var(--sable);
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
}
.realisation-modale__titre{ font-family: var(--police-serif); font-weight: 400; font-size: var(--taille-2); padding-right: 2.6rem }
.realisation-modale__desc{ margin: .7rem 0 1.2rem; color: var(--sable-attenue) }
.realisation-modale__bloc{ margin: 0 0 1.4rem }
.realisation-modale__bloc figcaption{
  font-family: var(--police-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sable-pale); margin-bottom: .45rem;
}
.realisation-modale__media{
  width: 100%; aspect-ratio: 16/10; border: 0; border-radius: 3px;
  background: var(--encre-elevee-opaque); display: block;
}
.realisation-modale__media--img{ aspect-ratio: auto; object-fit: contain; max-height: 56vh; cursor: zoom-in }

/* Lignes « un modèle 3D par niveau » du formulaire agence. */
.agence-niveau-ligne{ display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .45rem 0 }
.agence-niveau-ligne input[data-niv-nom]{ width: 8rem; flex: none }
.agence-niveau-ligne [data-niv-etat]{ min-width: 8rem }

/* Bloc « Médias du bien » du formulaire agence (visite 360°, vidéo, 3D). */
.champs-medias{
  border: 1px solid var(--ligne); border-radius: 3px;
  padding: 1rem 1.1rem 1.2rem; margin: .4rem 0 0;
  display: flex; flex-direction: column; gap: .9rem;
}
.champs-medias legend{
  font-family: var(--police-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sable-pale); padding: 0 .4rem;
}

/* Panneau admin « Contenu du site » : une ligne = un texte + sa couleur. */
.admin-contenu-ligne{
  display: grid; gap: .5rem; padding: .8rem 0; border-bottom: 1px solid var(--ligne-douce);
}
@media (min-width: 700px){ .admin-contenu-ligne{ grid-template-columns: 1fr auto; align-items: end } }
.admin-contenu-couleur{
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--police-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sable-attenue);
}
.admin-contenu-couleur input[type="color"]{
  width: 34px; height: 26px; padding: 0; border: 1px solid var(--ligne); border-radius: 3px; background: none;
}

/* Pastille « N photos » posée sur la vignette d'une carte de bien. */
.carte-bien__nb-photos{
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .32em;
  font-family: var(--police-mono); font-size: .62rem; letter-spacing: .04em;
  padding: .3em .6em; border-radius: 100px;
  background: rgba(6,14,22,.55); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.carte-bien__nb-photos svg{ width: 13px; height: 13px }

.mini-interrupteur{ display: inline-flex; align-items: center; gap: .4rem; font-family: var(--police-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sable-attenue); cursor: pointer }
.mini-interrupteur input{ accent-color: var(--ambre) }

/* ---- Zone d'authentification du rail (mode Supabase) ---- */
.auth-zone{ display: flex; flex-direction: column; gap: .6rem }
.auth-zone__form{ display: flex; flex-direction: column; gap: .6rem }
.auth-zone__form label{ display: flex; flex-direction: column; gap: .3rem; font-family: var(--police-mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sable-pale) }
.auth-zone__form input{
  background: var(--encre-elevee); color: var(--sable); border: 1px solid var(--ligne); border-radius: 2px;
  padding: .5em .6em; font-family: var(--police-mono); font-size: .72rem; letter-spacing: normal;
}
.auth-zone__form input:focus{ border-color: var(--ambre); outline: none }
.auth-zone__actions{ display: flex; flex-direction: column; gap: .4rem }
.auth-zone__actions .bouton{ justify-content: center }
.auth-zone__qui{ font-family: var(--police-mono); font-size: .64rem; color: var(--sable); word-break: break-all; display: flex; flex-direction: column; gap: .3rem }
.auth-zone__role{ font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ambre) }
@media (max-width: 959px){ .auth-zone{ display: none } }

/* ---- Fiche bien : en-tête, caractéristiques, panneaux ---- */
.fiche-bien__entete{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; padding-top: clamp(2rem, 5vw, 3.5rem);
}
.fiche-bien__titre-bloc{ display: flex; flex-direction: column; gap: .7rem; max-width: 34ch }
.fiche-bien__lieu{ font-family: var(--police-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ambre) }
.fiche-bien__prix{ font-family: var(--police-mono); font-size: var(--taille-3); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; text-align: right }
.fiche-bien__prix small{ display: block; font-size: .8rem; color: var(--sable-attenue); letter-spacing: .06em; margin-top: .5rem; font-weight: 400 }
.fiche-bien__etiquettes{ display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem }

.caracteristiques{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--ligne); border: 1px solid var(--ligne); border-radius: 3px;
  overflow: hidden; margin-top: 2.5rem;
}
@media (min-width: 680px){ .caracteristiques{ grid-template-columns: repeat(4, 1fr) } }
.caracteristique{ background: var(--encre-elevee); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem }
.caracteristique dt{ font-family: var(--police-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sable-pale) }
.caracteristique dd{ margin: 0; font-family: var(--police-serif); font-size: var(--taille-1); font-weight: 400; font-variant-numeric: tabular-nums }

.fiche-bien__grille{ display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(2.5rem, 6vw, 4rem) }
@media (min-width: 900px){ .fiche-bien__grille{ grid-template-columns: 1.5fr 1fr } }

.panneau{ border: 1px solid var(--ligne); border-radius: 3px; background: var(--encre-elevee); padding: 1.4rem }
.panneau h3{ font-family: var(--police-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sable-attenue); margin-bottom: 1rem }

.plan{ width: 100%; height: auto; border-radius: 2px; background: #0A1520 }
.carte-figure{ width: 100%; height: auto; border-radius: 2px; background: #081321 }
/* Plan RÉEL fourni par l'agence (image ou PDF), encadré dans le style du site. */
img.plan{ display: block; border: 1px solid var(--ligne) }
.plan--pdf{
  display: block; width: 100%; height: min(68vh, 560px);
  border: 1px solid var(--ligne); border-radius: 2px; background: #fff;
}
/* ---- Cartes Leaflet (fiche « Y aller » + Explorer « Carte ») ----
   Tuiles OpenStreetMap (sans clé d'API) assombries par un filtre CSS pour
   coller au thème « Nuit Atlantique ». Le marqueur (SVG, autre calque) n'est
   PAS touché par le filtre → il reste ambré. */
.carte-sombre .leaflet-container{ background: #0A1520; font-family: var(--police-sans) }
.carte-sombre .leaflet-tile{
  filter: invert(1) hue-rotate(190deg) brightness(.92) contrast(.9) saturate(.7);
}
.carte-sombre .leaflet-control-attribution{ background: rgba(7, 17, 28, .72); color: var(--sable-pale) }
.carte-sombre .leaflet-control-attribution a{ color: var(--sable-attenue) }
.carte-sombre .leaflet-bar a{
  background: var(--encre-elevee-opaque); color: var(--sable); border-bottom-color: var(--ligne);
}
.carte-sombre .leaflet-bar a:hover{ background: var(--encre-elevee-2) }

.fiche-carte{ width: 100%; height: 300px; border-radius: 2px; border: 1px solid var(--ligne); overflow: hidden }

/* Vue « Carte » d'Explorer : la carte occupe tout le conteneur ; bouton
   « Autour de moi » posé par-dessus ; bulles d'info ré-habillées sombre. */
.carte-biens__leaflet{ position: absolute; inset: 0 }
.carte-biens__autour{
  position: absolute; z-index: 500; top: .7rem; right: .7rem;
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--police-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .5em .8em; border-radius: 100px;
  border: 1px solid var(--ambre); background: rgba(7, 17, 28, .82); color: var(--ambre);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.carte-biens__autour:hover{ background: var(--ambre); color: var(--encre-sur-ambre) }
/* Bulle flottante « Autour de moi » : visible seulement sur les écrans publics
   où chercher un bien a du sens (pas dans les espaces de gestion, pas sur la
   fiche où elle gênerait la visite). Sous les modales / le plein écran (z-index
   9999+) et des notifications (z-index 80), au-dessus du contenu. */
.bulle-autour{
  display: none;
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 65;
  align-items: center; gap: .55rem;
  padding: .85rem 1.15rem; border-radius: 100px;
  border: 1.5px solid var(--ambre); background: var(--ambre); color: var(--encre-sur-ambre);
  font-family: var(--police-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: transform .2s var(--transition-douce), box-shadow .2s var(--transition-douce);
}
.bulle-autour:hover{ transform: translateY(-2px); box-shadow: 0 9px 26px rgba(0,0,0,.5) }
.bulle-autour__icone{ font-size: 1.1rem; line-height: 1 }
.bulle-autour[aria-busy="true"]{ opacity: .7; pointer-events: none }
.application:has(.vue--active[data-vue="accueil"]) .bulle-autour,
.application:has(.vue--active[data-vue="explorer"]) .bulle-autour,
.application:has(.vue--active[data-vue="favoris"]) .bulle-autour{ display: inline-flex }
@media (max-width: 959px){ .bulle-autour__texte{ font-size: .68rem } .bulle-autour{ right: .9rem; bottom: .9rem } }

/* Rayon « à moins de N km » d'Explorer (réutilise .selecteur-segmente). */
.rayon-autour{ display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.2rem }
.rayon-autour[hidden]{ display: none }
.rayon-autour__titre{ font-family: var(--police-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sable-attenue) }

.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background: var(--encre-elevee-opaque); color: var(--sable) }
.leaflet-popup-content{ margin: .8rem .9rem }
.carte-popup{ display: flex; flex-direction: column; gap: .3rem; min-width: 172px }
.carte-popup strong{ font-family: var(--police-serif); font-weight: 400; font-size: 1rem; line-height: 1.2 }
.carte-popup span{ font-size: .82rem; color: var(--sable-attenue) }
.carte-popup__prix{ font-family: var(--police-mono); color: var(--sable) !important }
.carte-popup__voir{
  margin-top: .35rem; padding: .55em .7em; border-radius: 2px;
  border: 1px solid var(--ambre); background: var(--ambre); color: var(--encre-sur-ambre);
  font-family: var(--police-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---- Bloc "Y aller" : adresse, repère, itinéraire (voir 08-fiche-bien.js) ---- */
.localisation{ display: flex; flex-direction: column; gap: .55rem; margin-top: 1.1rem }
.localisation__adresse{ font-family: var(--police-serif); font-weight: 400; font-size: var(--taille-1); line-height: 1.2 }
.localisation__repere{ color: var(--sable-attenue); font-size: .92rem }
.localisation__coordonnees{
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-family: var(--police-mono); font-size: .8rem; color: var(--sable-attenue); font-variant-numeric: tabular-nums;
}
.localisation__copier{
  background: none; border: 1px solid var(--ligne); border-radius: 2px; color: var(--sable-attenue);
  font-family: var(--police-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: .3em .65em;
  transition: border-color .2s var(--transition-douce), color .2s var(--transition-douce);
}
.localisation__copier:hover{ border-color: var(--sable-attenue); color: var(--sable) }
.localisation .rangee-boutons{ margin-top: .5rem }
.localisation__note{ font-size: .8rem; color: var(--sable-pale); font-style: italic }

.agent{ display: flex; flex-direction: column; gap: 1rem }
.agent__ligne{ display: flex; align-items: center; gap: .9rem }
.agent__avatar{
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--ambre), var(--ambre-fonce));
  display: grid; place-items: center; font-family: var(--police-serif); color: var(--encre-sur-ambre); font-size: 1.1rem;
}
.agent__nom{ font-weight: 600 }
.agent__role{ font-family: var(--police-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sable-attenue) }

.liste-verification{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem }
.liste-verification li{ display: flex; gap: .6rem; font-size: .92rem; color: var(--sable-attenue) }
.liste-verification li::before{
  content: ""; width: 16px; height: 16px; flex: none; margin-top: .2rem; border-radius: 50%;
  border: 1px solid var(--succes); background: radial-gradient(circle at 50% 45%, transparent 40%, rgba(127,178,122,.25) 41%);
}
.liste-verification li b{ color: var(--sable); font-weight: 500 }
.liste-verification li.liste-verification__vide::before{ display: none }

/* ---- Étapes ("comment ça marche" — véritable séquence, donc numérotée) ---- */
.etapes{ display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: 3px; overflow: hidden; margin-top: 3rem }
@media (min-width: 820px){ .etapes{ grid-template-columns: repeat(3, 1fr) } }
.etape{ background: var(--encre-elevee); padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: .9rem; min-height: 230px }
.etape__numero{ font-family: var(--police-mono); font-size: .72rem; letter-spacing: .2em; color: var(--ambre) }
.etape h3{ font-family: var(--police-serif); font-weight: 400; font-size: var(--taille-1); line-height: 1.2 }
.etape p{ color: var(--sable-attenue); font-size: .94rem }

/* ---- Bande de confiance ---- */
.confiance{ display: grid; gap: 1.5rem; margin-top: 2.5rem }
@media (min-width: 760px){ .confiance{ grid-template-columns: repeat(3, 1fr) } }
.confiance__item{ border-top: 1px solid var(--ambre); padding-top: 1.1rem; display: flex; flex-direction: column; gap: .5rem }
.confiance__item h3{ font-family: var(--police-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sable) }
.confiance__item p{ font-size: .9rem; color: var(--sable-attenue) }

/* ---- Formules (conciergerie) ---- */
.formules{ display: grid; gap: 1.2rem; margin-top: 3rem }
@media (min-width: 860px){ .formules{ grid-template-columns: repeat(3, 1fr) } }
.formule{ border: 1px solid var(--ligne); border-radius: 3px; background: var(--encre-elevee); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem }
.formule--vedette{ border-color: var(--ambre); background: linear-gradient(180deg, rgba(231,162,76,.06), transparent 60%) }
.formule__surtitre{ font-family: var(--police-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ambre) }
.formule__nom{ font-family: var(--police-serif); font-size: var(--taille-2); font-weight: 400 }
.formule__prix{ font-family: var(--police-mono); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums }
.formule__prix small{ font-size: .7rem; color: var(--sable-attenue); letter-spacing: .05em }
.formule ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; flex: 1 }
.formule li{ font-size: .9rem; color: var(--sable-attenue); padding-left: 1.2rem; position: relative }
.formule li::before{ content: "—"; position: absolute; left: 0; color: var(--ambre) }

/* ---- Formulaire de contact ---- */
.formulaire{ display: grid; gap: 1.3rem; max-width: 620px; margin-top: 2.5rem }
.formulaire__rangee{ display: grid; gap: 1.3rem }
@media (min-width: 560px){ .formulaire__rangee{ grid-template-columns: 1fr 1fr } }
.formulaire label{ display: flex; flex-direction: column; gap: .5rem; font-family: var(--police-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sable-attenue) }
.formulaire input, .formulaire textarea{
  background: var(--encre-elevee); border: 1px solid var(--ligne); border-radius: 2px;
  padding: .85rem .9rem; color: var(--sable); font-family: var(--police-sans); font-size: .95rem;
  letter-spacing: normal; text-transform: none; transition: border-color .2s var(--transition-douce);
}
.formulaire input:focus, .formulaire textarea:focus{ border-color: var(--ambre); outline: none }
.formulaire textarea{ resize: vertical; min-height: 120px }
.roles{ display: flex; flex-wrap: wrap; gap: .6rem }
.roles label{
  flex-direction: row; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--ligne); border-radius: 100px; padding: .55rem .9rem;
  font-size: .62rem; color: var(--sable-attenue);
  transition: border-color .2s var(--transition-douce), color .2s var(--transition-douce), background .2s var(--transition-douce);
}
.roles input{ position: absolute; opacity: 0 }
.roles label:has(input:checked){ border-color: var(--ambre); color: var(--ambre); background: rgba(231,162,76,.08) }
.roles label:has(input:focus-visible){ outline: 2px solid var(--contour-focus); outline-offset: 2px }

/* ---- Pied de page ---- */
.pied-de-page{ border-top: 1px solid var(--ligne); margin-top: clamp(3rem, 8vw, 6rem) }
.pied-de-page__contenu{
  max-width: var(--largeur-contenu); margin-inline: auto; padding: 2.5rem var(--marge);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem;
  font-family: var(--police-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sable-pale);
}
.pied-de-page__contenu b{ color: var(--sable-attenue); font-weight: 500 }

/* ---- Notification (« toast ») ---- */
.notification{
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: .8rem;
  background: var(--encre-elevee-2); border: 1px solid var(--ambre);
  border-radius: 3px; padding: .9rem 1.2rem; z-index: 80;
  font-family: var(--police-mono); font-size: .72rem; letter-spacing: .06em; color: var(--sable);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  transition: transform .45s var(--transition-douce); max-width: calc(100vw - 2rem);
}
.notification.notification--visible{ transform: translate(-50%, 0) }
.notification::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); flex: none }