/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ---- Habillage Arkhédia du site client ---- */

/* Bouton « retour en haut » : rond et centré. Le Bootstrap des plugins, chargé après celui
   du thème, lui imposait le remplissage d'un bouton texte (3px 14px), d'où un bouton écrasé. */
.scroll-top.btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #F26522 !important;
    box-shadow: 0 6px 16px rgba(242, 101, 34, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.scroll-top.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(242, 101, 34, .45);
}
.scroll-top.btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Cartes des résidences : arrondies, légèrement soulevées au survol */
.ecommerce-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(34, 41, 47, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ecommerce-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(34, 41, 47, .14);
}
/* zone photo sans photo : un fond neutre et une icône, plutôt qu'un grand blanc */
.ecommerce-card .item-img:not(:has(img)) {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #F4F6FA 0%, #E9EDF4 100%);
}
.ecommerce-card .item-img:not(:has(img))::before {
    content: "\f1ad";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 44px;
    color: #C3CBD8;
}
.ecommerce-card .item-img:not(:has(img)) table {
    display: none;
}
/* la photo d'exemple a une largeur fixe de 300px : elle remplit la carte, recadrée */
.ecommerce-card .item-img img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover;
}

/* Pied de page : une vraie barre en bas de l'écran. Le corps devient une colonne flexible et le
   pied de page prend la place restante au-dessus de lui : en bas de l'écran quand la page est
   courte, après le contenu quand elle est longue. Les éléments fixes (barre du haut, bouton
   « retour en haut ») ne sont pas concernés. */
body.horizontal-layout:not(.blank-page) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.horizontal-layout:not(.blank-page) > .footer {
    margin-top: auto;
    padding: 14px 24px;
    background: #fff;
    border-top: 1px solid #EBE9F1;
    color: #6E6B7B;
    font-size: 13px;
    text-align: center;
}
body.horizontal-layout:not(.blank-page) > .footer p,
body.horizontal-layout:not(.blank-page) > .footer .float-md-left {
    float: none !important;
    margin: 0;
}

/* Barre de progression violette du thème (Pace, embarqué dans vendors.min.js) : remplacée par
   l'écran de chargement Arkhédia, commun aux trois sites (public/js/page-loader.js). */
.pace, .pace-inactive { display: none !important; }

/* Tableaux de listes (Mes commandes, Mes rapports) : carte blanche arrondie, lignes aérées, en-tête
   discret. !important : le HTML vient de scripts AJAX hérités et le thème force bordures et rayures. */
