/* =============================================================================
   CHACUN SON LIEU — Refonte graphique du bloc ".category-block"
   Pages concernées : se_renseigner_ville.php / se_renseigner_quartier.php
   -----------------------------------------------------------------------------
   IMPORTANT : toutes les règles de ce fichier sont préfixées par ".category-block"
   afin de n'impacter QUE le contenu injecté en JS dans ce bloc.
   Aucune autre partie du site n'est modifiée.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Design tokens
   -------------------------------------------------------------------------- */
.category-block {
	--csl-ink:            #16242b;
	--csl-ink-soft:       #46606c;
	--csl-muted:          #8ba0ab;
	--csl-line:           #e7eef4;
	--csl-line-soft:      #f1f5f9;
	--csl-surface:        #ffffff;
	--csl-surface-alt:    #f5f8fb;
	--csl-page:           #fafafa;

	--csl-accent:         #16c7b5;
	--csl-accent-soft:    rgba(22, 199, 181, .10);

	--csl-green:          #12a878;
	--csl-red:            #ef4b57;
	--csl-amber:          #e2951b;

	--csl-radius-xl:      20px;
	--csl-radius-lg:      16px;
	--csl-radius-md:      12px;
	--csl-radius-pill:    999px;

	--csl-gutter:         20px;

	--csl-shadow-sm:      0 1px 2px rgba(22, 36, 43, .04);
	--csl-shadow-md:      0 1px 2px rgba(22, 36, 43, .04), 0 10px 26px -16px rgba(22, 36, 43, .34);
	--csl-shadow-lg:      0 2px 4px rgba(22, 36, 43, .05), 0 22px 44px -24px rgba(22, 36, 43, .42);

	--csl-ease:           cubic-bezier(.22, .61, .36, 1);
}

