/* site.css — Habitat Urbain : composants du site public.
   Toutes les valeurs de design (couleurs, espacements, rayons, ombres, durées,
   typographie) viennent de assets/css/tokens.css — aucune valeur en dur ici. */

body{ line-height:var(--hu-leading); }
/* Cormorant Garamond aux grands corps seulement : son dessin fin et son petit
   œil le rendent fragile en sous-titre. h3/h4 passent donc en Jost, qui tient
   mieux les petites tailles. Approche légèrement positive : un garamond se
   desserre, contrairement à la serif contemporaine qu'il remplace. */
h1,h2{ font-family:var(--hu-font-serif); font-weight:600; letter-spacing:.005em; color:var(--hu-primary); }
h3,h4{ font-family:var(--hu-font-sans); font-weight:600; letter-spacing:0; }
.hu-mono{ font-family:var(--hu-font-mono); }
.hu-muted{ color:var(--hu-muted); }
a{ text-decoration:none; transition:color var(--hu-transition); }
.eyebrow{ font-family:var(--hu-font-mono); font-size:var(--hu-text-xs); letter-spacing:var(--hu-tracking-wider); text-transform:uppercase; color:var(--hu-muted); font-weight:600; }

/* ── topline + nav ───────────────────────────────────────────────────
   Les accès aux espaces en ligne sont la porte d'entrée des clients déjà
   sous mandat : ils apparaissent sur toutes les pages, en boutons à taille
   de texte pleine plutôt qu'en liens minuscules. Compacts en hauteur pour
   ne pas voler la vedette à la navigation juste en dessous. */
.hu-topline{ background:var(--hu-bg-alt); border-bottom:1px solid var(--hu-line); }
.hu-topline .hu-topline-btn{ min-height:38px; padding:var(--hu-space-2) var(--hu-space-4); background:var(--hu-surface); }
.hu-topline .hu-topline-btn i{ font-size:1.05em; color:var(--hu-accent); transition:color var(--hu-btn-dur) var(--hu-ease); }
.hu-topline .hu-topline-btn:hover i{ color:var(--hu-accent-hover); }
@media (max-width:575.98px){
  .hu-topline .container{ justify-content:center !important; }
  .hu-topline-btn{ flex:1 1 100%; }
}

.hu-navbar{ background:var(--hu-bg); border-bottom:1px solid var(--hu-line); padding:var(--hu-space-3) 0; z-index:1030; }
.hu-wordmark{ color:var(--hu-ink); }
.hu-wordmark b{ font-family:var(--hu-font-serif); font-weight:600; font-size:1.45rem; }
.hu-wordmark small{ font-family:var(--hu-font-mono); font-size:.6rem; letter-spacing:.13em; color:var(--hu-primary); }
.hu-navbar .nav-link{ color:var(--hu-ink); font-weight:500; border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color var(--hu-transition), color var(--hu-transition); }
.hu-navbar .nav-link:hover, .hu-navbar .nav-link.active{ color:var(--hu-ink); border-color:var(--hu-accent); }
.hu-nav-sep{ width:1px; height:22px; background:var(--hu-line); align-self:center; }
@media (max-width:991.98px){
  .hu-nav-sep{ display:none; }
}
/* ── boutons ──────────────────────────────────────────────────────────
   Trois formes et trois seulement : un plein bleu nuit pour l'action
   principale, un contour fin pour le reste, un lien fléché pour ce qui n'est
   qu'un passage. Aucune capitale, graisse 500, approche à peine ouverte. */
.btn-hug-primary,
.btn-hug-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--hu-space-2);
  font-family:var(--hu-font-sans); font-size:var(--hu-btn-size); font-weight:var(--hu-btn-weight);
  letter-spacing:var(--hu-btn-tracking); line-height:1.2; text-transform:none; text-decoration:none;
  padding:var(--hu-btn-py) var(--hu-btn-px); min-height:var(--hu-btn-height);
  border:1px solid transparent; border-radius:var(--hu-radius-sm); cursor:pointer;
  transition:background-color var(--hu-btn-dur) var(--hu-ease),
             border-color var(--hu-btn-dur) var(--hu-ease),
             color var(--hu-btn-dur) var(--hu-ease),
             box-shadow var(--hu-btn-dur) var(--hu-ease),
             transform var(--hu-btn-dur) var(--hu-ease);
}

/* Primaire — plein bleu nuit */
.btn-hug-primary{ background:var(--hu-primary); border-color:var(--hu-primary); color:var(--hu-on-primary); box-shadow:var(--hu-shadow-xs); }
.btn-hug-primary:hover{ background:var(--hu-primary-hover); border-color:var(--hu-primary-hover); color:var(--hu-on-primary); box-shadow:var(--hu-shadow-sm); }
.btn-hug-primary:active{ background:var(--hu-navy-900); border-color:var(--hu-navy-900); transform:translateY(1px); box-shadow:none; }