.client-table-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(34, 41, 47, .08); overflow: hidden; margin-bottom: 24px; }
.client-table { margin: 0 !important; font-size: 13px; border: 0 !important; }
.client-table thead th {
  background: #F3F2F7 !important; color: #5E5873 !important; border: 0 !important;
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  padding: 12px 14px !important; white-space: nowrap;
}
.client-table tbody tr { line-height: normal !important; background: none !important; }
.client-table tbody td {
  padding: 9px 14px !important; border: 0 !important; border-top: 1px solid #EBE9F1 !important;
  vertical-align: middle !important; color: #6E6B7B;
}
.client-table tbody tr:hover td { background: #F8F7FD; }
.client-table a.purplelink { color: #7367F0; font-weight: 600; }
.client-table a.purplelink:hover { color: #F26522; text-decoration: none; }
.client-table .client-date { color: #5E5873; font-weight: 600; white-space: nowrap; }

/* Pastilles des diagnostics : des ronds qui se chevauchent, teintés selon la conclusion */
.client-table .avatar-group { display: flex; align-items: center; }
.client-table .avatar-group .avatar {
  width: 30px; height: 30px; margin: 0 0 0 -6px !important; border-radius: 50% !important;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(34, 41, 47, .12); cursor: default;
  transition: transform .15s ease;
}
.client-table .avatar-group .avatar:first-child { margin-left: 0 !important; }
.client-table .avatar-group .avatar:hover { transform: translateY(-3px); z-index: 2; }
.client-table .avatar-group .avatar .avatar-content {
  width: 26px !important; height: 26px !important; border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: .3px;
}
.client-table .avatar.bg-light-success .avatar-content { background: #DDF6E8 !important; color: #1F9D57 !important; }
.client-table .avatar.bg-light-danger .avatar-content { background: #FCE4E4 !important; color: #E14B4B !important; }
.client-table .avatar.bg-light-secondary .avatar-content { background: #EEEEF2 !important; color: #82868B !important; }

/* Statuts des commandes */
.client-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.client-status--todo { background: #FDEBDC; color: #C2510F; }
.client-status--planned { background: #E9E7FD; color: #5E50EE; }
.client-status--invoiced { background: #DFF1FB; color: #1C7FB8; }
.client-status--done { background: #DDF6E8; color: #1F9D57; }

/* Téléchargement des rapports d'un diagnostic */
.client-download {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px;
  background: #F3F2F7; color: #5E5873 !important; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.client-download i { color: #F26522; font-size: 15px; }
.client-download:hover { background: #F26522; color: #fff !important; text-decoration: none; }
.client-download:hover i { color: #fff; }

/* Pages EI, bâtiment et logement */
/* La seconde feuille Bootstrap (plugins), chargée après celle du thème, donne 10 000 px de large
   à .media-body : chaque ligne du bloc « Conclusions des diagnostics » débordait de l'écran. */
.app-content .media-body { width: auto; flex: 1; }
/* la carte du haut passait sous la barre de menu */
.app-content .app-user-view { padding-top: 14px; }
.client-section-title {
  display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; font-size: 18px; font-weight: 600; color: #5E5873;
}
.client-section-title:first-child { margin-top: 0; }
.client-section-title span { font-size: 14px; font-weight: 500; color: #F26522; }
.card-body > .client-table, .card-body .client-table { border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #EBE9F1; }

/* Tableau de bord du site client */
.client-dashboard { padding-top: 14px; }
.client-dashboard__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.client-dashboard__title { margin: 0; font-size: 22px; font-weight: 600; color: #5E5873; }
.client-dashboard__period { margin-top: 2px; font-size: 13px; color: #6E6B7B; }
.client-dashboard__filter { display: flex; align-items: center; gap: 10px; }
.client-dashboard__filter label { margin: 0; font-size: 12px; color: #6E6B7B; white-space: nowrap; }
.client-dashboard__filter select { min-width: 260px; max-width: 420px; height: 38px; border-radius: 8px !important; text-overflow: ellipsis; }
.client-dashboard__filters { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; }
#dashboard-period { min-width: 190px; }
.client-empty a { color: #F26522; font-weight: 600; }

.client-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 18px; }
.client-kpi { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 4px 24px rgba(34, 41, 47, .08); }
.client-kpi__label { font-size: 12px; font-weight: 600; letter-spacing: .3px; color: #6E6B7B; text-transform: uppercase; }
.client-kpi__value { margin: 6px 0 4px; font-size: 30px; font-weight: 700; line-height: 1.1; color: #5E5873; }
.client-kpi__value small { font-size: 15px; font-weight: 600; color: #6E6B7B; }
.client-kpi__note { font-size: 12px; color: #6E6B7B; }
.client-kpi__trend { font-weight: 600; }
.client-kpi__trend.is-up { color: #1F9D57; }
.client-kpi__trend.is-down { color: #C2510F; }

.client-panels { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 18px; }
.client-panel { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 4px 24px rgba(34, 41, 47, .08); margin-bottom: 18px; min-width: 0; }
.client-panels .client-panel { margin-bottom: 0; }
.client-panel--full { grid-column: 1 / -1; }
.client-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.client-panel__head h4 { margin: 0; font-size: 15px; font-weight: 600; color: #5E5873; }
.client-panel__hint { font-size: 12px; color: #6E6B7B; }
.client-empty { padding: 28px 0; text-align: center; font-size: 13px; color: #6E6B7B; }
@media (max-width: 991px) { .client-panels { grid-template-columns: 1fr; } }

/* barre segmentée de l'état des commandes : 2 px de blanc entre les segments */
.client-statebar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin: 6px 0 12px; }
.client-statebar__part { min-width: 4px; }
.client-statebar__part--done, .client-legend__dot--done { background: #1F9D57; }
.client-statebar__part--in_progress, .client-legend__dot--in_progress { background: #7367F0; }
.client-statebar__part--to_schedule, .client-legend__dot--to_schedule { background: #F26522; }
.client-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #6E6B7B; }
.client-legend b { color: #5E5873; margin-left: 4px; }
.client-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.client-legend__share { margin-left: 4px; font-size: 12px; }

/* ---------- habillage général du site client (ce fichier n'est chargé que par le site client) ---------- */
body.horizontal-layout:not(.blank-page) { /* pas la page de connexion */
    background: #F6F6FA;
}

/* titre de la page, en texte, à droite du logo (le centre de la barre reste libre) */
.horizontal-menu .header-navbar.navbar-brand-center .navbar-header {
    left: 274px !important; /* après le logo (31 à 256 px) ; le thème le recentre dans une règle plus tardive */
    margin-left: 0;
    transform: none;
}
.client-page-title {
    font-size: 19px;
    font-weight: 600;
    color: #5E5873;
    line-height: 1;
    padding-left: 18px;
    border-left: 1px solid #EBE9F1;
    white-space: nowrap;
}

/* menu horizontal : entrée de la page courante */
/* le thème repeint le fond du lien au survol : on garde l'orange, sinon texte blanc sur blanc */
#main-menu-navigation > li.is-active > a,
#main-menu-navigation > li.is-active:hover > a,
#main-menu-navigation > li.is-active > a:hover,
#main-menu-navigation > li.is-active > a:focus {
    background: linear-gradient(118deg, #F26522, rgba(242, 101, 34, .75)) !important;
    box-shadow: 0 0 8px 1px rgba(242, 101, 34, .35);
    border-radius: 6px;
    color: #FFF !important;
}
#main-menu-navigation > li.is-active > a svg,
#main-menu-navigation > li.is-active > a span,
#main-menu-navigation > li.is-active:hover > a svg,
#main-menu-navigation > li.is-active:hover > a span {
    color: #FFF !important;
}
#main-menu-navigation > li:not(.is-active) > a:hover {
    color: #F26522 !important;
}

/* cartes de filtres : blanches, titre discret, champs alignés */
.card.client-filters {
    background: #FFF;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(34, 41, 47, .06);
    margin-bottom: 14px !important;
}
.card.client-filters > .card-header {
    background: transparent;
    border-bottom: 1px solid #EBE9F1;
    padding: .8rem 1.25rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #82868B;
}
.card.client-filters label {
    font-size: 12px;
    color: #6E6B7B;
    margin-bottom: .25rem;
}
.card.client-filters .form-control,
.card.client-filters select {
    border-radius: 6px;
    border-color: #D8D6DE;
}
.card.client-filters .form-control:focus,
.card.client-filters select:focus {
    border-color: #F26522;
    box-shadow: 0 3px 10px 0 rgba(242, 101, 34, .15);
}

/* cartes du contenu : coins et ombre homogènes */
.app-content .card {
    border-radius: 10px;
}

/* ---------- cartographie : carte sur toute la hauteur de l'écran ---------- */
.client-map {
    position: relative;
    height: 600px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(34, 41, 47, .08);
    background: #E9E9EF;
}
.client-map.is-fullscreen {
    border-radius: 0;
}
.client-map__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.client-map__panel {
    position: absolute;
    top: 14px;
    left: 14px;
    bottom: 66px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    width: 270px;
    padding: 12px 0 8px;
    background: rgba(255, 255, 255, .96);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(34, 41, 47, .15);
}
.client-map__filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 0;
    font-size: 13px;
    color: #5E5873;
    cursor: pointer;
}
.client-map__filter input {
    accent-color: #F26522;
}
.client-map__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #FFF, 0 0 0 3px rgba(0, 0, 0, .12);
}
.client-map__count {
    margin-left: auto;
    min-width: 28px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #F3F2F7;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.client-map__filters {
    padding: 0 16px 8px;
    border-bottom: 1px solid #EBE9F1;
}
/* liste des ensembles affichés : un clic centre la carte sur l'immeuble */
.client-map__list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    overflow-y: auto;
}
.client-map__list button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 16px;
    border: 0;
    background: none;
    font-size: 13px;
    color: #5E5873;
    text-align: left;
    cursor: pointer;
}
.client-map__list button:hover {
    background: #FFF3EC;
}
.client-map__list button span:last-child {
    margin-left: auto;
    overflow: hidden;
    font-size: 12px;
    color: #82868B;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.client-map__list button b {
    flex: none;
    white-space: nowrap;
}
.client-map__list button.is-unplaced {
    opacity: .6;
}
.client-map__list .client-map__dot {
    flex: none;
    width: 10px;
    height: 10px;
}
.client-map__none {
    padding: 8px 16px;
    font-size: 13px;
    color: #82868B;
}
.client-map__unplaced {
    margin: 0;
    padding: 8px 16px 0;
    border-top: 1px solid #EBE9F1;
    font-size: 12px;
    color: #82868B;
}
/* aucun immeuble placé (positions absentes de la base) : message au centre de la carte */
.client-map__no-position {
    position: absolute;
    top: 50%;
    left: calc(50% + 142px);
    z-index: 450;
    transform: translate(-50%, -50%);
    max-width: 380px;
    padding: 18px 22px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 18px rgba(34, 41, 47, .15);
    font-size: 13px;
    color: #5E5873;
    text-align: center;
}
.client-map__no-position i {
    font-size: 26px;
    color: #F26522;
}
.client-map__no-position p {
    margin: 8px 0 0;
}
.client-map__tools {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 500;
    display: flex;
    gap: 8px;
}
.client-map__tool {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: #FFF;
    color: #5E5873;
    box-shadow: 0 2px 10px rgba(34, 41, 47, .2);
    cursor: pointer;
}
.client-map__tool:hover {
    color: #F26522;
}
.client-map .leaflet-control-zoom,
.client-map .leaflet-control-layers {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(34, 41, 47, .2);
    overflow: hidden;
}

/* fiche d'un immeuble au clic */
.client-map-popup-wrapper .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}
.client-map-popup-wrapper .leaflet-popup-content {
    margin: 0;
    width: 250px !important;
}
.client-map-popup__photo {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.client-map-popup__body {
    padding: 12px 14px 14px;
    font-size: 12px;
    color: #6E6B7B;
}
.client-map-popup__title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #F26522 !important;
}
.client-map-popup__meta {
    margin: 2px 0 8px;
    color: #82868B;
}
.client-map-popup__address {
    margin-bottom: 10px;
    line-height: 1.4;
}
.client-map-popup__badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 600;
}
.client-map-popup__badge--presence { background: #FCE4E4; color: #C23B3B; }
.client-map-popup__badge--absence { background: #DDF6E8; color: #1F7A46; }
.client-map-popup__badge--unknown { background: #EEEEF2; color: #6E6B7B; }
.client-map-popup__address span {
    color: #82868B;
}
.client-map-popup__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0 0 10px;
}
.client-map-popup__facts div {
    padding: 5px 0;
    border-radius: 8px;
    background: #F8F8FA;
    text-align: center;
}
.client-map-popup__facts dt {
    font-size: 11px;
    font-weight: 400;
    color: #82868B;
}
.client-map-popup__facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #5E5873;
}
.client-map-popup__last {
    margin-top: 8px;
    color: #82868B;
}
.client-map-popup__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #EBE9F1;
}
.client-map-popup__links a {
    font-weight: 600;
    color: #F26522 !important;
}

@media (max-width: 575.98px) {
    .client-map__panel {
        right: 14px;
        bottom: auto;
        width: auto;
        max-height: 45%;
    }
}

/* ---------- page d'un logement ---------- */
.client-dwelling__head {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: center;
}
.client-dwelling__photo {
    width: 220px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}
.client-dwelling__path {
    font-size: 13px;
    color: #82868B;
}
.client-dwelling__path a {
    color: #7367F0;
    font-weight: 600;
}
.client-dwelling__path span {
    margin: 0 6px;
}
.client-dwelling__title {
    margin: 4px 0 6px;
    font-size: 24px;
    font-weight: 600;
    color: #F26522;
}
.client-dwelling__address {
    color: #6E6B7B;
}
.client-dwelling__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: #6E6B7B;
}
.client-dwelling__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid #EBE9F1;
}
.client-dwelling__facts dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #82868B;
}
.client-dwelling__facts dd {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #5E5873;
    overflow-wrap: anywhere;
}
.client-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}
.client-result {
    display: flex;
    align-items: center;
    gap: 12px;
}
.client-result .avatar {
    margin: 0;
    border-radius: 8px;
}
.client-result .avatar .avatar-content {
    width: 38px;
    height: 38px;
    font-size: 12px;
    font-weight: 700;
}
.client-result__label {
    font-weight: 600;
    color: #5E5873;
}
.client-result__value {
    font-size: 12px;
    color: #6E6B7B;
}
.client-documents {
    margin: 0;
    padding: 0;
    list-style: none;
}
.client-documents li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EBE9F1;
}
.client-documents li:last-child {
    border-bottom: 0;
}
.client-documents__icon {
    font-size: 18px;
    color: #E14B4B;
}
.client-documents__name {
    flex: 1;
    color: #5E5873;
}

@media (max-width: 1199.98px) {
    .client-dwelling__head {
        grid-template-columns: 180px minmax(0, 1fr);
    }
    .client-dwelling__photo {
        width: 180px;
    }
    .client-dwelling__facts {
        grid-column: 1 / -1;
        padding-left: 0;
        border-left: 0;
    }
}
@media (max-width: 575.98px) {
    .client-dwelling__head {
        grid-template-columns: 1fr;
    }
    .client-dwelling__photo {
        width: 100%;
    }
    .client-dwelling__facts,
    .client-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.client-dwelling > .client-panel + .client-panel,
.client-dwelling > .client-panels + .client-panel {
    margin-top: 0;
}

/* Mes résidences : recherche, filtre et tri instantanés, puis une carte par ensemble immobilier */
.client-residences__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; }
.client-residences__search { position: relative; flex: 1 1 260px; }
.client-residences__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #B9B9C3; font-size: 13px; }
.client-residences__search .form-control { padding-left: 34px; }
.client-residences__toolbar select.form-control { flex: 0 1 240px; width: auto; min-width: 0; max-width: 260px; }
.client-residences__count { margin-left: auto; font-size: 13px; font-weight: 600; color: #6E6B7B; white-space: nowrap; }

.client-residences { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.client-residence { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(34, 41, 47, .08); transition: box-shadow .15s, transform .15s; }
.client-residence[hidden] { display: none; }
.client-residence:hover { box-shadow: 0 8px 28px rgba(34, 41, 47, .16); transform: translateY(-2px); }
.client-residence__photo { position: relative; display: block; aspect-ratio: 16 / 9; background: #F3F2F7; }
.client-residence__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.client-residence__buildings { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 11.5px; font-weight: 600; color: #5E5873; }
.client-residence__body { flex: 1; padding: 14px 16px 6px; }
.client-residence__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.client-residence__title a { color: #F26522; }
.client-residence__address { min-height: 36px; font-size: 12.5px; line-height: 1.45; color: #6E6B7B; }
.client-residence__address span { color: #B9B9C3; }
.client-residence__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 6px; }
.client-residence__facts dt { font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #6E6B7B; }
.client-residence__facts dd { margin: 0; font-size: 18px; font-weight: 700; color: #5E5873; }
.client-residence__progress { height: 6px; border-radius: 3px; background: #F3F2F7; overflow: hidden; }
.client-residence__progress span { display: block; height: 100%; border-radius: 3px; background: #F26522; }
.client-residence__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 12px; color: #6E6B7B; }
.client-residence__active { margin-top: 6px; font-size: 12px; font-weight: 600; color: #5E50EE; }
.client-status--none { background: #F3F2F7; color: #6E6B7B; }
.client-residence__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 14px; }
.client-residence__open { font-size: 13px; font-weight: 600; color: #F26522; }
.client-residence__open::after { content: " ›"; }

/* Mes rapports : une pastille par rapport, colorée par sa conclusion, qui télécharge le PDF */
.client-reports__reset { font-size: 13px; font-weight: 600; color: #6E6B7B; }
.client-panel__head h4 small { font-size: 13px; font-weight: 500; color: #6E6B7B; }
.client-reports__address { max-width: 280px; font-size: 12.5px; }
.client-reports__files { display: flex; flex-wrap: wrap; gap: 4px; }
.client-report { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
a.client-report:hover { text-decoration: none; filter: brightness(.94); }
.client-report--absence { background: #DDF6E8; color: #1F9D57; }
.client-report--presence { background: #FCE4E4; color: #D63B3B; }
.client-report--unknown { background: #F3F2F7; color: #5E5873; }
.client-reports__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: #6E6B7B; }
.client-reports__legend .client-report { margin-left: 8px; }
.client-reports__legend .client-report:first-child { margin-left: 0; }
.client-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 14px; font-size: 13px; color: #6E6B7B; }
.client-pager a { font-weight: 600; color: #F26522; }

/* Mes commandes : répartition par état, chaque état filtre la liste */
.client-orders__states { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.client-orders__state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(34, 41, 47, .06); font-size: 13px; font-weight: 600; color: #5E5873; border: 2px solid transparent; }
.client-orders__state:hover { text-decoration: none; color: #5E5873; border-color: #EBE9F1; }
.client-orders__state.is-active { border-color: #F26522; }
.client-orders__state b { font-size: 14px; }
.client-orders__city { color: #6E6B7B; }

/* Barre de recherche des listes rattachée au menu, dont elle prolonge la carte : elle reste collée
   sous le menu (fixe) pendant le défilement. Seulement quand le menu est horizontal (≥ 1200 px). */
@media (min-width: 1200px) {
    body:has(.client-subbar) .header-navbar.navbar-horizontal {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: none !important;
    }
    .client-subbar {
        position: sticky;
        top: 127px;
        z-index: 998;
        margin-top: 5px;
        padding: 10px 14px 12px;
        border-top: 1px solid #EBE9F1;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 10px 18px -10px rgba(34, 41, 47, .25);
    }
}