/**
 * Habillage des articles Aggro.
 *
 * Les gabarits produisent des blocs Gutenberg natifs qui ne portent que leur
 * structure : bordures, rayons, marges. Tout le reste — typographie, couleurs,
 * fonds teintés des encadrés — vit ici, pour deux raisons.
 *
 * D'abord parce qu'un style en ligne dans chaque bloc serait ingérable : la
 * moindre retouche de charte imposerait de republier tous les articles. Ensuite
 * parce que les blocs doivent rester modifiables dans Gutenberg, ce qu'un
 * empilement de styles en dur décourage.
 *
 * Les encadrés sont reconnus à la couleur de leur bordure, celle que le gabarit
 * a posée. C'est ce qui permet de les teinter sans leur ajouter de classe, donc
 * sans que le rédacteur ait quoi que ce soit à faire.
 */

.aggro-article {
	--ag-gold: #f0c674;
	--ag-gold-soft: #c9a24b;
	--ag-text: #e7e3ea;
	--ag-read: #d8d3dd;
	--ag-muted: #a49fb0;
	--ag-border: #2c2838;
	--ag-panel: #17151d;
	--ag-green: #57c785;
	--ag-orange: #ffb15a;
	--ag-season: #a97bff;

	--ag-display: 'Cinzel', Georgia, serif;
	--ag-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ag-read-font: 'Lora', Georgia, serif;

	/*
	 * La colonne de lecture est plafonnée ICI, sur le bloc, et centrée.
	 *
	 * Le plafond était posé sur chaque paragraphe : le texte devenait court
	 * mais restait collé à gauche d'un conteneur large, donc décentré. En le
	 * portant sur le conteneur, tout s'aligne — titres, encadrés, tableaux —
	 * et l'ensemble reste au milieu.
	 */
	max-width: 74ch;
	margin-inline: auto;
}

/* ── Corps de texte ─────────────────────────────────────────────────────── */

/*
 * Lisibilité : trois leviers, dans l'ordre de leur importance réelle.
 *
 * 1. La LONGUEUR DE LIGNE, plafonnée à 72 caractères. C'est le facteur qui
 *    compte le plus, avant la police et avant les couleurs : au-delà, l'œil
 *    perd le début de la ligne suivante et la lecture fatigue sans qu'on sache
 *    pourquoi.
 * 2. L'ESPACE ENTRE LES SECTIONS, franc, pour qu'on voie la structure en
 *    diagonale sans avoir à lire.
 * 3. L'INTERLIGNE, généreux sur des textes qu'on parcourt souvent en jouant.
 *
 * Ces règles valent pour TOUS les articles, pas seulement les guides de spé —
 * c'est l'erreur que corrige ce commentaire.
 */
.aggro-article p,
.aggro-article li {
	font-family: var(--ag-read-font);
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--ag-read);
}
.aggro-article li { margin: .35rem 0; }

/* Une section se détache par le blanc, pas par un trait de plus. */
.aggro-article > h2 + *,
.aggro-article h2 { margin-top: 2.6rem; }
.aggro-article h2:first-child { margin-top: 0; }

/* Un tableau plus large que la colonne défile dans son propre cadre, sans
   pousser la page entière de côté. */
.aggro-article .wp-block-table { overflow-x: auto; }

.aggro-article a {
	color: var(--ag-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(201, 162, 75, .45);
}
.aggro-article a:hover {
	color: #fff;
	border-bottom-color: var(--ag-gold);
}

.aggro-article strong { color: var(--ag-text); font-weight: 700; }
.aggro-article em     { color: var(--ag-read); }

/* Les valeurs remplacées d'un patch. Le <mark> porte déjà sa couleur en ligne :
   on neutralise seulement le fond jaune que les navigateurs appliquent. */
.aggro-article mark {
	background: transparent;
	padding: 0;
}
.aggro-article s {
	opacity: .75;
	text-decoration-thickness: 1px;
}

/* ── Titres ─────────────────────────────────────────────────────────────── */

.aggro-article h2 {
	font-family: var(--ag-display);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--ag-gold);
	margin: 2.2rem 0 .4rem;
	line-height: 1.25;
	/* Une ancre visée depuis le sommaire ne doit pas se coller au bord haut. */
	scroll-margin-top: 90px;
}

.aggro-article h3 {
	font-family: var(--ag-ui);
	font-weight: 800;
	font-size: 1.12rem;
	color: var(--ag-text);
	margin: 1.5rem 0 .3rem;
	scroll-margin-top: 90px;
}