/* Secondaire — contour fin */
.btn-hug-outline{ background:transparent; border-color:var(--hu-line-strong); color:var(--hu-primary); }
.btn-hug-outline:hover{ border-color:var(--hu-primary); color:var(--hu-primary); background:rgb(var(--hu-rgb-navy) / .045); }
.btn-hug-outline:active{ transform:translateY(1px); background:rgb(var(--hu-rgb-navy) / .075); }

/* Lien fléché — la flèche est en ::after, elle glisse au survol */
.btn-hug-link{
  display:inline-flex; align-items:center; gap:var(--hu-space-2);
  font-family:var(--hu-font-sans); font-size:var(--hu-btn-size); font-weight:var(--hu-btn-weight);
  letter-spacing:var(--hu-btn-tracking); line-height:1.2; text-decoration:none; text-transform:none;
  background:none; border:0; padding:0; cursor:pointer; color:var(--hu-accent);
  transition:color var(--hu-btn-dur) var(--hu-ease), gap var(--hu-btn-dur) var(--hu-ease);
}
.btn-hug-link::after{
  content:"\2192"; display:inline-block;
  transition:transform var(--hu-btn-dur) var(--hu-ease);
}
.btn-hug-link:hover{ color:var(--hu-accent-hover); }
.btn-hug-link:hover::after{ transform:translateX(5px); }

/* Focus visible — anneau décalé, jamais l'outline navigateur par défaut */
.btn-hug-primary:focus-visible,
.btn-hug-outline:focus-visible,
.btn-hug-link:focus-visible{
  outline:2px solid var(--hu-primary); outline-offset:3px; border-radius:var(--hu-radius-sm);
}

/* Variantes de taille et de largeur */
.btn-hug-sm{ min-height:var(--hu-btn-height-sm); padding:var(--hu-btn-py-sm) var(--hu-btn-px-sm); font-size:var(--hu-text-sm); }
.btn-hug-block{ width:100%; }

/* Sur fond sombre, le primaire s'inverse (un bleu nuit sur bleu nuit ne se
   voit pas), le contour et le lien s'éclaircissent, l'anneau aussi. */
.hu-presta-band .btn-hug-primary,
.hu-on-dark .btn-hug-primary{ background:var(--hu-on-inverse); border-color:var(--hu-on-inverse); color:var(--hu-primary); }
.hu-presta-band .btn-hug-primary:hover,
.hu-on-dark .btn-hug-primary:hover{ background:var(--hu-stone-200); border-color:var(--hu-stone-200); color:var(--hu-primary); }
.hu-presta-band .btn-hug-primary:active,
.hu-on-dark .btn-hug-primary:active{ background:var(--hu-stone-300); border-color:var(--hu-stone-300); color:var(--hu-primary); }

.hu-presta-band .btn-hug-outline,
.hu-on-dark .btn-hug-outline,
.hu-hero-art .btn-hug-outline{ border-color:var(--hu-line-inverse); color:var(--hu-on-inverse); }
.hu-presta-band .btn-hug-outline:hover,
.hu-on-dark .btn-hug-outline:hover{ border-color:var(--hu-on-inverse); color:var(--hu-on-inverse); background:rgb(var(--hu-rgb-stone) / .08); }

.hu-presta-band .btn-hug-link,
.hu-on-dark .btn-hug-link{ color:var(--hu-accent-soft); }
.hu-presta-band .btn-hug-link:hover,
.hu-on-dark .btn-hug-link:hover{ color:var(--hu-on-inverse); }

.hu-presta-band .btn-hug-primary:focus-visible,
.hu-presta-band .btn-hug-outline:focus-visible,
.hu-presta-band .btn-hug-link:focus-visible,
.hu-on-dark .btn-hug-primary:focus-visible,
.hu-on-dark .btn-hug-outline:focus-visible,
.hu-on-dark .btn-hug-link:focus-visible{ outline-color:var(--hu-accent-soft); }

/* Désactivé */
.btn-hug-primary:disabled, .btn-hug-outline:disabled,
.btn-hug-primary[aria-disabled="true"], .btn-hug-outline[aria-disabled="true"]{
  opacity:.5; pointer-events:none;
}

