/* ==========================================================================
   Aion 2 — guides et builds de classe (.a2c)
   Panneau de lecture clair du thème ; accent violet Aion 2.
   Chargé par aion2-guides.php sur les contenus qui utilisent class="a2c".
   ========================================================================== */
.a2c {
	--c: #6d4fe0;
	--c2: #22b8d6;
	--c-soft: #f3f0ff;
	--ink: #1b1a29;
	--mut: #686579;
	--line: #e4e1ee;
	--card: #fff;
	--ok: #1f8a4c;
	--warn: #b7791f;
	color: var(--ink);
	line-height: 1.65;
}
.a2c *, .a2c *::before, .a2c *::after { box-sizing: border-box; }
.a2c img { max-width: 100%; }

/* --- En-tête de classe -------------------------------------------------- */
.a2c-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px 24px;
	align-items: center;
	margin: 0 0 24px;
	padding: 26px 28px;
	border-radius: 18px;
	color: #fff;
	background: radial-gradient(90% 120% at 100% 0%, rgba(34, 184, 214, .28), transparent 60%), linear-gradient(135deg, #24194f 0%, #121a3a 100%);
	box-shadow: 0 18px 40px -22px rgba(36, 25, 79, .8);
}
.a2c-hero-eyebrow { margin: 0 0 6px !important; font-size: .74em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #b9a8ff !important; }
.a2c-hero-title { margin: 0 0 8px !important; font-size: clamp(1.6em, 3.2vw, 2.2em) !important; line-height: 1.1 !important; color: #fff !important; }
.a2c-hero-title::after { display: none !important; }
.a2c-hero p { margin: 0 0 12px; color: rgba(255, 255, 255, .88); }
.a2c-hero-icon { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }
.a2c-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.a2c-tags li { margin: 0; padding: 4px 12px; border-radius: 999px; font-size: .8em; font-weight: 700; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); }
.a2c-tags li::before { display: none !important; }
.a2c-rates { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
.a2c-rate { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.a2c-rate span { display: block; font-size: .74em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.a2c-rate b { display: block; margin-top: 4px; font-size: .95em; color: #fff; }
.a2c-bar { display: block; height: 5px; margin-top: 7px; border-radius: 5px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.a2c-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b6cff, #22d3ee); }

/* --- Bloc « l'essentiel » ----------------------------------------------- */
.a2c-tldr {
	margin: 0 0 24px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--c-soft);
	border: 1px solid #ddd5ff;
}
.a2c-tldr > strong:first-child { display: block; margin-bottom: 8px; font-size: 1.02em; color: #3e2aa3; }
.a2c-tldr ul { margin: 0 0 12px; padding-left: 1.2em; }
.a2c-tldr li { margin: 4px 0; }
.a2c-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.a2c-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px; border-radius: 999px;
	font-size: .9em; font-weight: 700; text-decoration: none !important;
	background: var(--c); color: #fff !important;
	box-shadow: 0 8px 18px -10px var(--c);
	transition: transform .2s, box-shadow .2s;
}
.a2c-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px var(--c); }
.a2c-btn.ghost { background: #fff; color: var(--c) !important; border: 1px solid #cfc4ff; box-shadow: none; }

/* --- Sommaire ----------------------------------------------------------- */
.a2c-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.a2c-toc li { margin: 0; }
.a2c-toc li::before { display: none !important; }
.a2c-toc a { display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: .84em; font-weight: 600; text-decoration: none !important; color: #3e2aa3 !important; background: #fff; border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.a2c-toc a:hover { border-color: var(--c); background: var(--c-soft); }

/* --- Encadrés ----------------------------------------------------------- */
.a2c-box { margin: 18px 0; padding: 14px 18px; border-radius: 12px; font-size: .95em; border: 1px solid var(--line); background: #fafafe; }
.a2c-box > :first-child { margin-top: 0; }
.a2c-box > :last-child { margin-bottom: 0; }
.a2c-box.tip { background: #eefaf3; border-color: #c8ecd6; }
.a2c-box.warn { background: #fff8eb; border-color: #f3dfb5; }
.a2c-box.info { background: #eef4fd; border-color: #cddcf3; }
.a2c-box.new { background: #f3f0ff; border-color: #ddd5ff; }
.a2c-box .a2c-label { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 6px; font-size: .78em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #fff; border: 1px solid currentColor; }
.a2c-box.tip .a2c-label { color: var(--ok); }
.a2c-box.warn .a2c-label { color: var(--warn); }
.a2c-box.info .a2c-label { color: #2f5f9e; }
.a2c-box.new .a2c-label { color: var(--c); }

/* --- Forces / faiblesses ------------------------------------------------ */
.a2c-pros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 22px; }
.a2c-pros > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.a2c-pros strong { display: block; margin-bottom: 6px; }
.a2c-pros ul { margin: 0; padding-left: 1.15em; }
.a2c-pros li { margin: 3px 0; }
.a2c-pros .plus { border-top: 3px solid #2fb36a; }
.a2c-pros .minus { border-top: 3px solid #e0624c; }

/* --- Cartes de compétences --------------------------------------------- */
.a2c-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin: 14px 0 24px; }
.a2c-skill { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 16px -12px rgba(27, 26, 41, .35); }
.a2c-skill-head { display: flex; align-items: center; gap: 12px; }
.a2c .a2c-skill-head img { width: 46px !important; height: 46px !important; max-width: none !important; flex: 0 0 46px; margin: 0 !important; border-radius: 10px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.a2c-skill-name { display: block; font-weight: 800; line-height: 1.25; }
.a2c-skill-meta { display: block; font-size: .8em; color: var(--mut); line-height: 1.35; }
.a2c-skill p { margin: 0; font-size: .93em; }
.a2c-rank { margin-left: auto; align-self: flex-start; flex: none; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .78em; font-weight: 800; color: #fff; background: var(--c); }
.a2c-rank.alt { background: #8d8aa3; }
.a2c-slots { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; font-size: .88em; }
.a2c-slots li { display: flex; gap: 8px; align-items: baseline; margin: 0; padding: 6px 9px; border-radius: 9px; background: #f7f6fc; }
.a2c-slots li::before { display: none !important; }
.a2c-slots em { flex: none; min-width: 52px; font-style: normal; font-size: .82em; font-weight: 800; color: var(--c); }
.a2c-alt { font-size: .84em !important; color: var(--mut); }

/* --- Liste priorisée (passifs, statistiques) ---------------------------- */
.a2c-prio { counter-reset: p; margin: 12px 0 22px; padding: 0; list-style: none; }
.a2c-prio > li { counter-increment: p; position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 10px 14px 10px 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.a2c-prio > li::before { content: counter(p); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8em; font-weight: 800; color: #fff; background: var(--c); }
.a2c .a2c-prio img { width: 38px !important; height: 38px !important; max-width: none !important; flex: 0 0 38px; margin: 0 !important; border-radius: 8px; }
.a2c-prio p { margin: 0; font-size: .92em; }
.a2c-prio strong { display: block; }

/* --- Colonnes (statistiques PvE / PvP / solo) --------------------------- */
.a2c-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 14px 0 22px; }
.a2c-col { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.a2c-col strong:first-child { display: block; margin-bottom: 6px; color: #3e2aa3; }
.a2c-col ol { margin: 0; padding-left: 1.3em; font-size: .93em; }
.a2c-col li { margin: 3px 0; }

/* --- Déroulé (mécanique, rotation) -------------------------------------- */
.a2c-flow { counter-reset: f; display: grid; gap: 10px; margin: 14px 0 22px; padding: 0; list-style: none; }
.a2c-flow > li { counter-increment: f; position: relative; display: flex; gap: 12px; align-items: center; margin: 0; padding: 12px 14px 12px 54px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.a2c-flow > li::before { content: counter(f); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82em; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); }
.a2c-flow > li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 44px; bottom: -12px; width: 2px; background: #ddd5ff; }
.a2c .a2c-flow img { width: 40px !important; height: 40px !important; max-width: none !important; flex: 0 0 40px; margin: 0 !important; border-radius: 9px; }
.a2c-flow p { margin: 0; font-size: .93em; }
.a2c-flow strong { display: block; }
.a2c-time { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 6px; font-size: .8em; font-weight: 800; color: var(--c); background: var(--c-soft); }

/* --- Rangée d'icônes (set de Stigmas) ----------------------------------- */
.a2c-set { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 16px; padding: 0; list-style: none; }
.a2c-set li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .88em; font-weight: 700; }
.a2c-set li::before { display: none !important; }
.a2c .a2c-set img { width: 30px !important; height: 30px !important; max-width: none !important; margin: 0 !important; border-radius: 50%; }

/* --- Tableaux ----------------------------------------------------------- */
.a2c table { width: 100%; margin: 12px 0 22px; border-collapse: separate; border-spacing: 0; font-size: .92em; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.a2c th, .a2c td { padding: 9px 12px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line); }
.a2c tr:last-child td { border-bottom: 0; }
.a2c th { background: #f4f1ff !important; color: #2c2160 !important; font-weight: 800; }
.a2c tbody tr:nth-child(even) td { background: #fbfaff; }
.a2c td:first-child { font-weight: 700; }
.a2c kbd { display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 6px; border: 1px solid #cfc9e6; border-bottom-width: 3px; background: #fff; font: 700 .85em/1.5 inherit; text-align: center; }

/* --- FAQ ---------------------------------------------------------------- */
.a2c-faq details { margin: 0 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.a2c-faq summary { cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none; }
.a2c-faq summary::-webkit-details-marker { display: none; }
.a2c-faq summary::after { content: "+"; float: right; font-weight: 800; color: var(--c); }
.a2c-faq details[open] summary::after { content: "−"; }
.a2c-faq details > div { padding: 0 16px 14px; font-size: .94em; }
.a2c-faq details > div > :last-child { margin-bottom: 0; }

/* --- Liens de fin ------------------------------------------------------- */
.a2c-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 18px; padding: 0; list-style: none; }
.a2c-links li { margin: 0; }
.a2c-links li::before { display: none !important; }
.a2c-links a { display: block; height: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); text-decoration: none !important; color: var(--ink) !important; font-weight: 700; transition: border-color .2s, transform .2s; }
.a2c-links a small { display: block; font-weight: 500; color: var(--mut); font-size: .82em; }
.a2c-links a:hover { border-color: var(--c); transform: translateY(-2px); }
.a2c-sources { margin-top: 26px; font-size: .82em; color: var(--mut); }

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 700px) {
	.a2c-hero { grid-template-columns: 1fr; padding: 20px; }
	.a2c-hero-icon { position: absolute; top: 14px; right: 14px; width: 64px; height: 64px; opacity: .9; }
	.a2c-hero-title { padding-right: 64px; }
	.a2c-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a2c-pros { grid-template-columns: 1fr; }
	.a2c-skills { grid-template-columns: 1fr; }
	.a2c table { display: block; overflow-x: auto; }
}

/* --- Articles : neutralise les styles de liste et de gras propres aux
   articles (CSS additionnel « body.single-post .entry-content ») sur les
   composants, sans toucher aux listes et paragraphes ordinaires. -------- */
body.single-post .entry-content .a2c .a2c-toc,
body.single-post .entry-content .a2c .a2c-slots,
body.single-post .entry-content .a2c .a2c-set,
body.single-post .entry-content .a2c .a2c-links,
body.single-post .entry-content .a2c .a2c-tags,
body.single-post .entry-content .a2c .a2c-flow,
body.single-post .entry-content .a2c .a2c-prio { margin-left: 0; padding-left: 0; }
body.single-post .entry-content .a2c .a2c-toc > li,
body.single-post .entry-content .a2c .a2c-slots > li,
body.single-post .entry-content .a2c .a2c-set > li,
body.single-post .entry-content .a2c .a2c-links > li,
body.single-post .entry-content .a2c .a2c-tags > li { border-bottom: 0; }
body.single-post .entry-content .a2c .a2c-toc > li,
body.single-post .entry-content .a2c .a2c-links > li { padding: 0; }
body.single-post .entry-content .a2c .a2c-tags > li { padding: 4px 12px; }
body.single-post .entry-content .a2c .a2c-set > li { padding: 6px 12px 6px 6px; }
body.single-post .entry-content .a2c .a2c-slots > li { padding: 6px 9px; }
body.single-post .entry-content .a2c .a2c-toc > li::before,
body.single-post .entry-content .a2c .a2c-slots > li::before,
body.single-post .entry-content .a2c .a2c-set > li::before,
body.single-post .entry-content .a2c .a2c-links > li::before,
body.single-post .entry-content .a2c .a2c-tags > li::before { display: none; }
body.single-post .entry-content .a2c .a2c-flow > li { margin: 0; padding: 12px 14px 12px 54px; }
body.single-post .entry-content .a2c .a2c-prio > li { margin: 0 0 8px; padding: 10px 14px 10px 50px; }
body.single-post .entry-content .a2c .a2c-flow > li::before,
body.single-post .entry-content .a2c .a2c-prio > li::before {
	content: counter(f); left: 14px; top: 14px; width: 28px; height: 28px; line-height: 28px; font-size: .82em;
	background: linear-gradient(135deg, var(--c), var(--c2));
}
body.single-post .entry-content .a2c .a2c-prio > li::before { content: counter(p); left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; line-height: 26px; background: var(--c); }
body.single-post .entry-content .a2c .a2c-col ol > li { padding-left: 1.7rem; }
body.single-post .entry-content .a2c .a2c-col ol > li::before { background: var(--c); }
body.single-post .entry-content .a2c .a2c-tldr strong,
body.single-post .entry-content .a2c .a2c-skill strong,
body.single-post .entry-content .a2c .a2c-flow strong,
body.single-post .entry-content .a2c .a2c-prio strong,
body.single-post .entry-content .a2c .a2c-pros strong,
body.single-post .entry-content .a2c .a2c-col strong,
body.single-post .entry-content .a2c .a2c-box strong,
body.single-post .entry-content .a2c .a2c-faq strong { background: none; }
body.single-post .entry-content .a2c .a2c-tldr ul > li,
body.single-post .entry-content .a2c .a2c-pros ul > li { border-bottom: 0; padding-top: .2em; padding-bottom: .2em; }
body.single-post .entry-content .a2c .a2c-tldr ul > li::before,
body.single-post .entry-content .a2c .a2c-pros ul > li::before { top: .8em; background: var(--c); }
body.single-post .entry-content .a2c .a2c-pros .minus ul > li::before { background: #e0624c; }
body.single-post .entry-content .a2c .a2c-pros .plus ul > li::before { background: #2fb36a; }
body.single-post .entry-content .a2c table { display: table; }
body.single-post .entry-content .a2c ol.a2c-flow { counter-reset: f; }
body.single-post .entry-content .a2c ol.a2c-prio { counter-reset: p; }
body.single-post .entry-content .a2c .a2c-flow > li { counter-increment: f; }
body.single-post .entry-content .a2c .a2c-prio > li { counter-increment: p; }