/*
 * Styles de la carte/graphique de l'indice de volatilité SEO.
 * Convention de l'agence : vert #16a34a pour un score stable, rouge
 * #dc2626 pour un score volatil, jamais de bleu, jamais d'emoji, jamais
 * de bordure gauche décorative (fond teinté + bordure complète + radius
 * 6px à la place). La carte est structurée en trois blocs visuellement
 * distincts (score du jour, graphique, méthode) pour créer une
 * hiérarchie claire sans dégradés ni ombres exagérées.
 */

/*
 * Specificite : le theme injecte une regle inline plus specifique
 * (".entry-content > *, article > :not(.entry-content) { max-width:
 * 960px }", confirme le 2026-11-12 via l'inspection des regles CSS
 * appliquees) qui bat un simple ".rvs-card" en specificite (elle ajoute
 * le type "article"). On ne bat cette regle QUE sur notre page dediee
 * (".rvs-page-article .rvs-card"), jamais globalement : si le
 * shortcode est insere dans un article classique, la largeur de
 * lecture standard du site (960px) reste la bonne regle.
 */
.rvs-page-article .rvs-card,
.rvs-card {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12);
}

.rvs-title {
	margin: 0 0 12px;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
}

.rvs-intro {
	margin: 0 0 20px;
	color: #4b5563;
	font-size: 0.95em;
	line-height: 1.5;
}

/*
 * Colonne de gauche (score + methode, voir .rvs-top-grid-left) et
 * graphique : empiles par defaut (mobile/tablette etroite), cote a cote
 * a partir de 880px une fois la carte elargie a 1440px - voir
 * render_card(). La colonne de gauche n'est jamais vide (Methode y
 * figure toujours), la mise en page a 2 colonnes s'applique donc dans
 * tous les cas a partir de ce palier.
 */
.rvs-top-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 0 20px;
}

@media (min-width: 880px) {
	.rvs-top-grid {
		display: grid;
		grid-template-columns: minmax(260px, 340px) 1fr;
		/* stretch (pas start) : la colonne de gauche (.rvs-top-grid-left)
		   doit remplir la meme hauteur que le graphique a cote, sinon
		   l'une des deux colonnes s'arrete net avec un vide a cote -
		   constate par Antoine le 2026-11-12/13. Le graphique (flex:1 sur
		   .rvs-chart-wrap, voir plus bas) s'etire alors pour occuper tout
		   cet espace. */
		align-items: stretch;
		gap: 24px;
	}
}

/*
 * Colonne de gauche (score + methode) : empilee avec un ecart regulier,
 * stretch sur toute la hauteur de la ligne de grille (voir .rvs-top-grid
 * ci-dessus) pour matcher la hauteur du graphique a cote - demande
 * d'Antoine du 2026-11-13 de deplacer la Methode sous le score plutot
 * que de laisser un vide a cote d'un graphique trop court.
 */
.rvs-top-grid-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rvs-today {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border: 1px solid transparent;
	border-radius: 6px;
}