/* Boutons Bootstrap du back-office alignés sur les mêmes formes */
.btn-dark, .btn-outline-dark, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-light{
  --bs-btn-font-weight:var(--hu-btn-weight);
  --bs-btn-border-radius:var(--hu-radius-sm);
  letter-spacing:var(--hu-btn-tracking); text-transform:none;
}
.btn-dark{
  --bs-btn-bg:var(--hu-primary); --bs-btn-border-color:var(--hu-primary); --bs-btn-color:var(--hu-on-primary);
  --bs-btn-hover-bg:var(--hu-primary-hover); --bs-btn-hover-border-color:var(--hu-primary-hover); --bs-btn-hover-color:var(--hu-on-primary);
  --bs-btn-active-bg:var(--hu-navy-900); --bs-btn-active-border-color:var(--hu-navy-900);
}
.btn-outline-dark, .btn-outline-secondary{
  --bs-btn-color:var(--hu-primary); --bs-btn-border-color:var(--hu-line-strong);
  --bs-btn-hover-bg:var(--hu-primary); --bs-btn-hover-border-color:var(--hu-primary); --bs-btn-hover-color:var(--hu-on-primary);
  --bs-btn-active-bg:var(--hu-navy-900); --bs-btn-active-border-color:var(--hu-navy-900);
}

/* ── hero accueil ──────────────────────────────────────────────────────
   Le bien à la une est habillé par le texte plutôt que posé dans une colonne
   à part : en deux colonnes, la photo (paysage, donc courte) laissait un
   grand vide à sa droite dès que l'argumentaire s'allongeait. Elle flotte
   maintenant à droite, le titre passe pleine largeur au-dessus et les
   arguments coulent à gauche puis sous la photo. */
.hu-hero{ padding:var(--hu-space-8) 0 var(--hu-space-2); }
.hu-hero-titre{ font-size:var(--hu-text-3xl); max-width:22ch; margin-bottom:var(--hu-space-6); }
.hu-hero-highlight{ background:var(--hu-primary); color:var(--hu-on-primary); font-size:.55em; padding:.15em .35em; border-radius:var(--hu-radius-xs); box-decoration-break:clone; -webkit-box-decoration-break:clone; }

