/* ============================================================
 * SC Core — Design tokens + composants communs (thème SOMBRE)
 * Source de vérité unique pour la charte de l'écosystème SC.
 * Chaque plugin importe ce fichier (dépendance 'sc-core-css')
 * puis ne surcharge que son spécifique.
 *
 * Convention : tokens exposés sur :root ET sur .sc-scope pour
 * permettre aux plugins de scoper si besoin. Les composants
 * communs sont préfixés .sc- (sc-evo, sc-tag, sc-tab, etc.).
 * ============================================================ */

:root {
	--sc-bg: #0e1525;
	--sc-bg-2: #0f1729;
	--sc-card: #161f33;
	--sc-card-2: #1a2438;
	--sc-line: #243049;
	--sc-line-2: #2c3a57;

	--sc-ink: #e8edf7;
	--sc-ink-2: #c4cfe4;
	--sc-muted: #8b97b0;

	--sc-accent: #7c8df0;
	--sc-accent-2: #9b8cf0;
	--sc-accent-bg: rgba(124,141,240,0.14);

	--sc-immo: #7fb2e5;
	--sc-enr: #5fd9a0;
	--sc-autre: #f08fa8;

	--sc-pos: #5fd9a0;   /* évolution favorable */
	--sc-neg: #f0809a;   /* évolution défavorable */

	--sc-radius: 16px;
	--sc-radius-sm: 12px;
	--sc-radius-pill: 999px;

	--sc-font-head: 'Orbitron', sans-serif;
	--sc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Évolutions (badges %) ---------- */
.sc-evo { font-family: var(--sc-font-body); font-weight: 700; font-size: 13px; white-space: nowrap; }
.sc-evo-up   { color: var(--sc-pos); }
.sc-evo-down { color: var(--sc-neg); }
.sc-evo-flat { color: var(--sc-muted); }
.sc-evo-na   { color: var(--sc-muted); }

/* ---------- Tags catégories ---------- */
.sc-tag {
	display: inline-block; font-family: var(--sc-font-body);
	font-size: 11.5px; font-weight: 600;
	padding: 3px 11px; border-radius: var(--sc-radius-pill); white-space: nowrap;
}
.sc-tag-immobilier { background: rgba(127,178,229,0.15); color: var(--sc-immo); }
.sc-tag-enr        { background: rgba(95,217,160,0.15); color: var(--sc-enr); }
.sc-tag-autre      { background: rgba(240,143,168,0.15); color: var(--sc-autre); }

/* ---------- Statuts ---------- */
.sc-statut { font-family: var(--sc-font-body); font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: var(--sc-radius-pill); }
.sc-statut-actif   { background: rgba(95,217,160,0.15); color: var(--sc-enr); }
.sc-statut-termine { background: rgba(139,151,176,0.15); color: var(--sc-muted); }

/* ---------- Onglets pill (commun) ---------- */
.sc-tabs { display: flex; gap: 8px; margin: 22px 0 16px; flex-wrap: wrap; }
.sc-tab {
	font-family: var(--sc-font-body); font-size: 13.5px; font-weight: 600;
	color: var(--sc-muted); background: var(--sc-card);
	border: 1px solid var(--sc-line); border-radius: var(--sc-radius-pill);
	padding: 9px 18px; cursor: pointer; transition: all .15s ease;
}
.sc-tab:hover { color: var(--sc-ink); border-color: var(--sc-line-2); }
.sc-tab.is-active {
	color: #0e1525;
	background: linear-gradient(100deg, var(--sc-accent), var(--sc-accent-2));
	border-color: transparent;
}
.sc-pane { display: none; }
.sc-pane.is-active { display: block; animation: sc-fade .25s ease; }
@keyframes sc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* mini-onglets internes */
.sc-minitabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sc-minitab {
	font-family: var(--sc-font-body); font-size: 12.5px; font-weight: 600; color: var(--sc-muted);
	background: var(--sc-card-2); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-pill); padding: 6px 14px; cursor: pointer; transition: all .15s ease;
}
.sc-minitab:hover { color: var(--sc-ink); }
.sc-minitab.is-active { color: var(--sc-ink); border-color: var(--sc-accent); background: var(--sc-accent-bg); }

/* ---------- Cartes ---------- */
.sc-card {
	background: var(--sc-card); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius); padding: 22px; margin-bottom: 18px;
}

/* ---------- Graphiques ---------- */
.sc-chart-box {
	position: relative; height: 360px;
	background: var(--sc-bg-2); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm); padding: 14px;
}

/* ---------- Tableaux communs ---------- */
.sc-table-scroll { overflow-x: auto; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-line); }
.sc-table { width: 100%; border-collapse: collapse; font-family: var(--sc-font-body); font-size: 14px; background: var(--sc-card); min-width: 720px; }
.sc-table thead th {
	background: var(--sc-card-2); color: var(--sc-muted);
	font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
	text-align: right; padding: 12px 14px; border-bottom: 1px solid var(--sc-line); white-space: nowrap;
}
.sc-table thead th.sc-left, .sc-table thead th.sc-rank { text-align: left; }
.sc-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--sc-line); text-align: right; vertical-align: middle; color: var(--sc-ink-2); }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody tr:hover { background: var(--sc-card-2); }
.sc-left, td.sc-left { text-align: left !important; }
.sc-rank, td.sc-rank { text-align: left !important; font-family: var(--sc-font-head); font-weight: 600; color: var(--sc-muted); width: 44px; }
.sc-num { font-family: var(--sc-font-head); font-weight: 500; white-space: nowrap; color: var(--sc-ink); }