/* Dans un encadré, le titre reprend la main sur les marges du flux. */
.aggro-article .wp-block-group h2:first-child,
.aggro-article .wp-block-group h3:first-child {
	margin-top: 0;
}

/* ── Listes ─────────────────────────────────────────────────────────────── */

.aggro-article ul.wp-block-list,
.aggro-article ol.wp-block-list {
	padding-left: 1.35rem;
	margin: .8rem 0;
}
.aggro-article ul.wp-block-list li,
.aggro-article ol.wp-block-list li {
	margin: .4rem 0;
}
.aggro-article ul.wp-block-list li::marker { color: var(--ag-gold-soft); }
.aggro-article ol.wp-block-list li::marker { color: var(--ag-gold-soft); font-weight: 700; }

/* ── Encadrés ───────────────────────────────────────────────────────────────
 *
 * Reconnus à la couleur de bordure posée par le gabarit. Le sélecteur vise
 * l'attribut style parce que c'est là que Gutenberg écrit la couleur : aucune
 * classe ne distingue une astuce d'un avertissement.
 */

.aggro-article .wp-block-group {
	margin: 1.6rem 0;
}

/* Carte neutre : « Notre avis », « À retenir », « En bref », fiche d'identité */
.aggro-article .wp-block-group[style*="border-color:#2c2838"] {
	background: var(--ag-panel);
}

/* Astuce (vert) */
.aggro-article .wp-block-group[style*="border-left-color:#57c785"] {
	background: rgba(87, 199, 133, .07);
	border-radius: 0 12px 12px 0;
}

/* Attention (orange) */
.aggro-article .wp-block-group[style*="border-left-color:#ffb15a"] {
	background: rgba(255, 177, 90, .07);
	border-radius: 0 12px 12px 0;
}

/* Légende, sommaire, chapô encadré (or) */
.aggro-article .wp-block-group[style*="border-left-color:#f0c674"] {
	background: rgba(240, 198, 116, .05);
	border-radius: 0 12px 12px 0;
}

/* L'essentiel d'une actu (accent de saison) */
.aggro-article .wp-block-group[style*="border-left-color:#a97bff"] {
	background: rgba(169, 123, 255, .07);
	border-radius: 0 12px 12px 0;
}

/* Le titre d'un encadré teinté prend la couleur de sa bordure. */
.aggro-article .wp-block-group[style*="border-left-color:#57c785"] h3 { color: var(--ag-green); }
.aggro-article .wp-block-group[style*="border-left-color:#ffb15a"] h3 { color: var(--ag-orange); }
.aggro-article .wp-block-group[style*="border-left-color:#a97bff"] h3 { color: var(--ag-season); }
.aggro-article .wp-block-group[style*="border-left-color:#f0c674"] h2,
.aggro-article .wp-block-group[style*="border-left-color:#f0c674"] h3 { color: var(--ag-gold); }

/* Le sommaire : plus compact que le corps, c'est une table des matières. */
.aggro-article .wp-block-group[style*="border-left-color:#f0c674"] ol.wp-block-list li,
.aggro-article .wp-block-group[style*="border-left-color:#f0c674"] ul.wp-block-list li {
	margin: .25rem 0;
	font-size: 1rem;
	line-height: 1.5;
}
.aggro-article .wp-block-group[style*="border-left-color:#f0c674"] a {
	color: var(--ag-text);
	border-bottom: 1px dotted var(--ag-gold-soft);
}
.aggro-article .wp-block-group[style*="border-left-color:#f0c674"] a:hover {
	color: var(--ag-gold);
}

/* ── Tableau ────────────────────────────────────────────────────────────── */

.aggro-article .wp-block-table { margin: 1.6rem 0; }
.aggro-article .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ag-ui);
	font-size: .94rem;
}
.aggro-article .wp-block-table th,
.aggro-article .wp-block-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ag-border);
	vertical-align: top;
	color: var(--ag-read);
}
.aggro-article .wp-block-table th {
	color: var(--ag-gold);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 800;
}
/* Une ligne sur deux teintée : un tableau se lit en balayage horizontal, et
   sans repère l'œil saute de ligne au milieu. */
.aggro-article .wp-block-table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, .02);
}

/* ── Citation ───────────────────────────────────────────────────────────── */