.hu-hero-list{ list-style:none; margin:0; padding:0; }
.hu-hero-lead{ color:var(--hu-primary); }
.hu-hero-list > li{ position:relative; padding-left:28px; margin-bottom:var(--hu-space-5); line-height:var(--hu-leading-snug); }
.hu-hero-list > li:last-child{ margin-bottom:0; }
.hu-hero-list > li::before{
  content:""; position:absolute; left:0; top:.28em; width:17px; height:17px;
  background-color:var(--hu-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.64 3.65a.75.75 0 0 1 .07 1.06l-6.5 7.25a.75.75 0 0 1-1.1.04l-3.5-3.5a.75.75 0 1 1 1.06-1.06l2.93 2.93 5.98-6.67a.75.75 0 0 1 1.06-.05Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.64 3.65a.75.75 0 0 1 .07 1.06l-6.5 7.25a.75.75 0 0 1-1.1.04l-3.5-3.5a.75.75 0 1 1 1.06-1.06l2.93 2.93 5.98-6.67a.75.75 0 0 1 1.06-.05Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hu-hero-actions{ clear:both; padding-top:var(--hu-space-6); }

/* C'est la figure qui flotte, pas la photo : elle porte aussi son intitulé. */
.hu-hero-une{ float:right; width:min(44%, 460px); margin:0 0 var(--hu-space-5) var(--hu-space-7); }
.hu-hero-art{ position:relative; display:block; width:100%; border-radius:var(--hu-radius-sm); overflow:hidden; border:1px solid var(--hu-line); box-shadow:var(--hu-shadow-md); aspect-ratio:4/3; background:var(--hu-surface-2); }
@media (max-width:767.98px){
  .hu-hero-une{ float:none; width:100%; margin:0 0 var(--hu-space-5); }
  .hu-hero-titre{ max-width:none; }
}
.hu-hero-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.hu-hero-art .hu-status{ position:absolute; top:var(--hu-space-4); left:var(--hu-space-4); z-index:2; }
.hu-badge-une{ position:absolute; top:var(--hu-space-4); right:var(--hu-space-4); z-index:2; background:#d92d20; color:#fff; font-family:var(--hu-font-mono); font-size:var(--hu-text-2xs); letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:5px var(--hu-space-3); border-radius:var(--hu-radius-xs); }
.hu-hero-art .cap{ position:absolute; left:0; right:0; bottom:0; padding:var(--hu-space-4) var(--hu-space-5); background:var(--hu-scrim); color:var(--hu-on-inverse); display:flex; justify-content:space-between; align-items:flex-end; z-index:2; }
.hu-hero-art .cap .t{ font-family:var(--hu-font-serif); font-size:var(--hu-text-lg); font-weight:600; }
.hu-hero-art .cap .p{ font-family:var(--hu-font-mono); font-weight:600; }

/* Galerie photo du bien à la une : les images défilent, une seule visible à la fois. */
.hu-hero-photos{ position:relative; width:100%; height:100%; }
.hu-hero-photos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s ease; }
.hu-hero-photos img.active{ opacity:1; }
.hu-hero-photos-nav{ position:absolute; left:0; right:0; bottom:var(--hu-space-4); z-index:3; display:flex; justify-content:center; gap:6px; }
.hu-hero-photos-nav span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); }
.hu-hero-photos-nav span.active{ background:#fff; }
.hu-hero-photos-prev, .hu-hero-photos-next{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:32px; height:32px; border:0; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity var(--hu-transition); }
.hu-hero-art:hover .hu-hero-photos-prev, .hu-hero-art:hover .hu-hero-photos-next{ opacity:1; }
.hu-hero-photos-prev{ left:var(--hu-space-3); }
.hu-hero-photos-next{ right:var(--hu-space-3); }

/* ── carte « verre dépoli » ────────────────────────────────────────────
   Composant unique posé sur les deux fonds existants : même rayon, même
   flou, seule la teinte (--hu-glass-dark-* / --hu-glass-light-*) change.
   Le fond rgba reste visible même sans support de backdrop-filter (Firefox
   Android, vieux WebKit) : la carte garde son contraste, seul le flou
   disparaît. */
.hu-glass{
  border-radius:var(--hu-glass-radius);
  border:1px solid transparent;
  padding:var(--hu-glass-pad);
  backdrop-filter:blur(var(--hu-glass-blur));
  -webkit-backdrop-filter:blur(var(--hu-glass-blur));
}
@media (max-width:767.98px){
  .hu-glass{ padding:var(--hu-glass-pad-sm); }
}
.hu-glass--dark{ background:var(--hu-glass-dark-bg); border-color:var(--hu-glass-dark-border); box-shadow:var(--hu-glass-dark-shadow); }
.hu-glass--light{ background:var(--hu-glass-light-bg); border-color:var(--hu-glass-light-border); box-shadow:var(--hu-glass-light-shadow); }
/* Bulle pleine, crème comme le pied de page — posée sur un fond de section qui, lui, reste bleu nuit. */
.hu-glass--cream{ background:var(--hu-bg-alt); border-color:var(--hu-line); box-shadow:var(--hu-shadow-lg); backdrop-filter:none; -webkit-backdrop-filter:none; }

/* ── chiffres clés ──────────────────────────────────────────────────── */
.hu-stats{ margin-top:var(--hu-space-7); }
.hu-stats .hu-glass{ padding-top:calc(var(--hu-glass-pad) / 2); padding-bottom:calc(var(--hu-glass-pad) / 2); }
.hu-stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); }
.hu-stats-grid > div{ padding:18px var(--hu-space-5); text-align:center; border-right:1px solid var(--hu-glass-divider); }
.hu-stats-grid > div:last-child{ border-right:none; }
.hu-stats-grid .n{
  display:block; font-family:var(--hu-font-serif); font-weight:600; font-size:2.2rem; color:var(--hu-accent);
  font-variant-numeric:lining-nums tabular-nums;
}
.hu-stats-grid .l{ display:block; margin-top:6px; font-size:.9rem; color:var(--hu-muted); }
@media (max-width:899.98px){
  .hu-stats-grid{ grid-template-columns:1fr 1fr; }
  .hu-stats-grid > div:nth-child(2n){ border-right:none; }
  .hu-stats-grid > div:nth-child(-n+2){ border-bottom:1px solid var(--hu-glass-divider); }
}
@media (max-width:479.98px){
  .hu-stats-grid{ grid-template-columns:1fr; }
  .hu-stats-grid > div{ border-right:none; border-bottom:1px solid var(--hu-glass-divider); }
  .hu-stats-grid > div:last-child{ border-bottom:none; }
}