/* Couleur d'accent par catégorie (utilisée par les en-têtes de section et les cartes) */
.category-block #environment.row-category-se-renseigner,
.category-block .category-icons-detail.environment   { --csl-accent: #16c7b5; --csl-accent-soft: rgba(22,199,181,.11); }
.category-block #transport.row-category-se-renseigner,
.category-block .category-icons-detail.transport     { --csl-accent: #1d9bde; --csl-accent-soft: rgba(29,155,222,.11); }
.category-block #property.row-category-se-renseigner,
.category-block .category-icons-detail.property      { --csl-accent: #6c63e0; --csl-accent-soft: rgba(108,99,224,.11); }
.category-block #shop.row-category-se-renseigner,
.category-block .category-icons-detail.shop          { --csl-accent: #ef8321; --csl-accent-soft: rgba(239,131,33,.11); }
.category-block #teaching.row-category-se-renseigner,
.category-block .category-icons-detail.teaching      { --csl-accent: #d9a300; --csl-accent-soft: rgba(217,163,0,.12); }
.category-block #safety.row-category-se-renseigner,
.category-block .category-icons-detail.safety        { --csl-accent: #ef4b57; --csl-accent-soft: rgba(239,75,87,.10); }
.category-block #entertainment.row-category-se-renseigner,
.category-block .category-icons-detail.entertainment { --csl-accent: #e0559b; --csl-accent-soft: rgba(224,85,155,.10); }
.category-block #internet.row-category-se-renseigner,
.category-block .category-icons-detail.internet      { --csl-accent: #00b3c4; --csl-accent-soft: rgba(0,179,196,.11); }
.category-block #economy.row-category-se-renseigner,
.category-block .category-icons-detail.economy       { --csl-accent: #109c8c; --csl-accent-soft: rgba(16,156,140,.11); }
.category-block #job.row-category-se-renseigner,
.category-block .category-icons-detail.job           { --csl-accent: #4b7bec; --csl-accent-soft: rgba(75,123,236,.10); }
.category-block #health.row-category-se-renseigner,
.category-block .category-icons-detail.health        { --csl-accent: #e8615f; --csl-accent-soft: rgba(232,97,95,.10); }
.category-block #politic.row-category-se-renseigner,
.category-block .category-icons-detail.politic       { --csl-accent: #7a6a63; --csl-accent-soft: rgba(122,106,99,.11); }
.category-block #people.row-category-se-renseigner,
.category-block .category-icons-detail.people        { --csl-accent: #9b59c9; --csl-accent-soft: rgba(155,89,201,.10); }


/* -----------------------------------------------------------------------------
   1. Barre sticky : titre + menu de navigation en capsules
   -------------------------------------------------------------------------- */
.category-block .main-sticky-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1050;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	padding: 14px 0 12px;
	background: rgba(250, 250, 250, .88);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--csl-ease), box-shadow .2s var(--csl-ease);
}

.category-block .main-sticky-header.is-stuck {
	border-bottom-color: var(--csl-line);
	box-shadow: 0 10px 24px -22px rgba(22, 36, 43, .55);
}

.category-block .main-sticky-header h2 {
	margin: 0 0 12px;
	padding: 0 !important;
	font-family: 'robotomedium';
	font-size: 23px;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--csl-ink);
	background: none;
	text-align: left;
	white-space: normal;
}

.category-block .main-sticky-header h2 small {
	font-family: 'robotoregular';
	font-size: 15px;
	color: var(--csl-muted);
	letter-spacing: 0;
}

.category-block .menu-scroll-container {
	display: flex;
	align-items: center;
	gap: 2px;
	overflow-x: auto;
	white-space: nowrap;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 5px;
	background: var(--csl-surface);
	border: 1px solid var(--csl-line);
	border-radius: var(--csl-radius-pill);
	box-shadow: var(--csl-shadow-md);
}

.category-block .menu-scroll-container::-webkit-scrollbar { display: none; }

.category-block .category-link {
	display: inline-block;
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--csl-radius-pill);
	font-family: 'robotomedium';
	font-size: 13px;
	line-height: 1.2;
	color: var(--csl-ink-soft);
	text-decoration: none !important;
	user-select: none;
	cursor: pointer;
	transition: color .18s var(--csl-ease), background-color .18s var(--csl-ease);
}

.category-block .category-link:hover,
.category-block .category-link:focus,
.category-block .category-link:active {
	color: var(--csl-ink);
	background-color: var(--csl-surface-alt);
}

.category-block .category-link.active {
	color: #fff !important;
	background: linear-gradient(135deg, #21d9c4 0%, #10b3ab 100%);
	box-shadow: 0 6px 14px -6px rgba(16, 179, 171, .75);
}


/* -----------------------------------------------------------------------------
   2. En-tête de catégorie (icône + libellé + note)
   -------------------------------------------------------------------------- */
.category-block .row-category-se-renseigner {
	display: block;
	height: auto;
	padding: 0;
	margin: 52px 0 20px;
}

.category-block .city-details > .col-12:first-child .row-category-se-renseigner { margin-top: 28px; }

.category-block .col-category-se-renseigner {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 0 0 16px;
	margin: 0;
	border-bottom: 1px solid var(--csl-line);
}

.category-block .circle-category-se-renseigner {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--csl-accent-soft);
	overflow: hidden;
}

.category-block .circle-category-se-renseigner img {
	width: 24px;
	height: 24px;
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
	filter: brightness(0);
	opacity: .78;
}

.category-block .label-text-category-se-renseigner {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'robotomedium';
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--csl-ink);
	text-align: left;
}

.category-block .note-category-se-renseigner {
	flex: 0 0 auto;
	width: auto;
	margin: 0 0 0 auto;
	padding: 7px 15px;
	border-radius: var(--csl-radius-pill);
	box-shadow: none;
	color: #fff;
	font-family: 'robotomedium';
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
}

.category-block .note-category-se-renseigner b { font-family: 'robotobold'; }
.category-block .note-category-se-renseigner small { font-size: 78%; opacity: .85; }

/* Les <hr> historiques entre catégories deviennent inutiles (bordure d'en-tête) */
.category-block #inline-category-details > .city-details > hr,
.category-block #inline-category-details .city-details > hr { display: none; }


/* -----------------------------------------------------------------------------
   3. Grille "Masonry" — jamais de ligne vide sur desktop
   -------------------------------------------------------------------------- */
.category-block #inline-category-details {
	padding: 0;
	background: transparent;
}

.category-block .item { margin-bottom: 40px !important; }

.category-block #inline-category-details .category-icons-detail,
.category-block .category-container .category-icons-detail {
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
	background-color: transparent;
	gap: 0;
}

/* Éléments de mesure utilisés par Masonry */
.category-block .csl-grid-sizer,
.category-block .csl-gutter-sizer {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	visibility: hidden;
	pointer-events: none;
}
.category-block .csl-gutter-sizer { width: var(--csl-gutter); }
.category-block .csl-grid-sizer   { width: calc(50% - (var(--csl-gutter) / 2)); }

.category-block #inline-category-details .icons-detail-div {
	width: calc(50% - (var(--csl-gutter) / 2));
	margin: 0 0 var(--csl-gutter);
}
.category-block #inline-category-details .icons-detail-div.csl-card--full { width: 100%; }

/* Repli si la librairie Masonry n'est pas chargée : disposition flex classique */
.category-block #inline-category-details .category-icons-detail.csl-grid--fallback,
.category-block .category-container .category-icons-detail.csl-grid--fallback {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--csl-gutter);
}
.category-block .csl-grid--fallback .csl-grid-sizer,
.category-block .csl-grid--fallback .csl-gutter-sizer { display: none; }
.category-block .csl-grid--fallback .icons-detail-div { margin-bottom: 0; }


/* -----------------------------------------------------------------------------
   4. Carte de donnée
   -------------------------------------------------------------------------- */
.category-block #inline-category-details .icons-detail-div {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--csl-surface);
	border: 1px solid var(--csl-line);
	border-radius: var(--csl-radius-xl);
	box-shadow: var(--csl-shadow-md);
	overflow: hidden;
	transition: box-shadow .28s var(--csl-ease), transform .28s var(--csl-ease), border-color .28s var(--csl-ease);
}

@media (min-width: 1025px) {
	.category-block #inline-category-details .icons-detail-div:hover {
		transform: translateY(-3px);
		border-color: #dbe6ee;
		box-shadow: var(--csl-shadow-lg);
	}
}

/* Filet coloré en haut de carte, révélé au survol */
.category-block #inline-category-details .icons-detail-div::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--csl-accent);
	opacity: 0;
	transform: scaleX(.25);
	transform-origin: left center;
	transition: opacity .3s var(--csl-ease), transform .3s var(--csl-ease);
	pointer-events: none;
}
@media (min-width: 1025px) {
	.category-block #inline-category-details .icons-detail-div:hover::after { opacity: 1; transform: scaleX(1); }
}

/* Titre de carte */
.category-block .category-icons-detail h2 {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 18px 20px 14px;
	background: transparent;
	border-bottom: 1px solid var(--csl-line-soft);
	font-family: 'robotomedium';
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: -.005em;
	color: var(--csl-ink);
	text-align: left;
	position: relative;
}

.category-block .category-icons-detail h2::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--csl-accent);
}

