/*
 * HivePress — habillage complet « clair & acidulé » (framboise + or, liquid glass).
 * Réhabille les composants HivePress (fiche annonce, catalogue, formulaires,
 * modales, profils) par-dessus la grille fournie par ListingHive.
 * Chargé sur tout le site. Tokens depuis style.css.
 */

/* ============ Filet de sécurité anti « double ouverture » des selects ============
   TOUT <select> repris par Select2 doit rester masqué en 1px et inerte, même si
   un habillage maison lui applique une largeur/hauteur/padding (barre de recherche
   .li-sfield, tri du catalogue .hp-form--listing-sort, etc.). Sinon le <select>
   natif garde une boîte qui chevauche le déclencheur Select2 → au TOUCHER, le
   navigateur mobile ouvre SON menu natif EN PLUS du panneau Select2 (bug « 2 menus
   qui s'ouvrent »). On force donc l'état masqué standard de Select2 partout. */
html select.select2-hidden-accessible,html body select.select2-hidden-accessible{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;max-width:1px!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;pointer-events:none!important;opacity:0!important}

/* ============ Recherche Ville + Type de logement (accueil + catalogue) ============ */
.li-search-form{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.li-search-fields{display:flex;flex:1 1 auto;min-width:0;gap:2px}
.li-sfield{flex:1 1 140px;min-width:118px;display:flex;flex-direction:column;justify-content:center;padding:12px 14px;border-radius:14px;cursor:pointer;transition:background .2s;position:relative}
.li-sfield:hover{background:rgba(238,61,111,.07)}
.li-sfield+.li-sfield::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--border)}
.li-sfield__lbl{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
/* préfixe .li-search pour battre la règle générique .li-search select de home.css.
   :not(.select2-hidden-accessible) → dès que Select2 prend la main sur le <select>
   (« Type de logement »), on cesse de le styler : il retombe sur le masquage 1px
   standard de Select2 (comme TOUS les autres selects du site) au lieu de rester une
   boîte 22×4 qui chevauche le déclencheur et ouvrait un 2e menu (natif) au toucher. */
.li-search .li-sfield__input:not(.select2-hidden-accessible),.li-catsearch .li-sfield__input:not(.select2-hidden-accessible){appearance:none;-webkit-appearance:none;background-color:transparent;border:none;outline:none;font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--ink);width:100%;cursor:pointer;padding:2px 22px 2px 0!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right .1em center!important}
/* Champs date (arrivée / départ) : pas de chevron, on garde l'icône calendrier native */
.li-search .li-sfield__input--date,.li-catsearch .li-sfield__input--date{background-image:none!important;padding-right:2px!important;cursor:pointer;color-scheme:light;min-height:24px}
.li-sfield__input--date::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;transition:opacity .2s}
.li-sfield__input--date:hover::-webkit-calendar-picker-indicator{opacity:.9}
/* Bouton loupe rond (icône seule sur desktop, gain de place) */
.li-search-form__btn[type=submit]{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:0;width:56px;height:56px;background:linear-gradient(120deg,var(--rasp-br),var(--rasp) 60%,var(--rasp-deep));color:#fff;border-radius:18px;padding:0;font-family:var(--sans);font-weight:600;font-size:0;line-height:0;border:none;box-shadow:0 8px 22px rgba(238,61,111,.32);cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),border-radius var(--transition)}
.li-search-form__btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(238,61,111,.42);color:#fff}
.li-search-form__btn:active{transform:translateY(0);box-shadow:0 5px 14px rgba(238,61,111,.34)}
.li-search-form__btn:focus-visible{outline:none;box-shadow:0 8px 22px rgba(238,61,111,.32),0 0 0 4px rgba(238,61,111,.28)}
.li-search-form__btn svg{flex:none;width:21px;height:21px}
/* Libellé masqué en desktop (bouton = icône seule), réaffiché en mobile */
.li-search-form__btn-txt{display:none}
/* Conteneur du formulaire en haut du catalogue */
/* Même largeur maximale que la barre de l'accueil (.li-search, home.css l.42) :
   1160px centrés — le bandeau du catalogue s'étalait sinon sur toute la largeur
   du contenu (1216px+), et les deux pages ne se superposaient pas. */
.li-catsearch{max-width:1160px;margin:0 auto 14px;padding:12px;border-radius:var(--r-lg);position:relative;z-index:40}
/* Bannière « publier une demande » sous la recherche du catalogue */
.li-catbanner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:13px 22px;border-radius:var(--r-lg);background:linear-gradient(120deg,rgba(238,61,111,.08),rgba(208,134,30,.12));border:1px solid var(--border)}
.li-catbanner span{font-weight:600;color:var(--ink)}
.li-catbanner .li-btn{padding:.58em 1.2em;font-size:.95rem}
@media(max-width:760px){
  .li-search-form{flex-direction:column;align-items:stretch}
  .li-search-fields{flex-direction:column;gap:0}
  .li-sfield+.li-sfield::before{left:8%;right:8%;top:0;bottom:auto;width:auto;height:1px}
  .li-search-form__btn[type=submit]{width:100%;height:auto;justify-content:center;gap:8px;padding:15px;border-radius:16px;font-size:1rem;line-height:1}
  .li-search-form__btn svg{width:18px;height:18px}
  .li-search-form__btn-txt{display:inline}
}
/* Mobile (< bouton Filtrer HivePress, 768px) : champs plus compacts + réordonnancement
   de l'en-tête catalogue → carte recherche, puis bannière « Aucun logement », puis Filtrer. */
@media(max-width:767.98px){
  /* Champs Ville / Type / Arrivée / Départ nettement plus compacts (moins de hauteur).
     En colonne, flex:1 1 140px imposait ~140px de HAUTEUR + étirement des champs :
     on repasse en hauteur auto (flex:0 0 auto) → chaque champ colle à son contenu. */
  .li-sfield{flex:0 0 auto;justify-content:flex-start;padding:12px 16px}
  .li-sfield__lbl{margin-bottom:2px;line-height:1.15}
  .li-search .li-sfield__input,.li-catsearch .li-sfield__input{padding-top:0!important;padding-bottom:0!important}
  .li-sfield .select2-container--default .select2-selection--single{min-height:22px;height:22px}
  .li-sfield .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:22px}
  /* En-tête catalogue en colonne : on remet le bouton Filtrer tout en bas, après la bannière.
     Beaucoup d'air entre la bannière « Aucun logement… » et le bouton, puis on colle le
     bouton juste au-dessus de « TRIER PAR » (marge basse de l'en-tête quasi nulle). */
  .hp-page__header:has(.li-catbanner){display:flex;flex-direction:column;margin-bottom:0}
  .hp-page__header:has(.li-catbanner)>.li-catsearch{order:1}
  .hp-page__header:has(.li-catbanner)>.li-catbanner{order:2;margin:20px 0 56px}
  .hp-page__header:has(.li-catbanner)>.hp-button--listing-filter{order:3;margin:0}
  /* La sidebar filtre (vide sur mobile, filtrage via modale) porte un margin-bottom:3rem
     du core HivePress → c'est LE vide entre FILTRER et TRIER PAR. On le ramène à 1rem. */
  .hp-row>.hp-page__sidebar:first-child{margin-bottom:1rem}
}

/* ============ Datepicker maison (Arrivée / Départ de la recherche) ============ */
.li-dp{cursor:pointer;position:relative}
.li-dp__display{cursor:pointer!important;caret-color:transparent}
.li-dp__display::placeholder{color:var(--ink-2);opacity:.8}
.li-dp__display--filled{color:var(--ink)!important;font-weight:600}
/* .li-sfield__input (règle générique select, plus spécifique que --date) impose un
   chevron même sur ces champs texte : on ne le retire pas (cohérence visuelle avec
   Pays/Type). On ne réserve à droite QUE la place du chevron (32px) : réserver aussi
   celle du × (66px) tronquait « jj/mm/aaaa » dès que le champ se resserrait. */
.li-search .li-dp .li-dp__display,.li-catsearch .li-dp .li-dp__display{padding-right:32px!important}
/* Date choisie → le × prend LA PLACE du chevron (masqué), même padding dans les
   deux états : plus aucune troncature, ni sur le placeholder ni sur la date. */
.li-search .li-dp:has(.li-dp__clear:not(.li-dp__clear--hidden)) .li-dp__display,
.li-catsearch .li-dp:has(.li-dp__clear:not(.li-dp__clear--hidden)) .li-dp__display{background-image:none!important}
/* Bouton × : n'apparaît que si une date est choisie (li_search_form_html gère l'état initial en PHP).
   bottom (pas top:50%) : le champ = libellé + input empilés ; un centrage sur toute la hauteur
   du champ place le bouton au-dessus de l'input (donc du chevron, dessiné sur l'input). Le
   padding-bottom du champ (12px, identique mobile/desktop) est fixe → ancrer depuis le bas
   retombe pile au centre vertical de l'input, quelle que soit la hauteur du libellé au-dessus.
   right:17px = l'emplacement du chevron (padding droit du champ + décalage du SVG). */
.li-dp__clear{position:absolute;bottom:16px;right:17px;width:19px;height:19px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:#fff;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.li-dp__clear svg{width:9px;height:9px;flex:none}
.li-dp__clear:hover{background:var(--rasp);border-color:var(--rasp);color:#fff}
.li-dp__clear--hidden{display:none}
/* Desktop : les champs date demandent plus de largeur de base que Ville/Type
   pour afficher « jj/mm/aaaa » / « 15/07/2026 » en entier (chevron 32px compris). */
@media(min-width:761px){
  .li-search .li-sfield.li-dp,.li-catsearch .li-sfield.li-dp{flex:1 1 176px;min-width:156px}
  /* Suggestions Ville : popover plus large que le champ, texte sur une ligne
     (aligné sur le bord gauche du champ : le wrap vit dans le padding 18px). */
  .li-sfield .li-ac{left:0;right:0;width:auto;min-width:250px;max-width:min(340px,calc(100vw - 24px))}
  .li-sfield .li-ac__item{white-space:nowrap}
}
/* Fenêtres étroites (topbar catalogue encore en ligne) : padding réduit pour que
   les 5 champs + la loupe tiennent sans déborder malgré les dates élargies. */
@media(min-width:761px) and (max-width:920px){
  .li-search .li-sfield,.li-catsearch .li-sfield{padding:12px 12px}
}
.li-dp-pop{position:absolute;z-index:1200;width:300px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border);border-radius:18px;
  box-shadow:0 22px 60px rgba(36,23,38,.20),0 6px 18px rgba(36,23,38,.08);padding:16px;font-family:var(--sans);animation:li-dp-in .16s var(--ease)}
.li-dp-pop[hidden]{display:none}
@keyframes li-dp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.li-dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.li-dp__month{font-family:var(--serif);font-weight:600;font-size:1.05rem;text-transform:capitalize;color:var(--ink)}
.li-dp__nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .2s}
.li-dp__nav:hover{border-color:var(--rasp);color:var(--rasp);transform:translateY(-1px)}
.li-dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.li-dp__dow{font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--ink-2);padding:4px 0}
.li-dp__day{height:38px;padding:0;font-size:.88rem;border-radius:10px;color:var(--ink);border:none;background:none;cursor:pointer;font-family:var(--sans);transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center;line-height:1}
.li-dp__day--empty{visibility:hidden}
.li-dp__day:not(.li-dp__day--off):not(.li-dp__day--sel):hover{background:rgba(238,61,111,.12);color:var(--rasp-deep)}
.li-dp__day--today{box-shadow:inset 0 0 0 1.5px var(--rasp);color:var(--rasp-deep);font-weight:600}
.li-dp__day--sel{background:linear-gradient(135deg,var(--rasp-br),var(--rasp) 70%,var(--rasp-deep));color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(238,61,111,.32)}
.li-dp__day--off{color:var(--ink-2);opacity:.3;cursor:default}

/* ===================== Respiration des pages internes ===================== */
.site-content{padding-block:0}
.hp-page{padding:54px 0 80px}
.hp-page__content{min-width:0}
@media(max-width:768px){.hp-page{padding:32px 0 56px}}

/* Liens HivePress */
.hp-link{color:var(--rasp-deep);transition:color var(--transition)}
.hp-link:hover{color:var(--rasp)}
/* Avis + signalement : on remplace les actions HivePress par nos boutons maison
   (formulaires avec pièce jointe). On masque donc TOUJOURS les actions natives. */
.hp-listing__action--review,.hp-listing__action--report{display:none!important}
.li-review-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:22px 0}
.li-review-actions__report{color:var(--ink-2);font-size:.9rem;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.li-review-actions__report:hover{color:#c0392b}
.li-review-photo{margin:10px 0 0}
.li-review-photo img{max-width:220px;border-radius:var(--r);border:1px solid var(--border);cursor:zoom-in;display:block}

/* Section Avis (fiche annonce) — id="reviews" */
.li-reviews{margin:30px 0 0;scroll-margin-top:138px}
.li-reviews__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.li-reviews__title{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin:0;color:var(--ink)}
.li-reviews__score{display:flex;align-items:center;gap:10px}
.li-reviews__score strong{font-size:1.25rem;color:var(--ink)}
.li-reviews__n{color:var(--ink-2);font-size:.92rem}
.li-stars{display:inline-flex;gap:1px;letter-spacing:1px}
.li-star{color:var(--border)}
.li-star.is-on{color:var(--gold)}
.li-reviews__empty{color:var(--ink-2);font-size:.96rem;margin:0}
.li-reviews__list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.li-review{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:18px 20px}
.li-review__head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.li-review__avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--rasp),var(--gold))}
.li-review__author{display:block;color:var(--ink);line-height:1.2}
.li-review__date{font-size:.82rem;color:var(--ink-2)}
.li-review__head .li-stars{margin-left:auto;font-size:1.05rem}
.li-review__text{margin:0;color:var(--ink);line-height:1.55}
.li-review__photo{display:inline-block;margin-top:10px}
.li-review__photo img{max-width:200px;border-radius:var(--r);border:1px solid var(--border);cursor:zoom-in;display:block}
.li-reviews__gate{display:flex;align-items:flex-start;gap:8px;color:var(--ink-2);font-size:.9rem;margin:18px 0 0}
.li-reviews__gate .hp-icon{color:var(--gold-deep);margin-top:2px}
/* Qualités d'avis (agrégat + chips) */
.li-qual-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.li-qual-top__lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);font-weight:600;margin-right:2px}
.li-qual{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(120deg,rgba(238,61,111,.09),rgba(208,134,30,.09));border:1px solid var(--border);border-radius:var(--pill);padding:.32em .85em;font-size:.86rem;color:var(--ink)}
.li-qual small{color:var(--rasp-deep);font-weight:700}
.li-qual--sm{font-size:.8rem;padding:.25em .7em;background:var(--cream-2)}
.li-review__quals{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* Picker de qualités dans le formulaire d'avis */
.li-qual-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.li-qual-pick__opt{position:relative;cursor:pointer}
.li-qual-pick__opt input{position:absolute;opacity:0;pointer-events:none}
.li-qual-pick__opt span{display:inline-block;border:1px solid var(--border);border-radius:var(--pill);padding:.4em .9em;font-size:.9rem;color:var(--ink-2);transition:all var(--transition)}
.li-qual-pick__opt input:checked+span{background:linear-gradient(120deg,var(--rasp),var(--gold));color:#fff;border-color:transparent}
.li-qual-pick__opt input:focus-visible+span{outline:2px solid var(--rasp);outline-offset:2px}

/* Onglets fiche : sticky + défilement doux.
   ⚠ NE PAS REMETTRE `html{scroll-behavior:smooth}` GLOBAL : appliqué à tout le
   site, il transformait le moindre scrollTo(0,0) en animation de remontée bien
   visible (le « scroll up » du 4 août 2026, cf. assets/js/app.js). Le défilement
   doux reste cantonné à la fiche annonce, où il sert les ancres de la topbar. */
@media (prefers-reduced-motion:no-preference){
html:has(.hp-listing--view-page){scroll-behavior:smooth}
}
.hp-listing--view-page .hp-page__topbar{position:sticky;top:74px;z-index:6;background:var(--cream);padding:18px 0 12px;border-bottom:none}
.hp-listing__description,.hp-listing__attributes--secondary,.li-cal-wrap,.li-map-wrap{scroll-margin-top:138px}

/* Lightbox galerie */
.hp-listing__images img{cursor:zoom-in}
.li-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(20,12,18,.92);padding:24px}
.li-lightbox.is-open{display:flex}
.li-lightbox__img{max-width:92vw;max-height:88vh;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.li-lightbox__close{position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;opacity:.85}
.li-lightbox__close:hover{opacity:1}
.li-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:none;color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.4rem;cursor:pointer;transition:background var(--transition)}
.li-lightbox__nav:hover{background:rgba(255,255,255,.28)}
.li-lightbox__prev{left:18px}.li-lightbox__next{right:18px}
.li-lightbox__count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:.9rem}
@media(max-width:560px){.li-lightbox__nav{width:42px;height:42px}}
/* Proposition de partage des coordonnées (après 1er échange, dans le fil) */
/* Proposition de partage : pastille repliable (<details> natif, zéro JS). */
.li-coords-offer{margin:0 0 8px}
.li-coords-offer details{border:1px solid var(--border);border-radius:var(--pill);background:linear-gradient(120deg,rgba(238,61,111,.05),rgba(208,134,30,.08));overflow:hidden}
.li-coords-offer details[open]{border-radius:var(--r-lg)}
.li-coords-offer summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:9px 14px;font-size:.9rem;font-weight:600;color:var(--ink)}
.li-coords-offer summary::-webkit-details-marker{display:none}
.li-coords-offer summary>i{color:var(--rasp)}
.li-coords-offer summary::after,.li-res__summary::after{content:"\f078";font-family:"Font Awesome 5 Free";font-weight:900;margin-left:auto;font-size:1.2rem;line-height:1;color:var(--rasp);transition:transform .2s}
.li-coords-offer details[open]>summary::after,.li-res--compact[open]>.li-res__summary::after{transform:rotate(180deg)}
.li-coords-offer__body{display:grid;gap:9px;padding:2px 14px 12px}
.li-coords-offer__opts{display:flex;flex-wrap:wrap;gap:8px 16px}
.li-coords-offer__opt{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;cursor:pointer}
.li-coords-offer__opt input{width:17px;height:17px;accent-color:var(--rasp);cursor:pointer}
.li-coords-offer__opt span{color:var(--ink-2);font-size:.84rem;font-weight:500}
.li-coords-offer__opt i{color:var(--rasp)}
.li-coords-offer .li-btn{justify-self:start;padding:.45em 1.05em;font-size:.9rem}
.li-coords-offer__note{margin:0;font-size:.78rem;color:var(--ink-2)}
/* Dévoilement : coordonnées reçues, gardées visibles mais compactes. */
.li-coords-reveal{background:#fff;border:1px solid var(--rasp);border-radius:var(--r-lg);padding:8px 14px;margin:0 0 8px;box-shadow:var(--shadow-sm)}
.li-coords-reveal__head{font-size:.82rem;color:var(--ink-2);margin-bottom:5px}
.li-coords-reveal__head i{color:var(--rasp);margin-right:4px}
.li-coords-reveal__items{display:flex;flex-wrap:wrap;gap:5px 18px}
.li-coords-reveal__item{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem}
.li-coords-reveal__item i{color:var(--rasp)}
.li-coords-reveal__item--addr{flex-basis:100%}
.li-coords-reveal__item small{color:var(--ink-2);font-weight:400}
/* Variante « masquer » (révocation d'un partage) : ton neutre. */
.li-coords-revoke details{background:#faf7f4}
.li-coords-revoke summary>i,.li-coords-revoke .li-coords-offer__opt i{color:var(--ink-2)}
.li-coords-revoke .li-coords-offer__opt input{accent-color:var(--ink-2)}
.li-coords-revoke .li-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--border);border-radius:var(--pill)}
.li-coords-revoke .li-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--rasp);color:var(--rasp)}
/* Toggles en cartes : empilés sur mobile, côte à côte sur desktop. */
.li-coords-toggles{display:grid;gap:8px;margin:0 0 8px}
.li-coords-toggles>.li-coords-offer{margin:0}
@media(min-width:720px){.li-coords-toggles{grid-auto-flow:column;grid-auto-columns:1fr;align-items:start}}
/* Lien « Notifications » en bas de la page Réglages */
.li-settings-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:8px}
.li-settings-link i{color:var(--rasp)}
/* Barre d'actions en tête de « Mes annonces » (Booster · Modifier) */
.li-mesannonces-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.li-mesannonces-actions .li-btn{font-size:.92rem;padding:.6em 1.15em;display:inline-flex;align-items:center;gap:7px}