/* ── cartes biens ──────────────────────────────────────────────────── */
.hu-card-bien{ background:var(--hu-surface); border:1px solid var(--hu-line); border-radius:var(--hu-radius-sm); overflow:hidden; box-shadow:var(--hu-shadow-xs); height:100%; display:flex; flex-direction:column; transition:box-shadow var(--hu-transition), border-color var(--hu-transition); }
.hu-card-bien:hover{ box-shadow:var(--hu-shadow-md); border-color:var(--hu-line-strong); }
.hu-card-bien .art{ position:relative; aspect-ratio:4/3; background:var(--hu-surface-2); }
.hu-card-bien .art img{ width:100%; height:100%; object-fit:cover; display:block; }
.hu-status{ font-family:var(--hu-font-mono); font-size:var(--hu-text-2xs); letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:5px var(--hu-space-3); border-radius:var(--hu-radius-xs); display:inline-block; }
.hu-status-louer{ background:var(--hu-status-louer-bg); color:var(--hu-status-louer-ink); }
.hu-status-vente{ background:var(--hu-status-vente-bg); color:var(--hu-status-vente-ink); }
.hu-status-sous_offre{ background:var(--hu-status-offre-bg); color:var(--hu-status-offre-ink); }
.hu-status-loue{ background:var(--hu-status-loue-bg); color:var(--hu-status-loue-ink); }
.hu-status-vendu{ background:var(--hu-status-vendu-bg); color:var(--hu-status-vendu-ink); }
.hu-card-bien .art .hu-status{ position:absolute; top:var(--hu-space-3); left:var(--hu-space-3); }
.hu-card-bien .body{ padding:var(--hu-space-4) var(--hu-space-4) var(--hu-space-5); display:flex; flex-direction:column; gap:var(--hu-space-2); flex:1; }
.hu-card-bien h3{ font-size:1.02rem; margin:0; }
.hu-specs{ display:flex; gap:var(--hu-space-2); font-family:var(--hu-font-mono); font-size:.75rem; color:var(--hu-muted); flex-wrap:nowrap; white-space:nowrap; }
.hu-specs span{ display:inline-flex; align-items:center; gap:3px; }
.hu-specs i{ color:var(--hu-primary); font-size:.85em; }
.hu-price-row{ margin-top:auto; padding-top:var(--hu-space-1); border-top:1px solid var(--hu-line); display:flex; justify-content:space-between; align-items:baseline; line-height:1.1; }
.hu-price{ font-family:var(--hu-font-serif); font-weight:600; font-size:1rem; color:var(--hu-accent); }
.hu-price.off{ color:var(--hu-muted); font-size:var(--hu-text-sm); }

.hu-filters .btn{ font-family:var(--hu-font-mono); font-size:var(--hu-text-xs); letter-spacing:var(--hu-tracking-wide); text-transform:uppercase; border-radius:var(--hu-radius-sm); border-color:var(--hu-line); color:var(--hu-muted); }
.hu-filters .btn.active{ background:var(--hu-primary); color:var(--hu-on-primary); border-color:var(--hu-primary); }

/* Page liste "Nos prestations" : bulles à droite/gauche plutôt que des
   blocs bordurés à la suite — même famille visuelle que les cartes verre. */
.hu-presta-liste-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--hu-space-5); }
@media (max-width:767.98px){
  .hu-presta-liste-grid{ grid-template-columns:1fr; }
}
.hu-presta-liste-item{
  display:block; padding:var(--hu-space-6) var(--hu-space-5);
  background:var(--hu-surface); border:1px solid var(--hu-line); border-radius:var(--hu-glass-radius);
  box-shadow:var(--hu-shadow-sm); transition:box-shadow var(--hu-transition), border-color var(--hu-transition);
}
.hu-presta-liste-item:hover{ box-shadow:var(--hu-shadow-md); border-color:var(--hu-line-strong); }

/* ── prestations ───────────────────────────────────────────────────── */
.hu-presta-band{ background:var(--hu-inverse-bg); color:var(--hu-on-inverse); }

.hu-presta-card{ display:grid; grid-template-columns:minmax(260px, 1fr) 2fr; gap:var(--hu-glass-gap); align-items:center; color:var(--hu-ink); }
@media (max-width:899.98px){
  .hu-presta-card{ grid-template-columns:1fr; }
}

.hu-presta-title{ margin:var(--hu-space-2) 0 var(--hu-space-3); font-size:var(--hu-text-xl); }
.hu-presta-lead{ margin:0; max-width:44ch; color:var(--hu-muted); line-height:var(--hu-leading-snug); }

.hu-presta-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--hu-glass-gap) var(--hu-space-6); }
@media (max-width:559.98px){
  .hu-presta-grid{ grid-template-columns:1fr; }
}
.hu-presta-item{ text-align:center; }
.hu-presta-icon{ width:26px; height:26px; margin:0 auto var(--hu-space-4); color:var(--hu-accent); }
.hu-presta-item h3{ margin:0 0 var(--hu-space-2); color:var(--hu-ink); font-size:var(--hu-text-md); }
.hu-presta-item p{ margin:0 auto; max-width:36ch; color:var(--hu-muted); }
.hu-presta-item a{ margin-top:var(--hu-space-3); }
.hu-presta-card .btn-hug-link{ color:var(--hu-accent); }
.hu-presta-card .btn-hug-link:hover{ color:var(--hu-accent-hover); }
.hu-presta-card .btn-hug-link:focus-visible{ outline-color:var(--hu-accent); }

/* ── contenu prestation : rythme, titres, listes ──────────────────────
   En-tête de page : le titre doit dominer franchement les h2 du corps, qui
   portent un filet bronze et attiraient l'œil avant lui. D'où le saut à
   l'échelle du hero (text-3xl), un h2 ramené sous 1,6 rem, et un chapeau en
   garamond italique qui pose le ton sans concurrencer le titre. */