/* Corps de carte */
.category-block .category-container .icons-detail-div > table {
	flex: 1 1 auto;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	padding: 16px 18px 10px;
	margin: 0;
	text-align: center;
}

.category-block .category-container .icons-detail-div table td {
	padding: 9px 8px;
	vertical-align: middle;
	border: 0;
}

.category-block .category-container .icons-detail-div table img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* Illustration principale d'une carte (paysage, ambiance…) */
.category-block .category-container .icons-detail-div table td > img {
	width: 88px;
	max-width: 60%;
	height: auto;
	margin: 0 auto 10px;
}

/* Libellés / valeurs */
.category-block .category-container .icons-detail-div table label {
	display: block;
	margin: 0 0 8px;
	font-family: 'robotomedium';
	font-size: 11px;
	line-height: 1.35;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--csl-muted);
	font-weight: normal;
}

.category-block .category-container .icons-detail-div table small {
	display: block;
	margin-top: 2px;
	font-family: 'robotobold';
	font-size: 20px;
	line-height: 1.2;
	color: var(--csl-ink);
	letter-spacing: -.02em;
}

/* Cellule dont l'unique contenu est une valeur (ex : "12 km", "38 ans") */
.category-block .category-container .icons-detail-div table td.csl-td-hero label {
	margin: 0;
	font-family: 'robotobold';
	font-size: 16px;
	line-height: 1.15;
	letter-spacing: -.03em;
	text-transform: none;
	color: var(--csl-ink);
}

/* Cellule "pictogramme + valeur" (paysage, ambiance…) */
.category-block .category-container .icons-detail-div table td.csl-td-icon label {
	margin: 0;
	font-family: 'robotomedium';
	font-size: 17px;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--csl-ink);
}

/* Cellule "label + image" (littoral / montagne, risques) */
.category-block .category-container .icons-detail-div table label > img {
	width: auto;
	max-height: 46px;
	margin: 0 auto 4px;
	opacity: .92;
}

.category-block .category-container .icons-detail-div table .price {
	display: block;
	margin-top: 6px;
	font-family: 'robotomedium';
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--csl-muted);
	text-transform: none;
}

.category-block .category-icons-detail table hr {
	margin: 6px 0;
	border: 0;
	border-top: 1px solid var(--csl-line-soft);
	background: none;
	height: 1px;
}

/* Pied de carte : précision spatiale + sources */
.category-block .csl-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-top: auto;
	padding: 11px 20px 13px;
	background: #fbfdfe;
	border-top: 1px solid var(--csl-line-soft);
}

.category-block .category-container .csl-card-foot .item-data-granularity-block,
.category-block .category-container .csl-card-foot .item-data-source-block {
	padding: 0;
	font-family: 'robotoregular';
	font-size: 11px;
	line-height: 1.45;
	color: #a3b4bf;
	text-align: left;
}

.category-block .category-container .csl-card-foot .item-data-granularity-block {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: var(--csl-radius-pill);
	background: #eff4f8;
	color: #7d94a1;
	font-family: 'robotomedium';
	white-space: nowrap;
}

.category-block .category-container .csl-card-foot .item-data-source-block { flex: 1 1 140px; min-width: 0; }


/* -----------------------------------------------------------------------------
   5. Tuiles de valeur brute (.raw_value / .alt_value)
   -------------------------------------------------------------------------- */
.category-block .raw_value,
.category-block .alt_value {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 54px;
	padding: 10px 12px;
	border-radius: 14px;
	font-family: 'robotobold';
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--csl-ink);
	box-shadow: none;
	text-align: center;
}

.category-block .raw_value {
	background-color: var(--csl-surface-alt);
	border: 1px solid #e4ecf3;
}

.category-block .alt_value {
	background-color: #fff;
	border: 1px dashed #c3d1db;
}

@media (min-width: 900px) and (max-width: 1300px) { .category-block .raw_value { font-size: 15px; } }
@media (min-width: 768px) and (max-width:  899px) { .category-block .raw_value { font-size: 13px; } }
@media (max-width: 400px)                         { .category-block .raw_value { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 1199px) { .category-block .alt_value { font-size: 13px; } }
@media (max-width: 450px)                         { .category-block .alt_value { font-size: 13px; } }


/* -----------------------------------------------------------------------------
   6. Jauges (progress bars)
   -------------------------------------------------------------------------- */
/* Alignement vertical de la jauge avec la tuile de valeur brute */
.category-block .progress-bar-with-raw_value {
	display: flex;
	align-items: center;
	min-height: 54px;
	top: auto;
}
.category-block .progress-bar-with-raw_value > .progress { flex: 0 0 86%; margin: 0 auto; }

.category-block .category-icons-detail .progress {
	height: 10px;
	margin: 0 auto;
	border-radius: var(--csl-radius-pill);
	overflow: visible;
	box-shadow: inset 0 1px 2px rgba(22, 36, 43, .10);
}

.category-block .category-icons-detail .progress.w-80 { width: 86%; }

.category-block .category-icons-detail .progress .progress-bar {
	background: #eef3f7;
	border-radius: 0 var(--csl-radius-pill) var(--csl-radius-pill) 0;
	box-shadow: none;
}

/* Le curseur "▼" devient une pastille moderne, calée exactement sur la valeur.
   Le pointeur reprend le même `right` que .progress-bar : leurs bords gauches
   coïncident, la pastille est donc centrée sur la position mesurée. */
.category-block .category-icons-detail .progress-bar-pointer {
	top: -3px;
	right: -1px;
	height: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.category-block .category-icons-detail .progress-bar-pointer::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
	height: 10px;
	margin-left: -8px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--csl-ink);
	box-shadow: 0 2px 6px rgba(22, 36, 43, .28);
	box-sizing: content-box;
}

.category-block .category-icons-detail.transport .progress { margin-top: 14px; margin-bottom: 6px; }


/* -----------------------------------------------------------------------------
   7. Notations sprites (étoiles, fleurs, soleil, pluie, label internet)
   -------------------------------------------------------------------------- */
.category-block .category-icons-detail span.stars,
.category-block .category-icons-detail span.flowers,
.category-block .category-icons-detail span.label_internet,
.category-block .category-icons-detail span.sun,
.category-block .category-icons-detail span.rain {
	margin: 6px auto 2px;
}


/* -----------------------------------------------------------------------------
   8. Blocs de tendance (évolution passée / projection future)
   -------------------------------------------------------------------------- */
.category-block .datatrend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 100%;
	margin: 2px 0 14px;
}

.category-block .datatrend > div[class*="col-"] {
	float: none;
	width: auto;
	max-width: none;
	flex: 1 1 150px;
	padding: 0;
}

.category-block .datatrend-block {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: var(--csl-radius-lg);
	box-shadow: none;
	font-family: 'robotoregular';
	text-align: left;
}

.category-block .datatrend-block-dark {
	background: linear-gradient(150deg, #24333a 0%, #16242b 100%);
	color: #fff;
}

.category-block .datatrend-block-light {
	background: var(--csl-surface-alt);
	border-color: #e4ecf3;
	color: var(--csl-ink);
}

.category-block .datatrend-block-header { margin-bottom: 8px; border-bottom: 1px solid rgba(139, 160, 171, .28); }

.category-block .datatrend-block-header div {
	margin-bottom: 6px;
	font-family: 'robotomedium';
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .7;
	text-align: left;
}

.category-block .datatrend-block-title div {
	font-family: 'robotomedium';
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
	line-height: 1.3;
	text-align: left;
}

.category-block .datatrend-block-content { margin: 6px 0 4px; }

.category-block .datatrend-block-content-green,
.category-block .datatrend-block-content-red {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: 'robotobold';
	font-size: 23px;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-align: left;
}

.category-block .datatrend-block-content-green { color: #1fd7a0; }
.category-block .datatrend-block-content-red   { color: #ff7a83; }
.category-block .datatrend-block-light .datatrend-block-content-green { color: var(--csl-green); }
.category-block .datatrend-block-light .datatrend-block-content-red   { color: var(--csl-red); }

.category-block .datatrend-block-content .fa { font-size: 14px; }

.category-block .datatrend-block-footer div {
	font-family: 'robotoregular';
	font-size: 11px;
	line-height: 1.3;
	opacity: .62;
	text-align: left;
}


/* -----------------------------------------------------------------------------
   9. Cartes "donnée premium"
   -------------------------------------------------------------------------- */
.category-block .csl-card--premium {
	border-color: transparent !important;
	background-size: cover !important;
	background-position: center top !important;
}

.category-block .csl-card--premium::before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(180deg, rgba(14, 24, 30, .48) 0%, rgba(14, 24, 30, .74) 55%, rgba(14, 24, 30, .90) 100%);
	z-index: 0;
}

.category-block .csl-card--premium > * { position: relative; z-index: 1; }

.category-block .category-icons-detail .csl-card--premium > h2 {
	padding-top: 46px;
	border-bottom-color: rgba(255, 255, 255, .16);
	color: #fff !important;
}
.category-block .category-icons-detail .csl-card--premium > h2::before { background: #f7c948; }

.category-block .csl-premium-tag {
	position: absolute;
	top: 14px;
	left: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: var(--csl-radius-pill);
	background: rgba(247, 201, 72, .16);
	border: 1px solid rgba(247, 201, 72, .45);
	color: #f7c948;
	font-family: 'robotomedium';
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.category-block .csl-premium-tag .fa { font-size: 9px; }

.category-block .csl-card--premium .premium-table-data {
	height: auto;
	min-height: 170px;
	padding: 20px 18px 26px;
}

.category-block .csl-card--premium .premium-table-data td { padding: 0; }

.category-block .csl-card--premium .premium-button {
	margin: 0 0 12px;
	padding: 11px 22px;
	border-radius: var(--csl-radius-pill);
	background: linear-gradient(135deg, #4a80ff 0%, #2f5ce0 100%);
	font-family: 'robotomedium';
	font-size: 13px;
	letter-spacing: .01em;
	box-shadow: 0 10px 22px -12px rgba(47, 92, 224, .95);
	transition: transform .2s var(--csl-ease), box-shadow .2s var(--csl-ease), background .3s var(--csl-ease);
}

.category-block .csl-card--premium .premium-button:hover {
	transform: translateY(-1px);
	background: linear-gradient(135deg, #5d8eff 0%, #3f6bea 100%);
	box-shadow: 0 14px 26px -12px rgba(47, 92, 224, 1);
}

.category-block .csl-card--premium .view-example-premium {
	display: inline-block;
	font-family: 'robotoregular' !important;
	font-size: 12px !important;
	color: rgba(255, 255, 255, .78) !important;
	transition: color .2s var(--csl-ease);
}
.category-block .csl-card--premium .view-example-premium:hover { color: #fff !important; }
.category-block .csl-card--premium .view-example-premium .fa { font-size: 9px; margin-right: 3px; }


/* -----------------------------------------------------------------------------
   10. Graphiques Highcharts
   -------------------------------------------------------------------------- */
.category-block .highchart-graph-container {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 260px;
	margin: 4px 0 2px;
}

.category-block .highchart-graph-container .highcharts-container { width: 100% !important; }

.category-block .csl-card--chart > table { padding-left: 10px; padding-right: 10px; }

.category-block .highcharts-axis-labels text,
.category-block .highcharts-legend-item text {
	font-family: 'robotoregular', Arial, sans-serif !important;
	fill: #6d838f !important;
}

.category-block .highcharts-data-label text,
.category-block .highcharts-data-labels text {
	font-family: 'robotomedium', Arial, sans-serif !important;
}

.category-block .highcharts-grid-line { stroke: #edf2f6; }


/* -----------------------------------------------------------------------------
   11. Tableaux de données internes (.table)
   -------------------------------------------------------------------------- */
.category-block .icons-detail-div table.table {
	margin: 0;
	border: 0;
	table-layout: auto;
	font-family: 'robotoregular';
	font-size: 13.5px;
}

.category-block .icons-detail-div table.table > tbody > tr > td,
.category-block .icons-detail-div table.table > tr > td {
	padding: 10px 10px !important;
	border: 0;
	border-bottom: 1px solid var(--csl-line-soft);
	vertical-align: middle;
	text-align: left;
	color: var(--csl-ink-soft);
	background: transparent;
}

.category-block .icons-detail-div table.table > tbody > tr:last-child > td,
.category-block .icons-detail-div table.table > tr:last-child > td { border-bottom: 0; }

.category-block .icons-detail-div table.table > tbody > tr > td b { font-family: 'robotomedium'; color: var(--csl-ink); }

.category-block .icons-detail-div table.table > tbody > tr > td.success,
.category-block .icons-detail-div table.table > tbody > tr > td.warning,
.category-block .icons-detail-div table.table > tbody > tr > td.danger,
.category-block .icons-detail-div table.table > tr > td.success,
.category-block .icons-detail-div table.table > tr > td.warning,
.category-block .icons-detail-div table.table > tr > td.danger {
	background-color: transparent;
	font-family: 'robotomedium';
}

.category-block .icons-detail-div table.table > tbody > tr > td.success { color: var(--csl-green); }
.category-block .icons-detail-div table.table > tbody > tr > td.warning { color: var(--csl-amber); }
.category-block .icons-detail-div table.table > tbody > tr > td.danger  { color: var(--csl-red); }

.category-block .icons-detail-div table.table > tbody > tr > td.success b,
.category-block .icons-detail-div table.table > tbody > tr > td.warning b,
.category-block .icons-detail-div table.table > tbody > tr > td.danger b {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--csl-radius-pill);
	font-family: 'robotomedium';
	font-size: 12.5px;
	color: inherit;
}
.category-block .icons-detail-div table.table > tbody > tr > td.success b { background: rgba(18, 168, 120, .12); }
.category-block .icons-detail-div table.table > tbody > tr > td.warning b { background: rgba(226, 149, 27, .14); }
.category-block .icons-detail-div table.table > tbody > tr > td.danger  b { background: rgba(239, 75, 87, .12); }

/* Listes courtes (équipements, sports, drapeaux d'insécurité…) : puces modernes */
.category-block .category-icons-detail.entertainment table td,
.category-block .category-icons-detail.safety .csl-taglist td {
	font-size: 13px;
}

.category-block .csl-taglist td {
	padding: 5px 6px !important;
}

.category-block .csl-taglist td:not(:empty) > span.csl-tag,
.category-block .csl-tag {
	display: inline-block;
	width: 100%;
	padding: 7px 10px;
	border-radius: 10px;
	background: var(--csl-surface-alt);
	border: 1px solid #e9eff4;
	color: var(--csl-ink-soft);
	font-family: 'robotoregular';
	font-size: 12.5px;
	line-height: 1.35;
}


/* -----------------------------------------------------------------------------
   12. Profil des acquéreurs / locataires + barres "skills"
   -------------------------------------------------------------------------- */
.category-block .profile-potential-inhabitants {
	padding: 16px 16px 14px;
	border-radius: var(--csl-radius-lg);
	box-shadow: none;
	border: 1px solid var(--csl-line);
	background: var(--csl-surface);
	height: 100%;
}

.category-block .profile-potential-inhabitants-property {
	background: linear-gradient(150deg, #24333a 0%, #16242b 100%);
	border-color: transparent;
}

.category-block .profile-potential-inhabitants-proximity { margin-top: 16px; }

.category-block .profile-potential-inhabitants-title {
	padding-bottom: 10px;
	margin: 0;
	border-bottom: 1px solid var(--csl-line);
	font-family: 'robotomedium';
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--csl-muted);
	text-align: left;
}

.category-block .profile-potential-inhabitants-property .profile-potential-inhabitants-title {
	border-bottom-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .68);
}

.category-block .profile-potential-inhabitants-content {
	padding-top: 12px;
	font-family: 'robotoregular';
	font-size: 14px;
	line-height: 1.55;
	color: var(--csl-ink);
	text-align: left;
}

.category-block .profile-potential-inhabitants-property .profile-potential-inhabitants-content { color: #fff; }

.category-block .skills-title {
	padding: 0 0 4px;
	font-family: 'robotoregular';
	font-size: 12.5px;
	color: var(--csl-ink-soft);
	text-align: left;
}

.category-block .skills-container {
	height: 10px;
	margin-bottom: 12px;
	border-radius: var(--csl-radius-pill);
	background-color: #eaf0f5;
	overflow: hidden;
}

.category-block .skills {
	height: 10px;
	min-width: 34px;
	padding-right: 8px;
	border-radius: var(--csl-radius-pill);
	font-family: 'robotomedium';
	font-size: 9px;
	line-height: 10px;
	color: #fff;
	text-align: right;
}

.category-block .skills-green { background: linear-gradient(90deg, #21d9c4 0%, #12a878 100%); }
.category-block .skills-blue  { background: linear-gradient(90deg, #4bb8f0 0%, #1d7fde 100%); }


/* -----------------------------------------------------------------------------
   13. Grande ville à proximité
   -------------------------------------------------------------------------- */
.category-block .nearest-big-city { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.category-block .nearest-big-city > div[class*="col-"] { padding: 0 5px; }

/* display:block (et non flex) pour conserver l'ellipse sur les noms longs */
.category-block .nearest-big-city .raw_value {
	display: block;
	padding: 11px 12px;
	font-size: 15px;
	line-height: 32px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.category-block .nearest-big-city .raw_value img {
	width: 18px !important;
	height: 18px !important;
	margin: 0 9px 0 0 !important;
	vertical-align: middle;
	opacity: .65;
}

@media (max-width: 1200px) { .category-block .nearest-big-city .raw_value { font-size: 12.5px; } }

.category-block .nearest-big-city-itinerary img {
	width: 100% !important;
	height: auto !important;
	margin-top: 16px;
	border-radius: var(--csl-radius-md);
}


/* -----------------------------------------------------------------------------
   14. Encadré d'avertissement sur les projections
   -------------------------------------------------------------------------- */
.category-block .icons-detail-div .alert-warning {
	margin: 4px 0 0;
	padding: 12px 14px;
	border: 1px solid rgba(226, 149, 27, .28);
	border-radius: var(--csl-radius-md);
	background: rgba(226, 149, 27, .07);
	color: #8a6114;
	font-family: 'robotoregular';
	font-size: 11.5px;
	line-height: 1.55;
	text-align: left;
}

.category-block .icons-detail-div .alert-warning u {
	font-family: 'robotomedium';
	text-decoration: none;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-size: 10.5px;
}


/* -----------------------------------------------------------------------------
   15. Encarts publicitaires présents dans le bloc
   -------------------------------------------------------------------------- */
.category-block .ads-container {
	margin: 0 0 32px;
	border-radius: var(--csl-radius-lg);
	overflow: hidden;
}


/* -----------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.category-block { --csl-gutter: 16px; }
}

@media (max-width: 767px) {
	.category-block { --csl-gutter: 0px; }

	.category-block .csl-grid-sizer { width: 100%; }
	.category-block .csl-gutter-sizer { width: 0; }

	.category-block #inline-category-details .icons-detail-div,
	.category-block #inline-category-details .icons-detail-div.csl-card--full {
		width: 100%;
		margin-bottom: 14px;
	}

	.category-block .csl-grid--fallback { gap: 14px; }
	.category-block .csl-grid--fallback .icons-detail-div { margin-bottom: 0; }

	.category-block .row-category-se-renseigner { margin: 36px 0 16px; }
	.category-block .label-text-category-se-renseigner { font-size: 18px; }
	.category-block .circle-category-se-renseigner { width: 38px; height: 38px; border-radius: 12px; }
	.category-block .circle-category-se-renseigner img { width: 20px; height: 20px; }
	.category-block .note-category-se-renseigner { font-size: 12px; padding: 5px 11px; }

	.category-block .main-sticky-header h2 { font-size: 19px; }
	.category-block .highchart-graph-container { min-height: 230px; }
}

@media (max-width: 600px) {
	.category-block .main-sticky-header h2 { font-size: 17px !important; }
}

@media (max-width: 500px) {
	.category-block .menu-scroll-container { padding: 4px !important; }
	.category-block .category-link { padding: 6px 12px !important; font-size: 12px !important; }
}

@media (max-width: 420px) {
	.category-block .label-text-category-se-renseigner { font-family: 'robotomedium'; font-size: 16px; }
	.category-block .circle-category-se-renseigner { width: 34px; height: 34px; margin-right: 0; }
	.category-block .note-category-se-renseigner { font-family: 'robotomedium'; font-size: 11px; padding: 4px 9px; }
	.category-block .csl-td-hero label { font-size: 25px; }
	.category-block .category-container .icons-detail-div > table { padding: 14px 14px 8px; }
	.category-block .category-icons-detail h2 { padding: 15px 16px 12px; font-size: 14.5px; }
	.category-block .csl-card-foot { padding: 10px 16px 12px; }
	.category-block .csl-premium-tag { left: 16px; }
}