/* ===================== Options premium : badges « urgent / à la une / premium » ===================== */
/* Pastilles génériques (template-part li-boost-badges → carte + fiche + booster) */
.li-flag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1;padding:.42em .75em;border-radius:var(--pill);white-space:nowrap}
.li-flag--urgent{background:linear-gradient(135deg,#ff7a45,#e63946);color:#fff;box-shadow:0 2px 9px rgba(230,57,70,.32)}
.li-flag--featured{background:linear-gradient(135deg,var(--gold-br),var(--gold-deep));color:#3A2606;box-shadow:0 2px 9px rgba(208,134,30,.32)}
.li-flag--premium{background:rgba(208,134,30,.14);color:var(--gold-deep);border:1px solid rgba(208,134,30,.32);box-shadow:none;text-transform:none;letter-spacing:.01em}
.li-flag--premium i,.li-flag--premium em{color:var(--gold-deep)}
/* Conteneur badges : ruban superposé sur la carte, inline sur la fiche */
.li-boost-badges{display:flex;gap:6px;flex-wrap:wrap}
.hp-listing--view-block{position:relative}
.hp-listing--view-block .li-boost-badges{position:absolute;top:12px;left:12px;z-index:3}
.hp-listing--view-page .li-boost-badges{margin:0 0 16px}

/* Pastille « sans loyer » (échange / garde d'animaux / gratuit / dépannage) —
   part listing/li-arrangement-badge, cartes uniquement. Posée en HAUT À DROITE
   de la photo : « À la une » occupe déjà le coin gauche. Sans elle, ces annonces
   n'affichaient que « Sur demande » à la place du prix, ce qui laissait croire à
   un loyer à négocier. Détail des modes sur la fiche (encart .li-arr). */
.hp-listing--view-block .li-arr-flags{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:70%}
.li-flag--arr{background:rgba(255,255,255,.94);color:var(--gold-deep);box-shadow:0 2px 10px rgba(36,23,38,.18);text-transform:none;letter-spacing:.01em;font-weight:700;gap:5px}
.li-flag--arr i{color:var(--gold-deep);font-size:.9em}
/* La fiche a son propre encart : pas de pastille en double si la part y passait. */
.hp-listing--view-page .li-arr-flags{display:none}

/* Un SEUL marqueur « à la une » : notre pastille dorée. On retire l'étoile native
   HivePress (carré framboise) qui débordait du coin arrondi et faisait doublon,
   et on accorde le liseré de la carte mise en avant au doré de la pastille. */
.hp-listing__featured-badge{display:none!important}
.hp-listing--view-block.hp-listing--featured{border-color:var(--gold)!important}
/* Badge premium sur le profil vendor (si rendu par HivePress) */
.hp-vendor__attribute--premium{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;letter-spacing:0;text-transform:none;line-height:1.2;color:var(--gold-deep)!important;background:rgba(208,134,30,.14);border:1px solid rgba(208,134,30,.32);border-radius:var(--pill);padding:.3em .85em;box-shadow:none}
.hp-vendor__attribute--premium::before{content:"✦";color:var(--gold-deep);font-size:.95em}

/* ===================== Boutons HivePress ===================== */
.hp-form__button,button.hp-form__button,.hp-button,.button{
  font-family:var(--sans)!important;font-weight:600!important;border:none!important;border-radius:var(--pill)!important;
  background:linear-gradient(120deg,var(--rasp-br),var(--rasp) 60%,var(--rasp-deep))!important;color:#fff!important;
  padding:.85em 1.6em!important;box-shadow:0 6px 20px rgba(238,61,111,.32)!important;transition:transform var(--transition),box-shadow var(--transition)!important;cursor:pointer}
.hp-form__button:hover,.hp-button:hover,.button:hover{transform:translateY(-2px)!important;box-shadow:0 12px 30px rgba(238,61,111,.45)!important;color:#fff!important}
.hp-button--secondary,a.hp-button--secondary{background:rgba(255,255,255,.7)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--border)!important}
.hp-button--secondary:hover{box-shadow:inset 0 0 0 1.5px var(--rasp)!important;color:var(--rasp-deep)!important}

/* ===================== Champs de formulaire ===================== */
.hp-field input[type=text],.hp-field input[type=email],.hp-field input[type=password],
.hp-field input[type=search],.hp-field input[type=number],.hp-field input[type=tel],
.hp-field input[type=url],.hp-field input[type=date],.hp-field select,.hp-field textarea,
input.hp-field,select.hp-field,textarea.hp-field{
  background:#fff;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.7em 1em;color:var(--ink);font-family:var(--sans);transition:border-color var(--transition),box-shadow var(--transition)}
.hp-field input:focus,.hp-field select:focus,.hp-field textarea:focus,input.hp-field:focus,select.hp-field:focus,textarea.hp-field:focus{
  border-color:var(--rasp);box-shadow:0 0 0 3px rgba(238,61,111,.15);outline:none}
.hp-field__label,.hp-form__label{font-weight:600;color:var(--ink);font-size:.92rem}
.hp-field__description{color:var(--ink-2);font-size:.85rem}

/* ===================== FICHE ANNONCE (view-page) ===================== */
.hp-listing--view-page .hp-listing__categories,.hp-listing__category{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rasp)}
.hp-listing__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;color:var(--ink);margin:8px 0 12px}
.hp-listing__details{color:var(--ink-2);font-size:.95rem}
/* Masquer la date de publication « Publié le… » (cartes catalogue + fiche annonce) */
/* Masquer la date « Publié le… » — !important + spécificité pour battre la règle
   du thème parent .hp-listing--view-page .hp-listing__created-date{display:block}. */
.hp-listing__created-date,.hp-listing__date,
.hp-listing--view-page .hp-listing__created-date,.hp-listing--view-page .hp-listing__date,
.hp-listing--view-block .hp-listing__created-date,.hp-listing--view-block .hp-listing__date,
.hp-listing--view-page .hp-listing__details--primary{display:none!important}
.hp-listing__location{display:inline-flex;align-items:center;gap:6px}
.hp-listing__location .hp-icon{color:var(--rasp)}

/* Galerie d'images (carousel) */
.hp-listing__images{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);margin:8px 0 28px;position:relative}
.hp-listing__images img{border-radius:var(--r-lg)}
/* Anti-FOUC galerie : tant que Slick n'a pas initialisé, n'afficher QUE la 1re
   image (évite l'empilement et les clones répétés pendant le chargement). */
.hp-listing__images:not(.slick-initialized){display:block;line-height:0;max-height:72vh;overflow:hidden}
.hp-listing__images:not(.slick-initialized)>*:not(:first-child){display:none!important}
.hp-listing__images:not(.slick-initialized)>:first-child{display:block;width:100%}
.hp-listing__images:not(.slick-initialized)>:first-child img{display:block;width:100%;height:auto}
/* Annonce à une seule photo : image simple, pas de contrôles ni de ratio forcé.
   (HivePress impose aspect-ratio:1.3333 + object-fit:contain → bandes vides.) */
.hp-listing__images.li-gallery--single .slick-arrow,
.hp-listing__images.li-gallery--single .slick-dots{display:none!important}
.hp-listing__images.li-gallery--single,
.hp-listing__images.li-gallery--single .slick-list,
.hp-listing__images.li-gallery--single .slick-track,
.hp-listing__images.li-gallery--single .slick-slide{height:auto!important;max-height:none!important}
.hp-listing__images.li-gallery--single .slick-slide{aspect-ratio:auto!important}
.hp-listing__images.li-gallery--single img{aspect-ratio:auto!important;height:auto!important;width:100%;object-fit:cover;opacity:1!important}
/* Galerie multi-photos : format paysage UNIFORME, recadrage centré.
   Notre init JS ajoute .hp-listing__images-slider, HivePress .hp-listing__images-carousel ;
   on cible donc toute galerie slick initialisée (hors annonce à une seule photo).
   Sans ratio forcé, le carrousel prenait la hauteur de la photo la plus grande
   (portrait) et laissait des bandes vides sous les photos paysage. */
.hp-listing__images.slick-initialized:not(.li-gallery--single){aspect-ratio:16/10}
.hp-listing__images.slick-initialized:not(.li-gallery--single) .slick-list,
.hp-listing__images.slick-initialized:not(.li-gallery--single) .slick-track,
.hp-listing__images.slick-initialized:not(.li-gallery--single) .slick-slide,
.hp-listing__images.slick-initialized:not(.li-gallery--single) .slick-slide>div,
.hp-listing__images.slick-initialized:not(.li-gallery--single) .slick-slide>a{height:100%!important;max-height:none!important}
/* Deux cas : soit un <img> imbrique dans .slick-slide, soit l'<img> EST le slide
   (slick pose .slick-slide directement sur l'img quand les enfants du carousel
   sont des <img> nus) — sans ce 2e selecteur l'img garde object-fit:contain par
   defaut et se retrouve en letterbox (bandes grises G/D) au lieu de remplir. */
.hp-listing__images.slick-initialized:not(.li-gallery--single) .slick-slide img,
.hp-listing__images.slick-initialized:not(.li-gallery--single) img.slick-slide{display:block;width:100%;height:100%!important;aspect-ratio:auto;object-fit:cover;object-position:center}
/* Flèches : même système que les cartes du catalogue — bouton rond blanc +
   chevron en SVG de fond (un ::after bordure ne se peint pas sur Safari).
   Le plugin les masque hors survol via !important (→ jamais visibles sur
   mobile/tactile) : on force l'affichage continu avec une règle plus
   spécifique. Hovers cosmétiques derrière (hover:hover) and (pointer:fine). */
.hp-listing .hp-listing__images.hp-listing__images-slider .slick-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;background-color:rgba(255,255,255,.94);border:none;box-shadow:var(--shadow-sm);cursor:pointer;font-size:0;background-repeat:no-repeat;background-position:center;background-size:13px 13px;display:flex!important;align-items:center;justify-content:center;opacity:.92;transition:opacity .2s,background-color .2s,transform .2s}
.hp-listing .hp-listing__images.hp-listing__images-slider .slick-prev{left:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241726' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
.hp-listing .hp-listing__images.hp-listing__images-slider .slick-next{right:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241726' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}
@media (hover:hover) and (pointer:fine){
  .hp-listing .hp-listing__images.hp-listing__images-slider .slick-arrow:hover{background-color:#fff;transform:translateY(-50%) scale(1.05)}
  .hp-listing .hp-listing__images.hp-listing__images-slider .slick-prev:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
  .hp-listing .hp-listing__images.hp-listing__images-slider .slick-next:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}
}
/* Icône FontAwesome injectée par le plugin dans la flèche → masquée.
   Idem pour l'ancien chevron ::after (mask-image, style.css) : sans cette
   neutralisation, deux glyphes se superposent dans le bouton. */
.hp-listing__images .slick-arrow i{display:none}
.hp-listing .hp-listing__images.hp-listing__images-slider .slick-arrow::before,
.hp-listing .hp-listing__images.hp-listing__images-slider .slick-arrow::after{content:none!important}
/* Flèche en butée (carrousel non infini) et galerie à photo unique : masquées. */
.hp-listing .hp-listing__images.hp-listing__images-slider .slick-arrow.slick-disabled{display:none!important}
.hp-listing .hp-listing__images.li-gallery--single .slick-arrow{display:none!important}
/* Points AU-DESSUS de la légende (z-index:7 > .li-photo-cap:6) : sinon le dégradé
   de la légende les assombrit. La légende réserve une bande basse (padding) pour
   qu'ils cohabitent sans se chevaucher. */
.hp-listing__images .slick-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:7px;list-style:none;margin:0;padding:0;z-index:7}
.hp-listing__images .slick-dots li{line-height:0}
.hp-listing__images .slick-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.65);font-size:0;cursor:pointer;padding:0;transition:all .2s}
.hp-listing__images .slick-dots .slick-active button{background:#fff;width:22px;border-radius:5px}
/* Mobile : flèches plus compactes pour ne pas encombrer la galerie ; points
   légèrement remontés pour dégager la bande de légende. */
@media (max-width:768px){
  .hp-listing .hp-listing__images.hp-listing__images-slider .slick-arrow{width:38px;height:38px}
  .hp-listing .hp-listing__images.hp-listing__images-slider .slick-prev{left:10px}
  .hp-listing .hp-listing__images.hp-listing__images-slider .slick-next{right:10px}
  .hp-listing__images .slick-dots{bottom:12px}
}

/* ===== Stepper du parcours de publication (submit-listing) ===== */
.li-stepper{margin:4px 0 32px}
.li-stepper ol{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;margin:0;padding:0}
.li-stepper__step{flex:1 1 0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0;padding:0 4px}
.li-stepper__step::before{content:"";position:absolute;top:18px;right:50%;width:100%;height:3px;border-radius:3px;background:var(--border);z-index:0}
.li-stepper__step:first-child::before{display:none}
.li-stepper__step.is-done::before,.li-stepper__step.is-active::before{background:linear-gradient(90deg,var(--rasp),var(--gold))}
.li-stepper__dot{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.98rem;background:#fff;color:var(--ink-2);border:2px solid var(--border);transition:background-color .2s,border-color .2s,box-shadow .2s,color .2s}
.li-stepper__step.is-done .li-stepper__dot{background:linear-gradient(120deg,#0E9E8E,#1FB39A);border-color:transparent;color:#fff}
.li-stepper__step.is-active .li-stepper__dot{background:linear-gradient(120deg,var(--rasp),var(--gold));border-color:transparent;color:#fff;box-shadow:0 0 0 5px rgba(238,61,111,.14)}
.li-stepper__label{font-family:var(--serif);font-size:.92rem;font-weight:600;color:var(--ink-2);line-height:1.2}
.li-stepper__step.is-active .li-stepper__label{color:var(--rasp-deep)}
.li-stepper__step.is-done .li-stepper__label{color:var(--ink)}
.li-stepper__sub{font-size:.74rem;color:var(--ink-2);line-height:1.2;opacity:.85}
/* Étapes franchies : cliquables (retour en arrière) */
.li-stepper__link{display:contents;cursor:pointer}
.li-stepper__step.is-done .li-stepper__dot{cursor:pointer}
.li-stepper__step.is-done .li-stepper__link:hover .li-stepper__dot{transform:scale(1.08);box-shadow:0 0 0 5px rgba(14,158,142,.18)}
.li-stepper__step.is-done .li-stepper__link:hover .li-stepper__label{text-decoration:underline;text-underline-offset:3px}
.li-stepper__link:focus-visible .li-stepper__dot{outline:2px solid var(--rasp);outline-offset:3px}
@media (max-width:600px){
  .li-stepper__label{font-size:.78rem}
  .li-stepper__sub{display:none}
  .li-stepper__dot{width:32px;height:32px;font-size:.88rem}
  .li-stepper__step::before{top:15px}
}
/* Sous-titre d'aide sous le titre d'étape */
.li-step-intro{color:var(--ink-2);font-size:1.02rem;margin:-6px 0 24px;max-width:560px}
/* Étape Catégorie — sélection multiple (cartes cochables) */
.li-cat-form{margin:4px 0 0;max-width:760px}
.li-cat-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.li-cat-choice{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1.5px solid var(--border);border-radius:16px;box-shadow:0 4px 18px rgba(36,23,38,.07);color:var(--ink);cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}
.li-cat-choice:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,30,82,.14)}
.li-cat-choice input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.li-cat-choice__ico{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;background:linear-gradient(120deg,var(--rasp),var(--gold))}
.li-cat-choice__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.li-cat-choice__label{font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.2;color:var(--ink)}
.li-cat-choice__desc{font-size:.84rem;color:var(--ink-2);line-height:1.3}
/* Pastille de coche */
.li-cat-choice__check{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:#fff;position:relative;transition:background .18s,border-color .18s}
.li-cat-choice__check::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .18s}
/* État sélectionné (classe JS + repli :has) */
.li-cat-choice.is-checked,.li-cat-choice:has(input:checked){border-color:var(--rasp);background:rgba(238,61,111,.06);box-shadow:0 0 0 3px rgba(238,61,111,.15)}
.li-cat-choice.is-checked .li-cat-choice__check,.li-cat-choice:has(input:checked) .li-cat-choice__check{background:var(--rasp);border-color:var(--rasp)}
.li-cat-choice.is-checked .li-cat-choice__check::after,.li-cat-choice:has(input:checked) .li-cat-choice__check::after{transform:rotate(45deg) scale(1)}
.li-cat-choice:focus-within{outline:2px solid var(--rasp);outline-offset:3px}
/* Actions */
.li-cat-actions{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.li-cat-submit{font-size:1.02rem}
.li-cat-hint{color:var(--ink-2);font-size:.9rem}

/* Date des messages : format FR lisible (pas de capitales) */
.hp-message__date{text-transform:none!important;letter-spacing:0}

/* ===== Contexte de conversation (de quelle annonce/demande) ===== */
.li-msg-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.li-msg-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--ink-2);text-decoration:none}
.li-msg-back:hover{color:var(--rasp)}
.li-msg-back i{font-size:.85rem}
.li-msg-bar__acts{display:flex;gap:8px}
.li-msg-barbtn{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--ink-2);text-decoration:none;padding:7px 13px;border:1px solid var(--border);border-radius:var(--pill);background:#fff;transition:border-color .15s,color .15s}
.li-msg-barbtn:hover{border-color:var(--rasp);color:var(--rasp-deep)}
.li-msg-barbtn--del:hover{border-color:#d33;color:#c0392b}
.li-msg-barbtn i{font-size:.82rem}
.li-msgctx-wrap{margin:0 0 24px}
.li-msgctx-wrap__label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.li-msgctx{display:flex;align-items:center;gap:16px;padding:12px 16px;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s;margin-bottom:10px}
.li-msgctx:last-child{margin-bottom:0}
.li-msgctx:hover{transform:translateY(-2px);border-color:var(--rasp);box-shadow:0 12px 30px rgba(201,30,82,.14)}
.li-msgctx__media{flex:none;width:64px;height:64px;border-radius:12px;background:var(--cream-2) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.li-msgctx__media--icon{background:linear-gradient(120deg,var(--rasp),var(--gold));color:#fff;font-size:1.3rem}
.li-msgctx__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.li-msgctx__kind{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rasp-deep)}
.li-msgctx__kind i{font-size:.74rem}
.li-msgctx__title{font-family:var(--serif);font-weight:600;font-size:1.08rem;line-height:1.25;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-msgctx__meta{font-size:.85rem;color:var(--ink-2)}
.li-msgctx__cta{flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem;color:var(--rasp);white-space:nowrap}
.li-msgctx:hover .li-msgctx__cta i{transform:translateX(3px)}
.li-msgctx__cta i{transition:transform .18s}
/* Rebond réservation (côté hôte) : proposer de griser les dates réservées. */
.li-msgctx-resa{display:inline-flex;align-items:center;gap:8px;margin:-2px 0 12px;padding:9px 14px;background:rgba(238,61,111,.06);border:1px solid var(--rasp);border-radius:var(--r);color:var(--rasp-deep);font-size:.9rem;font-weight:600;text-decoration:none;transition:background .18s}
.li-msgctx-resa b{font-weight:800}
.li-msgctx-resa:hover{background:rgba(238,61,111,.12)}
.li-msgctx-none{display:flex;align-items:center;gap:10px}
@media(max-width:560px){
  .li-msgctx__cta span{display:none}
  .li-msgctx__media{width:52px;height:52px}
}

/* ===== « Mes annonces » — grille de cartes ===== */
.li-myl-top{display:flex;justify-content:flex-end;margin:0 0 18px}
.li-myl-empty{text-align:center;padding:48px 20px;color:var(--ink-2)}
.li-myl-empty i{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--rasp),var(--gold));color:#fff;font-size:1.6rem;margin:0 auto 14px;box-shadow:0 12px 26px rgba(238,61,111,.24)}
.li-myl-empty p{margin:0 0 16px;font-size:1.05rem}
/* Favoris groupés par ville */
.li-fav__group{margin:0 0 34px}
.li-fav__city{font-family:var(--serif);font-size:1.35rem;color:var(--ink);display:flex;align-items:center;gap:10px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.li-fav__city .hp-icon{color:var(--rasp);font-size:1rem}
.li-fav__n{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--ink-2);background:var(--cream-2);border-radius:var(--pill);padding:1px 9px}
.li-fav-card__media,a.li-myl-card__media{display:block}

.li-myl{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.li-myl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.li-myl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.li-myl-card__media{display:block;width:100%;aspect-ratio:16/10;background:var(--cream-2) center/cover no-repeat}
.li-myl-card__media--empty{display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:1.6rem}
.li-myl-card__body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.li-myl-card__head{display:flex;align-items:center;gap:8px}
.li-myl-badge{font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:3px 10px;border-radius:var(--pill);text-transform:uppercase}
.li-myl-badge--ok{background:rgba(14,158,142,.14);color:#0B7A6E}
.li-myl-badge--wait{background:rgba(208,134,30,.18);color:var(--gold-deep)}
.li-myl-badge--draft{background:var(--cream-2);color:var(--ink-2)}
.li-myl-badge--hidden{background:#e7e2ee;color:#5b5170}
.li-myl-card--hidden{opacity:.78}
.li-myl-card__title{font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--ink);margin:0;line-height:1.25}
.li-myl-card__meta{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.li-myl-card__meta strong{color:var(--ink)}
.li-myl-card__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.li-myl-act{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;padding:7px 12px;border-radius:var(--pill);border:1px solid var(--border);color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.li-myl-act:hover{border-color:var(--rasp);color:var(--rasp-deep)}
.li-myl-act--primary{background:linear-gradient(120deg,var(--rasp-br),var(--rasp) 60%,var(--rasp-deep));color:#fff;border-color:transparent}
.li-myl-act--primary:hover{color:#fff;box-shadow:0 6px 18px rgba(238,61,111,.32)}
.li-myl-act--del{color:var(--ink-2)}
.li-myl-act--del:hover{border-color:#d33;color:#c0392b}
.li-myl-act--urgenton{background:#fbe3c4;border-color:#D0861E;color:#a85a00}
.li-myl-act--urgenton:hover{border-color:#a85a00;color:#a85a00}
.li-myl-act i{font-size:.82rem}
/* Section « Mes demandes de logement » sous la grille des annonces */
.li-myl-section{margin-top:56px;padding-top:36px;border-top:1px solid var(--border)}
.li-myl-section__head{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin:0 0 24px}
.li-myl-section__title{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);margin:0;display:flex;align-items:center;gap:10px}
.li-myl-section__title .hp-icon{color:var(--rasp);font-size:1rem}
.li-myl-badge--urgent{background:#fbe3c4;color:#a85a00}
.li-myl-card__excerpt{margin:0;color:var(--ink-2);font-size:.88rem;line-height:1.5}
/* Carte « demande » : pas de photo → format simplifié (corps seul + petite icône) */
.li-myl-card--demande .li-myl-card__body{padding:18px 18px 16px;gap:10px}
.li-myl-card--demande .li-myl-card__head{align-items:center}
.li-myl-card__ico{flex:none;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--rasp-deep);background:linear-gradient(135deg,rgba(238,61,111,.12),rgba(208,134,30,.16));margin-right:2px}
.li-myl-badge--priv{background:var(--cream-2);color:var(--ink-2)}
.li-myl-delform,.li-myl-visform{display:inline-flex;margin:0}
/* Boutons d'action des cartes « demande » : toujours visibles (pas seulement au survol) */
.li-myl-delform .li-myl-act,.li-myl-visform .li-myl-act{cursor:pointer;font-family:inherit;background:#fff;border:1px solid var(--border);color:var(--ink)}
.li-myl-visform .li-myl-act:hover{border-color:var(--rasp);color:var(--rasp-deep)}
.li-myl-visform .li-myl-act--primary{background:linear-gradient(120deg,var(--rasp-br),var(--rasp) 60%,var(--rasp-deep));color:#fff;border-color:transparent}
.li-myl-visform .li-myl-act--primary:hover{color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(238,61,111,.32)}
.li-myl-delform .li-myl-act{color:var(--ink-2)}
.li-myl-delform .li-myl-act:hover{border-color:#d33;color:#c0392b}

/* Section « Archives » (annonces + demandes supprimées) */
.li-myl-section--archives .li-myl-section__title .hp-icon{color:var(--ink-2)}
.li-arch__hint{margin:0 0 14px;color:var(--ink-2);font-size:.9rem}
.li-arch{display:flex;flex-direction:column;gap:10px}
.li-arch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--cream-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px}
.li-arch-row__info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.li-arch-row__kind{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-radius:var(--pill);padding:2px 9px}
.li-arch-row__title{font-weight:600;color:var(--ink)}
.li-arch-row__sub{color:var(--ink-2);font-size:.88rem}
.li-arch-row__sub .hp-icon{color:var(--rasp);font-size:.8rem}
.li-arch-row__acts{display:flex;gap:8px;flex:none}
.li-arch-row__acts .li-myl-act{background:#fff}

/* Topbar / onglets */
.hp-page__topbar{border-bottom:1px solid var(--border);margin-bottom:20px;padding-bottom:0}
.hp-menu--tabbed .hp-menu__item{position:relative;font-weight:600;color:var(--ink-2);padding-bottom:12px}
.hp-menu--tabbed .hp-menu__item--current,.hp-menu--tabbed .hp-menu__item:hover{color:var(--rasp)}
.hp-menu--tabbed .hp-menu__item--current::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--rasp),var(--gold))}

/* ===== Réorganisation des sections de la fiche (ordre Airbnb) =====
   Photo → À propos (description) → Ce que propose (équipements) → Disponibilités → Localisation.
   On passe le contenu en colonne flex et on ordonne ; le haut (titre, onglets,
   photos) reste en place (order 0 = ordre du DOM). */
.hp-listing--view-page .hp-page__content{display:flex;flex-direction:column}
.hp-listing--view-page .hp-page__content > .hp-listing__description{order:5}
.hp-listing--view-page .hp-page__content > .hp-listing__attributes--secondary{order:6}
/* Moyens de paiement : à la fin des équipements (même order, dernier dans le DOM). */
.hp-listing--view-page .hp-page__content > .li-pay-methods{order:6}
.hp-listing--view-page .hp-page__content > .li-cal-wrap{order:7}
.hp-listing--view-page .hp-page__content > .li-map-wrap{order:8}
.hp-listing--view-page .hp-page__content > .li-reviews{order:9}

/* Titre de section « À propos de ce logement » au-dessus de la description */
.hp-listing--view-page .hp-listing__description{padding-top:30px;border-top:1px solid var(--border);margin-top:30px}
.hp-listing--view-page .hp-listing__description::before{content:"À propos de ce logement";display:block;font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);margin-bottom:14px}

/* Description */
.hp-listing__description{color:var(--ink);line-height:1.75;font-size:1.02rem}
.hp-listing__description h1,.hp-listing__description h2,.hp-listing__description h3{font-family:var(--serif)}

/* Attributs secondaires = chips */
.hp-listing__attributes--secondary{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 28px}
.hp-listing__attributes--secondary .hp-listing__attribute{font-size:.85rem;color:var(--rasp-deep);
  background:rgba(238,61,111,.09);border:1px solid rgba(238,61,111,.26);border-radius:var(--pill);padding:.4em .9em;margin:0!important}

/* Sidebar : widget des attributs primaires (prix + détails) */
.hp-page__sidebar .hp-widget,.hp-listing--view-page .hp-listing__attributes--primary{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:24px 22px;margin-bottom:22px}
/* Barre latérale du catalogue (widget de filtres) : à plat, sans ombre portée
   (demande du 27/07) — la bordure suffit. L'ombre reste sur le bloc tarifaire
   de la fiche annonce, qui doit ressortir. */
.hp-page__sidebar .hp-widget{box-shadow:none}
.hp-listing__attributes--primary .hp-listing__attribute{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);color:var(--ink);font-size:.96rem}
.hp-listing__attributes--primary .hp-listing__attribute:last-child{border-bottom:none}
.hp-listing__attributes--primary .hp-listing__attribute--prix-nuit{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--rasp-deep);border-bottom:2px solid var(--border);padding-bottom:14px;margin-bottom:4px}

/* Sidebar : actions (Message / avis / signaler) */
.hp-listing--view-page .hp-listing__actions--primary{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:22px;display:flex;flex-direction:column;gap:12px}
.hp-listing__action--message{width:100%;justify-content:center;text-align:center}
.hp-listing__actions--secondary{display:flex;gap:10px}
.hp-listing__action--favorite,.hp-listing__action--review,.hp-listing__action--report{
  display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:.88rem;font-weight:500}
.hp-listing__action--favorite:hover{color:var(--rasp)}
.hp-listing__action--favorite .hp-icon{color:var(--rasp)}

/* Carte */
.hp-listing__map,.hp-map{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border)}

/* ===================== CATALOGUE : cartes (view-block) ===================== */
.hp-listing--view-block{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
@media (hover:hover) and (pointer:fine){.hp-listing--view-block:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}}
/* Photo de carte : cadre 4/3 constant, image qui remplit (object-fit cover).
   Sans ça, le carousel HivePress laissait l'image à sa taille naturelle → mauvais
   remplissage / bande sous la photo. Chaîne de height pour couvrir le cas slick. */
.hp-listing--view-block .hp-listing__image{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.hp-listing--view-block .hp-listing__image::before{content:"\f015";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--gold);opacity:.16;z-index:0}
.hp-listing--view-block .hp-listing__image > a,
.hp-listing--view-block .hp-listing__image .slick-list,
.hp-listing--view-block .hp-listing__image .slick-track,
.hp-listing--view-block .hp-listing__image .slick-slide,
.hp-listing--view-block .hp-listing__image .slick-slide > a{height:100%!important}
.hp-listing--view-block .hp-listing__image img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){.hp-listing--view-block:hover .hp-listing__image img{transform:scale(1.05)}}
/* Fuite du zoom (Safari) : forcer le clip des enfants transformés en donnant une
   couche de compositing aux conteneurs arrondis qui portent overflow:hidden. */
.hp-listing--view-block,.hp-listing--view-block .hp-listing__image{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
/* ===== Carrousel photos sur les cartes (grille /logements/, pages villes) =====
   HivePress rend toutes les photos + slick avec ses chevrons. Rendu robuste :
   bouton rond blanc + chevron en SVG de fond (aucune dépendance police/pseudo ;
   un ::after bordure ne se peignait pas sur Safari). Flèches VISIBLES en continu :
   le plugin les masque hors survol via `!important` (→ invisibles sur mobile où le
   survol n'existe pas), donc on ré-affiche avec une règle plus spécifique. */
/* Le slider épouse le cadre 4/3 (au lieu de prendre la hauteur naturelle des
   photos) : sans ça, une photo portrait sans déclinaison recadrée rend le
   slider plus haut que la fenêtre visible → flèches centrées sur la partie
   masquée, donc décalées vers le bas (vu sur une annonce aux photos 240x320). */
.hp-listing--view-block .hp-listing__image .hp-listing__image-slider{position:absolute;inset:0}
.hp-listing--view-block .hp-listing__image .slick-arrow,
.hp-listing--view-block .hp-listing__image .hp-listing__image-slider .slick-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;font-size:0;background-color:rgba(255,255,255,.94);box-shadow:var(--shadow-sm);background-repeat:no-repeat;background-position:center;background-size:11px 11px;display:flex!important;align-items:center;justify-content:center;opacity:.92;transition:opacity .2s,background-color .2s,transform .2s}
.hp-listing--view-block:hover .hp-listing__image .slick-arrow{opacity:1}
@media (hover:hover) and (pointer:fine){.hp-listing--view-block .hp-listing__image .slick-arrow:hover{background-color:#fff;transform:translateY(-50%) scale(1.06)}}
.hp-listing--view-block .hp-listing__image .slick-prev{left:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241726' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
.hp-listing--view-block .hp-listing__image .slick-next{right:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241726' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}
@media (hover:hover) and (pointer:fine){.hp-listing--view-block .hp-listing__image .slick-prev:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}}
@media (hover:hover) and (pointer:fine){.hp-listing--view-block .hp-listing__image .slick-next:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}}
/* Icône FontAwesome (vide sur l'archive) injectée par HivePress → masquée. */
.hp-listing--view-block .hp-listing__image .slick-arrow i{display:none}
/* Flèche désactivée (1re / dernière photo, carrousel non infini) → masquée. */
.hp-listing--view-block .hp-listing__image .slick-arrow.slick-disabled{display:none!important}
/* Titre uniforme : 2 lignes réservées + clamp → attributs alignés entre cartes */
.hp-listing--view-block .hp-listing__title{font-family:var(--serif);font-weight:600;font-size:1.18rem;color:var(--ink);line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-listing--view-block .hp-listing__title a{font-family:var(--serif);font-weight:600;color:var(--ink)}
/* CATALOGUE — carte épurée : capacité en texte léger, prix net, pas de pastilles */
.hp-listing--view-block .hp-listing__attributes{display:flex!important;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:8px 0 0}
.hp-listing--view-block .hp-listing__attribute{display:inline-flex!important;align-items:center;width:auto!important;max-width:none!important;flex:0 0 auto;white-space:nowrap;margin:0!important;
	background:none!important;border:none!important;border-radius:0!important;padding:0!important;color:var(--ink-2)!important;font-size:.86rem;font-weight:400}
/* Plus de puce · devant couchages/surface : séparation assurée par la gouttière flex */
.hp-listing--view-block .hp-listing__attribute--arrangement{font-size:.72rem!important;font-weight:600!important;color:var(--rasp-deep)!important;
	background:rgba(238,61,111,.1)!important;border:1px solid rgba(238,61,111,.22)!important;border-radius:var(--pill)!important;padding:.24em .7em!important}
.hp-listing--view-block .hp-listing__attribute--prix-nuit{font-family:var(--serif)!important;font-size:1.3rem!important;font-weight:600!important;color:var(--rasp-deep)!important;background:none!important;border:none!important;padding:0!important}
/* Carte : prix de repli injecté (inc/price-fallback.php) → « Sur demande » / « Gratuit »
   en framboise, même allure que le prix à la nuit. */
/* Pied de carte avec prix de repli : le libellé occupe la 1re ligne, la ville
   et le cœur se partagent la 2e — comme dans le cas natif. Sans ces deux
   règles le cœur basculait sur une 3e ligne : le pied mesurait 23px de plus
   et la ligne Hôte ne tombait plus à la même hauteur d'une carte à l'autre. */
.hp-listing--view-block .hp-listing__footer:has(.li-card-price){display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:3px}
.hp-listing--view-block .hp-listing__footer:has(.li-card-price)>.li-card-price{grid-column:1;grid-row:1;margin-bottom:0}
.hp-listing--view-block .hp-listing__footer:has(.li-card-price)>.hp-listing__attributes--primary{grid-column:1;grid-row:2}
/* Le cœur occupe les DEUX lignes de la grille et se centre dessus — comme
   dans le cas natif, où il est centré face au bloc prix+ville. Sinon il
   tombait sur la seule ligne de la ville, plus bas que d'habitude. */
.hp-listing--view-block .hp-listing__footer:has(.li-card-price)>.hp-listing__actions--primary{grid-column:2;grid-row:1/3;justify-self:end;align-self:center;margin-top:0}
/* `.li-card-price` ne porte plus QUE la mise en page : depuis le 27/07 le
   libellé reprend les classes de l'attribut prix-nuit (li-price.php) et donc
   sa typographie. Pas de marge haute : rien ne s'affiche au-dessus. */
.hp-listing--view-block .li-card-price{flex:0 0 100%;width:100%;line-height:1.6;margin-top:0;margin-bottom:3px}
/* Fiche annonce : « Gratuit » seulement si AUCUN tarif (nuit ni semaine ni mois) */
.hp-listing--view-page .hp-listing__attributes--primary:not(:has(.hp-listing__attribute--prix-nuit)):not(:has(.hp-listing__attribute--prix-semaine)):not(:has(.hp-listing__attribute--prix-mois))::before{content:"Sur demande";grid-column:1/-1;display:block;font-family:var(--serif);font-weight:700;font-size:2.1rem;line-height:1.08;color:var(--rasp);padding-bottom:16px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.hp-listing--view-block .hp-listing__attribute--ville{color:var(--ink-2)!important;font-size:.88rem;font-weight:600}
.hp-listing--view-block .hp-listing__attribute--ville::before{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f3c5";color:var(--rasp);margin-right:6px;font-size:.82rem}

/* Carte : pied épuré — prix + ville en ligne, sans boîtes ; cœur favori discret, pas de bouton message */
.hp-listing--view-block .hp-listing__attributes--primary,
.hp-listing--view-block .hp-listing__actions,
.hp-listing--view-block .hp-listing__actions--primary,
.hp-listing--view-block .hp-listing__actions--secondary{background:none!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important}
/* Le décalage de 12px vivait sur le bloc d'attributs — donc SOUS le prix de
   repli (semaine/mois/« Sur demande »), qui est son frère et non son enfant :
   les deux familles de prix ne démarraient pas à la même hauteur. Il est
   remonté sur le pied de carte (l.687), commun aux deux cas. */
.hp-listing--view-block .hp-listing__attributes--primary{display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;margin-top:0!important}
.hp-listing--view-block .hp-listing__action--message{display:none!important}
.hp-listing--view-block .hp-listing__action--favorite{color:var(--ink-2)!important;background:none!important;border:none!important;box-shadow:none!important;padding:0!important;font-size:1.1rem;margin-top:10px;display:inline-flex;align-items:center;gap:6px}
.hp-listing--view-block .hp-listing__action--favorite:hover{color:var(--rasp)!important}

/* Carte catalogue : hôte + badge de confiance (part li-host, harmonise avec l'accueil) */
.hp-listing--view-block .li-card-host{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:.85rem}
.li-card-host__av{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--gold-br),var(--gold-deep))}
.li-card-host__main{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:3px 8px}
.li-card-host__name{min-width:0;font-weight:600;color:var(--ink);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.li-card-host__badge{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:.64rem;font-weight:700;padding:.2em .55em;border-radius:var(--pill);white-space:nowrap}
.li-card-host__sub{flex:none;font-size:.72rem;font-weight:600;color:var(--ink-2);line-height:1}
.li-card-host__badge--trust{color:var(--trust-teal-deep);background:rgba(13,148,136,.14);border:1px solid rgba(13,148,136,.32)}
.li-card-host__badge--ok{color:var(--rasp-deep);background:rgba(238,61,111,.1);border:1px solid rgba(238,61,111,.22)}
.li-card-host__badge--verified{color:var(--trust-blue-deep);background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.30)}
.li-card-host__badge--premium{color:var(--gold-deep);background:rgba(208,134,30,.14);border:1px solid rgba(208,134,30,.32)}
/* Cartes de même hauteur sur une rangée + prix calé en bas (footer aligné entre colonnes) */
.hp-grid__item > .hp-listing--view-block{flex:1 1 auto;width:100%}
.hp-listing--view-block{display:flex;flex-direction:column}
.hp-listing--view-block .hp-listing__content{flex:1 1 auto}
/* Rythme vertical de la carte : c'est la ligne Hôte qui doit rester à une
   hauteur CONSTANTE depuis le bas, quelle que soit la longueur du titre ou
   des attributs. L'espace élastique passe donc AU-DESSUS d'elle (entre la
   liste d'attributs et son filet de séparation) et non plus en dessous :
   `margin-top:auto` quitte le pied de carte pour le bloc Hôte, le contenu
   devenant une colonne flex qui occupe la hauteur libre. */
.hp-listing--view-block .hp-listing__content{display:flex;flex-direction:column}
.hp-listing--view-block .li-card-host{margin-top:auto}
.hp-listing--view-block .hp-listing__footer{padding-top:12px}

/* ===================== RECHERCHE & FILTRES ===================== */
.hp-form--listing-filter,.widget_hivepress_listing_filter{
  /* Sans ombre portée (demande du 27/07) : le bloc de filtres se pose à plat
     sur le fond, la bordure suffit à le délimiter. */
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:none;padding:22px}

/* En-tête catalogue : « Affichage de N résultats » (gauche) + Catégorie & Tri
   (droite) alignés sur UNE ligne — fini la grosse carte de tri détachée.
   Ciblé via :has(.hp-form--listing-sort) → ne touche que le bandeau du catalogue. */
.hp-page__topbar:has(.hp-form--listing-sort){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-bottom:16px}
.hp-result-count{margin:0;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.hp-form--listing-sort{margin:0;padding:0;background:none;border:none;box-shadow:none;display:flex;align-items:center}
.hp-form--listing-sort .hp-form__messages{display:none}
.hp-form--listing-sort .hp-field--hidden{display:none!important}
.hp-form--listing-sort .hp-form__fields{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0}
.hp-form--listing-sort .hp-form__field{display:flex;align-items:center;gap:8px;margin:0}
.hp-form--listing-sort .hp-field__label{margin:0;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.hp-form--listing-sort select{min-width:150px}
/* — Habillage à la marque de la barre tri/filtre du catalogue — */
.hp-result-count{font-family:var(--sans);text-transform:none;font-size:.96rem;letter-spacing:0;color:var(--ink-2)}
.hp-form--listing-sort .hp-field__label{font-family:var(--sans);color:var(--ink-2)}
.hp-form--listing-sort select{
	-webkit-appearance:none;-moz-appearance:none;appearance:none;
	font:inherit;font-family:var(--sans);font-size:.95rem;color:var(--ink);
	background-color:#fff;border:1.5px solid var(--border);border-radius:var(--r-sm);
	padding:.62em 2.4em .62em 1em;line-height:1.2;cursor:pointer;box-shadow:var(--shadow-sm);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C91E52' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right .85em center;background-size:11px;
	transition:border-color .18s,box-shadow .18s,transform .18s}
.hp-form--listing-sort select:hover{border-color:var(--ink-2);transform:translateY(-1px)}
.hp-form--listing-sort select:focus{outline:none;border-color:var(--rasp);box-shadow:0 0 0 3px rgba(238,61,111,.14)}
@media(max-width:680px){
  /* Mobile : bandeau tri compact — on resserre l'espace entre « Trier par »,
     « N annonces », le trait et la première carte (demande user). */
  .hp-page__topbar:has(.hp-form--listing-sort){flex-direction:column;align-items:stretch;gap:6px;padding-bottom:8px;margin-bottom:10px}
  .hp-form--listing-sort,.hp-form--listing-sort .hp-form__fields{width:100%}
  .hp-form--listing-sort .hp-form__field{flex:1 1 auto;justify-content:space-between}
}
.hp-form--listing-search{margin:0}

/* Sidebar filtres : compacte, sans libellé redondant au-dessus des cases */
.hp-form--listing-filter .hp-form__field{margin-bottom:16px}
.hp-form--listing-filter .hp-field__label{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.hp-form--listing-filter .hp-form__field--checkbox{margin-bottom:8px}
.hp-form--listing-filter .hp-form__field--checkbox > .hp-field__label{display:none}
.hp-form--listing-filter .hp-form__field--checkbox label{display:flex;align-items:center;gap:9px;font-weight:400;text-transform:none;letter-spacing:0;font-size:.93rem;color:var(--ink);cursor:pointer}
.hp-form--listing-filter .hp-form__button{width:100%;margin-top:10px}

/* Catalogue : on masque la barre de recherche « Mots-clés » du haut.
   La recherche Ville + Type + budget vit dans la barre latérale → barre du haut redondante. */
.hp-form--listing-search{display:none!important}

/* ===================== MODALES (connexion / inscription) ===================== */
.hp-modal__window,.hp-modal>div{border-radius:var(--r-lg)!important;overflow:hidden}
.hp-modal__title{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--ink)}
.hp-modal__close{color:var(--ink-2)}
.hp-form__action--user-register a,.hp-form__action--user-login a{color:var(--rasp-deep);font-weight:600}

/* ===================== VENDOR / PROFIL ===================== */
.hp-vendor__summary{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:28px 24px;text-align:center}
.hp-vendor--view-page .hp-vendor__image{width:112px;height:112px;margin:0 auto 16px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-sm);border:3px solid #fff;background:var(--cream-2)}
.hp-vendor--view-page .hp-vendor__image img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.hp-vendor__name,.hp-vendor__name a{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--ink);margin:0 0 4px}
.hp-vendor__details{color:var(--ink-2);font-size:.88rem;justify-content:center}
.hp-vendor__attributes--secondary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.hp-vendor__attribute{color:var(--ink-2);font-size:.9rem}
.hp-vendor__attribute--metier{font-weight:600;color:var(--rasp-deep);font-size:1rem;width:100%;white-space:nowrap;text-align:center}
.hp-vendor__attribute--ville{display:inline-flex;align-items:center;gap:5px}
.hp-vendor__description{color:var(--ink);line-height:1.7;font-size:.96rem;margin-top:16px;text-align:left}
.hp-vendor__actions--primary{margin-top:16px}
.hp-vendor__action--message{width:100%;justify-content:center}
/* Fiche hôte — la carte résumé (--secondary) porte déjà métier, ville ET badge.
 * On dédoublonne le bloc --primary attribut par attribut (plus de display:none
 * sur le bloc entier : aucun masquage de bloc ne peut plus faire disparaître le
 * badge, qui reste rendu dans la carte via --secondary). */
.hp-vendor--view-page .hp-vendor__attributes--primary > .hp-vendor__attribute--metier,
.hp-vendor--view-page .hp-vendor__attributes--primary > .hp-vendor__attribute--ville,
.hp-vendor--view-page .hp-vendor__attributes--primary > .hp-vendor__attribute--niveau-confiance{display:none}
/* Garde-fou : si --primary na plus aucun attribut propre a montrer (ex. pas de
 * badge Premium), on le neutralise pour eviter une marge/vide residuel. */
.hp-vendor--view-page .hp-vendor__attributes--primary:not(:has(> .hp-vendor__attribute:not(.hp-vendor__attribute--metier):not(.hp-vendor__attribute--ville):not(.hp-vendor__attribute--niveau-confiance))){display:none}

/* ===================== Bandeau bienvenue (après création d'annonce) ===================== */
.li-qp-welcome{background:linear-gradient(120deg,rgba(238,61,111,.1),rgba(208,134,30,.12));border:1px solid var(--rasp-br);border-radius:var(--r-lg);padding:18px 22px;margin:0 0 28px;box-shadow:var(--shadow-sm)}
.li-qp-welcome strong{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--rasp-deep);margin-bottom:4px}
.li-qp-welcome p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.6}
.li-qp-welcome b{color:var(--rasp-deep)}

/* ============ Calendrier de disponibilités (édition d'annonce) ============ */
.li-avail{border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;background:#fff}
.li-avail__head{margin-bottom:12px}
.li-avail__title{display:block;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.1rem}
.li-avail__hint{display:block;color:var(--ink-2);font-size:.85rem;margin:0 0 12px}
.li-avail__modes{display:inline-flex;gap:4px;background:var(--cream-2);border-radius:var(--pill);padding:4px;margin-bottom:14px}
.li-avail__mode{border:none;background:none;padding:8px 18px;border-radius:var(--pill);font-family:var(--sans);font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s}
.li-avail__mode.is-active[data-mode="dispo"]{background:linear-gradient(120deg,var(--rasp-br),var(--rasp));color:#fff;box-shadow:0 3px 10px rgba(238,61,111,.3)}
.li-avail__mode.is-active[data-mode="maybe"]{background:linear-gradient(120deg,var(--gold-br),var(--gold));color:#3A2606;box-shadow:0 3px 10px rgba(208,134,30,.3)}
.li-avail__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.li-avail__month{font-family:var(--serif);font-weight:600;font-size:1.05rem;text-transform:capitalize;color:var(--ink)}
.li-avail__nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .2s}
.li-avail__nav:hover{border-color:var(--rasp);color:var(--rasp)}
.li-avail__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.li-avail__dow{font-size:.64rem;font-weight:700;letter-spacing:.02em;color:var(--ink-2);padding:4px 0;text-transform:uppercase}
.li-avail__day{height:40px;border:none;background:none;border-radius:10px;cursor:pointer;font-family:var(--sans);font-size:.9rem;color:var(--ink);transition:background .15s,color .15s}
.li-avail__day--empty{visibility:hidden}
.li-avail__day:not(.li-avail__day--off):not(.li-avail__day--dispo):not(.li-avail__day--maybe):hover{background:rgba(238,61,111,.1)}
.li-avail__day--off{color:var(--ink-2);opacity:.32;cursor:default}
.li-avail__day--dispo{background:linear-gradient(135deg,var(--rasp-br),var(--rasp) 70%,var(--rasp-deep));color:#fff;font-weight:700}
.li-avail__day--maybe{background:linear-gradient(135deg,var(--gold-br),var(--gold) 70%,var(--gold-deep));color:#3A2606;font-weight:700}
.li-avail__day--dispo.li-avail__day--maybe{background:linear-gradient(120deg,var(--rasp) 50%,var(--gold) 50%);color:#fff}
.li-avail__day--pending{box-shadow:inset 0 0 0 2px var(--rasp);font-weight:700}
/* Indisponible (grisé) — prime sur dispo/peut-être. Gris neutre, non genré. */
.li-avail__day--indispo{background:repeating-linear-gradient(45deg,#e6e6ea,#e6e6ea 6px,#d6d6db 6px,#d6d6db 12px);color:#6b6b73;font-weight:700;text-decoration:line-through}
.li-avail__mode--indispo.is-active{background:#52525b;color:#fff;border-color:#52525b}
.li-avail__sumrow--indispo .li-avail__dot{background:#a1a1aa}
/* Page dédiée /mes-disponibilites/ (accès court : calendrier seul + save AJAX). */
.li-availpage__pick{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-weight:600;color:var(--ink)}
.li-availpage__pick select{flex:1;max-width:420px}
.li-availpage__actions{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* Greffé DANS la carte du calendrier (cf. inc/availability-page.php) : filet de
   séparation plutôt qu un blanc, comme la ligne d export du calendrier de fiche. */
.li-availpage__actions--incal{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
/* Respiration bas de page avant le footer sur les pages de contenu/shortcode
 * (rendues par page.php → .page__text). Les pages HivePress (.hp-page) ont déjà
 * leur padding ; la home (front-page.php) n'utilise pas .page__text. */
.page__text { padding-bottom:clamp(104px,12vh,168px) }
@media (max-width:768px){.page__text{padding-bottom:56px}}
.li-availpage__status{font-size:.92rem;font-weight:600}
.li-availpage__status.is-ok{color:#1a7f4b}
.li-availpage__status.is-err{color:var(--rasp-deep)}
.li-avail__summary{margin-top:14px;display:grid;gap:6px;font-size:.92rem}
.li-avail__sumrow{display:flex;align-items:center;gap:8px;color:var(--ink)}
.li-avail__dot{width:13px;height:13px;border-radius:4px;flex:none}
.li-avail__sumrow--dispo .li-avail__dot{background:var(--rasp)}
.li-avail__sumrow--maybe .li-avail__dot{background:var(--gold)}
.li-avail__clear{border:none;background:none;color:var(--rasp-deep);text-decoration:underline;cursor:pointer;font-size:.85rem;font-family:var(--sans);padding:0 2px}

/* ============ Formulaire d'annonce : cases à cocher en plusieurs colonnes ============
 * Le formulaire d'édition d'annonce compte ~55 équipements à cocher en une seule
 * colonne (très long). On grille le conteneur de champs : les cases prennent une
 * colonne chacune (auto-fill), tous les autres champs (texte, nombre, select,
 * zone de texte, upload) restent en pleine largeur. Auto-scopé par :has() —
 * seuls les formulaires d'annonce contiennent ces cases. */
.hp-form__fields:has(> .hp-form__field--checkbox){
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 24px;align-items:start;
}
.hp-form__fields:has(> .hp-form__field--checkbox) > .hp-form__field{grid-column:1 / -1;}
.hp-form__fields:has(> .hp-form__field--checkbox) > .hp-form__field--checkbox{grid-column:auto;margin:0;}
/* Le libellé majuscule au-dessus de la case fait doublon avec la légende à côté
 * de la case (ex. « WIFI » puis « Wifi ») → masqué pour compacter. */
.hp-form__fields:has(> .hp-form__field--checkbox) > .hp-form__field--checkbox > .hp-field > .hp-field__label,
.hp-form__fields:has(> .hp-form__field--checkbox) > .hp-form__field--checkbox > .hp-field__label{display:none;}
/* L'attestation légale (la case juste avant le champ Images) garde la pleine
 * largeur ET son libellé : c'est une mention juridique, pas un équipement. */
.hp-form__fields:has(> .hp-form__field--checkbox) > .hp-form__field--checkbox:has(+ .hp-form__field--attachment-upload){grid-column:1 / -1;}
.hp-form__fields:has(> .hp-form__field--checkbox) > .hp-form__field--checkbox:has(+ .hp-form__field--attachment-upload) .hp-field__label{display:block;}
@media(max-width:520px){
  .hp-form__fields:has(> .hp-form__field--checkbox){grid-template-columns:repeat(2,1fr);gap:8px 16px;}
}

/* ============ Formulaire d'annonce : SECTIONS + COLONNES (fluidité) ============
 * En-têtes de section (li-sec) et lignes multi-colonnes (li-formrow) injectés en
 * JS (form-sections.js). Pleine largeur dans la grille des champs. */
.hp-form__fields:has(> .hp-form__field--checkbox) > .li-sec,
.hp-form__fields:has(> .hp-form__field--checkbox) > .li-formrow{grid-column:1 / -1;}
.li-sec{display:flex;align-items:flex-start;gap:14px;margin:34px 0 14px;padding-top:24px;border-top:1px solid var(--border)}
.li-sec:first-child{border-top:none;padding-top:4px;margin-top:0}
.li-sec__icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,rgba(238,61,111,.14),rgba(208,134,30,.18));display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex:none;line-height:1}
.li-sec__txt{display:block;padding-top:1px}
.li-sec__title{display:block;font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--ink);letter-spacing:-.01em}
.li-sec__sub{display:block;color:var(--ink-2);font-size:.9rem;margin-top:3px;line-height:1.5;max-width:60ch}
.li-formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 22px}
.li-formrow > .hp-form__field{margin:0}
@media(max-width:560px){
  .li-formrow{grid-template-columns:repeat(2,1fr);gap:0 16px}
  .li-sec__icon{width:36px;height:36px;font-size:1.1rem}
  .li-sec__title{font-size:1.15rem}
}

/* ===================== PAGINATION ===================== */
.hp-pagination{display:flex;gap:8px;justify-content:center;margin-top:40px}
.hp-pagination a,.hp-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--ink);font-weight:600}
.hp-pagination a:hover{border-color:var(--rasp);color:var(--rasp)}
.hp-pagination .current,.hp-pagination [aria-current]{background:linear-gradient(120deg,var(--rasp-br),var(--rasp));color:#fff;border-color:transparent}
/* Le thème parent (.pagination .nav-links > span, spécificité 0,2,1) impose color:inherit
   → chiffre sombre sur la page active. On repasse en blanc avec 0,3,0. */
.hp-pagination .nav-links > .current,.hp-pagination .nav-links > [aria-current],
.pagination .nav-links > .current,.pagination .nav-links > [aria-current]{color:#fff}

/* ===================== Slider de plage (prix / surface) ===================== */
.hp-field--number-range .ui-slider{background:var(--border);height:4px;border:none;border-radius:4px;margin:14px 4px}
.hp-field--number-range .ui-slider-range{background:linear-gradient(90deg,var(--rasp),var(--gold))!important;border-radius:4px}
.hp-field--number-range .ui-slider-handle{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--rasp)!important;box-shadow:0 2px 8px rgba(238,61,111,.35);top:-8px;margin-left:-10px;cursor:grab}
.hp-field--number-range .ui-slider-handle:focus{outline:none;box-shadow:0 0 0 4px rgba(238,61,111,.2)}

/* Cases à cocher / radios cochés en framboise (filtres) */
.hp-field input[type=checkbox]:checked + span::before,.hp-field input[type=radio]:checked + span::after{background-color:var(--rasp)!important}

/* ============================================================
   FICHE ANNONCE — beautification (icônes FA5, grille, respiration)
   ============================================================ */

/* Bloc équipements : titre de section + grille d'icônes (fini le mur de pastilles) */
.hp-listing--view-page .hp-listing__attributes--secondary{
	display:block!important;margin:30px 0;padding:30px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hp-listing--view-page .hp-listing__attributes--secondary::before{
	content:"Ce que propose ce logement";display:block;font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);margin-bottom:20px}
/* On respecte la structure parent .hp-row > .hp-col-lg-6 : 2 colonnes pleines, jamais écrasées */
.hp-listing--view-page .hp-listing__attributes--secondary .hp-row{display:flex!important;flex-wrap:wrap;row-gap:16px;margin:0}
.hp-listing--view-page .hp-listing__attributes--secondary .hp-row>[class*="hp-col"]{flex:0 0 100%;max-width:100%;box-sizing:border-box;padding:0 28px 0 0}
@media(min-width:680px){
	.hp-listing--view-page .hp-listing__attributes--secondary .hp-row>[class*="hp-col"]{flex:0 0 50%;max-width:50%}
}
.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__attribute{
	display:flex!important;align-items:flex-start;gap:13px;background:none!important;border:none!important;border-radius:0!important;
	padding:0!important;margin:0!important;color:var(--ink)!important;font-size:.98rem;font-weight:400;white-space:normal;line-height:1.4}
.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__attribute::before{
	font-family:"Font Awesome 5 Free";font-weight:900;content:"\f00c";color:var(--rasp);font-size:1.05rem;width:24px;text-align:center;flex:none;line-height:1.5}

/* Icônes spécifiques (FA5 Free Solid) */
.hp-listing__attribute--wifi::before{content:"\f1eb"!important}
.hp-listing__attribute--cuisine::before{content:"\f2e7"!important}
.hp-listing__attribute--television::before{content:"\f26c"!important}
.hp-listing__attribute--chauffage::before{content:"\f769"!important}
.hp-listing__attribute--climatisation::before{content:"\f2dc"!important}
.hp-listing__attribute--cafetiere::before{content:"\f0f4"!important}
.hp-listing__attribute--four::before{content:"\f06d"!important}
.hp-listing__attribute--lave-linge::before{content:"\f553"!important}
/* Sèche-linge : glyphe PROPRE (fa-wind). Partageait le t-shirt du lave-linge —
 * deux lignes voisines à l'icône identique se lisent comme un doublon. */
.hp-listing__attribute--seche-linge::before{content:"\f72e"!important}
/* ⚠ NE PAS SUPPRIMER — ces trois-là partageaient la note de musique. FA 5 Free
 * n'a AUCUN glyphe de piano : fa-keyboard est le plus proche d'un clavier.
 * Le conservatoire est une ÉCOLE, d'où la toque. La note reste à l'espace
 * instrument, qui est le seul des trois qu'elle décrit vraiment. */
/* Piano : retour à la NOTE DE MUSIQUE, demandé le 14/08/2026. Un dessin SVG
 * de clavier avait été essayé (FA 5 Free n'a aucun piano, et fa-keyboard est
 * un clavier d'ORDINATEUR) : jugé trop moche à 17 px. Le glyphe est donc
 * PARTAGÉ avec « Espace instrument » — c'est assumé, pas un oubli. */
.hp-listing__attribute--piano::before{content:"\f001"!important}
.hp-listing__attribute--espace-instrument::before{content:"\f001"!important}
.hp-listing__attribute--proche-conservatoire::before{content:"\f19d"!important}
/* « Bon éclairage » affichait un ORDINATEUR PORTABLE, partagé avec l'espace de
 * travail. Ampoule pour la lumière, le portable reste au bureau. */
.hp-listing__attribute--bureau::before{content:"\f109"!important}
.hp-listing__attribute--bon-eclairage::before{content:"\f0eb"!important}
.hp-listing__attribute--douche::before{content:"\f2cc"!important}
.hp-listing__attribute--baignoire::before{content:"\f2cd"!important}
.hp-listing__attribute--literie-fournie::before{content:"\f236"!important}
/* Balcon et jardin peuvent être cochés ensemble : feuille vs arbre. */
.hp-listing__attribute--balcon-terrasse::before{content:"\f06c"!important}
.hp-listing__attribute--jardin::before{content:"\f1bb"!important}
.hp-listing__attribute--parking-gratuit::before,.hp-listing__attribute--parking-payant::before{content:"\f540"!important}
.hp-listing__attribute--animaux::before{content:"\f1b0"!important}
/* Interdictions : une croix, pas une coche (la coche signifie « inclus »). */
.hp-listing__attribute--fumeur-interdit::before,
.hp-listing__attribute--fetes-interdit::before,
.hp-listing__attribute--pas-de-musique-apres-18h::before{content:"\f00d"!important}
/* Absences (« Sans ascenseur »…) : croix aussi. Sélecteur générique préfixé
 * « sans- » pour couvrir d'office les suggestions communautaires approuvées
 * (option li_equip_approved) sans redéploiement CSS à chaque ajout. */
[class*="hp-listing__attribute--sans-"]::before{content:"\f00d"!important}
/* ⚠ NE PAS SUPPRIMER — même logique pour « Pas de… » et « … interdit » : les
 * hôtes formulent une interdiction de trois façons et la modération accepte
 * le libellé tel quel. Sans ces deux gardes, « Pas d'animaux » s'affichait
 * avec une COCHE, qui signifie « inclus » — contresens, pas défaut de style. */
[class*="hp-listing__attribute--pas-"]::before,
[class*="hp-listing__attribute--"][class*="-interdit"]::before{content:"\f00d"!important}
.hp-listing__attribute--accessible-pmr::before{content:"\f193"!important}
.hp-listing__attribute--proche-theatre::before,.hp-listing__attribute--proche-opera::before{content:"\f630"!important}
.hp-listing__attribute--proche-metro::before{content:"\f239"!important}
.hp-listing__attribute--commerces-proximite::before{content:"\f54e"!important}
.hp-listing__attribute--distance-gare::before{content:"\f238"!important}
/* Arrivée et départ s'affichent toujours côte à côte : deux horloges
 * identiques ne distinguaient rien. Flèches entrante / sortante. */
.hp-listing__attribute--heure-arrivee::before{content:"\f2f6"!important}
.hp-listing__attribute--heure-depart::before{content:"\f2f5"!important}
.hp-listing__attribute--sejour-minimum::before{content:"\f073"!important}
.hp-listing__attribute--detecteur-fumee::before{content:"\f75f"!important}
.hp-listing__attribute--detecteur-co::before{content:"\f604"!important}
.hp-listing__attribute--extincteur::before{content:"\f134"!important}
.hp-listing__attribute--premiers-secours::before{content:"\f469"!important}
/* ⚠ NE PAS SUPPRIMER — glyphes ajoutés au SOUS-ENSEMBLE de police le 14/08/2026
 * (inc/fa-subset.php : 141 → 150 glyphes). Retirer une règle ici ne casse rien,
 * mais retirer son codepoint du subset affiche un CARRÉ VIDE. Les 3 derniers
 * slugs viennent de la modération (option li_equip_approved), pas du catalogue. */
.hp-listing__attribute--eau-chaude::before{content:"\f043"!important}
.hp-listing__attribute--plaques::before{content:"\f7e4"!important}
.hp-listing__attribute--congelateur::before{content:"\f7ad"!important}
.hp-listing__attribute--garage::before{content:"\f494"!important}
.hp-listing__attribute--bibliotheque::before{content:"\f02d"!important}
.hp-listing__attribute--ventilateur::before{content:"\f863"!important}
.hp-listing__attribute--guitare::before{content:"\f7a6"!important}
/* ⚠ NE PAS SUPPRIMER — 2e lot du 14/08/2026, codepoints ajoutés au SOUS-ENSEMBLE
 * de police (voir inc/fa-subset.php + assets/fonts/fa-subset-unicodes.txt).
 * Retirer un codepoint du subset = CARRÉ VIDE, la règle CSS restant valide.
 * Écartés volontairement : Cheminée (aurait fait une 3e flamme après Four et
 * Plaques) et Serviettes (fa-soap = du savon, icône fausse). Réfrigérateur,
 * Micro-ondes, Lave-vaisselle, Fer à repasser, Sèche-cheveux, Ascenseur et
 * Trottinette n'ont AUCUN glyphe en FA 5 Free Solid : ils gardent la coche. */
.hp-listing__attribute--vaisselle::before{content:"\f2e5"!important} /* fa-utensil-spoon — présent sur 47 des 48 annonces */
.hp-listing__attribute--local-velo::before{content:"\f206"!important} /* fa-bicycle */
.hp-listing__attribute--velo::before{content:"\f84a"!important} /* fa-biking — distinct du local à vélos, volontairement */
.hp-listing__attribute--enceintes::before{content:"\f028"!important} /* fa-volume-up (modération) */
.hp-listing__attribute--plain-pied::before{content:"\f554"!important} /* fa-walking */
.hp-listing__attribute--piece-insonorisee::before{content:"\f6a9"!important} /* fa-volume-mute */
.hp-listing__attribute--cave-instruments::before{content:"\f187"!important} /* fa-archive */
.hp-listing__attribute--etage-eleve::before{content:"\f1ad"!important} /* fa-building */
.hp-listing__attribute--borne-recharge::before{content:"\f5e7"!important} /* fa-charging-station */
.hp-listing__attribute--entree-large::before{content:"\f52b"!important} /* fa-door-open */
.hp-listing__attribute--proche-bus::before{content:"\f207"!important} /* fa-bus */
.hp-listing__attribute--proche-covoiturage::before{content:"\f5e4"!important} /* fa-car-side */
.hp-listing__attribute--proche-salle-repetition::before{content:"\f569"!important} /* fa-drum — fa-music est déjà pris par piano/conservatoire */
.hp-listing__attribute--fumeur::before{content:"\f48d"!important} /* fa-smoking (l’interdiction, elle, prend la croix) */
.hp-listing__attribute--fetes::before{content:"\f79f"!important} /* fa-glass-cheers */
.hp-listing__attribute--enfants::before{content:"\f1ae"!important} /* fa-child */
.hp-listing__attribute--parasol::before{content:"\f5ca"!important} /* fa-umbrella-beach (modération) */

/* Descriptions longues (textarea) : pleine largeur, sans icône check */
.hp-listing--view-page .hp-listing__attribute--disponibilites,
.hp-listing--view-page .hp-listing__attribute--espace-travail,
.hp-listing--view-page .hp-listing__attribute--le-quartier,
.hp-listing--view-page .hp-listing__attribute--acces,
.hp-listing--view-page .hp-listing__attribute--reglement-interieur,
.hp-listing--view-page .hp-listing__attribute--conditions{
	grid-column:1/-1!important;display:block!important;color:var(--ink-2)!important;font-size:.97rem;line-height:1.7}
.hp-listing--view-page .hp-listing__attribute--disponibilites::before,
.hp-listing--view-page .hp-listing__attribute--espace-travail::before,
.hp-listing--view-page .hp-listing__attribute--le-quartier::before,
.hp-listing--view-page .hp-listing__attribute--acces::before,
.hp-listing--view-page .hp-listing__attribute--reglement-interieur::before,
.hp-listing--view-page .hp-listing__attribute--conditions::before{display:none!important}

/* ============================================================= */
/*  Sidebar fiche : carte PRIX + CAPACITÉ (refonte)              */
/*  - prix/nuit = hero ; prix/sem + /mois = 2 tuiles tarifaires  */
/*  - ville + type = bloc identité ; capacité = grille de tuiles */
/* ============================================================= */

/* La carte devient une grille 2 colonnes (les lignes « pleine
   largeur » utilisent grid-column:1/-1). */
.hp-listing--view-page .hp-listing__attributes--primary{
	display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:22px 22px 24px}

/* Reset : plus de filet sous chaque attribut, plus de padding vertical */
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute{
	justify-content:flex-start;gap:10px;padding:0;margin:0;border-bottom:none;
	font-size:.94rem;color:var(--ink)}

/* Prix / nuit — hero pleine largeur */
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--prix-nuit{
	grid-column:1/-1;display:block;font-family:var(--serif);font-weight:700;
	font-size:2.1rem;line-height:1.08;color:var(--rasp);
	padding-bottom:16px;margin-bottom:2px;border-bottom:1px solid var(--border)}

/* Prix / semaine & / mois — deux tuiles tarifaires côte à côte */
.hp-listing--view-page .hp-listing__attribute--prix-semaine,
.hp-listing--view-page .hp-listing__attribute--prix-mois{
	display:block;background:var(--cream-2);border-radius:14px;padding:12px 14px;
	font-family:var(--serif);font-size:1.02rem;line-height:1.25;font-weight:600;color:var(--ink)}

/* Localisation (ville) — ligne pleine largeur avec pin */
.hp-listing--view-page .hp-listing__attribute--ville{
	grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:8px;
	font-size:1.06rem;font-weight:600;color:var(--rasp-deep)}
.hp-listing--view-page .hp-listing__attribute--ville::before{
	font-family:"Font Awesome 5 Free";font-weight:900;content:"\f3c5";
	color:var(--rasp-deep);font-size:1rem;width:20px;text-align:center;flex:none}

/* Type de bien — sous-titre discret, aligné sous la ville */
.hp-listing--view-page .hp-listing__attribute--type-bien{
	grid-column:1/-1;color:var(--ink-2);font-size:.9rem;font-weight:500;
	margin:-3px 0 8px 29px}

/* Capacité — tuiles douces (badge icône + valeur) */
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--voyageurs,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--chambres,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--couchages,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--salles-de-bain,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--surface{
	display:flex;align-items:center;gap:11px;background:#fff;
	border:1px solid rgba(238,61,111,.16)!important;border-radius:14px;padding:11px 12px;
	font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.2}
.hp-listing--view-page .hp-listing__attribute--voyageurs::before,
.hp-listing--view-page .hp-listing__attribute--chambres::before,
.hp-listing--view-page .hp-listing__attribute--couchages::before,
.hp-listing--view-page .hp-listing__attribute--salles-de-bain::before,
.hp-listing--view-page .hp-listing__attribute--surface::before{
	font-family:"Font Awesome 5 Free";font-weight:900;color:var(--rasp);font-size:.95rem;
	width:32px;height:32px;flex:none;border-radius:10px;display:flex;
	align-items:center;justify-content:center;background:rgba(238,61,111,.09)}
.hp-listing--view-page .hp-listing__attribute--voyageurs::before{content:"\f0c0"}
.hp-listing--view-page .hp-listing__attribute--chambres::before{content:"\f52a"}
.hp-listing--view-page .hp-listing__attribute--couchages::before{content:"\f236"}
.hp-listing--view-page .hp-listing__attribute--salles-de-bain::before{content:"\f2cd"}
.hp-listing--view-page .hp-listing__attribute--surface::before{content:"\f546"}

/* Périodes (si affichées ici) — pleine largeur, discret */
.hp-listing--view-page .hp-listing__attribute--periode-disponible,
.hp-listing--view-page .hp-listing__attribute--periode-peut-etre{
	grid-column:1/-1;font-size:.9rem;color:var(--ink-2)}

/* Carte du prix : TOUTES les lignes de caractéristiques sont alignées à gauche.
   Le centrage hérité ne se voyait pas tant que le texte tenait sur une ligne,
   mais sautait aux yeux dès qu'il passait sur deux (« Appartement · Chambre
   privée, Logement entier »). Les tarifs, eux, restent centrés. */
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--ville,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--type-bien,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--arrangement{
	justify-content:flex-start;
	text-align:left;
}

/* Type de mise à disposition — AFFICHÉ dans la carte du prix (2026-08-03), juste
   après le type de bien, dans la même police/taille/couleur que lui (l'encart
   séparé sous le titre, avec sa description, a été retiré). L'ordre vient du
   `order` : les capacités passent après, l'arrangement se glisse entre. */
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--arrangement{
	display:flex!important;
	order:1;
	grid-column:1/-1; /* ligne entière, comme la ville et le type de bien. */
	font-family:var(--sans);
	font-size:.94rem;
	font-weight:400;
	color:var(--ink);
}
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--voyageurs,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--chambres,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--couchages,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--salles-de-bain,
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--surface{
	order:2;
}

/* Carte hôte : avatar placeholder plus doux, layout aéré */
.hp-vendor__summary{text-align:center}
.hp-vendor--view-page .hp-vendor__image{background:linear-gradient(135deg,#FBEFF4,#FCF4E8)}

/* ===================== Carte OpenStreetMap (fiche) ===================== */
.li-map-wrap{margin:26px 0}
.li-map-title{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin:0 0 14px;color:var(--ink)}
#li-map{height:340px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);z-index:1}
#li-map .leaflet-control-attribution{font-size:10px}
.li-map-note{margin:10px 0 0;font-size:.85rem;color:var(--ink-2);line-height:1.45;position:relative;padding-left:24px;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
.li-map-note .hp-icon{position:absolute;left:0;top:3px;color:var(--gold-deep)}
.li-map-note strong{color:var(--ink)}

/* ===================== Calendrier de disponibilités ===================== */
.li-cal-wrap{margin:28px 0;max-width:440px}
.li-cal-title{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin:0 0 14px;color:var(--ink)}
#li-cal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px}
.li-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.li-cal__month{font-family:var(--serif);font-weight:600;font-size:1.1rem;text-transform:capitalize;color:var(--ink)}
.li-cal__nav{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .2s}
.li-cal__nav:hover{border-color:var(--rasp);color:var(--rasp);transform:translateY(-1px)}
.li-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.li-cal__dow{font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--ink-2);padding:4px 0}
.li-cal__day{padding:9px 0;font-size:.9rem;border-radius:10px;color:var(--ink)}
.li-cal__day--empty{visibility:hidden}
.li-cal__day--past{color:var(--ink-2);opacity:.35}
.li-cal__day--avail{background:linear-gradient(135deg,var(--rasp-br),var(--rasp));color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(238,61,111,.25)}
.li-cal__day--maybe{background:rgba(208,134,30,.14);color:var(--gold-deep);font-weight:600;box-shadow:inset 0 0 0 1.5px rgba(208,134,30,.55)}
.li-cal__day--indispo{background:repeating-linear-gradient(45deg,#ececef,#ececef 5px,#dedee2 5px,#dedee2 10px);color:#6b6b73;font-weight:600;text-decoration:line-through}
.li-cal__legend{margin-top:14px;font-size:.82rem;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.li-cal__leg{display:inline-flex;align-items:center;gap:7px}
.li-cal__dot{width:15px;height:15px;border-radius:5px;background:linear-gradient(135deg,var(--rasp-br),var(--rasp))}
.li-cal__dot--maybe{background:rgba(208,134,30,.18);box-shadow:inset 0 0 0 1.5px var(--gold)}
.li-cal__dot--indispo{background:repeating-linear-gradient(45deg,#ececef,#ececef 4px,#d6d6db 4px,#d6d6db 8px)}
/* Export du calendrier : un intitulé commun, puis TROIS boutons courts sur une
   seule ligne. Avant, chaque bouton portait la phrase entiere (« S abonner sur
   Google Agenda ») : dans la colonne laterale ils debordaient, et le correctif
   de l epoque les avait empiles en trois blocs pleine largeur. */
.li-cal__ics-actions{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.li-cal__ics-title{display:block;margin:0 0 8px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
/* minmax(0,1fr) et non 1fr : sans le minimum a 0, une colonne de grille ne
   descend pas sous la largeur de son contenu et le rang deborde. */
.li-cal__ics-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* Repli court PAR DEFAUT, libelles longs seulement quand la place est sure.
   Mesures : colonne laterale ~322 px au-dela de 1180 px de fenetre (le long
   « Apple/Outlook » y tient), ~210 px entre 768 et 1180, et ~314 px en mobile
   plein ecran — ou le long deborde deja de 2 px sur un telephone de 390 px, et
   davantage sur plus etroit. Un libelle rogne coute plus qu un libelle court. */
.li-cal__ics-long{display:none}
.li-cal__ics-short{display:inline}
@media(min-width:1181px){
	.li-cal__ics-long{display:inline}
	.li-cal__ics-short{display:none}
}
.li-cal__ics-link{display:inline-flex;align-items:center;justify-content:center;min-width:0;padding:9px 6px;border:1px solid var(--border);border-radius:var(--pill);background:#fff;font-size:.78rem;font-weight:600;color:var(--rasp);text-decoration:none;text-align:center;white-space:nowrap;overflow:hidden;transition:border-color .15s,color .15s,background .15s}
.li-cal__ics-link:hover{border-color:var(--rasp);background:rgba(238,61,111,.06);text-decoration:none}

/* ===================== Ville (en évidence) ===================== */
.hp-listing__attribute--ville{font-weight:600;color:var(--ink)}
/* (Style ville de la fiche défini plus haut dans le bloc « carte prix + capacité ».) */
.hp-listing--view-block .hp-listing__attribute--ville{color:var(--ink-2);font-size:.9rem;font-weight:600}

/* ===================== Type d'arrangement (badge clair) ===================== */
/* Badge rose « Dépannage / prêt » retiré à la demande : on masque la pastille partout (carte + fiche). */
.hp-listing__attribute--arrangement{display:none!important}
/* Sur les cartes (view-block), la règle ci-dessus (spécificité 0,1,0) était écrasée par
   .hp-listing--view-block .hp-listing__attribute{display:inline-flex} (0,2,0) → la pastille
   restait visible et son texte long chevauchait « Appartement ». On masque toute la COLONNE
   de la pastille (pas juste son contenu), sinon « Appartement » se décalait dans la colonne
   voisine restée vide. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--arrangement){display:none!important}
/* La grille hp-col-lg-6 (basée sur le viewport, pas la largeur de carte) coinçait 2 attributs
   à 50% sans gouttière → collision « type long + voyageurs ». On aplatit la grille pour que
   les attributs coulent en ligne comme des puces (gouttière 12px + séparateurs · déjà gérés). */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row,
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > [class*="hp-col"]{display:contents}

/* Catégorie (logement entier / chambre…) bien visible sur la fiche */
.hp-listing--view-page .hp-listing__categories .hp-listing__category,
.hp-listing--view-block .hp-listing__categories .hp-listing__category{font-weight:700;letter-spacing:.06em}

/* ===================== Badge de confiance (niveau_confiance) ===================== */
.hp-listing__attribute--niveau-confiance,.hp-vendor__attribute--niveau-confiance{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--gold-deep);
  background:linear-gradient(135deg,rgba(208,134,30,.24),rgba(208,134,30,.1));border:1px solid var(--gold);border-radius:var(--pill);padding:.3em .8em}

/* ============================================================
   BROUILLONS en tête de « Mes annonces »
   ============================================================ */
.li-acc-drafts{margin:0 0 28px}
.li-acc-drafts__t{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.li-acc-drafts__t .hp-icon{color:var(--rasp)}
.li-acc-drafts__new{margin:16px 0 0}
.li-wz-drafts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.li-wz-draft{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px 20px}
.li-wz-draft__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.li-wz-draft__info strong{color:var(--ink)}
.li-wz-draft__info em{color:var(--ink-2);font-style:normal;font-size:.86rem}
.li-wz-draft__act{display:flex;align-items:center;gap:14px;flex:none}
.li-wz-draft__act .li-btn{padding:.55em 1.3em;font-size:.95rem}
.li-wz-draft__del{color:var(--ink-2);font-size:.9rem;text-decoration:underline;text-underline-offset:2px}
.li-wz-draft__del:hover{color:#c0392b}

/* ============================================================
   ONBOARDING — carte de progression (espace membre)
   ============================================================ */
.li-onb{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px 22px;margin:0 0 24px;position:relative;overflow:hidden}
.li-onb::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--rasp),var(--gold))}
.li-onb__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.li-onb__title{font-family:var(--serif);font-size:1.18rem;color:var(--ink);display:block}
.li-onb__count{font-size:.85rem;color:var(--ink-2);font-weight:600}
.li-onb__cta{flex:0 0 auto;white-space:nowrap;padding:.72em 1.35em;font-size:.94rem}
.li-onb__bar{height:8px;border-radius:var(--pill);background:var(--cream-2);overflow:hidden;margin-bottom:16px}
.li-onb__bar>span{display:block;height:100%;border-radius:var(--pill);background:linear-gradient(90deg,var(--rasp),var(--gold));transition:width .4s var(--ease)}
.li-onb__steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.li-onb__step{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:inherit;transition:background .15s var(--ease)}
a.li-onb__step:hover{background:var(--cream-2)}
a.li-onb__step:hover .li-onb__go{transform:translateX(3px)}
.li-onb__step.is-next{background:linear-gradient(135deg,rgba(238,61,111,.07),rgba(208,134,30,.08));box-shadow:inset 0 0 0 1px rgba(238,61,111,.25)}
.li-onb__mark{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;background:var(--cream-2);color:var(--ink-2);border:1px solid var(--border)}
.li-onb__step.is-done .li-onb__mark{background:linear-gradient(135deg,var(--rasp),var(--gold));color:#fff;border-color:transparent}
.li-onb__step.is-next .li-onb__mark{border-color:var(--rasp);color:var(--rasp-deep)}
.li-onb__txt{display:flex;flex-direction:column;gap:1px;line-height:1.35;flex:1 1 auto;min-width:0}
.li-onb__step.is-done .li-onb__txt strong{color:var(--ink-2);font-weight:600}
.li-onb__step.is-next .li-onb__txt strong,.li-onb__step.is-todo .li-onb__txt strong{color:var(--rasp-deep)}
.li-onb__desc{font-size:.85rem;color:var(--ink-2)}
.li-onb__go{flex:0 0 auto;color:var(--rasp);font-weight:700;font-size:1.05rem;transition:transform .15s var(--ease)}

/* Titres TOUJOURS en Fraunces — prime sur le style inline « Poppins » du thème
   parent (ListingHive). Sans ce !important, à spécificité égale c'est le style
   inline du parent qui gagne quand LiteSpeed recombine le CSS (→ titres en
   sans-serif système, Poppins étant désenqueué). font-style/weight non touchés
   (l'italique doré du hero reste géré par ailleurs). */
h1, h2, h3, h4, h5, h6, .li-serif { font-family: var(--serif) !important; }

/* Ressources offertes (carte « Aides & modèles » de l'espace membre) */
.li-res{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px 22px;margin:0 0 24px;position:relative;overflow:hidden}
.li-res::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--gold),var(--rasp))}
.li-res__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.li-res__title{font-family:var(--serif);font-size:1.18rem;color:var(--ink);display:block}
.li-res__sub{display:block;margin-top:3px;font-size:.85rem;color:var(--ink-2);max-width:44ch;line-height:1.4}
.li-res__cta{flex:0 0 auto;white-space:nowrap}
.li-res__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.li-res__item{margin:0}
.li-res__link{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-md,12px);background:var(--cream);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.li-res__link:hover{border-color:var(--rasp);background:var(--card);transform:translateY(-1px)}
.li-res__ico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rasp),var(--gold));color:#fff;font-size:.75rem}
.li-res__label{line-height:1.25}
/* Ressources offertes — version repliée (accordéon) dans le fil de conversation */
.li-res--compact{padding:0;margin:0 0 18px}
.li-res--compact::before{display:none}
.li-res__summary{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;list-style:none;font-size:.92rem;color:var(--ink)}
.li-res__summary::-webkit-details-marker{display:none}
.li-res__summary:hover{background:var(--cream)}
.li-res__stext{flex:1 1 auto;min-width:0}
.li-res__stext strong{font-weight:600}
.li-res__body{padding:0 16px 16px}
.li-res--compact .li-res__grid{margin-bottom:12px}
.li-res__all{display:inline-block;font-size:.88rem;font-weight:600;color:var(--rasp);text-decoration:none}
.li-res__all:hover{text-decoration:underline}

/* ============================================================
   ALERTES — bandeau catalogue + liste /mes-alertes/
   ============================================================ */
.li-alert-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(120deg,rgba(238,61,111,.07),rgba(208,134,30,.07));border:1px solid var(--border);border-radius:var(--r);padding:13px 18px;margin:0 0 20px;font-size:.92rem;color:var(--ink)}
.li-alert-bar .hp-icon{color:var(--rasp)}
.li-alert-bar--on .hp-icon{color:var(--gold-deep)}
.li-alert-bar button.hp-button{cursor:pointer;border:none}
.li-alert-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.li-alert-item{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:14px 18px}
.li-alert-item__label{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px}
.li-alert-item__label .hp-icon{color:var(--rasp)}
.li-alert-item__actions{display:flex;gap:8px;flex-wrap:wrap}
/* Les libellés des boutons héritaient du soulignement des liens de contenu. */
.li-alert-item__actions .hp-button{text-decoration:none;white-space:nowrap}
.li-alert-item__name{font-size:1.02rem}
/* Mobile : la carte passe en colonne et les deux actions occupent une ligne
   pleine largeur à parts égales (« Voir les annonces » en primaire, la
   suppression en contour — l'action destructive ne doit pas dominer). */
@media (max-width:560px){
	.li-alert-item{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
	.li-alert-item__label{font-size:1.05rem}
	.li-alert-item__actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
	.li-alert-item__actions .hp-button{width:100%;justify-content:center;text-align:center;min-height:46px;display:inline-flex;align-items:center;padding-left:10px;padding-right:10px}
}

/* ============================================================
   ESPACE MEMBRE — tableau de bord du compte + messagerie
   ============================================================ */
/* Menu de navigation natif du compte (sidebar HivePress : Mon profil / Déconnexion).
   Masqué partout : la navigation de l'espace membre passe par le menu déroulant
   de l'avatar dans le header (li_account_menu_html), ce mini-menu faisait doublon.
   Les pages compte sont des Page_Sidebar_Left : .hp-row > .hp-page__sidebar.hp-col-sm-4
   (qui ne contenait que ce menu) + .hp-page__content.hp-col-sm-8. En retirant le menu,
   on retire la colonne latérale devenue vide et on repasse le contenu en pleine largeur,
   sinon il restait calé sur les 2/3 droite avec un tiers gauche vide.
   Ciblage :has(.hp-menu--user-account) → ne touche QUE les pages compte (la même
   colonne sert de vraie sidebar sur la fiche annonce et le profil public). */
.hp-menu--user-account{display:none!important}
.hp-page__sidebar:has(.hp-menu--user-account){display:none!important}
.hp-row:has(.hp-menu--user-account)>.hp-page__content{flex:0 0 100%!important;max-width:100%!important}

/* CTA de vérification en tête de l'espace membre (incite à obtenir le badge). */
.li-verif-cta{display:flex;align-items:center;gap:18px;margin:0 0 26px;padding:20px 22px;
  background:linear-gradient(120deg,rgba(238,61,111,.06),rgba(208,134,30,.09));
  border:1px solid var(--border);border-left:4px solid var(--rasp);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.li-verif-cta__ico{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(238,61,111,.1);color:var(--rasp);font-size:1.25rem}
.li-verif-cta__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.li-verif-cta__body strong{font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
.li-verif-cta__body span{font-size:.92rem;color:var(--ink-2);line-height:1.5}
.li-verif-cta .hp-button{flex:none;white-space:nowrap}
.li-verif-cta--pending{border-left-color:var(--gold)}
.li-verif-cta--pending .li-verif-cta__ico{background:rgba(208,134,30,.16);color:var(--gold-deep)}
@media(max-width:600px){.li-verif-cta{flex-direction:column;align-items:flex-start}.li-verif-cta .hp-button{width:100%;text-align:center}}

/* Messagerie : liste des conversations (rendue en table) */
.hp-messages.hp-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.hp-messages.hp-table td,.hp-messages.hp-table th{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:left}
.hp-messages.hp-table tr:last-child td{border-bottom:none}
.hp-messages.hp-table tr:hover{background:var(--cream-2)}
.hp-message--read{opacity:.7}

/* Onglets Conversations / Archivées */
.li-conv-tabs{display:flex;gap:8px;margin:0 0 14px}
.li-conv-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--pill);font-weight:600;font-size:.9rem;color:var(--ink-2);text-decoration:none;border:1px solid var(--border);background:#fff}
.li-conv-tab.is-active{background:var(--rasp);color:#fff;border-color:transparent}
.li-conv-tab span{font-size:.78rem;opacity:.85}

/* Liste des conversations (refondue) */
.li-conv{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.li-conv__row{display:flex;align-items:center;border-bottom:1px solid var(--border);transition:background .15s}
.li-conv__row:last-child{border-bottom:none}
.li-conv__row:hover{background:var(--cream-2)}
.li-conv__link{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;color:var(--ink)}
.li-conv__acts{flex:none;display:flex;align-items:center;gap:4px;padding-right:12px}
.li-conv__act{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s}
.li-conv__act:hover{background:#fff;color:var(--rasp);box-shadow:var(--shadow-sm)}
.li-conv__act--del:hover{color:#c0392b}
.li-conv__act i{font-size:.92rem}
.li-conv__av{flex:none;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--gold-br),var(--gold-deep)) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem}
.li-conv__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.li-conv__name{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink);line-height:1.2}
.li-conv__obj{display:flex;align-items:center;gap:6px;min-width:0;font-size:.82rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-conv__obj i{flex:none;font-size:.78rem;opacity:.75}
.li-conv__obj--gen{font-style:italic}
.li-conv__prev{color:var(--ink-2);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.li-conv__meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.li-conv__date{font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.li-conv__badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--rasp);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.li-conv__row.is-unread .li-conv__name{font-weight:700}
.li-conv__row.is-unread .li-conv__prev{color:var(--ink);font-weight:500}
@media(max-width:560px){.li-conv__av{width:42px;height:42px}.li-conv__row{padding:12px 14px;gap:11px}
/* Mobile : texte EMPILÉ, une info par ligne (nom / annonce / date / message).
   La date passe sous le nom pour libérer la largeur et le message n'est plus
   tronqué trop tôt. L'objet de la conversation (titre de l'annonce) doit avoir
   sa propre zone : sans elle, il était auto-placé dans une colonne libre et la
   ligne se cassait en deux colonnes illisibles sur mobile. */
.li-conv__link{display:grid;align-items:center;column-gap:12px;row-gap:1px;grid-template-columns:auto 1fr auto;grid-template-areas:"av name badge" "av obj badge" "av date badge" "av prev badge";padding:13px 14px}
.li-conv__av{grid-area:av;align-self:center}
.li-conv__main,.li-conv__meta{display:contents}
.li-conv__name{grid-area:name}
.li-conv__obj{grid-area:obj}
.li-conv__date{grid-area:date;margin-top:1px}
.li-conv__prev{grid-area:prev;margin-top:2px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;text-overflow:clip}
.li-conv__badge{grid-area:badge;align-self:center}
}

/* Fil de discussion : bulles façon messagerie (vue conversation, pas la liste) */
.hp-messages:not(.hp-table){display:flex;flex-direction:column;gap:4px;background:none;border:none;box-shadow:none;padding:0;margin:0 0 8px;list-style:none}
.hp-messages:not(.hp-table)>*{list-style:none}
/* La grille HivePress ajoute margin-bottom:2rem à chaque item : on l'annule dans la
   messagerie (l'espacement est géré par le gap ci-dessus). */
.hp-messages:not(.hp-table) .hp-grid__item{margin-bottom:0}
.hp-message{background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.hp-message--sent{align-items:flex-end}
.hp-message__header{display:block;font-size:.72rem;color:var(--ink-2);margin:0 8px 2px;max-width:80%}
.hp-message--sent .hp-message__header{text-align:right}
/* Messages consécutifs d'un même expéditeur : masquer seulement le NOM répété
   (chaque message conserve sa date/heure). Chaque message est enveloppé dans un
   .hp-grid__item : on cible les wrappers adjacents via :has(). */
.hp-grid__item:has(.hp-message--sent) + .hp-grid__item:has(.hp-message--sent) .hp-message__sender,
.hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)) + .hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)) .hp-message__sender{display:none}
.hp-grid__item:has(.hp-message--sent) + .hp-grid__item:has(.hp-message--sent),
.hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)) + .hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)){margin-top:-2px}
/* Changement dexpediteur : plus dair avant le nom + message du nouvel interlocuteur */
.hp-grid__item:has(.hp-message--sent) + .hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)),
.hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)) + .hp-grid__item:has(.hp-message--sent){margin-top:14px}
.hp-message__content{display:inline-block;max-width:78%;width:fit-content;text-align:left;background:#fff;border:1px solid var(--border);border-radius:18px 18px 18px 6px;padding:11px 16px;color:var(--ink);line-height:1.55;box-shadow:var(--shadow-sm)}
.hp-message--sent .hp-message__content{background:linear-gradient(135deg,var(--rasp-br),var(--rasp) 70%,var(--rasp-deep));color:#fff;border-color:transparent;border-radius:18px 18px 6px 18px;margin-left:auto}
.hp-message--view-block .hp-message__details{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;margin:0}
.hp-message__details{font-size:.72rem;color:var(--ink-2)}
.hp-message--sent .hp-message__details{justify-content:flex-end}
.hp-message__sender{font-weight:700;color:var(--ink);font-size:.8rem;line-height:1.25}
.hp-message--view-block .hp-message__sent-date{font-size:.72rem;color:var(--ink-2);opacity:.9}

/* ===== Modale « Contacter l'hôte » : mise en page propre ===== */
/* La modale est compacte (cible uniquement celle qui contient le formulaire message). */
.hp-modal:has(.hp-form--message-send){width:440px;max-width:calc(100vw - 32px)}
.hp-modal:has(.hp-form--message-send) .hp-modal__title{margin:0 0 12px}
/* Champ pleine largeur, bouton DESSOUS (fini le côte-à-côte / l'ovale géant). */
.hp-form--message-send{display:flex;flex-direction:column;gap:16px;margin-top:0}
/* Texte d intro « Le premier contact… » RETIRE le 21/07/2026 : il faisait doublon avec la note de quota juste en dessous et alourdissait la modale. */
.hp-form--message-send .hp-form__fields{margin:0}
.hp-form--message-send .hp-field__label{font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.hp-form--message-send textarea{width:100%;min-height:140px;resize:vertical;font-size:1rem;line-height:1.55}
.hp-form--message-send .hp-form__actions{margin:0}
.hp-form--message-send .hp-form__button{width:100%;justify-content:center;white-space:nowrap;padding:.95em 1.6em!important}

/* Avatars de l'espace membre / messagerie */
.hp-user__image,.hp-message__image{border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#FBEFF4,#FCF4E8)}

/* ============ États vides de l'espace membre (Mes annonces / Favoris) ============ */
.li-empty{text-align:center;padding:48px 24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);max-width:520px;margin:8px auto}
.li-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#FBEFF4,#FCF4E8);color:var(--rasp);font-size:1.7rem;margin-bottom:18px}
.li-empty__title{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);margin:0 0 8px}
.li-empty__text{color:var(--ink-2);font-size:1rem;line-height:1.6;margin:0 auto 22px;max-width:380px}
.li-empty__cta{display:inline-flex}
/* État vide « Mes annonces » : tuile icône façon carte de marque (framboise→or, glyphe blanc). */
.li-empty--listings .li-empty__icon{border-radius:20px;background:linear-gradient(135deg,var(--rasp),var(--gold));color:#fff;box-shadow:0 12px 26px rgba(238,61,111,.26)}

/* État vide « Messagerie » : accueillant, actions utiles + parcours en 3 étapes. */
.li-empty--msg{max-width:560px}
.li-empty--msg .li-empty__icon{border-radius:22px;background:linear-gradient(135deg,var(--rasp),var(--gold));color:#fff;box-shadow:0 12px 26px rgba(238,61,111,.26)}
.li-empty--msg .li-empty__text{max-width:460px}
.li-empty__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 26px}
.li-empty__steps{list-style:none;margin:0 auto 20px;padding:22px 22px 8px;max-width:420px;text-align:left;border-top:1px solid var(--border)}
.li-empty__steps li{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:.96rem;line-height:1.4;margin-bottom:14px}
.li-empty__num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--rasp),var(--gold));color:#fff;font-weight:700;font-size:.85rem}
.li-empty__link{display:inline-block;color:var(--rasp-deep);font-weight:600;text-decoration:none;font-size:.95rem}
.li-empty__link:hover{text-decoration:underline}

/* ============ Coordonnées partagées dans la messagerie (opt-in) ============ */
.li-shared-coords{background:linear-gradient(135deg,rgba(208,134,30,.12),rgba(238,61,111,.06));border:1px solid var(--gold);border-radius:var(--r);padding:14px 18px;margin:0 0 20px}
.li-shared-coords__head{font-size:.82rem;color:var(--ink-2);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.li-shared-coords__head .hp-icon{color:var(--gold-deep)}
.li-shared-coords__head strong{color:var(--ink)}
.li-shared-coords__items{display:flex;flex-wrap:wrap;gap:10px 22px}
.li-shared-coords__item{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.li-shared-coords__item .hp-icon{color:var(--rasp)}
.li-shared-coords__item a{color:var(--rasp-deep)}
.li-shared-coords__item a:hover{color:var(--rasp)}

/* Bouton « Message » verrouillé (non-membres) */
.li-msg-locked{width:100%;justify-content:center}
.li-msg-locked .hp-icon{margin-right:7px;font-size:.9em}

/* Non-membres : masque tout bouton « Message » résiduel (le CTA .li-msg-locked reste) */
.li-no-msg .hp-listing__action--message,
.li-no-msg .hp-vendor__action--message{display:none!important}

/* Bandeau « messagerie réservée aux membres » (page Tarifs) */
.li-lock-notice{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(238,61,111,.1),rgba(208,134,30,.08));border:1px solid var(--rasp);border-radius:var(--r);padding:16px 20px;margin:0 auto 28px;max-width:var(--container);color:var(--ink);font-size:1rem}
.li-lock-notice .hp-icon{color:var(--rasp);font-size:1.2rem;flex:none}

/* Liens de modèles verrouillés sur /aides-modeles/ pour les non-Premium :
   le cadenas doit se lire AVANT le clic (les liens pointent vers /tarifs/). */
.li-doc-locked .hp-icon{font-size:.85em;margin-right:6px;opacity:.9}
a.li-doc-locked:not(.li-btn){text-decoration-color:var(--rasp);text-decoration-style:dashed}

/* ============ Corrections design fiche annonce (2026-06-13) ============ */
/* 1. Bouton « Envoyer un message — Réservé aux membres » : texte enroulé, pas coupé */
.li-msg-locked{white-space:normal;text-align:center;line-height:1.25;font-size:.92rem;padding-top:.72em!important;padding-bottom:.72em!important}
/* 2. Sidebar : plus de sticky. Sur desktop, la carte hôte (+ bouton contact)
      passe AU-DESSUS de la carte prix ; sur mobile, ordre naturel conservé
      (prix, puis hôte). NB : 3 enfants = prix, hôte, bouton contact — d'où un
      order: sur la seule carte prix plutôt qu'un column-reverse global. */
.single-hp_listing .hp-page__sidebar{display:flex;flex-direction:column}
@media(min-width:768px){
  .single-hp_listing .hp-page__sidebar{align-self:flex-start}
  .single-hp_listing .hp-page__sidebar > .hp-listing__attributes--primary{order:1}
}
/* 3. Carte hôte : métier + ville empilés/centrés (le grid hp-col les collait) */
.hp-vendor__attributes--secondary .hp-row{flex-direction:column;align-items:center;row-gap:3px;margin:0}
.hp-vendor__attributes--secondary .hp-row>[class*="hp-col"]{flex:0 0 auto;max-width:100%;width:auto;padding:0}
.hp-vendor__attribute--ville{justify-content:center}
/* 4. Badges hôte (confiance + premium) : centrés, espacés, sans carte ni padding parasite */
.hp-vendor__attributes--primary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;background:none!important;border:none!important;box-shadow:none!important;padding:0!important;margin-top:14px!important}
.hp-vendor__attribute--niveau-confiance{white-space:nowrap}

/* Autocomplétion Ville + Code postal (geo.api.gouv.fr) */
/* `position:static` DANS la barre de recherche : la liste de suggestions se
   cale alors sur la boîte du champ (.li-sfield), comme le calendrier, et non
   sur l'input intérieur (elle était plus étroite et le chevauchait). */
.li-ac-wrap{position:relative;display:block}
.li-sfield .li-ac-wrap{position:static}
.li-sfield .li-ac{top:calc(100% + 8px)}
/* Suggestions Ville : même comportement d'ouverture que le calendrier
   (.li-dp-pop) — 8px sous le champ, largeur du champ, même animation. */
.li-ac{position:absolute;z-index:1300;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 22px 60px rgba(36,23,38,.20),0 6px 18px rgba(36,23,38,.08);overflow:hidden;max-height:264px;overflow-y:auto;animation:li-dp-in .16s var(--ease)}
.li-ac__head{padding:8px 14px 4px;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.li-ac__item{padding:10px 14px;font-size:.95rem;color:var(--ink);cursor:pointer}
.li-ac__item:hover,.li-ac__item.is-active{background:var(--cream-2);color:var(--rasp-deep)}

/* Topbar fiche annonce : « Ajouter aux favoris » en pilule discrète (UX) */
.hp-page__topbar .hp-listing__action--favorite{padding:.45em 1.05em;border:1px solid var(--border);border-radius:var(--pill);background:#fff;font-weight:600;transition:border-color .2s,background .2s,color .2s}
.hp-page__topbar .hp-listing__action--favorite:hover{border-color:var(--rasp);background:rgba(238,61,111,.06);color:var(--rasp-deep)}

/* Avatar compte (header) : neutre élégant — cercle blanc, fin contour, initiales framboise */
.li-hdr__avatar{width:42px!important;height:42px!important;flex:none!important;display:flex!important;align-items:center;justify-content:center;border-radius:50%!important;white-space:nowrap;line-height:1;background:#fff!important;border:1.5px solid var(--border)!important;color:var(--rasp-deep)!important;font-weight:700;font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;text-decoration:none!important;box-shadow:var(--shadow-sm)!important;transition:border-color .2s,background .2s,box-shadow .2s}
.li-hdr__avatar:hover{border-color:var(--rasp)!important;background:rgba(238,61,111,.05)!important;box-shadow:0 4px 14px rgba(238,61,111,.18)!important}

/* Avatar header avec photo de profil (remplace les initiales une fois uploadée) */
.li-hdr__avatar--photo{padding:0!important;overflow:hidden;background:#fff!important}
.li-hdr__avatar--photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ===================== AVIS VOYAGEUR (messagerie + formulaire) ===================== */
.li-trv{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:14px 16px;margin:0 0 16px}
.li-trv__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px}
.li-trv__title{font-family:var(--serif);font-weight:600;color:var(--ink)}
.li-trv__avg{font-size:.9rem;color:var(--ink-2);font-weight:600}
.li-trv__none{font-size:.88rem;color:var(--ink-2)}
.li-trv__stars{color:var(--gold);letter-spacing:1px}
.li-trv__list{display:grid;gap:10px;margin:6px 0 10px}
.li-trv__item{font-size:.9rem;color:var(--ink)}
.li-trv__item p{margin:2px 0 0;color:var(--ink-2)}
.li-trv__by{color:var(--ink-2);font-weight:600;margin-left:4px}
.li-trv__cta{margin-top:4px}
.li-stars-input{display:inline-flex;flex-direction:row-reverse;gap:4px;font-size:2rem;line-height:1;margin:4px 0 8px}
.li-stars-input input{position:absolute;opacity:0;width:0;height:0}
.li-stars-input label{color:var(--border);cursor:pointer;transition:color .15s}
.li-stars-input label:hover,.li-stars-input label:hover ~ label,.li-stars-input input:checked ~ label{color:var(--gold)}

/* Fix bouton « Restaurer » invisible dans les Archives : .li-arch-row__acts .li-myl-act forçait background:#fff, or --primary a color:#fff → texte blanc/fond blanc. On repasse le primary en pilule blanche à texte framboise. */
.li-arch-row__acts .li-myl-act--primary{background:#fff;color:var(--rasp-deep);border-color:var(--border)}
.li-arch-row__acts .li-myl-act--primary:hover{background:#fff;color:var(--rasp-deep);border-color:var(--rasp);box-shadow:none}

/* Filtre du catalogue: en mobile, champs a nu (on enleve le cadre carte). En desktop
   on garde la carte (heritee de .hp-page__sidebar .hp-widget) comme avant. */
@media(max-width:768px){
  .hp-page__sidebar .hp-widget--listing-filter{background:transparent;border:none;border-radius:0;box-shadow:none;padding:0;margin-bottom:0}
}

/* Fiche hôte : bouton de contact fusionné dans la carte de l'hôte (inc/vendor-card.php).
   Le bloc d'actions est relocalisé DANS la carte résumé ; filet de séparation
   avec la description/badges, bouton en pleine largeur. */
.hp-vendor__summary .hp-vendor__actions--primary{margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.hp-vendor__summary .hp-vendor__actions--primary .hp-button{width:100%;justify-content:center;text-align:center}
/* Page annonce : « Contacter l'hôte » soudé sous la carte de l'hôte (inc/listing-vendor-card.php).
   La carte hôte (view-block) + la carte d'actions (repositionnée juste après) se
   fondent en une seule carte ; l'icône chat redondant du bloc hôte est masqué. */
.hp-listing--view-page .site-sidebar > .hp-vendor--view-block{
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:none;margin-bottom:0}
.hp-listing--view-page .site-sidebar > .hp-listing__actions--primary{
  background:var(--card);border:1px solid var(--border);border-top:1px solid var(--border);
  box-shadow:var(--shadow-sm);border-radius:0 0 var(--r-lg) var(--r-lg);margin-top:0}
.hp-listing--view-page .hp-vendor--view-block .hp-vendor__actions--primary{display:none}
/* li-btn__nounderline_fix */
.li-page a.li-btn,.li-btn,.li-btn:hover,.li-btn:focus{text-decoration:none!important}

/* === Focus cases à cocher / radios — même anneau framboise que les champs texte === */
.hp-field input[type=checkbox]:focus,.hp-field input[type=radio]:focus,
.hp-field input[type=checkbox]:focus-visible,.hp-field input[type=radio]:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(238,61,111,.15);border-radius:4px}

/* === Mobile : modale « Filtrer » du catalogue — champs à nu, sans encadré carte === */
.hp-modal .hp-form--listing-filter,.hp-modal .widget_hivepress_listing_filter{
  background:transparent;border:none;border-radius:0;box-shadow:none;padding:0;margin:0}
/* Marges de la modale = celles du reste du site (15px, la gouttière des cartes).
   Fancybox ajoutait 6px de slide et HivePress 40px de modale : le contenu
   commençait à 46px du bord, deux fois plus loin que les cartes en dessous. */
@media (max-width:767px){
  .fancybox-slide--html:has(.hp-modal--mobile){padding:0}
  .hp-modal--mobile{width:100%;max-width:100%;padding:56px 15px 24px;border-radius:0}
  /* Le formulaire garde un padding de 16px hérité d'HivePress : il s'ajoutait
     aux 15px de la modale (contenu à 31px du bord). La marge est portée par la
     modale, une seule fois. */
  .hp-modal--mobile .hp-form--listing-filter,
  .hp-modal--mobile .widget_hivepress_listing_filter{padding:0 !important}
}







/* ================================================================
   BADGES DE CONFIANCE — composant réutilisable (inc/trust-badges.php)
   Source de vérité : li_trust_badge_html() / li_trust_ladder_html().
   Badges interactifs + popover explicatif (assets/js/trust.js).
   ================================================================ */
.li-tbadge{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;line-height:1.15;letter-spacing:0;text-transform:none;padding:.34em .82em;border-radius:var(--pill);white-space:nowrap;vertical-align:middle}
.li-tbadge__ic{width:1.05em;height:1.05em;flex:none}
.li-tbadge__t{display:inline}
.li-tbadge--sm{font-size:.68rem;padding:.24em .64em}
/* Fiche : badges hôte (confiance/vérifié/premium) — MÊME taille de police ET d'icône. */
.li-host-badges .li-tbadge,.li-host-badges .li-flag{font-size:.75rem;font-weight:700;line-height:1.15;letter-spacing:0;padding:.34em .74em;text-transform:none}
.li-host-badges .li-tbadge__ic{width:1.12em;height:1.12em}
.li-host-badges .li-flag i,.li-host-badges .li-flag em,.li-host-badges .li-flag>span[aria-hidden]{font-size:1.12em;line-height:1}
.li-tbadge--inscrit{color:var(--ink-2);background:var(--cream-2);border:1px solid var(--border)}
.li-tbadge--profil-verifie{color:var(--trust-blue-deep);background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.30)}
.li-tbadge--membre-confiance{color:var(--trust-teal-deep);background:rgba(13,148,136,.14);border:1px solid rgba(13,148,136,.32)}
.li-tbadge--avis{color:var(--gold-deep);background:rgba(208,134,30,.14);border:1px solid rgba(208,134,30,.34)}
.li-tbadge--none{color:var(--ink-2);background:var(--cream-2);border:1px dashed var(--border)}

/* Badges live rendus par HivePress, enrichis par trust.js. « Membre de confiance »
   passe au dégradé framboise→or (niveau le plus haut). */
.hp-vendor__attribute--niveau-confiance .li-tbadge__ic,
.hp-listing__attribute--niveau-confiance .li-tbadge__ic,
.li-card-host__badge .li-tbadge__ic{width:1.02em;height:1.02em;flex:none}
.hp-vendor__attribute--niveau-confiance.li-tb-live--trust,
.hp-listing__attribute--niveau-confiance.li-tb-live--trust,
.li-card-host__badge--trust.li-tb-live--trust{color:var(--trust-teal-deep)!important;background:rgba(13,148,136,.14)!important;border-color:rgba(13,148,136,.32)}
.hp-vendor__attribute--niveau-confiance.li-tb-live--verified,
.hp-listing__attribute--niveau-confiance.li-tb-live--verified,
.li-card-host__badge--trust.li-tb-live--verified{color:var(--trust-blue-deep)!important;background:rgba(37,99,235,.12)!important;border-color:rgba(37,99,235,.30)}

/* Affordance « cliquable » : petite chevron + curseur + focus clavier. */
.li-tbadge.li-has-tip,.li-tb-live.li-has-tip{cursor:pointer;-webkit-tap-highlight-color:transparent}
.li-tbadge__caret{width:.82em;height:.82em;flex:none;opacity:.7;margin-left:1px;transition:transform .18s var(--ease)}
.li-has-tip[aria-expanded="true"] .li-tbadge__caret{transform:rotate(180deg)}
.li-has-tip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--pill)}

/* ---- Popover explicatif partagé (assets/js/trust.js) ---- */
.li-tpop{position:fixed;top:0;left:0;z-index:9000;width:274px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 40px rgba(58,38,6,.22),0 3px 10px rgba(58,38,6,.1);padding:15px 16px 14px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s var(--ease),transform .16s var(--ease);pointer-events:none}
.li-tpop.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.li-tpop::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:14px 14px 0 0}
.li-tpop--verified::before{background:linear-gradient(90deg,var(--trust-blue),var(--trust-blue-lite))}
.li-tpop--trust::before{background:linear-gradient(90deg,var(--trust-teal),var(--trust-teal-lite))}
.li-tpop__arrow{position:absolute;left:var(--li-arrow,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;background:var(--card);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg)}
.li-tpop--below .li-tpop__arrow{bottom:auto;top:-7px;border:0;border-left:1px solid var(--border);border-top:1px solid var(--border)}
.li-tpop__head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.li-tpop__ic{display:inline-flex;width:26px;height:26px;flex:none;align-items:center;justify-content:center;border-radius:50%}
.li-tpop__ic .li-tbadge__ic{width:15px;height:15px}
.li-tpop--verified .li-tpop__ic{color:#fff;background:linear-gradient(135deg,var(--trust-blue),var(--trust-blue-lite))}
.li-tpop--trust .li-tpop__ic{color:#fff;background:linear-gradient(135deg,var(--trust-teal),var(--trust-teal-lite))}
.li-tpop__title{font-family:var(--serif);font-size:1.02rem;font-weight:700;color:var(--ink)}
.li-tpop__grant{margin:0;color:var(--ink);font-weight:600;font-size:.9rem;line-height:1.45}
.li-tpop__how{margin:5px 0 0;color:var(--ink-2);font-size:.82rem;line-height:1.5}
.li-tpop__link{display:inline-flex;align-items:center;gap:5px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border);width:100%;font-size:.82rem;font-weight:700;color:var(--rasp);text-decoration:none}
.li-tpop__link:hover{color:var(--rasp-deep)}
.li-tpop__link span{transition:transform .16s var(--ease)}
.li-tpop__link:hover span{transform:translateX(3px)}

/* ---- Bandeau « Vous échangez avec … » (messagerie) ---- */
.li-msg-trust{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:11px 15px;background:linear-gradient(135deg,rgba(238,61,111,.05),rgba(208,134,30,.06));border:1px solid var(--border);border-radius:12px}
.li-msg-trust__lbl{color:var(--ink-2);font-size:.9rem}
.li-msg-trust__name{font-weight:700;color:var(--ink)}
.li-msg-trust .li-tbadge{margin-left:2px}

/* ================================================================
   ÉCHELLE DE CONFIANCE — [li_trust_ladder] (page Confiance & sécurité)
   ================================================================ */
.li-tl{margin:22px 0 0}
.li-tl__intro{color:var(--ink-2);margin:0 0 16px;max-width:640px}
.li-tl__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.li-tl__step{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:17px 19px;box-shadow:var(--shadow-sm)}
.li-tl__step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--border)}
.li-tl__step .li-tbadge{align-self:flex-start}
.li-tl__step--base{background:var(--cream-2);border-style:dashed;box-shadow:none}
.li-tl__step--id::before{background:linear-gradient(var(--trust-blue),var(--trust-blue-deep))}
.li-tl__step--top::before{background:linear-gradient(var(--trust-teal),var(--trust-teal-deep))}
.li-tl__step--top{box-shadow:var(--shadow-sm),inset 0 0 0 1px rgba(13,148,136,.4)}
.li-tl__reviews{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:17px 19px;box-shadow:var(--shadow-sm)}
.li-tl__reviews .li-tl__body{flex:1;min-width:200px}
.li-tl__body{min-width:0}
.li-tl__grant{margin:0;color:var(--ink);font-weight:600}
.li-tl__how{margin:4px 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.li-tl__sep{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--ink-2);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.li-tl__sep::before,.li-tl__sep::after{content:"";height:1px;background:var(--border);flex:1}
.li-tl__tags{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.li-tl__tags span{font-size:.76rem;background:var(--cream-2);border:1px solid var(--border);border-radius:var(--pill);padding:.2em .72em;color:var(--ink-2)}
.li-tl__rgpd{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:12px 15px;background:var(--cream-2);border:1px solid var(--border);border-radius:12px;color:var(--ink-2);font-size:.9rem;line-height:1.55}
.li-tl__rgpd .li-tbadge__ic{width:18px;height:18px;flex:none;margin-top:2px;color:var(--gold-deep)}

/* ---- Page Confiance : bandeau de réassurance (hero) ---- */
.li-trust-hero{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0 4px}
@media(min-width:700px){.li-trust-hero{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.li-trust-hero .li-trust-chip{padding:18px 20px}
.li-trust-hero .li-trust-chip span span{line-height:1.5}
.li-trust-chip{position:relative;overflow:hidden;display:flex;gap:13px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:15px 17px;box-shadow:var(--shadow-sm)}
.li-trust-chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.li-trust-chip__ic{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.14rem}
.li-trust-chip strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:3px}
.li-trust-chip span span{color:var(--ink-2);font-size:.86rem;line-height:1.45}
/* Grammaire sémantique : bleu=identité · turquoise=statut · framboise=protection · or=médiation */
.li-trust-chip--blue::before{background:linear-gradient(var(--trust-blue),var(--trust-blue-deep))}
.li-trust-chip--blue .li-trust-chip__ic{color:var(--trust-blue-deep);background:rgba(37,99,235,.15)}
.li-trust-chip--green::before{background:linear-gradient(var(--trust-teal),var(--trust-teal-deep))}
.li-trust-chip--green .li-trust-chip__ic{color:var(--trust-teal-deep);background:rgba(13,148,136,.17)}
.li-trust-chip--rasp::before{background:linear-gradient(var(--rasp-br),var(--rasp-deep))}
.li-trust-chip--rasp .li-trust-chip__ic{color:var(--rasp-deep);background:rgba(238,61,111,.14)}
.li-trust-chip--gold::before{background:linear-gradient(var(--gold-br),var(--gold-deep))}
.li-trust-chip--gold .li-trust-chip__ic{color:var(--gold-deep);background:rgba(208,134,30,.22)}
.li-trust-chip--ink::before{background:linear-gradient(var(--gold-br),var(--gold-deep))}
.li-trust-chip--ink .li-trust-chip__ic{color:var(--gold-deep);background:rgba(208,134,30,.22)}

/* ---- Page Confiance : bloc « Vos documents protégés » ---- */
.li-trust-safe{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:22px 0 0}
.li-trust-safe__item{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:17px 19px;box-shadow:var(--shadow-sm)}
.li-trust-safe__item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--rasp-br),var(--rasp-deep))}
.li-trust-safe__item>i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:var(--rasp-deep);background:rgba(238,61,111,.12);font-size:1.05rem}
.li-trust-safe__item strong{display:block;margin:12px 0 3px;color:var(--ink);font-size:1rem}
.li-trust-safe__item span{color:var(--ink-2);font-size:.88rem;line-height:1.5}

/* ---- Page Confiance : CTA final ---- */
.li-trust-cta{margin:48px 0 0;padding:32px 30px;text-align:center;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(238,61,111,.09),rgba(208,134,30,.12));border:1px solid var(--border)}
.li-trust-cta h2{margin:0 0 8px}
.li-trust-cta p{color:var(--ink-2);margin:0 auto 18px;max-width:520px}
.li-trust-cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.li-trust-cta__btns .li-btn{padding:.8em 1.6em}

/* ===== Fiche hote : supprimer le vide quand pas de bio / pas de badge ===== */
/* Le bloc d attributs (metier/ville/badge) est masque s il ne contient aucun
   attribut rendu (ex. compte tout neuf) : plus de bande vide a marge 14px. */
.hp-vendor__summary .hp-vendor__attributes--secondary:not(:has(.hp-vendor__attribute)){display:none}
/* Sans biographie, on retire le grand espace + le trait au-dessus du bouton
   de contact (regle mobile margin-top:22px + padding-top:20px + border) : le
   bouton se rapproche des infos, la carte ne parait plus creuse. Avec une bio,
   le separateur reste (il separe alors un vrai contenu du bouton). */
.hp-vendor__summary:not(:has(.hp-vendor__description)) .hp-vendor__actions--primary{
  margin-top:16px;padding-top:0;border-top:none;
}

/* Fiche annonce : le footer de la carte hote ne contient que l icone chat, deja
   masquee plus haut sur TOUTE fiche annonce. On masque donc le footer VIDE meme
   hors soudure (cas : l hote regarde sa propre annonce, pas de carte bouton
   adjacente) pour eviter une bande bordee vide au meme endroit. */
.hp-listing--view-page .hp-vendor--view-block .hp-vendor__footer:not(:has(.hp-vendor__attribute--niveau-confiance)){display:none}
/* Badge de confiance centré dans la carte hôte de la fiche annonce (l action
   chat du footer est masquée → on centre le badge restant ; le margin-right du
   bloc --primary le décalait de 8px). */
.hp-listing--view-page .hp-vendor--view-block .hp-vendor__footer{border-top:none;padding-top:0;padding-bottom:14px;justify-content:center}
.hp-listing--view-page .hp-vendor--view-block .hp-vendor__footer .hp-vendor__attributes--primary{margin:0}
.hp-listing--view-page .hp-vendor--view-block:has(.hp-vendor__footer .hp-vendor__attribute--niveau-confiance) .hp-vendor__content{padding-bottom:10px}
.hp-listing--view-page .hp-vendor--view-block .hp-vendor__footer .hp-vendor__attribute--niveau-confiance{font-size:.8rem;padding:.26em .74em}
.hp-listing--view-page .hp-vendor--view-block .hp-vendor__footer .hp-vendor__attribute--niveau-confiance .li-tbadge__ic{width:14px;height:14px}

/* === Accusé de lecture messagerie (coche « envoyé » / double-coche « lu ») ===
   HivePress Messages positionne cette coche en absolu (top:1.6rem) pour son gabarit
   natif compact ; notre refonte en bulles la renvoyait sur la ligne de date et la
   coupait au coin des bulles suivantes. On l'ancre proprement en bas à droite de la
   bulle (blanc lisible sur le dégradé framboise) et on neutralise la petite flèche
   native (tail), redondante avec nos bulles. */
.hp-messages:not(.hp-table) .hp-message--view-block::before{display:none}
/* Coche d'accusé : même boîte de ligne que l'heure (posée à 11px du bas, comme
   le rembourrage, hauteur de ligne 15px), pour que les deux reposent exactement
   sur la même ligne de base. Régler `bottom` seul ne suffisait pas : sans
   hauteur de ligne commune, la coche restait un cheveu plus basse. */
.hp-messages:not(.hp-table) .hp-message--view-block.hp-message--sent::after{top:auto;bottom:8px;right:15px;font-size:11px;line-height:14px;color:#fff;opacity:.7}
/* La réserve de hauteur pour la coche (padding-bottom:19px) n'a plus lieu
   d'être : l'heure occupe désormais cette ligne, la coche se pose dessus. */

/* --- Création d'alerte sur /mes-alertes/ (v1.6.203) --- */
.li-alert-create{background:linear-gradient(120deg,rgba(238,61,111,.07),rgba(208,134,30,.07));border:1px solid var(--border);border-radius:var(--r);padding:18px;margin:0 0 22px}
.li-alert-create__title{margin:0 0 4px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px}
.li-alert-create__title .hp-icon{color:var(--rasp)}
.li-alert-create__hint{margin:0 0 14px;font-size:.92rem;color:var(--ink);opacity:.72}
.li-alert-create__fields{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.li-alert-create__field{display:flex;flex-direction:column;gap:5px;flex:1 1 200px;font-size:.9rem;font-weight:600;color:var(--ink)}
.li-alert-create__field input,.li-alert-create__field select{width:100%}
.li-alert-create__submit{cursor:pointer;border:none;flex:0 0 auto}
@media(max-width:600px){.li-alert-create__fields{flex-direction:column;align-items:stretch}.li-alert-create__submit{width:100%}}

/* --- Lightbox : chargement réel des photos (loader de marque) --- */
.li-lightbox__loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;display:none;pointer-events:none;line-height:0}
.li-lightbox.is-loading .li-lightbox__loader{display:block}
.li-lightbox .li-lightbox__img{transition:opacity .15s ease}
.li-lightbox.is-loading .li-lightbox__img{opacity:.25}

/* ====================================================================
 * Correctifs audit affichage responsive (2026-07-15)
 * ==================================================================== */

/* Fiche annonce — tablette portrait : les attributs de la sidebar (prix/mois,
   ville, type, chambres…) débordaient du viewport (coupés à droite) entre
   768 et ~930px. On les passe sur une colonne pleine largeur. */
@media (min-width: 768px) and (max-width: 960px) {
	.hp-listing__attributes--secondary .hp-listing__attribute {
		flex: 1 1 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* Barre de recherche — largeurs intermédiaires : les 5 champs écrasés
   tronquaient « Tous les pays » / « Toutes les villes » et le label
   « TYPE DE LOGEMENT » passait sur 2 lignes (champs désalignés).
   On laisse les champs se répartir sur 2 rangées confortables. */
@media (min-width: 761px) and (max-width: 1080px) {
	.li-search-fields { flex-wrap: wrap; }
	.li-sfield { flex: 1 1 31%; min-width: 31%; }
	.li-sfield__lbl { white-space: nowrap; }
	.li-sfield + .li-sfield::before { display: none; }
}
/* (nowrap des labels déplacé dans les media queries 2 rangées) */

/* Fiche annonce — confort de lecture : la description filait au-delà de
   100 caractères par ligne sur grand écran. */
.hp-listing__description { max-width: 72ch; }

/* Selects multiples (filtres) : sans sélection, la pilule restait vide —
   on affiche le même tiret que les selects simples. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered:not(:has(.select2-selection__choice))::before {
	content: "—";
	color: var(--ink-2);
	font-weight: 500;
	line-height: inherit;
}
/* …sauf quand le champ porte une vraie invite (inc/filter-placeholders.php pose
   un data-placeholder que Select2 recopie sur son champ de recherche inline) :
   le tiret muet ferait doublon. Deux détails :
   - le tiret est supprimé au profit du placeholder,
   - Select2 initialise ce champ à `width:0` quand le formulaire est masqué au
     chargement (colonne de filtres repliée sur mobile) et ne le recalcule qu'à
     la saisie : sans largeur rendue, l'invite resterait invisible. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered:not(:has(.select2-selection__choice)):has(.select2-search__field[placeholder]:not([placeholder=""]))::before {
	content: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered:not(:has(.select2-selection__choice)):has(.select2-search__field[placeholder]:not([placeholder=""])) .select2-search--inline {
	flex: 1 1 auto;
	min-width: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered:not(:has(.select2-selection__choice)):has(.select2-search__field[placeholder]:not([placeholder=""])) .select2-search--inline .select2-search__field {
	width: 100% !important;
}

/* Confiance & sécurité : la 4e carte (Médiation) restait orpheline sous une
   grille de 3 — 4 colonnes sur grand écran, 2×2 en dessous. */
@media (min-width: 560px) {
	.li-trust-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Catalogue — tablette portrait : avec la sidebar de filtres, 2 cartes par
   rangée ne faisaient plus que ~190px (titres tronqués). Une carte par
   rangée, pleine largeur, entre 768 et 992px. */
@media (min-width: 768px) and (max-width: 991.98px) {
	/* `hp-col-sm-4` depuis le passage du catalogue à 3 colonnes servies (2026-08-03) ;
	   `hp-col-sm-6` conservé pour les grilles restées à 2 colonnes. */
	.hp-page__content .hp-listings .hp-grid__item.hp-col-sm-6,
	.hp-page__content .hp-listings .hp-grid__item.hp-col-sm-4 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* Fiche annonce, suite : le bloc prix/attributs de la sidebar est une grille
   2 colonnes en max-content qui deborde de la sidebar en tablette portrait.
   Une seule colonne entre 768 et 960px. */
@media (min-width: 768px) and (max-width: 960px) {
	.hp-listing__attributes--primary { grid-template-columns: 1fr !important; }
	.hp-listing__attributes--primary .hp-listing__attribute { min-width: 0; max-width: 100%; }
}

/* Accueil : la carte de recherche est plafonnee a 1000px, les 5 champs y
   tronquent leurs valeurs jusque vers 1300px de viewport. Deux rangees. */
@media (min-width: 761px) and (max-width: 1300px) {
	.li-home .li-search-fields { flex-wrap: wrap; }
	.li-home .li-sfield { flex: 1 1 31%; min-width: 31%; }
	.li-home .li-sfield__lbl { white-space: nowrap; }
	.li-home .li-sfield + .li-sfield::before { display: none; }
}

/* Liseret cartes annonces : or (ambre) pour toutes ; plus epais pour A la une */
.hp-listing--view-block{border-color:var(--gold)}
.hp-listing--view-block.hp-listing--featured{border-width:2px}

/* Menus deroulants Select2 : la liste prenait la largeur de la pilule et
   coupait les options longues (ex. tri "Evaluation" sur mobile). La liste
   s adapte desormais a sa plus longue option, bornee a l ecran. */
.select2-container--open .select2-dropdown {
	/* ⚠️ PIÈGE CSS corrigé le 29/07/2026 : `min-width` L'EMPORTE SUR `max-width`
	   (CSS Sizing § contraintes). Avec `min-width: max-content`, le plafond
	   ci-dessous n'était donc JAMAIS appliqué : le menu prenait la largeur de sa
	   plus longue option — mesuré à 489 px sur un écran de 375 px sur
	   /mes-documents/, dont les options portent le titre complet de l'annonce
	   (« Kaelig — Studio cosy près du Conservatoire — Rennes centre »). La page
	   défilait latéralement.
	   L'intention d'origine (le menu s'adapte à son contenu, sans tronquer les
	   options longues) est conservée, mais portée par `width` — que `max-width`,
	   lui, borne bien. `!important` : Select2 pose une largeur en style inline.
	   ⚠️ NE PAS appliquer aux menus de la barre de recherche (`.li-sfield-drop`) :
	   leur largeur est volontairement calée sur celle du champ déclencheur par
	   assets/js/select-enhance.js. Ils reçoivent seulement la neutralisation du
	   `min-width`, qui suffit à les empêcher de sortir de l'écran. */
	max-width: min(92vw, 420px);
}
.select2-container--open .select2-dropdown:not(.li-sfield-drop) {
	width: max-content !important;
	min-width: 0;
	max-width: min(92vw, 420px) !important;
}
.select2-container--open .select2-dropdown.li-sfield-drop {
	min-width: 0;
}

.select2-results__option {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Fuite du zoom hover sur le liseret or : le conteneur photo clippe lui-meme
   l image zoomee avec un arrondi haut ajuste a l epaisseur du liseret. */
.hp-listing--view-block .hp-listing__image{border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.hp-listing--view-block.hp-listing--featured .hp-listing__image{border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0}

/* Avatar photo (hote) sur les cartes catalogue — membres payants */
.li-card-host__av--img{overflow:hidden;background:none}
.li-card-host__av--img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ====== PROFIL : annuler la grille multi-colonnes des cases à cocher ======
 * La règle « .hp-form__fields:has(> .hp-form__field--checkbox) » plus haut
 * suppose que SEULS les formulaires d'annonce contiennent des cases à cocher
 * (55 équipements à répartir en colonnes). Ce n'est plus vrai depuis l'ajout
 * de la case « Afficher mon pseudo » (inc/pseudo.php) : les formulaires de
 * profil basculaient eux aussi en colonnes de 180 px, comprimant la légende
 * et la case sur une demi-largeur (constaté desktop + mobile, 21/07/2026).
 * On rétablit ici la pleine largeur pour les formulaires de compte — et pour
 * le formulaire de FILTRES (.hp-form--listing-filter) : un équipement approuvé
 * « filtrable » y injecte une case à cocher, qui déclenchait la grille 180 px
 * dans la modale mobile (champs comprimés sur une demi-colonne, constaté
 * mobile, 26/07/2026). */
.hp-form--user-update .hp-form__fields:has(> .hp-form__field--checkbox),
.hp-form--vendor-update .hp-form__fields:has(> .hp-form__field--checkbox),
.hp-form--user-register .hp-form__fields:has(> .hp-form__field--checkbox),
.hp-form--listing-filter .hp-form__fields:has(> .hp-form__field--checkbox){
  display:block;
}
.hp-form--user-update .hp-form__fields > .hp-form__field--checkbox,
.hp-form--vendor-update .hp-form__fields > .hp-form__field--checkbox,
.hp-form--user-register .hp-form__fields > .hp-form__field--checkbox,
.hp-form--listing-filter .hp-form__fields > .hp-form__field--checkbox{
  grid-column:1 / -1; margin:0 0 20px; max-width:none;
}
/* Le libellé masqué pour les équipements doit rester visible ici. */
.hp-form--user-update .hp-form__fields > .hp-form__field--checkbox .hp-field__label,
.hp-form--vendor-update .hp-form__fields > .hp-form__field--checkbox .hp-field__label,
.hp-form--user-register .hp-form__fields > .hp-form__field--checkbox .hp-field__label,
.hp-form--listing-filter .hp-form__fields > .hp-form__field--checkbox .hp-field__label{
  display:block;
}

/* Note affichée DANS la description d'un formulaire (modale « Contacter
 * l'hôte »). .li-note est un bloc ; la description HivePress est rendue dans
 * un <p>, d'où un <span> passé en block. On neutralise aussi la typographie
 * du paragraphe parent, trop grande et trop aérée dans une modale. */
.hp-form__description:has(> .li-note--inline){margin:0 0 18px;padding:0;background:none;border:0;font-size:inherit;line-height:inherit}
.li-note--inline{display:block;margin:0;font-size:.9rem;line-height:1.45}
.li-note--inline strong{color:var(--ink)}

/* Erreur rattachée à un champ (assets/js/form-inline-errors.js). Reprend la
 * couleur d'erreur déjà employée par .li-note--err — aucune teinte nouvelle. */
.li-field-err{margin:6px 0 0;font-size:.85rem;line-height:1.4;color:#c0392b}
.hp-form__field.has-error input,
.hp-form__field.has-error select,
.hp-form__field.has-error textarea{border-color:#c0392b}

/* Rappel des règles sous le bouton d envoi (pied de formulaire). Discret :
   même taille que les autres mentions secondaires du site. */
.li-form-legal{margin:12px 0 0;font-size:.78rem;line-height:1.4;color:var(--ink-2);text-align:center}

/* Pied de formulaire contenant la mention légale : le bouton et la mention
   sont côte à côte par défaut (flex). La mention doit passer SOUS le bouton,
   sur toute la largeur. */
.hp-form__footer:has(> .li-form-legal){flex-wrap:wrap}
.hp-form__footer > .li-form-legal{flex:0 0 100%;width:100%;margin:10px 0 0}


/* ====================================================================
 * Surfaces ambre — texte et icônes en BLANC (unification, 2026-07-21)
 * Le brun #3A2606 sur ambre clair manquait de lisibilité et cassait la
 * cohérence avec les surfaces framboise (déjà en blanc). On passe tout
 * en blanc et on fonce légèrement le dégradé pour garder le contraste
 * (AA sur texte gras / gros texte). Un seul endroit à maintenir.
 * ==================================================================== */
:root { --gold-grad: linear-gradient(120deg, #C87D16, #A86A12 60%, #8F5A0E); }

.li-btn--gold,
.li-btn--gold:hover,
.li-btn--gold:focus,
.li-btn--brass,
.li-btn--brass:hover,
.li-btn--brass:focus,
.li-pricing .li-btn--brass,
.li-pricing .li-btn--brass:hover,
.li-plan__ico--gold,
.li-feature__ico--gold,
.li-flag--featured,
.li-lflag--featured {
	background: var(--gold-grad);
	color: #fff;
}
.li-plan__ico--gold i,
.li-feature__ico--gold i { color: #fff; }
.li-btn--gold:hover,
.li-btn--brass:hover,
.li-pricing .li-btn--brass:hover { filter: brightness(1.06); }

/* === Ligne date/heure au-dessus des bulles : rattachement visuel (v1.6.445) ===
   Deux règles du plugin (spécificité 0,2,0) l'emportaient sur les nôtres :

   1. `.hp-message--view-block .hp-message__header:not(:last-child){margin-bottom:.5rem}`
      → 8px SOUS la date, contre 4px de gap au-dessus : la date se retrouvait plus
      près du message PRÉCÉDENT que du sien. On inverse le rapport.
   2. `.hp-message--view-block.hp-message--sent .hp-message__header{padding-right:3rem}`
      → réservait la place de la coche native, positionnée en absolu. Notre refonte
      en bulles ancre cette coche en bas de bulle : ce retrait de 48px ne servait
      plus qu'à décrocher la date du bord droit.

   Préfixe `.hp-messages:not(.hp-table)` (0,3,0) pour passer devant, sans !important
   et sans toucher au gabarit « liste des fils ». */
.hp-messages:not(.hp-table) .hp-message--view-block .hp-message__header{margin-top:11px;margin-bottom:1px;padding-right:0}
.hp-messages:not(.hp-table) .hp-message--view-block.hp-message--sent .hp-message__header{padding-right:0;text-align:right}
/* Messages envoyés : la date se cale à droite, au bord de la bulle. */
.hp-messages:not(.hp-table) .hp-message--sent .hp-message__header,
.hp-messages:not(.hp-table) .hp-message--sent .hp-message__details{margin-left:auto;justify-content:flex-end}

/* Une bulle LUE ne pâlit pas.

   `.hp-message--read{opacity:.7}` (plus haut dans ce fichier) a été écrite pour
   la LISTE des conversations, où griser un fil déjà lu a du sens. Mais le
   sélecteur est global, et depuis les accusés de lecture en direct la classe
   arrive aussi sur NOS bulles envoyées, dès que l'autre les ouvre : le message
   passait à 70 % d'opacité au moment précis où il était lu — comme s'il perdait
   de sa valeur en étant reçu. Auparavant l'effet n'apparaissait qu'au
   rechargement de la page, ce qui le rendait presque invisible.

   Le passage de la coche simple à la double coche (glyphe du plugin) dit déjà
   « lu » : il n'y a rien à ajouter. Même préfixe (0,3,0) que les règles
   ci-dessus, donc pas de !important et la liste des fils reste inchangée. */
.hp-messages:not(.hp-table) .hp-message--read{opacity:1}

/* Heure d'envoi DANS la bulle, en bas à droite, sur la ligne des coches.

   Le déplacement du bloc est fait côté serveur (inc/messages-ux.php) pour que
   les messages arrivés en direct aient la même disposition que les autres.
   Ici, seul l'habillage : petite, discrète, alignée à droite au pied du texte.

   Sur un message ENVOYÉ, la coche d'accusé est posée en absolu au coin bas
   droit de la bulle : l'heure lui laisse la place par un retrait à droite,
   sinon les deux se chevauchent sur les messages courts.
   L'heure occupe TOUJOURS sa propre ligne, au pied de la bulle, alignée à
   droite — et la coche d'accusé se pose sur cette même ligne.

   Une première version glissait l'heure à la suite du texte quand il restait
   de la place (méthode « flottante »). Essayée en dev le 2026-07-22, écartée :
   la largeur de la bulle dépendait alors de la présence ou non de l'heure, si
   bien qu'au sein d'une même rafale les bulles changeaient de largeur d'un
   message à l'autre. Une ligne dédiée, toujours là, se lit plus calmement.

   La coche partage exactement la boîte de ligne de l'heure (hauteur 15px,
   posée à 11px du bas comme le rembourrage) : c'est ce qui les aligne, régler
   le seul `bottom` n'y suffisait pas. */
.hp-messages:not(.hp-table) .hp-message__content .hp-message__text{margin-bottom:0}
.hp-messages:not(.hp-table) .hp-message__content .hp-message__sent-date{display:block;margin:0;text-align:right;font-size:.66rem;font-style:italic;line-height:14px;letter-spacing:.01em;opacity:.7;text-transform:none;white-space:nowrap}
/* Bulle portant la ligne du bas : elle est déjà une respiration, le
   rembourrage bas peut donc être resserré (8px au lieu de 11). Les bulles sans
   cette ligne gardent leur rembourrage symétrique. */
.hp-messages:not(.hp-table) .hp-message:not(.li-msgux-notime) .hp-message__content{padding-bottom:8px}
/* Message envoyé : laisser la place de la coche au bout de la ligne. */
.hp-messages:not(.hp-table) .hp-message--sent .hp-message__content .hp-message__sent-date{color:#fff;opacity:.85;padding-right:26px}

/* Heure UNE SEULE FOIS par rafale : sur une suite de messages du même
   expéditeur espacés de moins de cinq minutes, seule la dernière bulle porte
   l'heure. Quatre bulles écrites dans la même minute affichaient quatre fois
   la même chose — l'inverse d'une mention discrète. La classe est posée par
   assets/js/messages.js, qui seul connaît l'écart entre deux messages ; sans
   JavaScript, toutes les heures s'affichent, ce qui reste correct. */
.hp-messages:not(.hp-table) .hp-message.li-msgux-notime .hp-message__sent-date{display:none}
/* Bulle ENVOYÉE sans heure : la ligne du bas disparaît avec l'heure, mais la
   coche, elle, reste — et venait se coller sur la dernière lettre du texte
   (« Ldjvdj✓✓ »). La bulle garde donc cette ligne vide, juste pour la coche.
   Côté reçu, rien à réserver : pas de coche, la bulle se referme sur le texte. */
.hp-messages:not(.hp-table) .hp-message--sent.li-msgux-notime .hp-message__content{padding-bottom:24px}

/* L'en-tête ne porte plus que le nom de l'expéditeur. Sur les messages
   groupés (même personne, à la suite), ce nom est déjà masqué : l'en-tête
   devenait une bande vide qui écartait les bulles pour rien. */
.hp-grid__item:has(.hp-message--sent) + .hp-grid__item:has(.hp-message--sent) .hp-message__header,
.hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)) + .hp-grid__item:has(.hp-message--view-block:not(.hp-message--sent)) .hp-message__header{display:none}

/* Lien de signature dans le fil : pastille lisible sur bulle rose ET claire. */
.hp-message__text a{text-decoration:underline;text-underline-offset:2px}
.li-sig-msglink{display:inline-flex;align-items:center;gap:.35em;margin-top:6px;padding:7px 14px;background:#fff;color:#c01f5b!important;border:1px solid rgba(0,0,0,.06);border-radius:999px;font-weight:700;text-decoration:none!important;box-shadow:0 2px 8px rgba(80,30,50,.14)}
.li-sig-msglink:hover{background:#fff5f9}
/* Tout autre lien du fil : même pastille (libellé selon la destination, cf. inc/message-links.php). */
.li-msglink{display:inline-flex;align-items:center;gap:.35em;max-width:100%;margin-top:6px;padding:7px 14px;background:#fff;color:#c01f5b!important;border:1px solid rgba(0,0,0,.06);border-radius:999px;font-weight:700;text-decoration:none!important;box-shadow:0 2px 8px rgba(80,30,50,.14);overflow-wrap:anywhere}
.li-msglink:hover{background:#fff5f9}

/* --- Badge « Dates à confirmer » (carte catalogue, recherche datée) ---------
   Le style vivait en <style> inline émis dans wp_head : hors du système de
   design et fragile face à l'optimisation CSS de LiteSpeed (pastille rendue en
   texte nu). Il rejoint ici la feuille du thème, calé sur la famille de
   pastilles ambre (--gold-deep) et sur le padding 1.5rem de la carte. */
.hp-listing--view-block .li-card-tbc{display:inline-flex;align-items:center;gap:6px;margin:0 1.5rem 14px;padding:.34em .78em;border-radius:var(--pill);font-size:.72rem;font-weight:700;line-height:1.25;color:var(--gold-deep);background:rgba(208,134,30,.14);border:1px solid rgba(208,134,30,.32);white-space:nowrap;cursor:help}
.hp-listing--view-block .li-card-tbc__ic{flex:none;width:13px;height:13px;stroke-width:2}

/* CTA « Laisser un avis » du profil : poussé à droite de l en-tête de section. */
.li-reviews__cta{margin-left:auto}

/* Chevrons des cartes : slick pose un margin-top:-16px EN PLUS du transform de
   centrage — la flèche remontait de 16px au-dessus du milieu de la photo. */
.hp-listing--view-block .hp-listing__image .slick-arrow{margin-top:0 !important}

/* ------------------------------------------------------------------ *
 * « Mes annonces » — actions de carte + tiroir « Plus d'options »
 * (2026-08-11, mise en page revue après test mobile)
 *
 * Une seule action principale par carte, les secondaires deux par ligne,
 * puis une ligne LIBELLÉE « Plus d'options » qui déroule le reste EN FLUX.
 * Surtout pas de menu en position:absolue : .li-myl-card a `overflow:hidden`
 * et le rognerait.
 * ------------------------------------------------------------------ */
.li-myl-card__acts{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:auto;padding-top:10px}
/* Action principale : sa propre ligne, pleine largeur. */
/* ⚠ DEUX classes dans le sélecteur, ce n est pas décoratif : le bouton principal
   porte AUSSI `.li-myl-act`, et la règle des secondaires (juste en dessous) avait
   la même spécificité (0,2,0) tout en venant APRÈS — elle gagnait, et l action
   principale se retrouvait à 50 % de largeur, libellé coupé sur deux lignes
   (« Remettre en / ligne »). Signalé à l écran le 13/08/2026. */
.li-myl-card__acts>.li-myl-act.li-myl-act--primary{flex:1 1 100%;justify-content:center}
/* Secondaires : deux par ligne, ou pleine largeur si seule sur la sienne. */
.li-myl-card__acts>.li-myl-act{flex:1 1 calc(50% - 4px);min-width:132px;justify-content:center}

.li-myl-menu{flex:1 1 100%;min-width:0}
.li-myl-more{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;padding:9px 4px 2px;font-size:.86rem;font-weight:600;color:var(--ink-2);border-top:1px solid var(--border);margin-top:2px;transition:color .15s}
.li-myl-more::-webkit-details-marker{display:none}
.li-myl-more:hover{color:var(--rasp-deep)}
.li-myl-more__chev{font-size:.72rem;transition:transform .18s}
.li-myl-menu[open] .li-myl-more{color:var(--ink)}
.li-myl-menu[open] .li-myl-more__chev{transform:rotate(180deg)}

.li-myl-menu__panel{display:flex;flex-direction:column;margin-top:8px;background:var(--cream-2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.li-myl-mitem{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;text-decoration:none;color:var(--ink);transition:background .15s,color .15s}
.li-myl-mitem+.li-myl-mitem{border-top:1px solid var(--border)}
.li-myl-mitem:hover{background:#fff;color:var(--rasp-deep)}
.li-myl-mitem>.hp-icon{flex:none;width:16px;margin-top:3px;font-size:.85rem;text-align:center;color:var(--rasp)}
.li-myl-mitem__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.li-myl-mitem__lbl{font-size:.9rem;font-weight:600;line-height:1.25}
.li-myl-mitem__sub{font-size:.8rem;font-weight:400;line-height:1.35;color:var(--ink-2)}
.li-myl-mitem--del>.hp-icon{color:var(--ink-2)}
.li-myl-mitem--del:hover{color:#c0392b;background:#fff}
.li-myl-mitem--del:hover>.hp-icon{color:#c0392b}
/* Badge « urgent » : état, plus une pastille d'action. */
.li-myl-badge--urgent .hp-icon{font-size:.7rem}
.li-myl-card__head{flex-wrap:wrap}

/* ------------------------------------------------------------------ *
 * Modale « Avant d'archiver » — motif de sortie (inc/exit-survey.php)
 * ------------------------------------------------------------------ */
.li-exit{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.li-exit[hidden]{display:none}
.li-exit__back{position:absolute;inset:0;background:rgba(28,22,26,.55);backdrop-filter:blur(2px)}
.li-exit__box{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);padding:26px 26px 22px;box-shadow:0 24px 60px rgba(28,22,26,.28)}
.li-exit__x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.7rem;line-height:1;color:var(--ink-2);cursor:pointer;padding:4px 8px}
.li-exit__x:hover{color:var(--rasp-deep)}
.li-exit__title{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);margin:0 0 8px;line-height:1.2}
.li-exit__lead{margin:0 0 20px;color:var(--ink-2);font-size:.92rem;line-height:1.5}
.li-exit__q{margin:0 0 12px;font-weight:600;color:var(--ink);font-size:.95rem}
.li-exit__reasons{display:flex;flex-direction:column;gap:8px}
.li-exit__reason{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md,14px);cursor:pointer;transition:border-color .15s,background .15s}
.li-exit__reason:hover{border-color:var(--rasp);background:var(--cream-2)}
.li-exit__reason input{margin:2px 0 0;accent-color:var(--rasp);flex:none}
.li-exit__reason span{font-size:.92rem;line-height:1.4;color:var(--ink)}
.li-exit__reason:has(input:checked){border-color:var(--rasp);background:var(--cream-2)}
.li-exit__notewrap{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.li-exit__notelbl{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.li-exit__note{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md,14px);font-family:inherit;font-size:.92rem;color:var(--ink)}
.li-exit__note:focus{outline:none;border-color:var(--rasp)}
.li-exit__reco{margin:16px 0 0;padding:13px 15px;background:var(--cream-2);border-left:3px solid var(--rasp);border-radius:0 var(--r-md,14px) var(--r-md,14px) 0;font-size:.9rem;line-height:1.5;color:var(--ink)}
.li-exit__acts{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px}
.li-exit__main{width:100%;justify-content:center}
.li-exit__main:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.li-exit__alts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.li-exit__alt{background:none;border:0;padding:2px 0;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.li-exit__alt:hover{color:var(--rasp-deep)}
@media(max-width:600px){
	.li-exit{padding:0;align-items:flex-end}
	.li-exit__box{width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:22px 15px 18px}
}

/* Icônes SVG intégrées (pause / lecture) : glyphes absents du sous-ensemble
   Font Awesome livré par HivePress. Alignées sur les <i class="hp-icon">. */
.li-svgico{width:1em;height:1em;flex:none;vertical-align:-.125em}
.li-myl-act>.li-svgico{width:.95em;height:.95em}
.li-myl-mitem>.li-svgico{width:16px;height:16px;margin-top:2px;color:var(--rasp)}

/* ------------------------------------------------------------------ *
 * Page « Mes disponibilités » — correctifs graphiques (2026-08-11)
 * ------------------------------------------------------------------ */

/* PIÈGE : `.li-btn--primary` était UTILISÉE par trois modules (disponibilités,
   import iCal, visibilité des avis) mais n'a JAMAIS été définie nulle part. Le
   bouton retombait donc sur le rendu natif du navigateur — fond gris, texte
   bleu — au milieu d'une page par ailleurs stylée. Les variantes réellement
   déclarées dans style.css sont : --rasp, --gold, --brass, --velvet, --ghost,
   --rasp-outline, --publish, --publish-soft. On aligne --primary sur --rasp. */
.li-btn--primary{background:linear-gradient(120deg,var(--rasp-br),var(--rasp) 60%,var(--rasp-deep));color:#fff;box-shadow:0 6px 22px rgba(238,61,111,.34)}
.li-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(238,61,111,.46);color:#fff}
.li-btn--primary:disabled{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed}

/* Le bloc « Synchroniser un calendrier externe » flottait nu sur le fond crème,
   juste après le calendrier encarté : même carte blanche, même rythme. */
.li-ical{margin:26px auto 0;padding:22px 20px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.li-ical__title{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);margin:0 0 8px;line-height:1.25}
.li-ical .li-wz__sub{margin:0 0 16px}
.li-ical code{font-size:.88em;padding:.1em .4em;background:var(--cream-2);border-radius:6px}
.li-ical__row{margin:0}
.li-ical__actions{align-items:center}
.li-ical .li-availpage__status{font-size:.88rem;font-weight:600;color:var(--ink-2)}

/* Actions du calendrier : l'enregistrement est l'action de la page. */
.li-availpage__actions{margin-top:22px}
@media(max-width:600px){
	.li-availpage__actions .li-btn,.li-ical__actions .li-btn{width:100%}
	.li-ical{padding:18px 15px 16px}
}

/* PIÈGE `hidden` : une règle de classe qui pose `display` l'emporte sur le
   `[hidden]{display:none}` du navigateur. `.li-exit__notewrap{display:flex}`
   affichait donc le champ « Dites-nous en deux mots » sur TOUS les motifs —
   y compris « Je préfère ne pas répondre », où le clavier s'ouvrait dessus.
   Toute classe de la modale portant `display` doit neutraliser [hidden]. */
.li-exit__notewrap[hidden],.li-exit__reco[hidden],.li-exit__acts[hidden]{display:none}

/* En-tête collant de la modale (2026-08-11) : avec 6 motifs sur un écran de
   téléphone, le titre sortait du champ dès qu'on faisait défiler la feuille et
   on ne savait plus de quoi parlait la question. L'en-tête est un bandeau
   `sticky` en haut du conteneur qui défile (.li-exit__box) — donc marges
   négatives pour annuler son padding et couvrir toute la largeur, sinon le
   contenu défile visiblement DANS les gouttières. La croix de fermeture est
   passée dans ce bandeau : restée en absolu, elle disparaissait aussi. */
.li-exit__head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px;
	background:#fff;margin:-26px -26px 10px;padding:22px 22px 12px 26px;
	border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:1px solid var(--border)}
.li-exit__head .li-exit__title{flex:1;margin:0}
.li-exit__head .li-exit__x{position:static;flex:none;margin:-4px -6px 0 0}
@media(max-width:600px){
	.li-exit__head{margin:-22px -15px 10px;padding:18px 12px 11px 15px}
}

/* CORRECTIF en-tête collant (2026-08-11) — la 1re ligne du chapeau passait sous
   le bandeau. Cause : `.li-exit__head` avait `margin-top:-26px` pour annuler le
   padding de la boîte. Un élément `sticky` ne se décale QUE dans son conteneur :
   sa position naturelle étant 26px au-dessus du haut de la zone de défilement,
   `top:0` le repoussait de 26px vers le bas EN PERMANENCE — donc par-dessus le
   contenu, même sans défilement. Correction : la boîte n'a plus de padding
   haut, c'est l'en-tête qui le porte, et sa marge haute repasse à 0. */
.li-exit__box{padding-top:0}
.li-exit__head{margin-top:0}
@media(max-width:600px){
	.li-exit__box{padding-top:0}
	.li-exit__head{margin-top:0}
}


/* CORRECTIF en-tête de modale (2026-08-11) — le titre « sautait » sur Safari
   (disparition/réapparition au défilement). Cause : `position:sticky` dans un
   conteneur cumulant `overflow-y:auto` et des coins arrondis → masque de
   rognage recalculé à chaque frame. On supprime la cause au lieu de forcer une
   couche de compositing : la boîte devient une colonne flex, l'en-tête est
   FIGÉ (plus aucun `sticky`) et seul `.li-exit__scroll` défile. */
.li-exit__box{display:flex;flex-direction:column;padding:0;overflow:hidden}
.li-exit__head{position:static;flex:none;margin:0;padding:22px 22px 12px 26px}
.li-exit__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
	padding:16px 26px 22px}
.li-exit__scroll>.li-exit__lead{margin-top:0}
@media(max-width:600px){
	.li-exit__box{padding:0}
	.li-exit__head{margin:0;padding:18px 12px 11px 15px}
	.li-exit__scroll{padding:14px 15px 18px}
}


/* Issue destructrice : contour rouge, pas le rose plein des actions encouragées.
   Sélecteur renforcé (.li-exit .li-btn…) : il doit battre `.li-btn--publish`,
   qui porte le dégradé et reste sur le bouton. */
.li-exit .li-btn.li-exit__main--danger{background:none;color:#b02a1e;
	box-shadow:inset 0 0 0 1.6px #d9695c}
.li-exit .li-btn.li-exit__main--danger::before{display:none}
.li-exit .li-btn.li-exit__main--danger:hover{background:#b02a1e;color:#fff;
	box-shadow:0 8px 22px rgba(176,42,30,.28);transform:translateY(-2px)}

/* === Pastille « mode sans loyer » : libellé abrégé sur cartes étroites ===
   La pastille est en `white-space:nowrap` et posée en haut à droite de la photo.
   Dès que la carte descend sous ~260 px, « Échange possible » / « Garde d'animaux »
   en entier vient chevaucher « À la une », posée dans le coin gauche. On masque
   alors la suite du libellé (.li-flag__full → .li-flag__short, cf. hivepress/listing/li-arrangement-badge.php)
   pour révéler une forme courte à la place, et on resserre un peu la pastille.
   Deux cas : la grille 2 colonnes verrouillée de 768 à 1199 px, et le mode
   4 colonnes du sélecteur « par ligne » au-delà (inc/listings-per-row.php).
   ⚠ NE PAS SUPPRIMER — sous 768 px la carte est pleine largeur : libellé entier. */
@media (min-width:768px) and (max-width:1199px){
	.hp-listing--view-block .li-flag--arr .li-flag__full{display:none}
	.hp-listing--view-block .li-flag--arr .li-flag__short{display:inline}
	.hp-listing--view-block .li-flag--arr{font-size:.64rem;padding:.38em .6em}
}
@media (min-width:1200px){
	.hp-listings.hp-grid[data-li-cols="4"] .li-flag--arr .li-flag__full{display:none}
	.hp-listings.hp-grid[data-li-cols="4"] .li-flag--arr .li-flag__short{display:inline}
	.hp-listings.hp-grid[data-li-cols="4"] .li-flag--arr{font-size:.64rem;padding:.38em .6em}
}
/* Forme abrégée : rendue dans le HTML, cachée par défaut, révélée par les
   deux media queries ci-dessus. */
.li-flag__short{display:none}
/* Anti-fuite thème parent (cf. bloc « Anti-fuite » de style.css) : variante à
   dégradé re-déclarée en classe doublée, sinon background-image:none (0,2,0)
   de la base la rend invisible. */
.li-btn--primary.li-btn--primary{background:linear-gradient(120deg,var(--rasp-br),var(--rasp) 60%,var(--rasp-deep));color:#fff}

/* ---- Page profil hôte : état vide dédié (30/08/2026) ---- */
/* Le « Aucun résultat » générique HivePress (copie orientée recherche) est
   masqué sur la route vendor (body .li-vendor-route, posée par
   inc/host-reviews-profile.php qui rend .li-vnores à la place). */
.li-vendor-route .hp-no-results { display: none; }
.li-vnores { background: var(--li-card,#fff); border: 1px solid var(--li-border,#EEE3DB); border-radius: var(--li-radius,18px); box-shadow: var(--li-shadow-sm); padding: 34px 30px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.li-vnores__t { font-family: var(--li-font-title,Georgia,serif); font-size: 1.3rem; margin: 0; color: var(--li-text,#241726); }
.li-vnores__p { margin: 0; color: var(--li-text-2,#7E6E80); }
.li-vnores .li-btn { margin-top: 8px; }
/* Profil hôte : la barre « par ligne / par page » du catalogue est du bruit
   sur un profil (1 à 3 annonces en pratique). */
.li-vendor-route .li-lpr { display: none; }