.hu-page-head{ margin-bottom:var(--hu-space-7); padding-bottom:var(--hu-space-5); border-bottom:1px solid var(--hu-line); }
.hu-page-head h1{ font-size:var(--hu-text-3xl); line-height:1.05; margin:0 0 var(--hu-space-4); }
.hu-page-accroche{ font-family:var(--hu-font-serif); font-style:italic; font-size:var(--hu-text-lg);
  line-height:var(--hu-leading-snug); color:var(--hu-muted); max-width:56ch; margin:0; }

.hu-presta-h2, .hu-article-body h2{ font-family:var(--hu-font-serif); font-size:1.55rem; line-height:var(--hu-leading-tight); border-left:4px solid var(--hu-accent); padding-left:var(--hu-space-3); margin-bottom:var(--hu-space-4); }
.hu-article-body h2{ margin-top:var(--hu-space-6); font-size:1.2rem; }
.hu-article-body h2:first-child{ margin-top:0; }

/* Chaque section devient sa propre bulle (même famille que les cartes verre
   du reste du site) plutôt qu'un bloc de texte continu séparé par un filet. */
.hu-presta-bloc{
  margin-top:var(--hu-space-5); padding:var(--hu-space-6);
  background:var(--hu-surface); border:1px solid var(--hu-line); border-radius:var(--hu-glass-radius);
  box-shadow:var(--hu-shadow-sm);
}
.hu-presta-bloc:first-of-type{ margin-top:0; }
.hu-presta-bloc.hu-card{ background:var(--hu-bg-alt); }

/* Rangée de bulles côte à côte (ex. les 3 courtes étapes de "Mise en location",
   ou deux bulles associées comme "Gestion quotidienne" + "Comptes rendus"). */
.hu-presta-bloc-ligne{ margin-top:var(--hu-space-5); display:grid; gap:var(--hu-space-5); }
.hu-presta-bloc-ligne--2{ grid-template-columns:repeat(2, 1fr); }
.hu-presta-bloc-ligne--3{ grid-template-columns:repeat(3, 1fr); }
.hu-presta-bloc-ligne:first-of-type{ margin-top:0; }
.hu-presta-bloc-ligne .hu-presta-bloc{ margin-top:0; }
/* Hauteur de titre réservée sur 2 lignes : le texte démarre au même niveau
   dans les 3 bulles, que le titre tienne sur une ou deux lignes. */
.hu-presta-bloc-ligne > .hu-presta-bloc > .hu-presta-h2{ min-height:3.9rem; display:flex; align-items:center; }

/* Icône avant la barre dorée : icône et titre côte à côte, plutôt que
   l'icône posée au-dessus. */
.hu-presta-bloc-head{ display:flex; align-items:center; gap:var(--hu-space-3); margin-bottom:var(--hu-space-4); }
.hu-presta-bloc-head .hu-presta-h2{ margin-bottom:0; }
.hu-presta-bloc-icon{ flex:none; width:24px; height:24px; color:var(--hu-accent); }
.hu-presta-bloc-ligne .hu-presta-bloc-head{ min-height:3.9rem; }

@media (max-width:899.98px){
  .hu-presta-bloc-ligne{ grid-template-columns:1fr; }
  .hu-presta-bloc-ligne > .hu-presta-bloc > .hu-presta-h2{ min-height:0; }
  .hu-presta-bloc-ligne .hu-presta-bloc-head{ min-height:0; }
}

.hu-callout{ margin-top:var(--hu-space-5); padding:var(--hu-space-6); background:var(--hu-bg-alt); border-radius:var(--hu-glass-radius); border:1px solid var(--hu-line); border-left:3px solid var(--hu-accent); box-shadow:var(--hu-shadow-sm); }

/* Idée clé d'une puce ou d'un texte de prestation, mise en avant en bleu —
   même couleur que .hu-hero-lead sur l'accueil, jamais sur les titres. */
.hu-texte-cle{ color:var(--hu-primary); }