.aggro-article .wp-block-quote {
	border-left: 3px solid var(--ag-gold-soft);
	background: rgba(240, 198, 116, .05);
	border-radius: 0 12px 12px 0;
	padding: 14px 20px;
	margin: 1.6rem 0;
}
.aggro-article .wp-block-quote p {
	font-style: italic;
	color: var(--ag-text);
	margin: 0;
}
.aggro-article .wp-block-quote cite {
	display: block;
	margin-top: .6rem;
	font-family: var(--ag-ui);
	font-style: normal;
	font-size: .82rem;
	color: var(--ag-muted);
}

/* ── Images ─────────────────────────────────────────────────────────────── */

.aggro-article .wp-block-image { margin: 1.6rem 0; }
.aggro-article .wp-block-image img {
	border-radius: 12px;
	max-width: 100%;
	height: auto;
	display: block;
}
.aggro-article .wp-block-image figcaption {
	font-family: var(--ag-ui);
	font-size: .82rem;
	color: var(--ag-muted);
	text-align: center;
	margin-top: .6rem;
}

/* Un bloc image sans source : le gabarit attend que le rédacteur la pose.
   Sans ce repère, l'emplacement est invisible et se publie vide. */
.aggro-article .wp-block-image img:not([src]),
.aggro-article .wp-block-image img[src=""] {
	min-height: 140px;
	width: 100%;
	background: linear-gradient(135deg, #241d38, #12111a);
	border: 1px dashed var(--ag-border);
}

/* ── Vidéo intégrée ─────────────────────────────────────────────────────── */

.aggro-article .wp-block-embed { margin: 1.6rem 0; }
.aggro-article .wp-block-embed__wrapper { position: relative; }
.aggro-article .wp-block-embed iframe {
	border-radius: 12px;
	max-width: 100%;
	display: block;
}
/* Gutenberg pose l'aspect 16/9 par une classe : on le respecte sans imposer
   de hauteur fixe, qui casserait sur mobile. */
.aggro-article .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}
.aggro-article .wp-block-embed.wp-embed-aspect-16-9 iframe {
	width: 100%;
	height: 100%;
}
.aggro-article .wp-block-embed figcaption {
	font-family: var(--ag-ui);
	font-size: .82rem;
	color: var(--ag-muted);
	text-align: center;
	margin-top: .6rem;
}

/* ── Colonnes ───────────────────────────────────────────────────────────── */

.aggro-article .wp-block-columns { gap: 1.4rem; margin: 1.6rem 0; }

@media (max-width: 640px) {
	.aggro-article h2 { font-size: 1.3rem; }
	.aggro-article p,
	.aggro-article li { font-size: 1rem; }
}

/* ── La fiche : image à gauche, caractéristiques à droite ───────────────────
 *
 * Les gabarits Collection et Lore ouvrent tous deux sur deux colonnes — un
 * visuel, puis un encadré « Fiche d'obtention » ou « Fiche d'identité » dont
 * chaque ligne est un « <strong>Clé :</strong> valeur ».
 *
 * La maquette en fait un tableau à deux colonnes : intitulé discret à gauche,
 * valeur affirmée à droite, séparateurs pointillés. On l'obtient sans
 * demander au rédacteur la moindre classe supplémentaire, en s'appuyant sur
 * cette grammaire — un encadré neutre à l'intérieur d'une colonne.
 */

.aggro-article .wp-block-column .wp-block-group[style*="border-color:#2c2838"] h3 {
	font-family: var(--ag-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ag-gold);
}

.aggro-article .wp-block-column .wp-block-group[style*="border-color:#2c2838"] ul.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.aggro-article .wp-block-column .wp-block-group[style*="border-color:#2c2838"] ul.wp-block-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 7px 0;
	margin: 0;
	border-bottom: 1px dashed var(--ag-border);
	font-family: var(--ag-ui);
	font-size: .92rem;
	font-weight: 700;
	color: var(--ag-text);
	text-align: right;
}

.aggro-article .wp-block-column .wp-block-group[style*="border-color:#2c2838"] ul.wp-block-list li:last-child {
	border-bottom: none;
}

/* L'intitulé s'efface : c'est la valeur qu'on vient lire. */
.aggro-article .wp-block-column .wp-block-group[style*="border-color:#2c2838"] ul.wp-block-list li strong {
	flex: 0 0 auto;
	color: var(--ag-muted);
	font-weight: 400;
	text-align: left;
}

/* ── Articles de collection ─────────────────────────────────────────────────
 *
 * La classe est posée par le plugin d'après les catégories de l'article, et
 * non par post_class() du thème : l'habillage doit survivre à une mise à jour
 * de Blocksy.
 */

/* Les étapes d'obtention : des pastilles dorées numérotées, comme la maquette.
   Le gabarit émet une simple liste ordonnée — c'est le CSS qui la met en scène,
   pour que le rédacteur puisse ajouter ou retirer une étape sans rien casser. */
.aggro-gabarit-collections ol.wp-block-list {
	counter-reset: aggro-etape;
	list-style: none;
	padding-left: 0;
	margin: 1rem 0;
}

.aggro-gabarit-collections ol.wp-block-list > li {
	position: relative;
	padding: 10px 0 10px 44px;
	margin: 0;
	border-bottom: 1px solid var(--ag-border);
}

.aggro-gabarit-collections ol.wp-block-list > li:last-child {
	border-bottom: none;
}

.aggro-gabarit-collections ol.wp-block-list > li::before {
	counter-increment: aggro-etape;
	content: counter(aggro-etape);
	position: absolute;
	left: 0;
	top: 10px;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	font-family: var(--ag-ui);
	font-weight: 800;
	font-size: .9rem;
	color: #0e0d12;
	background: linear-gradient(160deg, #f0c674, #c9a24b);
}

/* Une liste imbriquée dans une étape reste une liste ordinaire. */
.aggro-gabarit-collections ol.wp-block-list ol.wp-block-list,
.aggro-gabarit-collections ol.wp-block-list ul.wp-block-list {
	counter-reset: none;
	list-style: revert;
	padding-left: 1.35rem;
	margin: .4rem 0;
}
.aggro-gabarit-collections ol.wp-block-list ol.wp-block-list > li,
.aggro-gabarit-collections ol.wp-block-list ul.wp-block-list > li {
	padding: .2rem 0;
	border-bottom: none;
}
.aggro-gabarit-collections ol.wp-block-list ol.wp-block-list > li::before,
.aggro-gabarit-collections ol.wp-block-list ul.wp-block-list > li::before {
	content: none;
}

@media (max-width: 640px) {
	.aggro-article .wp-block-column .wp-block-group[style*="border-color:#2c2838"] ul.wp-block-list li {
		font-size: .88rem;
	}
}

/* ── Sommaire rattrapé à l'affichage ────────────────────────────────────────
 *
 * Les articles publiés avant que l'outil n'encadre son sommaire portent un
 * titre nu suivi d'une liste. Le plugin les enveloppe au rendu, sans toucher au
 * contenu enregistré — republier pour corriger la présentation ferait perdre
 * les retouches faites dans WordPress.
 *
 * Le rendu est identique à celui d'un sommaire encadré à la génération.
 */
.aggro-article .aggro-sommaire{
	border-left: 3px solid var(--ag-gold);
	background: rgba(240, 198, 116, .05);
	border-radius: 0 12px 12px 0;
	padding: 0.75rem 1rem;
	margin: 1.6rem 0;
}
.aggro-article .aggro-sommaire__t{
	font-family: var(--ag-display);
	font-weight: 700;
	font-size: 1.12rem;
	color: var(--ag-gold);
	margin: 0 0 .4rem;
}
.aggro-article .aggro-sommaire ol{
	padding-left: 1.35rem;
	margin: 0;
}
.aggro-article .aggro-sommaire li{
	margin: .25rem 0;
	font-size: 1rem;
	line-height: 1.5;
}
.aggro-article .aggro-sommaire a{
	color: var(--ag-text);
	border-bottom: 1px dotted var(--ag-gold-soft);
}
.aggro-article .aggro-sommaire a:hover{ color: var(--ag-gold); }

/* ── Carte interactive ──────────────────────────────────────────────────────
 *
 * Une image de zone, des repères posés dessus aux coordonnées du jeu. Le
 * gabarit n'écrit que la position en pourcentage : tout l'habillage vit ici,
 * comme pour les encadrés.
 *
 * Deux règles portent l'essentiel de l'accessibilité, et elles ne coûtent rien.
 * Les repères sont des <button>, donc atteignables au clavier — d'où le même
 * traitement sur :focus-visible que sur :hover. Et l'infobulle est en CSS pur :
 * la carte reste consultable si le JavaScript ne charge pas, ce qui est le cas
 * le plus fréquent sur un réseau mobile.
 */
.aggro-article .aggro-carte { margin: 1.8rem 0; }

.aggro-article .aggro-carte .ac-plan {
	position: relative;
	/*
	 * Le conteneur prend le format naturel de l'image, et c'est la condition
	 * pour que les repères tombent juste : les pourcentages se réfèrent à
	 * l'image entière. Un fond recadré — background-size:cover sur un ratio
	 * imposé — décalerait chaque point d'autant plus qu'il est loin du centre,
	 * et rien ne le signalerait.
	 */
	line-height: 0;
	background: var(--ag-panel);
	border: 1px solid var(--ag-border);
	border-radius: 12px;
	overflow: hidden;
}
.aggro-article .aggro-carte .ac-fond {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.aggro-article .aggro-carte .ac-pin {
	position: absolute;
	/* left/top portent le CENTRE du repère, pas son coin : sans cette
	   translation, chaque point serait décalé d'un demi-repère vers le bas et
	   la droite, soit plusieurs mètres dans le jeu. */
	transform: translate(-50%, -50%);
	width: 22px; height: 22px;
	padding: 0; margin: 0;
	border: 2px solid #12111a;
	border-radius: 50%;
	background: var(--ag-gold);
	box-shadow: 0 0 0 2px rgba(240, 198, 116, .35), 0 2px 6px rgba(0, 0, 0, .5);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.aggro-article .aggro-carte .ac-pin:hover,
.aggro-article .aggro-carte .ac-pin:focus-visible {
	transform: translate(-50%, -50%) scale(1.25);
	box-shadow: 0 0 0 4px rgba(240, 198, 116, .5), 0 2px 10px rgba(0, 0, 0, .6);
	outline: none;
	z-index: 3;
}

/* L'infobulle : cachée par défaut, révélée par le survol ou le clavier. */
.aggro-article .aggro-carte .ac-bulle {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: .15rem;
	width: max-content;
	max-width: 230px;
	padding: .5rem .7rem;
	background: #12111a;
	border: 1px solid var(--ag-gold-soft);
	border-radius: 8px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
	z-index: 4;
}
.aggro-article .aggro-carte .ac-pin:hover .ac-bulle,
.aggro-article .aggro-carte .ac-pin:focus-visible .ac-bulle {
	opacity: 1;
	visibility: visible;
}
.aggro-article .aggro-carte .ac-bulle__t {
	font-family: var(--ag-ui);
	font-weight: 700;
	font-size: .86rem;
	color: var(--ag-gold);
	line-height: 1.3;
}
.aggro-article .aggro-carte .ac-bulle__d {
	font-family: var(--ag-ui);
	font-size: .8rem;
	color: var(--ag-read);
	line-height: 1.4;
}
.aggro-article .aggro-carte .ac-bulle__w {
	font-family: ui-monospace, Menlo, monospace;
	font-size: .74rem;
	color: var(--ag-muted);
}

/*
 * Les coordonnées en clair sous la carte. Ce n'est pas une redondance : c'est
 * ce que le joueur copie dans sa fenêtre de discussion, et ce qui reste si
 * l'image ne charge pas.
 */
.aggro-article .aggro-carte .ac-ways {
	margin-top: .9rem;
	font-family: var(--ag-ui);
	font-size: .88rem;
	color: var(--ag-muted);
}
.aggro-article .aggro-carte .ac-ways p {
	margin: 0 0 .35rem;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ag-muted);
}
.aggro-article .aggro-carte .ac-ways ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
}
.aggro-article .aggro-carte .ac-ways li { color: var(--ag-read); }
.aggro-article .aggro-carte .ac-ways code {
	font-family: ui-monospace, Menlo, monospace;
	font-size: .84rem;
	color: var(--ag-gold);
	background: rgba(240, 198, 116, .08);
	border: 1px solid var(--ag-border);
	border-radius: 5px;
	padding: .05rem .35rem;
	user-select: all; /* un double-clic prend la ligne entière, prête à coller */
}

/* Sur petit écran, un repère au doigt demande plus de surface qu'à la souris. */
@media (max-width: 640px) {
	.aggro-article .aggro-carte .ac-pin { width: 26px; height: 26px; }
	.aggro-article .aggro-carte .ac-bulle { max-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
	.aggro-article .aggro-carte .ac-pin,
	.aggro-article .aggro-carte .ac-bulle { transition: none; }
}