@media (min-width: 880px) {
	.rvs-top-grid .rvs-today {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.rvs-top-grid .rvs-today-score {
		font-size: 3.1em;
	}
}

.rvs-today-main {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rvs-today-eyebrow {
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.rvs-today-value {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.rvs-today-score {
	font-size: 2.6em;
	font-weight: 700;
	line-height: 1;
}

.rvs-today-scale {
	font-size: 1.1em;
	opacity: 0.75;
}

.rvs-today-tag {
	margin-left: 4px;
	padding: 2px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.65);
	font-size: 0.78em;
	font-weight: 600;
}

.rvs-today-date {
	flex-shrink: 0;
	color: #6b7280;
	font-size: 0.9em;
	white-space: nowrap;
}

/* Variation vs la mesure precedente : hausse = plus volatil = rouge
   (defavorable), baisse = plus stable = vert (favorable) - sens inverse
   d'un indicateur financier classique. */
.rvs-today-delta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	font-size: 0.82em;
	font-weight: 600;
}

.rvs-delta-icon {
	flex-shrink: 0;
}

.rvs-delta-hausse {
	color: #dc2626;
}

.rvs-delta-baisse {
	color: #16a34a;
}

.rvs-delta-neutre {
	color: #6b7280;
}

/* Seuils identiques à ceux du dashboard Laravel : score <= 3 vert,
   score >= 7 rouge, entre les deux neutre/gris. */
.rvs-score-vert {
	border-color: rgba(22, 163, 74, 0.18);
	background: rgba(22, 163, 74, 0.08);
	color: #16a34a;
}

.rvs-score-vert .rvs-today-score,
.rvs-score-vert .rvs-today-tag {
	color: #16a34a;
}

.rvs-score-rouge {
	border-color: rgba(220, 38, 38, 0.18);
	background: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

.rvs-score-rouge .rvs-today-score,
.rvs-score-rouge .rvs-today-tag {
	color: #dc2626;
}

.rvs-score-neutre {
	border-color: rgba(107, 114, 128, 0.18);
	background: rgba(107, 114, 128, 0.08);
	color: #4b5563;
}

.rvs-score-neutre .rvs-today-score,
.rvs-score-neutre .rvs-today-tag {
	color: #4b5563;
}

.rvs-chart-panel {
	display: flex;
	flex-direction: column;
	padding: 16px 16px 6px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #f9fafb;
}

.rvs-chart-panel-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.rvs-chart-caption {
	margin: 0;
	color: #374151;
	font-size: 0.85em;
	font-weight: 600;
}

/* Legende explicite des couleurs du graphique : un score/une couleur ne
   doit jamais se comprendre sans mot a cote (jamais la couleur seule). */
.rvs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rvs-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #6b7280;
	font-size: 0.78em;
}

.rvs-legend-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.rvs-legend-vert .rvs-legend-dot {
	background: #16a34a;
}

.rvs-legend-neutre .rvs-legend-dot {
	background: #4b5563;
}

.rvs-legend-rouge .rvs-legend-dot {
	background: #dc2626;
}

/*
 * Deuxième légende (sources externes de comparaison) : couleurs
 * catégorielles (identité d'une ligne, pas un statut), volontairement
 * choisies hors du vert/rouge déjà utilisés en statut ci-dessus et sans
 * jamais de bleu (charte de l'agence) - slots 2/3/4 de la palette
 * catégorielle documentée (orange/violet/jaune), jamais les slots 1
 * (bleu) ou 6 (vert, déjà pris par le statut "stable").
 */
.rvs-legend-external {
	margin-top: 8px;
}

.rvs-legend-external-algoroo .rvs-legend-dot {
	background: #eb6834;
}

.rvs-legend-external-awr .rvs-legend-dot {
	background: #6250d6;
}

.rvs-legend-external-aggregate .rvs-legend-dot {
	background: #eda100;
}

.rvs-external-note {
	margin: 6px 0 0;
	color: #9ca3af;
	font-size: 0.74em;
	line-height: 1.4;
}

.rvs-chart-wrap {
	position: relative;
	height: 260px;
	margin: 12px 0 6px;
}

@media (min-width: 880px) {
	/* flex:1 (pas une hauteur fixe) : .rvs-chart-panel est etire par
	   align-items:stretch de .rvs-top-grid pour matcher la hauteur de
	   .rvs-top-grid-left (score + methode empiles) - le graphique doit
	   alors remplir tout cet espace, pas rester bloque a une hauteur en
	   dur qui laisserait a nouveau un vide. min-height garde une courbe
	   lisible meme si la colonne de gauche est exceptionnellement courte. */
	.rvs-chart-wrap {
		flex: 1 1 auto;
		height: auto;
		min-height: 320px;
	}
}

.rvs-methode-panel {
	/* Plus de fond ni de bordure (retires le 2026-11-13, demande
	   d'Antoine) : la Methode est passee sous le score dans la colonne
	   de gauche, avec le meme traitement visuel qu'un panneau, elle
	   faisait autant de poids que le score lui-meme et lui volait le
	   regard. En texte nu, elle reste lisible mais secondaire - le
	   score (seul bloc encore encadre dans cette colonne) capte
	   naturellement l'oeil en premier. */
	padding: 0;
}

.rvs-methode-eyebrow {
	display: block;
	margin-bottom: 4px;
	color: #6b7280;
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rvs-methode {
	max-width: 820px;
	margin: 0;
	color: #4b5563;
	font-size: 0.9em;
	line-height: 1.5;
}

.rvs-indisponible {
	color: #6b7280;
	font-style: italic;
}

/*
 * Page dédiée (templates/single.php) : le header du thème "referenceur"
 * est en position:fixed (classe Tailwind "fixed top-0", confirmé par
 * inspection du HTML servi sur referenceur.be le 2026-11-12), il sort
 * donc du flux normal et flotte au-dessus du H1 au lieu de le repousser.
 * Les propres gabarits du thème compensent avec les classes Tailwind
 * "pt-36" (144px, sous 960px) et "lg:pt-52" (208px, à partir de 960px,
 * breakpoint "lg" du thème - vérifié sur la page d'accueil et /contact/,
 * pas le 1024px par défaut de Tailwind). On reproduit ces mêmes valeurs
 * ici en CSS simple plutôt que d'ajouter les classes Tailwind au
 * gabarit du plugin : le plugin n'est pas scanné par le processus de
 * build du thème, donc rien ne garantit que ces classes utilitaires
 * restent dans le bundle CSS purgé si le thème change un jour.
 */
/* Meme raison de specificite que .rvs-card ci-dessus : ".rvs-page-article
   .rvs-page-header" (2 classes) bat la regle inline du theme
   (1 classe + 1 type) sans toucher au shortcode insere ailleurs. */
.rvs-page-article .rvs-page-header,
.rvs-page-header {
	max-width: 1440px;
	margin: 0 auto 28px;
	padding: 144px 24px 0;
}

@media (min-width: 960px) {
	.rvs-page-header {
		padding-top: 208px;
	}
}

.rvs-page-header h1 {
	margin: 0 0 14px;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.25;
}

.rvs-page-positioning {
	margin: 0;
	color: #4b5563;
	font-size: 1.05em;
	line-height: 1.6;
}

.rvs-page-article {
	padding-bottom: 64px;
}

@media (max-width: 480px) {
	.rvs-card {
		padding: 18px;
	}

	.rvs-today {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.rvs-chart-wrap {
		height: 200px;
	}

	.rvs-chart-panel-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.rvs-legend {
		gap: 4px 10px;
	}

	.rvs-page-header h1 {
		font-size: 1.5em;
	}
}