.hu-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--hu-space-3); }
.hu-list > li{ position:relative; padding-left:26px; line-height:var(--hu-leading-snug); }
.hu-list > li::before{
  content:""; position:absolute; left:0; top:.3em; width:16px; height:16px;
  background-color:var(--hu-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.64 3.65a.75.75 0 0 1 .07 1.06l-6.5 7.25a.75.75 0 0 1-1.1.04l-3.5-3.5a.75.75 0 1 1 1.06-1.06l2.93 2.93 5.98-6.67a.75.75 0 0 1 1.06-.05Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.64 3.65a.75.75 0 0 1 .07 1.06l-6.5 7.25a.75.75 0 0 1-1.1.04l-3.5-3.5a.75.75 0 1 1 1.06-1.06l2.93 2.93 5.98-6.67a.75.75 0 0 1 1.06-.05Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hu-list.small{ gap:var(--hu-space-2); font-size:.86rem; }
.hu-list.small > li{ padding-left:22px; }
.hu-list.small > li::before{ width:13px; height:13px; }

.hu-list-num{ list-style:none; counter-reset:hu-step; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--hu-space-3); }
.hu-list-num > li{ position:relative; padding-left:36px; line-height:var(--hu-leading-snug); counter-increment:hu-step; }
.hu-list-num > li::before{
  content:counter(hu-step); position:absolute; left:0; top:-1px;
  width:24px; height:24px; border-radius:var(--hu-radius-round); background:var(--hu-primary); color:var(--hu-on-primary);
  font-family:var(--hu-font-mono); font-size:var(--hu-text-xs); font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ── blog ──────────────────────────────────────────────────────────── */
.hu-card-blog{ border-top:2px solid var(--hu-line); padding-top:var(--hu-space-4); height:100%; transition:border-color var(--hu-transition); }
.hu-card-blog:hover{ border-color:var(--hu-accent); }
.hu-card-blog .date{ font-family:var(--hu-font-mono); font-size:.7rem; color:var(--hu-muted); }
.hu-card-blog h3{ font-size:1.02rem; }

/* ── fiche annonce ─────────────────────────────────────────────────── */
.hu-breadcrumb{ font-size:var(--hu-text-sm); color:var(--hu-muted); }
.hu-breadcrumb a{ color:var(--hu-muted); }
.hu-breadcrumb a:hover{ color:var(--hu-accent); }
#ficheCarousel .carousel-item img{ aspect-ratio:16/10; object-fit:cover; width:100%; }
#ficheCarousel .carousel-indicators{ position:static; margin:var(--hu-space-3) 0 0; }
#ficheCarousel .carousel-indicators [data-bs-target]{ background-color:var(--hu-primary); }

/* Diaporama plein écran (clic sur une photo de la fiche) : la photo est
   centrée verticalement dans la modale au lieu de laisser un bandeau vide
   en dessous — notamment en plein écran mobile (modal-fullscreen-md-down). */
.hu-lightbox-dialog{ margin:0 auto; }
@media (min-width:768px){
  .hu-lightbox-dialog{ max-width:min(92vw,1100px); }
}
.hu-lightbox-content{ min-height:100%; }
.hu-lightbox-body{ display:flex; align-items:center; justify-content:center; min-height:100%; }
.hu-lightbox-carousel{ width:100%; }
.hu-lightbox-carousel .carousel-item img{ display:block; max-width:100%; max-height:85vh; width:auto; height:auto; object-fit:contain; }
.hu-spec-row{ display:flex; justify-content:space-between; padding:var(--hu-space-3) 0; border-bottom:1px solid var(--hu-line); font-size:.92rem; }
.hu-spec-row .v{ font-family:var(--hu-font-mono); font-weight:600; }

/* Bandeau d'en-tête de la fiche bien : pièces/chambres/sdb/surface à gauche,
   barres DPE/GES à droite — une seule ligne, qui s'empile sous 768px. */
.hu-headline-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--hu-space-5) var(--hu-space-6); padding-bottom:var(--hu-space-4); border-bottom:1px solid var(--hu-line); }

/* Bandeau d'icônes (pièces / chambres / sdb / surface) — tuiles carrées
   arrondies, même famille que les pastilles de statut mais sans le rayon
   50% réservé aux pastilles numérotées. */
.hu-headline-specs{ display:flex; flex-wrap:wrap; gap:var(--hu-space-5); }
.hu-headline-specs .item{ display:flex; flex-direction:column; align-items:center; gap:var(--hu-space-1); min-width:72px; text-align:center; }
.hu-headline-specs .ic{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--hu-radius-sm); background:var(--hu-surface-2); color:var(--hu-primary); font-size:1.1rem; }
.hu-headline-specs strong{ font-family:var(--hu-font-mono); font-size:.95rem; }

/* Barres DPE / GES (étiquette énergie A→G) : piste neutre segmentée en 7,
   avec une pastille colorée (échelle --hu-dpe-a..g) posée sur la lettre
   obtenue — même principe que la maquette fournie, dans les tons du site. */