/* ---------- Logos plateformes ---------- */
.sc-plat { display: flex; align-items: center; gap: 10px; }
.sc-logo { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; background: #fff; border: 1px solid var(--sc-line-2); flex-shrink: 0; }
.sc-logo-fallback { display: flex; align-items: center; justify-content: center; font-family: var(--sc-font-head); font-weight: 700; color: var(--sc-accent); background: var(--sc-accent-bg); }

/* ---------- CTA ---------- */
.sc-btn {
	display: inline-block; font-family: var(--sc-font-body); font-size: 12.5px; font-weight: 600;
	color: #0e1525; background: linear-gradient(100deg, #f3b6c6, #f0809a);
	border-radius: var(--sc-radius-pill); padding: 6px 15px; text-decoration: none; transition: filter .15s ease;
}
.sc-btn:hover { filter: brightness(1.08); }

/* ---------- Bouton "premium" mutualisé (liens utiles / CTA) ----------
 * Référence visuelle commune de l'écosystème (initialement SC Avis).
 * À privilégier pour les liens externes _blank et les appels à l'action. */
.sc-btn-premium {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 38px; padding: 9px 18px; border-radius: var(--sc-radius-pill);
	border: 1px solid rgba(251,200,154,.42);
	background:
		linear-gradient(135deg, rgba(251,200,154,.13), rgba(147,197,253,.07)),
		rgba(14,21,37,.42);
	color: #f8dfc4 !important; text-decoration: none !important;
	font-family: var(--sc-font-body); font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1.15;
	box-shadow: 0 12px 30px -20px rgba(251,200,154,.75); cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.sc-btn-premium:hover {
	transform: translateY(-1px); border-color: rgba(251,200,154,.68); color: #f8dfc4 !important;
	background:
		linear-gradient(135deg, rgba(251,200,154,.19), rgba(147,197,253,.10)),
		rgba(14,21,37,.56);
	box-shadow: 0 16px 34px -20px rgba(251,200,154,.92);
}
.sc-btn-premium-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; border-radius: 999px;
	background: rgba(255,255,255,.08); color: #fff; font-size: 12px; line-height: 1; flex: 0 0 20px;
}

/* ---------- Fil d'Ariane mutualisé (à placer dans le cadre de contenu) ---------- */
.sc-breadcrumb {
	font-family: var(--sc-font-body); font-size: 13px; line-height: 1.4;
	color: var(--sc-muted); margin: 0 0 16px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.sc-breadcrumb a { color: var(--sc-ink-2); text-decoration: none; }
.sc-breadcrumb a:hover { color: var(--sc-accent); text-decoration: underline; }
.sc-breadcrumb .sc-breadcrumb-sep { color: var(--sc-muted); }
.sc-breadcrumb span[aria-current] { color: var(--sc-ink); font-weight: 600; }

/* ---------- Divers ---------- */
.sc-empty { text-align: center; color: var(--sc-muted); padding: 28px 12px; font-style: italic; font-family: var(--sc-font-body); }
.sc-prudence {
	font-family: var(--sc-font-body); font-weight: 600; font-size: 10px;
	text-transform: uppercase; letter-spacing: .03em; color: var(--sc-autre);
	background: rgba(240,143,168,0.12); border-radius: 6px; padding: 1px 6px; margin-left: 4px; cursor: help;
}

/* ============================================================
 * SC_Page — gabarit mutualisé des pages auto-générées.
 * Deux modèles : 'full' (pleine largeur centrée, sans colonne) et
 * 'sidebar' (conteneur centré + contenu + colonne de droite widgets).
 * La colonne de droite n'apparaît que si une zone de widgets est active.
 * Aligné sur le gabarit des fiches plateforme pour une présentation uniforme.
 * ============================================================ */
.sc-page { width: 100%; }

/* Modèle 'full' : le contenu (qui porte son propre conteneur centré, ex.
 * .sc-home-wrap / .sc-guide-wrap) occupe toute la largeur disponible. */
.sc-page-layout-full .sc-page-main { width: 100%; }

/* Modèle 'sidebar' : un conteneur centré (max-width) contient une grille
 * « contenu + colonne de droite » côte à côte, comme les fiches plateforme. */
.sc-page--with-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 30px;
	max-width: 1320px;
	margin: 30px auto;
	padding: 0 18px;
	align-items: start;
}
.sc-page--with-aside .sc-page-main { min-width: 0; }
/* Le contenu (wrap du shortcode) remplit la colonne : on neutralise son propre
 * max-width / centrage qui désaligneraient sinon la colonne de droite. */
.sc-page--with-aside .sc-page-main > * { max-width: none; margin-left: 0; margin-right: 0; }
.sc-page-aside { position: sticky; top: 20px; }
.sc-page-comments { max-width: 1180px; margin: 36px auto 0; }

@media (max-width: 880px) {
	.sc-page--with-aside { grid-template-columns: 1fr; }
	.sc-page-aside { position: static; }
}