/* Reloge - styles du front. Le theme du site porte l'entete et le pied ; ici on habille
   l'espace membre et les blocs applicatifs pour qu'ils soient lisibles et nets sans depasser
   la charte du theme. Tout est autonome, aucune dependance externe. */

:root {
  --reloge-primaire: #1c3f5e;
  --reloge-primaire-fonce: #16324b;
  --reloge-accent: #2e7d4f;
  --reloge-encre: #1f2733;
  --reloge-gris: #5b6675;
  --reloge-bord: #e3e7ec;
  --reloge-fond-doux: #f5f7f9;
  --reloge-fond-carte: #ffffff;
  --reloge-rayon: 10px;
  --reloge-rayon-sm: 6px;
  --reloge-ombre: 0 1px 2px rgba(16, 30, 48, .06), 0 6px 18px rgba(16, 30, 48, .06);
  /* Espace au-dessus de la carte quand elle est posee en plan, hors page de recherche
     (sur l'accueil, sous le heros). 2.5rem = 40 px, demande de Fred du 2026-09-09. */
  --reloge-carte-plan-espace: 2.5rem;
}

/* Conteneur de l'espace membre.
   Largeur : celle du site, declaree une seule fois dans le theme (Blocksy, reglage
   maxSiteWidth, expose en --theme-block-max-width). Ce conteneur portait max-width:none, au
   motif que la largeur viendrait des blocs Stackable : c'etait faux, Stackable ne genere
   aucune regle pour des blocs ecrits par le code. L'espace s'etalait donc sur toute la fenetre
   quand le reste du site s'arretait a 1590 px (mesure a 1900 px le 2026-09-02).
   Gouttiere : portee par les zones de contenu, jamais ici, sinon les deux paddings
   s'additionnent et doublent la marge sur telephone. */
.reloge-app .wrap { max-width: var(--theme-block-max-width, 1590px); margin-inline: auto;
  padding: 1.4rem 0 3rem; }
.reloge-app > h1, .reloge-app .wrap > h1 { font-size: 1.8rem; margin: 0 0 1.2rem; color: var(--reloge-encre);
  padding-inline: var(--reloge-gouttiere, 24px); }

.reloge { margin: 1.2rem 0; color: var(--reloge-encre); }
.reloge h2 { font-size: 1.25rem; margin: 0 0 .8rem; }
.reloge p { color: var(--reloge-gris); }

/* Formulaires, presentes en carte (zone distincte) : cadre, fond et ombre douce. */
.reloge-form { display: grid; gap: .9rem; max-width: 42rem; background: var(--reloge-fond-carte);
  border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon); padding: 1.3rem 1.4rem; box-shadow: var(--reloge-ombre); }
.reloge-form label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; color: var(--reloge-encre); }
.reloge-form input, .reloge-form select, .reloge-form textarea {
  padding: .6rem .7rem; border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon-sm);
  font: inherit; background: #fff; color: var(--reloge-encre);
}
.reloge-form input:focus, .reloge-form select:focus, .reloge-form textarea:focus {
  outline: none; border-color: var(--reloge-primaire); box-shadow: 0 0 0 3px rgba(28, 63, 94, .12);
}
.reloge-form button, .reloge button.reloge-vocal-appliquer {
  justify-self: start; padding: .6rem 1.2rem; border: 0; border-radius: var(--reloge-rayon-sm);
  background: var(--reloge-primaire); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.reloge-form button:hover { background: var(--reloge-primaire-fonce); }
.is-style-outline {
  background: #fff !important; color: var(--reloge-primaire) !important;
  border: 1px solid var(--reloge-primaire) !important;
}

/* Messages d'etat, adoucis avec un fond teinte. */
.reloge-etat { padding: .8rem 1rem; border-left: 3px solid var(--reloge-gris); background: var(--reloge-fond-doux);
  border-radius: var(--reloge-rayon-sm); color: var(--reloge-encre); }
.reloge-etat--vide, .reloge-etat--attente { border-left-color: #c9a227; background: #fdf8ec; }
.reloge-etat--refus { border-left-color: #b03a2e; background: #fbeeec; }
.reloge-etat--ok { border-left-color: var(--reloge-accent); background: #eef6f1; }

/* Cartes et listes. */
.reloge-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.reloge-carte { border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon);
  padding: 1.1rem; background: var(--reloge-fond-carte); box-shadow: var(--reloge-ombre); }
.reloge-carte h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--reloge-encre); }
.reloge-lieu { color: var(--reloge-gris); margin: 0 0 .4rem; }
.reloge-prix--inconnu { color: var(--reloge-gris); font-style: italic; }
.reloge-mention { font-size: .8rem; color: var(--reloge-gris); border-top: 1px dashed var(--reloge-bord);
  padding-top: .5rem; margin-top: .7rem; }

/* Tableaux : conteneur arrondi, entete teintee, defilement horizontal sur petit ecran. */
.reloge-table { width: 100%; border-collapse: collapse; background: var(--reloge-fond-carte);
  border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon); overflow: hidden;
  box-shadow: var(--reloge-ombre); }
.reloge-table thead th { background: var(--reloge-fond-doux); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .02em; color: var(--reloge-gris); }
.reloge-table th, .reloge-table td { border-bottom: 1px solid var(--reloge-bord); padding: .65rem .8rem; text-align: left; }
.reloge-table tbody tr:last-child td { border-bottom: 0; }
.reloge-table tbody tr:hover { background: #fafbfc; }
.reloge-table code { background: var(--reloge-fond-doux); padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

/* Indicateurs (KPI) du tableau de bord. */
.reloge-indicateurs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.reloge-indicateurs li { flex: 1 1 10rem; border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon);
  padding: 1rem 1.1rem; min-width: 9rem; background: var(--reloge-fond-carte); box-shadow: var(--reloge-ombre);
  border-top: 3px solid var(--reloge-primaire); }
.reloge-indicateurs .v { display: block; font-size: 1.7rem; font-weight: 700; color: var(--reloge-encre); line-height: 1.1; }
.reloge-indicateurs li small, .reloge-indicateurs .l { color: var(--reloge-gris); font-size: .85rem; }

.reloge-code { background: var(--reloge-fond-doux); padding: .7rem; border-radius: var(--reloge-rayon-sm);
  overflow-x: auto; border: 1px solid var(--reloge-bord); }
.reloge-dispo-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.reloge-dispo-liste li { padding: .25rem .5rem; border-radius: 3px; font-size: .8rem; background: #eef6f1; }
.reloge-dispo-liste li.occupe { background: #fbeeec; }

/* Navigation des espaces membres. */
.reloge-nav-espace { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; padding: 0 0 1rem;
  border-bottom: 1px solid var(--reloge-bord); }
.reloge-nav-espace a { padding: .45rem .9rem; border-radius: 999px; text-decoration: none; font-size: .9rem;
  font-weight: 600; color: var(--reloge-primaire); background: var(--reloge-fond-doux); transition: background .15s ease; }
.reloge-nav-espace a:hover, .reloge-nav-espace a:focus-visible { background: #e6ecf2; }
.reloge-nav-espace a.actif { background: var(--reloge-primaire); color: #fff; }

/* Pilotage vocal. */
.reloge-vocal { display: grid; gap: 1.1rem; }
.reloge-vocal-bien { display: grid; gap: .3rem; max-width: 24rem; font-weight: 600; font-size: .9rem; }
.reloge-vocal-bien select { padding: .6rem .7rem; border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon-sm);
  font: inherit; background: #fff; }
.reloge-vocal-dicter { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.reloge-vocal-rec { padding: .7rem 1.3rem; border: 0; border-radius: 999px; background: var(--reloge-primaire);
  color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.reloge-vocal-rec:hover { background: var(--reloge-primaire-fonce); }
.reloge-vocal-statut { color: var(--reloge-gris); font-size: .9rem; }
.reloge-vocal-manuel { border-top: 1px solid var(--reloge-bord); padding-top: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; }
.reloge-vocal-recap { border: 1px solid var(--reloge-bord); border-left: 3px solid var(--reloge-accent);
  border-radius: var(--reloge-rayon); padding: 1rem 1.1rem; background: #eef6f1; box-shadow: var(--reloge-ombre); }
.reloge-vocal-resume { margin: 0 0 .8rem; color: var(--reloge-encre); font-weight: 600; }
.reloge-vocal-boutons { display: flex; gap: .6rem; flex-wrap: wrap; }
.reloge-vocal-boutons button { padding: .55rem 1.2rem; border: 0; border-radius: var(--reloge-rayon-sm);
  background: var(--reloge-primaire); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* Connexion Stripe : bouton et garanties de transparence. */
.reloge-bouton { display: inline-block; padding: .6rem 1.3rem; border-radius: var(--reloge-rayon-sm);
  background: var(--reloge-primaire); color: #fff !important; text-decoration: none; font-weight: 600; }
.reloge-bouton:hover { background: var(--reloge-primaire-fonce); }
.reloge-garanties { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.reloge-garanties li { padding: .6rem .85rem; background: var(--reloge-fond-doux); border-left: 3px solid var(--reloge-accent);
  border-radius: var(--reloge-rayon-sm); font-size: .9rem; color: var(--reloge-encre); }

@media (max-width: 640px) {
  .reloge-app .wrap { padding: 1.2rem 0 3rem; }
  .reloge-indicateurs li { min-width: 100%; }
  /* Douze entrees en grille occupaient six lignes avant le premier outil. Sur telephone la
     barre devient une bande qui defile, comme dans les applications : une seule ligne. */
  .reloge-nav-espace { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(var(--reloge-gouttiere, 14px) * -1); padding-inline: var(--reloge-gouttiere, 14px);
    scrollbar-width: none; }
  .reloge-nav-espace::-webkit-scrollbar { display: none; }
  .reloge-nav-espace a { flex: 0 0 auto; scroll-snap-align: start; }
  .reloge-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── v3 : le numero d'hebergement comme porte d'entree ─────────────────── */

/* Heros de recherche par numero : le geste central du produit, large et evident. */
.reloge-numero { text-align: left; }
.reloge-numero-invite { font-size: 1.05rem; color: var(--reloge-encre); }
.reloge-form-numero { max-width: 34rem; }
.reloge-form-numero input { font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; }
.reloge-form-numero button { font-size: 1.05rem; padding: .75rem 1.5rem; background: var(--reloge-accent); }
.reloge-form-numero button:hover { background: #256742; }
.reloge-numero-aide { font-size: .85rem; color: var(--reloge-gris); margin-top: .4rem; }

/* Badges d'etats d'une fiche : chaque etat est un fait, jamais un decor. */
.reloge-etats { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: .8rem 0; }
.reloge-etat-badge { font-size: .8rem; font-weight: 600; padding: .28rem .7rem; border-radius: 999px;
  border: 1px solid var(--reloge-bord); background: var(--reloge-fond-doux); color: var(--reloge-gris); }
.reloge-etat-badge.est-ok { border-color: #bfe6c9; background: #eef6f1; color: var(--reloge-accent); }

/* Fiche pilotee par le numero. */
.reloge-fiche-entete { margin-bottom: 1rem; }
.reloge-fiche-titre { margin: 0 0 .2rem; line-height: 1.15; }
.reloge-fiche-numero { color: var(--reloge-gris); margin: .1rem 0; }
.reloge-fiche-numero strong { color: var(--reloge-encre); letter-spacing: .06em; }
.reloge-caracteristiques ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.reloge-caracteristiques li { color: var(--reloge-encre); background: var(--reloge-fond-doux);
  border-radius: var(--reloge-rayon-sm); padding: .3rem .7rem; font-size: .9rem; }
.reloge-fraicheur { font-size: .8rem; color: var(--reloge-gris); }

/* Visuel generique honnete, qui invite le proprietaire a reprendre la main. */
.reloge-visuel-generique { border: 1px dashed var(--reloge-bord); border-radius: var(--reloge-rayon);
  padding: 1rem; background: var(--reloge-fond-doux); margin: 1rem 0; }
.reloge-visuel-generique img { max-width: 100%; height: auto; border-radius: var(--reloge-rayon-sm); display: block; }
.reloge-visuel-mention { font-size: .8rem; color: var(--reloge-gris); margin: .5rem 0 0; }
.reloge-visuel-revendication { font-weight: 600; color: var(--reloge-primaire); margin: .6rem 0 0; }

/* Tunnels de demande et de reservation. */
.reloge-form-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .9rem; }
.reloge-consentement { font-weight: 500 !important; display: flex !important; gap: .5rem; align-items: flex-start; }
.reloge-consentement input { margin-top: .2rem; }
.reloge-demande-note, .reloge-resa-note { font-size: .82rem; color: var(--reloge-gris); }
.reloge-resa-pitch { font-size: 1.02rem; }
.reloge-action { margin: 1.6rem 0; }

/* Invitation du proprietaire et phrase de partage. */
.reloge-revendication-cta { border-top: 1px solid var(--reloge-bord); margin-top: 2rem; padding-top: 1.2rem; }
.reloge-phrase-partage code { display: inline-block; background: var(--reloge-fond-doux); border: 1px solid var(--reloge-bord);
  border-radius: var(--reloge-rayon-sm); padding: .55rem .8rem; color: var(--reloge-encre); font-size: .92rem; }

/* Numero inconnu : deux portes claires, preneur et proprietaire. */
.reloge-inconnu-preneur, .reloge-inconnu-proprietaire { border: 1px solid var(--reloge-bord);
  border-radius: var(--reloge-rayon); padding: 1.1rem 1.3rem; margin: 1rem 0; background: var(--reloge-fond-carte);
  box-shadow: var(--reloge-ombre); }

/* ── Index neutre : invitation a copier, alerte d'activation ───────────── */
.reloge-index-note, .reloge-index-source { color: var(--reloge-gris); font-size: .92rem; }
.reloge-invitation { border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon);
  padding: 1.2rem 1.4rem; margin: 1.4rem 0; background: var(--reloge-fond-carte); box-shadow: var(--reloge-ombre); }
.reloge-invitation-texte { width: 100%; box-sizing: border-box; font: inherit; font-size: .92rem;
  color: var(--reloge-encre); background: var(--reloge-fond-doux); border: 1px solid var(--reloge-bord);
  border-radius: var(--reloge-rayon-sm); padding: .7rem .8rem; resize: vertical; }
.reloge-invitation-boutons { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; }
.reloge-invitation-boutons .reloge-bouton { border: 0; cursor: pointer; font: inherit; font-weight: 600;
  padding: .6rem 1.1rem; border-radius: var(--reloge-rayon-sm); background: var(--reloge-primaire); color: #fff; }
.reloge-invitation-boutons .reloge-bouton:hover { background: var(--reloge-primaire-fonce); }
.reloge-form-alerte { margin: 1rem 0; }

/* ── Mon espace : deux portes, qui fait quoi ───────────────────────────── */
.reloge-espaces-portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.2rem; }
.reloge-espace-porte { border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon);
  padding: 1.2rem 1.4rem; background: var(--reloge-fond-carte); box-shadow: var(--reloge-ombre); }
.reloge-espace-porte .reloge-bouton, .reloge-mon-espace .reloge-bouton { display: inline-block; text-decoration: none;
  padding: .55rem 1.05rem; border-radius: var(--reloge-rayon-sm); background: var(--reloge-primaire); color: #fff; font-weight: 600; }
.reloge-espace-liens { list-style: none; padding: 0; display: grid; gap: .55rem; }
.reloge-espace-liens li { background: var(--reloge-fond-doux); border-radius: var(--reloge-rayon-sm); padding: .6rem .8rem; }

.reloge-bouton-secondaire { background: #fff !important; color: var(--reloge-primaire) !important;
  border: 1px solid var(--reloge-primaire) !important; }
.reloge-bouton-secondaire:hover { background: var(--reloge-fond-doux) !important; }

/* ── Ecrans d'action du proprietaire ───────────────────────────────────── */
/* Une suppression ou un retrait ne se presente pas comme l'action principale :
   rendu en lien discret, pour que le regard aille d'abord a ce qui construit. */
.reloge-lien-action { background: none !important; border: none !important; padding: 0 !important;
  color: var(--reloge-encre-douce, #5b6472) !important; font: inherit !important; text-decoration: underline;
  cursor: pointer; box-shadow: none !important; }
.reloge-lien-action:hover { color: var(--reloge-primaire) !important; }
.reloge-inline { display: inline; }
.reloge-form-action { display: grid; gap: .4rem; margin: 0 0 .6rem; }
.reloge-form-action input[type=text] { padding: .35rem .5rem; border: 1px solid var(--reloge-bord);
  border-radius: var(--reloge-rayon-sm); font: inherit; width: 100%; max-width: 22rem; }
.reloge-form-action button { justify-self: start; }

.reloge-photos-liste { list-style: none; padding: 0; margin: 1.2rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.reloge-photo-item { border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon);
  padding: .7rem; background: var(--reloge-fond-carte); }
.reloge-photo-item img { display: block; width: 100%; height: auto; border-radius: var(--reloge-rayon-sm); }
.reloge-photo-legende { margin: .5rem 0 .2rem; font-weight: 600; }
.reloge-photo-actions { margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; font-size: .9rem; }
.reloge-photo-principale { margin: .4rem 0 0; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--reloge-primaire); }

/* Les ecrans de reglage sont des formulaires de travail : ils prennent la largeur utile,
   et leurs groupes se lisent comme des sections, pas comme des encadres de navigateur. */
.reloge-form-large { max-width: 58rem; }
.reloge-form fieldset { border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon-sm);
  padding: .9rem 1.1rem 1.1rem; margin: 0; display: grid; gap: .9rem; }
.reloge-form legend { font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--reloge-primaire); padding: 0 .4rem; }
.reloge-form-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem; }
.reloge-form textarea { min-height: 6rem; resize: vertical; }
.reloge-form-version { font-size: .85rem; color: var(--reloge-encre-douce, #5b6472); margin: 0; }

/* Champ leurre : hors du flux et hors du champ visuel, jamais display:none (trop reconnaissable
   par les robots), et hors tabulation cote HTML pour ne gener aucun lecteur d'ecran. */
.reloge-leurre { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.reloge-voyageur-droits { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1rem 0 .4rem; }
.reloge-voyageur-droits form { margin: 0; }

.reloge-devis { margin: 1.2rem 0; }
.reloge-devis .reloge-total td { border-top: 2px solid var(--reloge-bord); }
.reloge-devis-conditions { margin: .8rem 0 0; padding-left: 1.1rem; }
.reloge-devis-conditions li { margin-bottom: .35rem; }
.reloge-devis-bloc { margin-top: .7rem; }
.reloge-devis-bloc summary { cursor: pointer; font-weight: 600; }
.reloge-montant { text-align: right; white-space: nowrap; }
.reloge-vendeur { border-left: 3px solid var(--reloge-primaire); padding: .1rem 0 .1rem 1rem; margin: 1rem 0; }
.reloge-resa-titre { margin-top: 1.4rem; }

/* ── Carte des pages activees ──────────────────────────────────────────── */
.reloge-carte-recherche { display: grid; gap: 1rem; }
.reloge-carte-filtres { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; align-items: center;
  background: var(--reloge-fond-carte); border: 1px solid var(--reloge-bord);
  border-radius: var(--reloge-rayon); padding: .8rem 1rem; box-shadow: var(--reloge-ombre); max-width: none; }
.reloge-carte-filtres label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--reloge-encre); }
.reloge-carte-filtres select, .reloge-carte-filtres input[type=number] {
  padding: .4rem .5rem; border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon-sm); font: inherit; }
.reloge-carte-filtres input[type=number] { width: 4.5rem; }
.reloge-carte-equipement { font-weight: 500 !important; }
.reloge-carte-compteur { margin-left: auto; color: var(--reloge-gris); font-size: .88rem; }
.reloge-carte-plan { height: 460px; border-radius: var(--reloge-rayon); border: 1px solid var(--reloge-bord);
  box-shadow: var(--reloge-ombre); z-index: 0; }
.reloge-carte-resultats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.reloge-carte-fiche { border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon);
  background: var(--reloge-fond-carte); padding: .9rem 1rem; box-shadow: var(--reloge-ombre); }
.reloge-carte-fiche h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.reloge-carte-fiche p { margin: .15rem 0; color: var(--reloge-gris); font-size: .9rem; }
.reloge-carte-fiche .reloge-bouton { display: inline-block; text-decoration: none; margin-top: .4rem;
  padding: .4rem .8rem; border-radius: var(--reloge-rayon-sm); background: var(--reloge-primaire); color: #fff; font-size: .88rem; }
.reloge-carte-note { color: var(--reloge-gris); font-size: .85rem; }
.leaflet-popup-content a { font-weight: 600; }

/* ── Edition d une page par son proprietaire ───────────────────────────── */
.reloge-equipements { border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon-sm);
  padding: .8rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.reloge-equipements legend { font-weight: 600; padding: 0 .3rem; }

/* Accueil : trois portes cote a cote, une par partie. */
.reloge-portes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}
.reloge-porte {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
.reloge-porte h3 {
    margin: 0;
    font-size: 1.25rem;
}
.reloge-porte p {
    margin: 0;
    flex: 1;
    line-height: 1.55;
}
.reloge-porte__bouton {
    display: inline-block;
    align-self: flex-start;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--reloge-primaire);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.reloge-porte__bouton:hover,
.reloge-porte__bouton:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.reloge-porte__bouton:focus-visible {
    outline: 3px solid var(--reloge-primaire);
    outline-offset: 3px;
}
@media (max-width: 900px) {
    .reloge-portes { grid-template-columns: 1fr; }
}

/* Accueil : heros centre, titre, promesse et barre sur un meme axe. */
.reloge-hero {
    text-align: center;
}
.reloge-hero .wp-block-heading,
.reloge-hero p {
    margin-left: auto;
    margin-right: auto;
}

/* Accueil : la barre de recherche du heros, en ligne facon site de vacances. */
.reloge-hero-recherche .reloge-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.8fr auto;
    gap: 10px;
    align-items: end;
    text-align: left;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.reloge-hero-recherche .reloge-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}
.reloge-hero-recherche .reloge-form input {
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font: inherit;
}
.reloge-hero-recherche .reloge-form button {
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    /* La couleur 1 du theme est un rose (#DB2763) sans rapport avec la charte du site, orange et
       bleu marine : le bouton le plus visible du site jurait avec tous les autres. Il prend la
       primaire du produit, comme chaque bouton d'action. */
    background: var(--reloge-primaire);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.reloge-hero-recherche .reloge-form button:hover { background: var(--reloge-primaire-fonce); }
@media (max-width: 860px) {
    .reloge-hero-recherche .reloge-form { grid-template-columns: 1fr 1fr; }
    .reloge-hero-recherche .reloge-form button { grid-column: 1 / -1; }
}

/* Etiquette d'un champ dont le libelle vivait dans le seul texte indicatif : visible pour les
   lecteurs d'ecran, discrete a l'oeil. */
.reloge-champ-discret {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 2px;
}

/* Un bouton secondaire posait un fond blanc sur un fond blanc : le texte disparaissait.
   Le contour reprend la couleur du texte, jamais celle du fond. */
.reloge-bouton.is-style-outline,
a.reloge-bouton.is-style-outline {
    background: transparent !important;
    color: var(--reloge-primaire, #1f4e79) !important;
    border: 1px solid currentColor !important;
}


/* Prix d'appel d'une fiche logement. */
.reloge-fiche-prix { margin: 8px 0 12px; font-size: 1.15rem; }
.reloge-fiche-prix small { display: block; font-size: 0.8rem; color: #666; font-weight: 400; }

/* Cartes de gestion d'un logement, dans l'espace du proprietaire : meme lecture que sur le site
   public, plus les actions. Un proprietaire a rarement un seul logement. */
.reloge-cartes-biens {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px; list-style: none; margin: 16px 0 24px; padding: 0;
}
.reloge-carte-bien {
    display: flex; flex-direction: column; margin: 0; overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
}
.reloge-carte-bien__image { position: relative; background: #f2f2f2; aspect-ratio: 3 / 2; }
.reloge-carte-bien__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reloge-carte-bien__note {
    position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); font-size: .78rem; font-weight: 600;
}
.reloge-carte-bien__corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.reloge-carte-bien__corps h3 { margin: 0; font-size: 1.05rem; }
.reloge-carte-bien__lieu { margin: 0; font-size: .85rem; color: #555; }
.reloge-carte-bien__numero { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; color: #777; }
.reloge-carte-bien__etat { margin: 2px 0 6px; font-size: .85rem; color: #444; }
.reloge-carte-bien__actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.reloge-carte-bien__actions a {
    padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .15);
    font-size: .85rem; text-decoration: none; color: inherit;
}
.reloge-carte-bien__actions a:hover, .reloge-carte-bien__actions a.est-actif {
    border-color: var(--reloge-primaire, #1f4e79); color: var(--reloge-primaire, #1f4e79);
}
/* Pas de margin-left:auto : des que les actions passaient a la ligne, ce lien se retrouvait
   seul et cale a droite, coupe des autres. La distinction se fait par le fond, pas par la place. */
.reloge-carte-bien__public { background: var(--reloge-fond-doux, #f1f4f7); }
.reloge-details-liens { margin-top: 8px; }
.reloge-liste-simple { list-style: none; padding: 0; margin: 8px 0 0; }
.reloge-liste-simple li { margin-bottom: 6px; }
/* Bandeau du proprietaire sur sa propre page publique. */
.reloge-bandeau-proprietaire {
    margin: 16px 0; padding: 14px 16px; border-radius: 14px;
    background: var(--reloge-fond-doux, #f5f7f6); border: 1px solid rgba(0, 0, 0, .08);
}
.reloge-bandeau-proprietaire p { margin: 0 0 8px; }
.reloge-bandeau-proprietaire p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   RYTHME DE L'INTERFACE, en un seul endroit.

   Les valeurs de bureau sont portees par les blocs eux-memes (attributs Gutenberg), ce qui les
   laisse modifiables dans l'editeur. WordPress ne sait pas declarer un espacement par taille
   d'ecran : ces quelques regles font ce seul travail, et rien d'autre.

   Une gouttiere unique, declinee en trois tailles, s'applique partout : recherche, espace du
   proprietaire, espace du voyageur, pages publiques. Un seul reglage a changer pour tout le site.
   ───────────────────────────────────────────────────────────────────────── */
:root { --reloge-gouttiere: 24px; --reloge-rythme: 20px; }
@media (max-width: 1024px) { :root { --reloge-gouttiere: 20px; --reloge-rythme: 16px; } }
@media (max-width: 600px)  { :root { --reloge-gouttiere: 14px; --reloge-rythme: 12px; } }

/* Ecrans de l'espace : la gouttiere, et un rythme vertical regulier entre les blocs. */
.reloge-zone > .stk-row { padding: var(--reloge-rythme) var(--reloge-gouttiere); }
.reloge-zone + .reloge-zone > .stk-row { padding-top: 0; }

/* Sections publiques : le bloc porte ses valeurs de bureau, on n'ajuste que les petits ecrans. */
@media (max-width: 1024px) {
    .reloge-section .wp-block-group.alignfull {
        padding-top: 32px !important; padding-bottom: 28px !important;
        padding-left: var(--reloge-gouttiere) !important; padding-right: var(--reloge-gouttiere) !important;
    }
}
@media (max-width: 600px) {
    .reloge-section .wp-block-group.alignfull {
        padding-top: 24px !important; padding-bottom: 20px !important;
    }
}

/* ── Recherche unifiee : barre, panneau de filtres, resultats ──────────── */

/* La barre du haut : un champ large pour ce que le visiteur connait, puis periode et
   voyageurs. Sur telephone tout passe en pile, le champ large gardant la premiere place. */
.reloge-barre { background: var(--reloge-fond-carte); border: 1px solid var(--reloge-bord);
    border-radius: var(--reloge-rayon); padding: 1rem; box-shadow: var(--reloge-ombre); }
.reloge-barre__titre { margin: 0 0 .8rem; font-size: 1.1rem; }
/* FLEX ET NON GRILLE, et pourquoi. La grille declarait CINQ colonnes en dur ; l'arrivee du
   champ de lieu en a fait SIX. Le sixieme partait a la ligne tout seul et les cinq autres
   s'ecrasaient : dates tronquees en « jj/mm », bouton coince (constate le 2026-09-07). Une
   liste de colonnes en dur redemande une modification a chaque champ ajoute, et l'oubli ne se
   voit qu'a l'ecran. Le flex, lui, place ce qu'on lui donne : chaque champ declare sa largeur
   ideale et son droit a retrecir, et le retour a la ligne se fait tout seul, a la bonne
   largeur, sans point de rupture a deviner. */
.reloge-barre__champs { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.reloge-barre__champs > * { flex: 1 1 9rem; }
.reloge-barre__champ--large { flex: 2.4 1 16rem; }
.reloge-barre__champ--lieu { flex: 1.6 1 13rem; }
/* Les champs courts ne GRANDISSENT pas (premier chiffre a zero). Sans cela, des que la barre
   revient a la ligne, celui qui se retrouve seul sur la seconde ligne s'etire sur toute la
   largeur : « Voyageurs » occupait un demi-ecran pour accueillir deux chiffres. Ils gardent en
   revanche le droit de retrecir, sinon ils debordent sur telephone. */
.reloge-barre__champ--court { flex: 0 1 7rem; }
/* La periode : arrivee et depart forment UN element de la barre. Ils se replient ensemble ou
   pas du tout, et se partagent la largeur a egalite. Leur base tient les deux champs de date
   cote a cote (deux fois 8rem plus l'espace) : en dessous, c'est le couple entier qui passe a
   la ligne suivante, pas l'un des deux. */
.reloge-barre__periode { display: flex; gap: .7rem; flex: 2 1 17rem; min-width: 0; }
.reloge-barre__periode > .reloge-barre__champ { flex: 1 1 0; min-width: 0; }
.reloge-barre .reloge-barre__valider { flex: 0 0 auto; }
/* min-width:0 partout : dans une grille, un champ garde par defaut sa largeur intrinseque et
   refuse de retrecir. Les champs debordaient donc de l'ecran sur telephone, sans que la page
   elle-meme deborde (mesure du 2026-09-03 : debordement 0, champs coupes a droite). */
/* margin:0 a dessein : le theme pose une marge basse sur les <label>, pas sur les <div>. Le
   champ de lieu etant un <div> (il contient un <details>, qu'un <label> ne peut pas envelopper
   proprement), il se retrouvait desaligne de sept pixels par rapport a ses voisins, alors meme
   que la rangee est alignee par le bas. Une marge basse n'a de toute facon aucun sens dans une
   rangee de champs. */
.reloge-barre__champ { display: grid; gap: .25rem; min-width: 0; margin: 0; font-size: .85rem;
    font-weight: 600; color: var(--reloge-gris); }
.reloge-barre__champ input { width: 100%; min-width: 0; padding: .6rem .7rem;
    border: 1px solid var(--reloge-bord); border-radius: var(--reloge-rayon-sm); font: inherit;
    background: #fff; color: var(--reloge-encre); }
.reloge-barre__champ input:focus-visible { outline: 2px solid var(--reloge-primaire); outline-offset: 1px; }
/* Selecteur double a dessein : le theme peint tout [type="submit"] avec sa couleur de bouton,
   et sa feuille est chargee apres la notre. A specificite egale, c'est lui qui gagnait. */
.reloge-barre .reloge-barre__valider { padding: .65rem 1.4rem; border: 0; border-radius: 999px;
    background: var(--reloge-primaire); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.reloge-barre .reloge-barre__valider:hover { background: var(--reloge-primaire-fonce); }
@media (max-width: 900px) {
    /* Sur petit ecran, le champ large et le bouton prennent toute la ligne : le premier parce
       qu'il porte la question principale, le second parce qu'un bouton d'envoi coince dans une
       demi-largeur se rate au doigt. */
    .reloge-barre__champ--large { flex: 1 1 100%; }
    .reloge-barre .reloge-barre__valider { flex: 1 1 100%; }
}

/* Deux colonnes a partir du bureau : filtres a gauche, resultats a droite. */
.reloge-recherche-corps { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
@media (min-width: 1000px) {
    .reloge-recherche-corps { grid-template-columns: minmax(15rem, 17rem) 1fr; align-items: start; }
    /* Sans panneau de filtres, les resultats prennent toute la largeur. */
    .reloge-recherche-corps--sans-filtres { grid-template-columns: 1fr; }
}

/* Le panneau de filtres. Sur telephone c'est la fenetre laterale du theme, qui glisse depuis
   la droite ; a partir du bureau on la repose en colonne, sans dupliquer le balisage. */
/* La fenetre laterale du theme est masquee et positionnee en absolu tant qu'on ne l'ouvre pas.
   Pour la reposer en colonne sur grand ecran il faut donc defaire display, position et
   transform, avec une specificite superieure a celle du theme, qui charge sa feuille apres
   la notre : d'ou le selecteur ancre sur le conteneur a deux colonnes. */
@media (min-width: 1000px) {
    .reloge-recherche-corps > .ct-panel.reloge-panneau-filtres { display: block; position: static;
        visibility: visible; opacity: 1; transform: none; background: none; inset: auto;
        z-index: auto; pointer-events: auto; }
    .reloge-recherche-corps > .ct-panel.reloge-panneau-filtres .ct-panel-inner { position: static;
        display: block; width: auto; max-width: none; transform: none; box-shadow: none;
        background: none; padding: 0; }
    .reloge-recherche-corps > .ct-panel.reloge-panneau-filtres .ct-panel-actions { display: none; }
    /* display:block aussi sur ces deux niveaux : le theme les met en flex, ce qui reduisait la
       liste de filtres a la largeur de son libelle le plus long au lieu de la colonne. */
    .reloge-recherche-corps > .ct-panel.reloge-panneau-filtres .ct-panel-content,
    .reloge-recherche-corps > .ct-panel.reloge-panneau-filtres .ct-panel-content-inner {
        display: block; width: 100%; padding: 0; overflow: visible; height: auto; }
}

.reloge-filtres { display: grid; gap: 1.4rem; }
.reloge-filtres__bloc h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--reloge-encre); }
.reloge-filtres__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.reloge-filtres__liste a { display: flex; justify-content: space-between; gap: .6rem;
    padding: .35rem .5rem; border-radius: var(--reloge-rayon-sm); text-decoration: none;
    color: var(--reloge-encre); font-size: .9rem; }
.reloge-filtres__liste a:hover { background: var(--reloge-fond-doux); }
.reloge-filtres__liste .est-actif a { background: var(--reloge-primaire); color: #fff; font-weight: 600; }
.reloge-filtres__liste .est-actif .reloge-filtres__nombre { color: rgba(255, 255, 255, .8); }
.reloge-filtres__nombre { color: var(--reloge-gris); font-variant-numeric: tabular-nums; }
.reloge-filtres__liste .est-repliee { display: none; }
.reloge-filtres__liste.est-deployee .est-repliee { display: block; }
.reloge-filtres__plus { margin-top: .3rem; padding: 0; border: 0; background: none;
    color: var(--reloge-primaire); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.reloge-filtres__reset a { color: var(--reloge-primaire); font-size: .85rem; }

/* Bouton d'ouverture du panneau, visible seulement en dessous du bureau. */
.reloge-filtres-bouton { display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .9rem; border: 1px solid var(--reloge-bord); border-radius: 999px;
    text-decoration: none; color: var(--reloge-encre); font-size: .9rem; font-weight: 600;
    background: var(--reloge-fond-carte); }
.reloge-filtres-bouton__compteur { display: inline-grid; place-items: center; min-width: 1.3rem;
    height: 1.3rem; padding: 0 .3rem; border-radius: 999px; background: var(--reloge-primaire);
    color: #fff; font-size: .75rem; }
/* Masquage APRES la declaration : a specificite egale, c'est la derniere regle qui gagne, et
   le bouton restait visible sur grand ecran ou la colonne est deja la. */
@media (min-width: 1000px) { .reloge-filtres-bouton { display: none; } }

/* Resultats. */
.reloge-resultats-entete { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
    justify-content: space-between; margin-bottom: 1rem; }
.reloge-resultats-nombre { margin: 0; font-weight: 600; }
.reloge-resultats-vide { color: var(--reloge-gris); }
/* Le nombre de colonnes vient des reglages, par palier d'appareil : la meme page rend le meme
   nombre de cartes par ligne chez tout le monde, ce qu'une grille en auto-fill ne garantit pas.
   minmax(0, 1fr) et non 1fr : sans lui une carte au contenu large elargit sa colonne et casse
   l'egalite des largeurs. */
.reloge-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem;
    grid-template-columns: repeat(var(--reloge-colonnes-mobile, 2), minmax(0, 1fr)); }
@media (min-width: 700px) {
    .reloge-resultats { grid-template-columns: repeat(var(--reloge-colonnes-tablette, 4), minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .reloge-resultats { grid-template-columns: repeat(var(--reloge-colonnes-bureau, 5), minmax(0, 1fr)); }
}
.reloge-resultat__lien { display: grid; gap: 0; text-decoration: none; color: inherit;
    background: var(--reloge-fond-carte); border: 1px solid var(--reloge-bord);
    border-radius: var(--reloge-rayon); overflow: hidden; height: 100%;
    transition: box-shadow .15s ease, transform .15s ease; }
.reloge-resultat__lien:hover { box-shadow: var(--reloge-ombre); transform: translateY(-1px); }
.reloge-resultat__image { position: relative; display: block; aspect-ratio: var(--reloge-cartes-ratio, 3 / 2); background: var(--reloge-fond-doux); }
.reloge-resultat__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reloge-resultat__situation { position: absolute; left: .5rem; bottom: .5rem; padding: .15rem .5rem;
    border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .7rem; font-weight: 600;
    color: var(--reloge-gris); }
.reloge-resultat__corps { display: grid; gap: .25rem; padding: .8rem .9rem 1rem; }
.reloge-resultat__titre { font-weight: 700; }
.reloge-resultat__lieu, .reloge-resultat__traits { color: var(--reloge-gris); font-size: .85rem; }
.reloge-resultat__prix { margin-top: .2rem; font-weight: 600; font-size: .9rem; }
.reloge-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem;
    margin: 1.4rem 0 0; padding: 0; }
.reloge-pagination a, .reloge-pagination span { display: grid; place-items: center; min-width: 2.2rem;
    height: 2.2rem; padding: 0 .5rem; border-radius: var(--reloge-rayon-sm);
    border: 1px solid var(--reloge-bord); text-decoration: none; color: var(--reloge-encre); }
.reloge-pagination span[aria-current] { background: var(--reloge-primaire); color: #fff;
    border-color: var(--reloge-primaire); font-weight: 600; }
.reloge-resultat__image--vide { display: grid; place-items: center;
    background: repeating-linear-gradient(45deg, #f2f5f8 0 10px, #eef2f6 10px 20px); }
.reloge-resultat__image--vide .reloge-resultat__situation { position: static; }
/* La carte quand la page porte deja son propre panneau de filtres. */
.reloge-carte-recherche--muette .reloge-carte-filtres { display: none; }
/* L'image garde sa proportion, le corps absorbe la hauteur : sans cette repartition, la grille
   etirait la zone image des cartes les plus courtes de leur rangee. */
.reloge-resultat__lien { grid-template-rows: auto 1fr; }

/* ── Carte des resultats ────────────────────────────────────────────────── */
/* Elle vit entre la barre et les resultats, sur toute la largeur : on cherche, on situe,
   on affine, on parcourt. En bas de page elle arrivait apres les cartes qu'elle devait
   justement aider a situer. */
.reloge-zone-carte { margin: 1.4rem 0 0; }
/* En mode plan (hors page de recherche, sur l'accueil), la carte suit un bloc plein
   ecran : elle prend l'espace declare en tete de feuille pour ne pas y etre collee.
   DEUX CLASSES, pas une, et la propriete logique en plus de la physique : WordPress et
   Blocksy posent margin-block-start sur tout enfant du contenu avec des selecteurs qui
   pesent exactement une classe (`:root :where(.is-layout-constrained) > *`, puis
   `:is(.is-layout-constrained) > :where(...)` a 0 px), et le dernier charge l'emportait :
   la carte restait collee au heros (mesure dans le navigateur le 2026-09-09). */
.reloge-zone-carte.reloge-zone-carte--plan {
    margin-top: var(--reloge-carte-plan-espace);
    margin-block-start: var(--reloge-carte-plan-espace);
}
.reloge-zone-carte__plan { height: 380px; border-radius: var(--reloge-rayon);
    border: 1px solid var(--reloge-bord); overflow: hidden; background: var(--reloge-fond-doux); }
.reloge-zone-carte__legende { margin: .5rem 0 0; font-size: .85rem; color: var(--reloge-gris); }
.reloge-zone-carte__hors { opacity: .8; }
@media (max-width: 1024px) { .reloge-zone-carte__plan { height: 300px; } }

/* Pastilles. Pleine et numerotee pour la page affichee, sobre au-dela : sans cette
   distinction, un visiteur ne comprendrait pas pourquoi la carte porte plus de points que
   la liste n'a de cartes. */
.reloge-pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; box-shadow: 0 1px 4px rgba(16, 30, 48, .35);
    transition: transform .12s ease; }
.reloge-pin--page { background: var(--reloge-primaire); color: #fff; border: 2px solid #fff; }
.reloge-pin--hors { width: 16px; height: 16px; background: #fff;
    border: 3px solid var(--reloge-primaire); opacity: .75; }
.reloge-pin--actif { transform: scale(1.25); z-index: 5; }
.reloge-pin--hors.reloge-pin--actif { opacity: 1; }

.reloge-pin-popup .leaflet-popup-content { margin: 0; width: 220px !important; }
.reloge-pin-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--reloge-rayon); overflow: hidden; }
.reloge-pin-encart { display: grid; text-decoration: none; color: var(--reloge-encre); }
.reloge-pin-encart img { width: 100%; height: 120px; object-fit: cover; display: block; }
.reloge-pin-encart__titre { padding: .6rem .7rem 0; font-weight: 700; font-size: .92rem; }
.reloge-pin-encart__lieu { padding: 0 .7rem; color: var(--reloge-gris); font-size: .82rem; }
.reloge-pin-encart__prix { padding: .2rem .7rem .7rem; font-weight: 600; font-size: .85rem; }
.reloge-pin-encart__hors { padding: 0 .7rem .7rem; color: var(--reloge-gris); font-size: .75rem; font-style: italic; }

/* Appairage carte de resultat / marqueur, dans les deux sens. */
.reloge-resultat.est-survole .reloge-resultat__lien { box-shadow: 0 0 0 2px var(--reloge-primaire); }

/* Commandes au-dessus des resultats. */
.reloge-resultats-commandes { display: inline-flex; gap: .5rem; align-items: center; }
.reloge-bascule-carte { display: none; align-items: center; gap: .45rem; padding: .45rem .9rem;
    border: 1px solid var(--reloge-bord); border-radius: 999px; background: var(--reloge-fond-carte);
    color: var(--reloge-encre); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }

/* Telephone : la carte et la liste ne tiennent pas ensemble. Un bouton bascule de l'une a
   l'autre, et la carte occupe alors la hauteur utile de l'ecran. */
@media (max-width: 780px) {
    .reloge-bascule-carte { display: inline-flex; }
    .reloge-zone-carte { display: none; }
    /* Le plan reste visible : il n'y a pas de bascule Liste / Carte a cote de lui. */
    .reloge-zone-carte--plan { display: block; }
    body.reloge-vue-carte .reloge-zone-carte { display: block; margin-top: 1rem; }
    body.reloge-vue-carte .reloge-zone-carte__plan { height: 70vh; }
    body.reloge-vue-carte .reloge-resultats { display: none; }
    body.reloge-vue-carte .reloge-pagination { display: none; }
}
/* Recherche en cours apres un deplacement de la carte : signal discret, pas de sablier. */
.reloge-zone-carte.est-en-cours .reloge-zone-carte__plan { opacity: .82; transition: opacity .15s ease; }
.reloge-zone-carte.est-en-cours .reloge-zone-carte__legende::after {
    content: ' · recherche en cours'; color: var(--reloge-primaire); font-weight: 600; }
.reloge-zone-carte__tout { margin-left: .4rem; padding: 0; border: 0; background: none;
    color: var(--reloge-primaire); font: inherit; font-size: .85rem; font-weight: 600;
    text-decoration: underline; cursor: pointer; }

.reloge-annonces > h2 { margin: 0 0 1rem; font-size: 1.35rem; }

/* ── Galerie de la fiche : grille d'en-tete ─────────────────────────────── */
/* Une grande photo sur la moitie gauche, quatre en 2x2 a droite, dans un rectangle 2:1 aux angles
   arrondis. Le rognage (object-fit: cover) est assume ICI seulement : la grille donne envie, le
   tour montre chaque photo entiere. */
.reloge-photos-grille { position: relative; display: grid; gap: 8px; aspect-ratio: 2 / 1;
    border-radius: 14px; overflow: hidden; margin: 0 0 1.4rem; }
/* minmax(0, 1fr) et non 1fr : une piste 1fr ne descend pas sous le contenu minimal de ce qu'elle
   porte, et une photo portrait dans une petite case forcait sa rangee a 465 px, la grande case
   montait a 673 px pour une grille de 606 (mesure du 2026-09-03). */
.reloge-photos-grille--5 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.reloge-photos-grille--5 .reloge-photos-grille__case:first-child { grid-row: 1 / 3; }
.reloge-photos-grille--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.reloge-photos-grille--3 .reloge-photos-grille__case:first-child { grid-row: 1 / 3; }
.reloge-photos-grille--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reloge-photos-grille--1 { grid-template-columns: 1fr; aspect-ratio: 16 / 9; }
/* clip-path plutot qu'overflow : le theme impose overflow:visible !important a tout lien. */
.reloge-photos-grille__case { position: relative; display: block; min-width: 0; min-height: 0;
    clip-path: inset(0); background: var(--reloge-fond-doux); }
.reloge-photos-grille__case img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: filter .15s ease; }
.reloge-photos-grille__case:hover img { filter: brightness(.92); }
.reloge-photos-grille__case:focus-visible { outline: 3px solid var(--reloge-primaire); outline-offset: -3px; }
.reloge-photos-grille__nature { position: absolute; left: .7rem; bottom: .7rem; padding: .2rem .6rem;
    border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .75rem; font-weight: 600;
    color: var(--reloge-gris); }
.reloge-photos-grille__toutes { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex;
    align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 8px; border: 1px solid #222;
    background: #fff; color: #222; font-size: .85rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.reloge-photos-grille__toutes:hover { background: #f5f5f5; }
.reloge-photos-grille__nombre { color: var(--reloge-gris); font-weight: 500; }
/* Telephone : une seule grande photo, defilement horizontal des suivantes. */
@media (max-width: 780px) {
    .reloge-photos-grille, .reloge-photos-grille--5, .reloge-photos-grille--3, .reloge-photos-grille--2 {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 4 / 3;
        gap: 0; border-radius: 0;
        /* Bord a bord quel que soit l'emboitement : la fiche ajoute ses propres retraits a la
           gouttiere, une marge negative fixe ne les rattrapait pas (mesure : 37 px au lieu de 14). */
        width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
    /* Aucune barre de defilement visible, dans les deux axes. Sinon la barre horizontale du
       carrousel rognait la hauteur, la case debordait, une barre verticale apparaissait et
       rognait la largeur : la premiere photo faisait 313 px sur 343 (mesure, 2026-09-03). */
    .reloge-photos-grille { overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
    .reloge-photos-grille::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .reloge-photos-grille .reloge-photos-grille__case { flex: 0 0 100%; align-self: stretch; scroll-snap-align: start; grid-row: auto; }
    .reloge-photos-grille__toutes { right: .8rem; bottom: .8rem; }
}

/* ── Galerie de la fiche : le tour ──────────────────────────────────────── */
/* Un <dialog> plein ecran, fond blanc, entete collante. Chaque photo est ENTIERE : jamais de
   rognage ici, les rangees se composent d'apres le format de chaque cliche. */
.reloge-tour { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
    padding: 0; border: 0; background: #fff; color: var(--reloge-encre); overflow-y: auto; }
.reloge-tour::backdrop { background: rgba(0, 0, 0, .55); }
/* Sans JavaScript : l'ancre ouvre le meme contenu, en bloc au-dessus de la page. */
.reloge-tour:target { display: block; position: fixed; inset: 0; z-index: 1000; }
.reloge-tour__entete { position: sticky; top: 0; z-index: 2; display: grid;
    grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .8rem;
    padding: .8rem var(--reloge-gouttiere, 24px); background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--reloge-bord); backdrop-filter: blur(6px); }
.reloge-tour__fermer { display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
    border-radius: 999px; border: 0; background: none; cursor: pointer; color: var(--reloge-encre); }
.reloge-tour__fermer:hover { background: var(--reloge-fond-doux); }
.reloge-tour__titre { margin: 0; font-size: 1rem; text-align: center; }
.reloge-tour__compte { font-size: .85rem; color: var(--reloge-gris); }
.reloge-tour__zones { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
    padding: 1.4rem var(--reloge-gouttiere, 24px) .4rem; }
.reloge-tour__zones a { display: grid; gap: .35rem; justify-items: center; width: 7.5rem;
    text-decoration: none; color: var(--reloge-encre); font-size: .8rem; text-align: center; }
.reloge-tour__zones img { width: 7.5rem; height: 5rem; object-fit: cover; border-radius: 8px; display: block; }
.reloge-tour__zones a:hover img { filter: brightness(.9); }
.reloge-tour__corps { max-width: 1120px; margin: 0 auto; padding: 1rem var(--reloge-gouttiere, 24px) 4rem; }
.reloge-tour__zone { display: grid; gap: 1rem; padding: 1.6rem 0; border-top: 1px solid var(--reloge-bord); }
.reloge-tour__zone:first-child { border-top: 0; }
.reloge-tour__zone-tete h3 { margin: 0; font-size: 1.35rem; }
.reloge-tour__zone-tete p { margin: .3rem 0 0; color: var(--reloge-gris); font-size: .85rem; }
.reloge-tour__mosaique { display: grid; gap: 10px; }
.reloge-tour__photo { margin: 0; }
.reloge-tour__photo img { width: 100%; height: auto; display: block; border-radius: 10px; }
.reloge-tour__photo figcaption { margin: .35rem 0 0; font-size: .82rem; color: var(--reloge-gris); }
.reloge-tour__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.reloge-tour__photo--seul { width: 50%; }
/* A partir du bureau, le titre de la zone tient la colonne de gauche, ses photos la droite. */
@media (min-width: 1000px) {
    .reloge-tour__zone { grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 2rem; align-items: start; }
    .reloge-tour__zone-tete { position: sticky; top: 4.2rem; }
    .reloge-tour__zone-tete:empty { display: none; }
    .reloge-tour__zone--sans-titre { grid-template-columns: 1fr; }
    .reloge-tour__zone--sans-titre .reloge-tour__mosaique { max-width: 66%; margin-left: auto; }
}
@media (max-width: 600px) {
    .reloge-tour__paire { grid-template-columns: 1fr; }
    .reloge-tour__photo--seul { width: 100%; }
    .reloge-tour__zones a { width: 5.6rem; }
    .reloge-tour__zones img { width: 5.6rem; height: 3.8rem; }
}
/* Les photos de l'ecran proprietaire : la zone se lit avant la legende. */
.reloge-photo-zone { display: inline-block; padding: .1rem .5rem; border-radius: 999px;
    background: var(--reloge-fond-doux); font-size: .75rem; font-weight: 600; color: var(--reloge-primaire); }
/* Le tour ouvert gele le defilement de la page derriere lui. */
html.reloge-tour-ouvert { overflow: hidden; }
.reloge-photos-grille__attribution { margin: -.8rem 0 1.4rem; font-size: .75rem; color: var(--reloge-gris); }

/* Visuel compose (image par defaut) : entier, jamais rogne ; le fond porte la couleur de ses bords,
   posee en ligne par le PHP qui l a lue sur l image. Les photos, elles, restent rognees au ratio. */
.reloge-resultat__image--contenir img, .reloge-photos-grille__case--contenir img { object-fit: contain; }

/* ── Mise en avant ───────────────────────────────────────────────────────── */
/* Un bandeau SEPARE des resultats, annonce comme tel : la loi demande qu'une publicite soit
   identifiable, et le classement des resultats ne doit jamais se vendre. Le libelle est un
   reglage, la mention qui le suit ne l'est pas : elle dit ce que le visiteur doit savoir. */
.reloge-avant { margin: 0 0 1.4rem; padding: 1rem; border: 1px solid var(--reloge-bord);
    border-radius: var(--reloge-rayon); background: var(--reloge-fond-doux); }
.reloge-avant--pagination { margin: 1.4rem 0 0; }
.reloge-avant__titre { margin: 0 0 .8rem; font-size: .85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--reloge-gris); }
.reloge-avant__mention { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 400;
    text-transform: none; letter-spacing: 0; }

/* ── Carte de situation d'un logement, sur sa fiche ────────────────────── */

/* Le conteneur porte sa hauteur AVANT que Leaflet ne s'initialise : sans elle, la carte se
   mesure a zero et ne s'affiche jamais. C'est le piege classique de Leaflet insere dans une
   page, et il ne se voit qu'a l'execution. */
.reloge-carte-bien { margin: 2rem 0; }
.reloge-carte-bien h2 { margin: 0 0 .6rem; }
.reloge-carte-bien__plan {
    position: relative;
    height: clamp(16rem, 42vw, 26rem);
    border-radius: var(--reloge-rayon);
    overflow: hidden;
    background: var(--reloge-fond-carte, #f4f6f8);
}
/* Le repli sans JavaScript : la vue du secteur, deja en mediatheque, occupe le meme cadre. */
.reloge-carte-bien__repli { width: 100%; height: 100%; object-fit: cover; display: block; }
.reloge-carte-bien__mention { margin: .5rem 0 0; font-size: .85rem; color: var(--reloge-gris); }
.reloge-carte-bien__autour { margin: .35rem 0 0; font-size: .9rem; }
/* Les tuiles de Leaflet montent haut dans la pile ; on borne la carte pour qu'elle ne passe
   jamais devant le panneau de lieu ni devant l'entete du theme. */
.reloge-carte-bien__plan .leaflet-pane,
.reloge-carte-bien__plan .leaflet-control { z-index: auto; }