.hu-dpe-bloc{ display:flex; flex-direction:column; gap:var(--hu-space-3); max-width:420px; }
.hu-dpe-track{ display:flex; align-items:center; height:28px; border-radius:var(--hu-radius-sm); background:var(--hu-surface-2); }
.hu-dpe-track .tick{ flex:1; height:100%; border-right:1px solid var(--hu-surface); position:relative; }
.hu-dpe-track .tick:last-child{ border-right:none; }
.hu-dpe-track .tick .pill{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-width:36px; height:36px; padding:0 var(--hu-space-2); border-radius:999px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--hu-font-mono); font-size:.9rem; box-shadow:var(--hu-shadow-sm); }
.hu-dpe-track .tick.dpe-a .pill{ background:var(--hu-dpe-a); }
.hu-dpe-track .tick.dpe-b .pill{ background:var(--hu-dpe-b); }
.hu-dpe-track .tick.dpe-c .pill{ background:var(--hu-dpe-c); }
.hu-dpe-track .tick.dpe-d .pill{ background:var(--hu-dpe-d); }
.hu-dpe-track .tick.dpe-e .pill{ background:var(--hu-dpe-e); }
.hu-dpe-track .tick.dpe-f .pill{ background:var(--hu-dpe-f); }
.hu-dpe-track .tick.dpe-g .pill{ background:var(--hu-dpe-g); }
.hu-price-card{ background:var(--hu-surface); border:1px solid var(--hu-line); border-radius:var(--hu-radius-md); box-shadow:var(--hu-shadow-sm); padding:var(--hu-space-5); position:sticky; top:90px; }
.hu-price-card .amount{ font-family:var(--hu-font-serif); font-size:var(--hu-text-2xl); font-weight:600; color:var(--hu-accent); }
.hu-price-list div{ display:flex; justify-content:space-between; font-size:.86rem; padding:var(--hu-space-1) 0; }
.hu-price-list .v{ font-family:var(--hu-font-mono); }

/* ── honoraires ────────────────────────────────────────────────────── */
.hu-hon-table th{ font-family:var(--hu-font-mono); font-size:var(--hu-text-xs); text-transform:uppercase; letter-spacing:var(--hu-tracking-wide); color:var(--hu-muted); font-weight:600; border-bottom:2px solid var(--hu-line); }
.hu-hon-table td{ border-bottom:1px solid var(--hu-line); vertical-align:middle; }
.hu-hon-table .taux{ font-family:var(--hu-font-serif); font-weight:600; font-size:1.15rem; color:var(--hu-accent); }

/* ── footer ────────────────────────────────────────────────────────── */
.hu-footer{ background:var(--hu-bg-alt); border-top:1px solid var(--hu-line); }
.hu-footer-links li{ margin-bottom:9px; }
.hu-footer-links a{ color:var(--hu-muted); font-size:.85rem; }
.hu-footer-links a:hover{ color:var(--hu-accent); }
.hu-foot-legal{ border-top:1px solid var(--hu-line); }
.hu-badge{ font-family:var(--hu-font-mono); font-size:.68rem; border:1px solid var(--hu-line); padding:var(--hu-space-1) 9px; border-radius:var(--hu-radius-xs); color:var(--hu-muted); }

/* ── formulaires ───────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus{ border-color:var(--hu-primary-soft); box-shadow:var(--hu-focus-ring); }

/* Description d'annonce mise en forme (éditeur du back-office) */
.hu-description p { margin: 0 0 .5rem; }
/* Même espace au-dessus et en dessous d'une liste, que le texte voisin soit un paragraphe ou non. */
.hu-description ul, .hu-description ol { padding-left: 1.25rem; margin: .5rem 0; }

/* Caractéristiques de la fiche bien : liste verticale sous 768px, 2 colonnes
   dès la tablette. Classe dédiée .hu-specs-fiche (et non .hu-specs seul) :
   .hu-specs est aussi la ligne compacte "53 m² · 1 ch. · 1 sdb" des cartes
   annonce (_carte_bien.php), en display:flex/nowrap sur une seule ligne —
   sans l'override ci-dessous, .hu-specs-fiche héritait de ce nowrap sous
   768px et toutes les lignes Surface/Pièces/Étage/... s'alignaient bout à
   bout sur une seule ligne illisible au lieu de s'empiler verticalement. */
.hu-specs-fiche{ display:block; white-space:normal; border-top:1px solid var(--hu-line); }
@media (min-width: 768px){
  .hu-specs-fiche{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--hu-space-6, 32px); position:relative; }
  /* Séparateur vertical au milieu de l’espace entre les 2 colonnes */
  .hu-specs-fiche::before{ content:""; position:absolute; top:var(--hu-space-3); bottom:var(--hu-space-3); left:50%; border-left:1px solid var(--hu-line); }
}
.hu-specs-fiche .hu-spec-row{ gap:var(--hu-space-3); }
.hu-specs-fiche .hu-spec-row .v{ text-align:right; }

/* Téléphone / email protégés (contactProtege) */
.js-contact{ display:inline-flex; align-items:center; gap:.4rem; }
.hu-footer-contact{ color:var(--hu-ink); font-size:.85rem; }
.hu-footer-contact:hover{ color:var(--hu-accent); }

/* Pot de miel anti-spam des formulaires publics (champ site_web) */
.hu-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }