/*
Theme Name: EditorV1
Theme URI: https://swtor-editor.fr
Description: Thème enfant du thème Astra pour Swtor Editor. Habillage sombre "Sith" (fond noir, accents rouges) avec sélecteur de police d'accessibilité (Orbitron par défaut, Arial, Comic Sans, Times New Roman, OpenDyslexic).
Author: Vivien Naudier
Template: astra
Version: 1.2.0
Text Domain: astra-child
*/

/* =======================================================================
   1. Polices auto-hébergées (aucun appel externe à Google Fonts)
   ======================================================================= */

@font-face {
	font-family: 'Orbitron';
	src: url('assets/fonts/Orbitron-Variable.woff2') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'OpenDyslexic';
	src: url('assets/fonts/OpenDyslexic-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'OpenDyslexic';
	src: url('assets/fonts/OpenDyslexic-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =======================================================================
   2. Palette "Sith" et police active
   ======================================================================= */

:root {
	--sith-bg: #0b0c0e;
	--sith-bg-alt: #131518;
	--sith-surface: #191c20;
	--sith-surface-2: #21242a;
	--sith-border: #2b2f36;

	--sith-red: #e0263c;
	--sith-red-dark: #8f0f1f;
	--sith-red-glow: rgba(224, 38, 60, 0.35);

	--sith-gold: #e7c62b;

	--sith-text: #e9e7e4;
	--sith-text-muted: #a3a09c;

	--sith-link: #ff4d5e;
	--sith-link-hover: #ff8a93;

	/* Width of one post/page tile everywhere on the site (.swtor-recent-card,
	   set on .swtor-recent-grid > .swtor-recent-card below) — 300px to match
	   WordPress's own "medium" image size, so a 300px-wide source needs no
	   upscaling to fill the tile's image area. */
	--swtor-tile-width: 300px;

	/* Global Astra palette hook: covers Kadence Blocks / Gutenberg blocks
	   that pick colors from the theme's palette rather than a fixed hex. */
	--ast-global-color-0: var(--sith-red) !important;
	--ast-global-color-1: var(--sith-red-dark) !important;
	--ast-global-color-2: var(--sith-text) !important;
	--ast-global-color-3: var(--sith-text-muted) !important;
	--ast-global-color-4: var(--sith-bg) !important;
	--ast-global-color-5: var(--sith-surface) !important;
	--ast-global-color-6: var(--sith-surface-2) !important;
	--ast-global-color-7: var(--sith-bg-alt) !important;
	--ast-global-color-8: var(--sith-gold) !important;

	--site-font-stack: 'Orbitron', Arial, sans-serif;
}

:root[data-site-font="orbitron"] { --site-font-stack: 'Orbitron', Arial, sans-serif; }
:root[data-site-font="arial"]    { --site-font-stack: Arial, Helvetica, sans-serif; }
:root[data-site-font="comic"]    { --site-font-stack: 'Comic Sans MS', 'Comic Sans', cursive; }
:root[data-site-font="times"]    { --site-font-stack: 'Times New Roman', Times, serif; }
:root[data-site-font="dyslexic"] { --site-font-stack: 'OpenDyslexic', Arial, sans-serif; }

/* =======================================================================
   3. Base
   ======================================================================= */

html, body {
	background-color: var(--sith-bg);
}

body {
	color: var(--sith-text);
	font-family: var(--site-font-stack);
}

button, input, select, textarea {
	font-family: var(--site-font-stack);
}

::selection {
	background: var(--sith-red);
	color: #fff;
}

a {
	color: var(--sith-link);
}
a:hover, a:focus {
	color: var(--sith-link-hover);
}

:focus-visible {
	outline: 2px solid var(--sith-gold);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.site-title, .site-title a {
	font-family: var(--site-font-stack);
	letter-spacing: 0.02em;
	color: var(--sith-text);
}

.entry-title a:hover {
	color: var(--sith-red);
}

/* Every h1 (post/page titles, category and search titles, any h1 in the
   content) gets the "Ajouté récemment" look: uppercase, spaced, centered,
   with a red rule on its right fading outward. Each h1 keeps its own font size.
   The rules are inline-blocks rather than flex items (as on
   .swtor-recent-title): some h1s hold inline markup (the search title's
   <span>), which a flex container would split into separate boxes. */
h1,
h1.entry-title,
h1.page-title,
header.entry-header h1.entry-title,
h1.ast-archive-title,
.entry-content h1 {
	color: var(--sith-gold);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
}
/* The page title (and archive/search titles: every h1 outside the
   content) keeps a red rule on both sides, like "Ajouté récemment". The
   titles inside the content get one rule only, on their right: red for
   h1, gold for h2–h6, fading away from the text. */
h1:not(.entry-content h1)::before {
	content: '';
	display: inline-block;
	width: 90px;
	height: 1px;
	margin-right: 14px;
	vertical-align: middle;
	background: linear-gradient(90deg, transparent, var(--sith-red));
}
h1::after,
.entry-content :is(h2, h3, h4, h5, h6):not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *)::after {
	content: '';
	display: inline-block;
	width: 90px;
	height: 1px;
	margin-left: 14px;
	vertical-align: middle;
	background: linear-gradient(90deg, transparent, var(--sith-red));
	transform: scaleX(-1);
}
.entry-content :is(h2, h3, h4, h5, h6):not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *)::after {
	background: linear-gradient(90deg, transparent, var(--swtor-title-line, var(--sith-gold)));
}

/* Titres du contenu, un style par niveau (le liseret prend la couleur de
   --swtor-title-line) :
   h2 doré, liseret doré à droite ;
   h3 violet gras, liseret violet ;
   h4 bleu moyen en italique, liseret bleu ;
   h5 blanc normal, liseret vert ;
   h6 doré centré, liseret doré des deux côtés.
   Les titres des tuiles « Ajouté récemment » et du carrousel gardent leur style. */
.entry-content h2:not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *) {
	color: var(--sith-gold);
	--swtor-title-line: var(--sith-gold);
}
.entry-content h3:not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *) {
	color: #b07cff;
	font-weight: 700;
	--swtor-title-line: #b07cff;
}
.entry-content h4:not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *) {
	color: #4f9de8;
	font-style: italic;
	--swtor-title-line: #4f9de8;
}
.entry-content h5:not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *) {
	color: var(--sith-text);
	font-weight: 400;
	--swtor-title-line: #50c662;
}
.entry-content h6:not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *) {
	color: var(--sith-gold);
	--swtor-title-line: var(--sith-gold);
}
.entry-content h6:not(.has-text-align-left):not(.has-text-align-right) {
	text-align: center;
}
.entry-content h1 {
	--swtor-title-line: var(--sith-red);
}

/* Titre centré : liseret des deux côtés du texte. Titre aligné à gauche ou
   justifié : liseret à droite seulement (le ::after ci-dessus). Sont centrés
   les h1 et les h4 et h6 du contenu (sauf alignement à gauche ou à droite
   choisi dans l'éditeur), et tout titre que l'éditeur centre. */
.entry-content h1:not(.has-text-align-left):not(.has-text-align-right)::before,
.entry-content :is(h4, h6):not(.has-text-align-left):not(.has-text-align-right):not([style*="text-align:left"]):not([style*="text-align: left"]):not([style*="text-align:justify"]):not([style*="text-align: justify"]):not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *)::before,
.entry-content :is(h2, h3, h5):is(.has-text-align-center, [style*="text-align:center"], [style*="text-align: center"]):not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *)::before {
	content: '';
	display: inline-block;
	width: 90px;
	height: 1px;
	margin-right: 14px;
	vertical-align: middle;
	background: linear-gradient(90deg, transparent, var(--swtor-title-line, var(--sith-gold)));
}

@media (max-width: 700px) {
	h1,
	h1.entry-title,
	h1.page-title { letter-spacing: .08em; }
	h1::after,
	.entry-content :is(h2, h3, h4, h5, h6):not(.swtor-recent-title):not(.swtor-car-slide *):not(.swtor-recent-card *)::after {
		width: 36px;
		margin-left: 10px;
	}
	h1:not(.entry-content h1)::before,
	.entry-content :is(h1, h2, h3, h4, h5, h6)::before {
		width: 36px;
		margin-right: 10px;
	}
}

hr {
	border-color: var(--sith-border);
}

blockquote {
	background: var(--sith-surface);
	border-left: 3px solid var(--sith-red);
	padding: 1em 1.4em;
	color: var(--sith-text-muted);
}

pre, code, kbd, samp {
	background: var(--sith-bg-alt);
	color: var(--sith-text);
	border: 1px solid var(--sith-border);
	border-radius: 4px;
}

table {
	border-color: var(--sith-border);
}
table th {
	background: var(--sith-surface-2);
	color: var(--sith-text);
}
table td {
	border-color: var(--sith-border);
	color: var(--sith-text-muted);
}

/* Tables in posts and pages — "open" look: no frame, no fill, no vertical
   lines; gold column headers over a red rule, thin grey separators between
   rows, a small glowing red diamond before each row header (tbody th).
   The row under the mouse turns into an "Ajouté récemment" tile: dark fill,
   plain steel outline all around, square corners, holo grid across the
   whole row, no glow. The outline is drawn with
   inset shadows, not borders, so nothing in the table moves on hover.
   An optional <caption> is a title between two red rules, like "Ajouté
   récemment".
   The calculators' own tables are left alone: they live in iframes that
   don't load this stylesheet anyway, and .cc-table / #codex-capacites are
   excluded in case one is ever embedded straight into a page.
   Options:
   - class "swtor-table-center" on the table centers its column headers and
     data cells (e.g. a ✅ / ❌ grid);
   - class "swtor-col-orange" / "-violet" / "-vert" / "-bleu" / "-rouge" on a
     column header (thead th) tints it (gold by default).
   On narrow screens a table wrapped in <figure class="wp-block-table">
   (what the Table block outputs) scrolls sideways inside that figure
   instead of overflowing the page. */
.entry-content .wp-block-table {
	overflow-x: auto;
}
/* Full width even inside a flex group block, which otherwise shrinks it to
   its content (left/right/center-aligned tables keep WordPress's own sizing). */
.entry-content .wp-block-table:not(.alignleft):not(.alignright):not(.aligncenter) {
	width: 100%;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) {
	/* As wide as its content needs, never wider than the text column: a
	   short table stays compact instead of stretching edge to edge, a long
	   one fills the column and wraps. Auto sides keep it centered, inside
	   its <figure> or typed straight into the content. */
	width: auto;
	max-width: 100%;
	margin: 0 auto 1.5em;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: none;
	font-size: 14px;
	line-height: 1.45;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) caption {
	caption-side: top;
	padding: 0 0 20px;
	text-align: center;
	font-family: var(--site-font-stack);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sith-text);
}
.entry-content table:not(.cc-table):not(#codex-capacites table) caption::before,
.entry-content table:not(.cc-table):not(#codex-capacites table) caption::after {
	content: '';
	display: inline-block;
	width: 90px;
	height: 1px;
	vertical-align: middle;
	background: linear-gradient(90deg, transparent, var(--sith-red));
}
.entry-content table:not(.cc-table):not(#codex-capacites table) caption::before {
	margin-right: 14px;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) caption::after {
	margin-left: 14px;
	transform: scaleX(-1);
}
.entry-content table:not(.cc-table):not(#codex-capacites table) thead {
	border: 0;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) th,
.entry-content table:not(.cc-table):not(#codex-capacites table) td {
	padding: 11px 16px;
	border: 0;
	background: none;
	color: var(--sith-text);
	text-align: left;
	vertical-align: middle;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) thead th {
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(224, 38, 60, .75);
	font-family: var(--site-font-stack);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--swtor-col, #f3d27a);
	text-shadow: 0 0 12px rgba(231, 198, 43, .25);
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody th,
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody td,
.entry-content table:not(.cc-table):not(#codex-capacites table) tfoot th,
.entry-content table:not(.cc-table):not(#codex-capacites table) tfoot td {
	border-bottom: 1px solid rgba(185, 192, 202, .14);
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr:last-child > *,
.entry-content table:not(.cc-table):not(#codex-capacites table) tfoot tr:last-child > * {
	border-bottom-color: transparent;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody th {
	font-weight: 700;
	color: #f1ece4;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody th::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 10px;
	vertical-align: 2px;
	background: var(--sith-red);
	transform: rotate(45deg);
	box-shadow: 0 0 6px rgba(224, 38, 60, .7);
}

/* Row under the mouse = a tile: a plain steel outline all around (lighter
   top/left, darker bottom/right, like the tiles' gradient frame), square
   corners, and the holo grid across the whole row (no glow).
   The grid sits on the <tr> itself so its lines run on unbroken from one
   cell to the next (a background per cell would restart at every cell);
   the cells are made transparent to let it show. The outline is drawn with
   inset shadows on the cells, not borders, so nothing moves on hover. */
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr:hover {
	background:
		repeating-linear-gradient(0deg, transparent 0 11px, rgba(185, 192, 202, .06) 11px 12px),
		repeating-linear-gradient(90deg, transparent 0 11px, rgba(185, 192, 202, .06) 11px 12px),
		#0c1015;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr:hover > * {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: inset 0 1px 0 #737b87, inset 0 -1px 0 #4b515b;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr:hover > :first-child {
	box-shadow: inset 0 1px 0 #737b87, inset 0 -1px 0 #4b515b, inset 1px 0 0 #737b87;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr:hover > :last-child {
	box-shadow: inset 0 1px 0 #737b87, inset 0 -1px 0 #4b515b, inset -1px 0 0 #4b515b;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr:hover > :only-child {
	box-shadow: inset 0 1px 0 #737b87, inset 0 -1px 0 #4b515b, inset 1px 0 0 #737b87, inset -1px 0 0 #4b515b;
}

/* Options. */
.entry-content table.swtor-table-center:not(.cc-table):not(#codex-capacites table) thead th,
.entry-content table.swtor-table-center:not(.cc-table):not(#codex-capacites table) td {
	text-align: center;
}
/* The first column header stays left only above a column of row headers
   (tbody th, e.g. "Mêlée/Distance…"), which are left-aligned too; above
   ordinary centered cells (e.g. "Empire" in the class tables) it is
   centered like the rest. */
.entry-content table.swtor-table-center:not(.cc-table):not(#codex-capacites table):has(tbody th) thead th:first-child {
	text-align: left;
}
/* Centered (✅ / ❌ grid) tables: every data column gets the same width,
   whatever the length of its header — otherwise the browser gives the
   longest header ("Réduction de dégâts") a wider column than the others.
   A fixed width rather than a share of the table, so the table itself
   can stay as narrow as its content; a long column header wraps onto two
   lines, aligned to the bottom. The row-header column takes what its
   labels need. Only for grids with row headers (tbody th): tables of
   plain text cells keep the browser's own widths. */
.entry-content table.swtor-table-center:not(.cc-table):not(#codex-capacites table):has(tbody th) thead th:not(:first-child) {
	width: 110px;
}
/* Row labels on one line (the table grows to fit them instead; on a phone
   the table scrolls sideways inside its <figure>). Not in the operation
   damage tables, whose long ability names should wrap. */
.entry-content table.swtor-table-center:not(.swtor-table-boss):not(.cc-table):not(#codex-capacites table) tbody th {
	white-space: nowrap;
}
.entry-content table.swtor-table-center:not(.cc-table):not(#codex-capacites table) thead th {
	vertical-align: bottom;
}
.entry-content table thead th.swtor-col-orange { --swtor-col: #ffb15c; }
.entry-content table thead th.swtor-col-violet { --swtor-col: #bf78cd; }
.entry-content table thead th.swtor-col-vert   { --swtor-col: #50c662; }
.entry-content table thead th.swtor-col-bleu   { --swtor-col: #5ab4ff; }
.entry-content table thead th.swtor-col-rouge  { --swtor-col: #ff6b7b; }

/* Group rows: <tr class="swtor-table-group"><th colspan="…">Boss</th></tr>
   splits a long table into sections (one per boss in the operation damage
   tables). A small red title over a thin red rule, no diamond, and it never
   turns into a hover tile. */
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr.swtor-table-group > th {
	padding: 22px 16px 8px;
	border-bottom: 1px solid rgba(224, 38, 60, .45);
	font-family: var(--site-font-stack);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sith-red);
	text-align: left;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr.swtor-table-group > th::before {
	content: none;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr.swtor-table-group:hover {
	background: none;
	filter: none;
}
.entry-content table:not(.cc-table):not(#codex-capacites table) tbody tr.swtor-table-group:hover > th {
	box-shadow: none;
}
/* A cell spanning the marker columns for special cases (reflect, instant
   kill, damage nothing reduces). */
.entry-content table:not(.cc-table):not(#codex-capacites table) td.swtor-table-note {
	font-size: 12px;
	letter-spacing: .04em;
	color: #ffb15c;
}

/* Operation damage tables (class "swtor-table-boss" next to
   "swtor-table-center"): ability | type | 4 yes/no columns. Tighter side
   padding so the four marker columns stay narrow. */
.entry-content table.swtor-table-boss:not(.cc-table):not(#codex-capacites table) th,
.entry-content table.swtor-table-boss:not(.cc-table):not(#codex-capacites table) td {
	padding-left: 8px;
	padding-right: 8px;
}
.entry-content table.swtor-table-boss:not(.cc-table):not(#codex-capacites table) tbody th {
	padding-left: 16px;
	font-weight: 600;
}
.entry-content table.swtor-table-boss:not(.cc-table):not(#codex-capacites table) thead th {
	font-size: 10px;
	letter-spacing: .06em;
}
.entry-content table.swtor-table-boss.swtor-table-center:not(.cc-table):not(#codex-capacites table) thead th:nth-child(2) { width: 180px; }
.entry-content table.swtor-table-boss.swtor-table-center:not(.cc-table):not(#codex-capacites table) thead th:nth-child(n+3) { width: 90px; }
.entry-content table.swtor-table-boss:not(.cc-table):not(#codex-capacites table) td:nth-child(2) {
	font-size: 12px;
	color: var(--sith-text-muted);
}

/* Yes / no / n/a markers for tables (or any text): a CSS-drawn check in the
   achievement green and cross in red — rendered the same everywhere, unlike
   ✅ / ❌ emoji whose look depends on the visitor's system.
   <span class="swtor-oui">Oui</span>
   <span class="swtor-non">Non</span>
   <span class="swtor-na">—</span>
   The word inside is hidden (font-size 0, the marker is drawn in px by the
   pseudo-elements) but still read by screen readers — and it keeps the
   classic editor (TinyMCE) from deleting the span as empty when switching
   to the Visual tab, which is what wiped out empty markers. */
.swtor-oui,
.swtor-non {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin: -2px .3em 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}
.swtor-oui::before {
	content: '';
	position: absolute;
	left: 4px;
	top: -1px;
	width: 6px;
	height: 12px;
	border: solid #50c662;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
	filter: drop-shadow(0 0 4px rgba(80, 198, 98, .5));
}
.swtor-non::before,
.swtor-non::after {
	content: '';
	position: absolute;
	left: 5.5px;
	top: -1px;
	width: 3px;
	height: 16px;
	background: #ff6b7b;
	transform: rotate(45deg);
	filter: drop-shadow(0 0 4px rgba(224, 38, 60, .5));
}
.swtor-non::after {
	transform: rotate(-45deg);
}
.swtor-na {
	color: var(--sith-text-muted);
}

/* Scrollbar (progressive enhancement, WebKit/Blink only) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--sith-bg); }
::-webkit-scrollbar-thumb {
	background: var(--sith-red-dark);
	border-radius: 6px;
	border: 3px solid var(--sith-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--sith-red); }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* =======================================================================
   4. Structure générale Astra
   ======================================================================= */

#page,
#content,
.site-content,
.ast-container {
	background-color: var(--sith-bg);
}

/* Site-wide column width: no cap, fills the screen on every device (Astra's
   own default container caps at 1240px including padding). Applied
   everywhere, not just the gear simulator page — see .swtor-home-layout and
   .swtor-site-footer below for the two sections that use their own
   max-width instead of .ast-container. */
.ast-container {
	max-width: 100% !important;
}

/* Astra's "wide" featured-image alignment has no max-width of its own at
   desktop sizes — it simply fills .ast-container (see Astra core's
   inc/dynamic-css/container-layouts.php, which only constrains it below
   the tablet breakpoint). Raising .ast-container above therefore also
   blew up every "wide" featured image — e.g. the class icons on
   /classes/<slug>/ pages — to nearly full site width.
   Scoped to children of the "Classes" page (page-id 45) only, so other
   templates that use a wide featured image keep the full-width look.
   200px matches the icon size used in the /classes/ grid itself
   (see .swtor-recent-card-img etc. — those class icons render at
   200x200 there); shown here at 400px (2x) per explicit request, so a
   class's own page gives its icon more presence than the overview grid. */
body.parent-pageid-45 .ast-article-image-container--wide {
	max-width: 400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.parent-pageid-45 .ast-article-image-container--wide img {
	width: 400px !important;
	height: 400px !important;
	object-fit: contain;
}

/* "Classes" overview page (page-id 45) only: the theme's own skin
   (fonts, link/focus colors, the background-color declared on #content
   above) should stop at the header/footer and not reach into the
   content area in between. `revert` drops #content's own CSS back to
   the browser default — background becomes transparent again, so the
   dark html/body background still shows through underneath it (that
   background isn't set by this rule, so it's unaffected). Nothing here
   touches .ast-container's width or the grid's own images, which are
   plain Gutenberg columns/images unrelated to the theme's skin. */
body.page-id-45 #content {
	all: revert;
}

/* Same treatment on every individual class page (ravageur, maraudeur,
   sorcier, assassin, specialiste, mercenaire, agent-secret,
   tireur-delite, …) — all children of the "Classes" page, matched here
   via the shared parent-pageid-45 body class rather than listing each
   slug. Verified live (temporary injected override) on both page-id-45
   and page-id-69 (ravageur): no visible change either time, since these
   pages don't lean on the theme's own text/link skin — the class name,
   discipline labels, etc. carry their own colors in the block content
   itself, not from astra-child's CSS. */
body.parent-pageid-45 #content {
	all: revert;
}

/* .ast-container has no width cap any more (site fills the screen), which
   is fine for things that constrain themselves — the Opérations grid is a
   Gutenberg "Columns" block, which caps its own width at 1200px regardless
   of its parent. Plain text has no such self-cap, so without this it now
   stretches edge-to-edge on wide screens. Scoped to direct children only,
   so it doesn't fight a block that deliberately goes wide/full (those get
   the alignwide/alignfull classes below, left untouched). */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > blockquote,
.entry-content > table,
.entry-content > figure:not(.alignwide):not(.alignfull) {
	/* 1200px, like the blocks of pages built with the block editor; phones
	   still use their full width. */
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
/* Same cap on pages built with blocks (Astra's own
   ".entry-content[data-ast-blocks-layout] > *" outweighs the rule above),
   including their groups and an iframe embed (a "HTML" block), which Astra
   lets run the full width. */
.entry-content[data-ast-blocks-layout] > :is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, table, iframe, .wp-block-group, figure:not(.alignwide):not(.alignfull)) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
/* Les <div> d'un bloc HTML personnalisé (et toute autre div de bloc), sauf en
   pleine largeur : même limite de 1200px, centrée. !important sur les marges :
   un style en ligne comme « margin:1.5em 0 » la collerait sinon à gauche. */
.entry-content > div:not(.alignwide):not(.alignfull) {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.entry-content[data-ast-blocks-layout] > iframe {
	display: block;
}
.entry-content > .alignwide,
.entry-content > .alignfull {
	max-width: none;
}

/* Justified paragraphs in posts and pages start with an indent (alinéa).
   Covers both ways WordPress marks one: the block editor's
   .has-text-align-justify class and the classic editor's inline
   text-align: justify. Left/centered paragraphs and headings are untouched. */
.entry-content p.has-text-align-justify,
.entry-content p[style*="text-align: justify"],
.entry-content p[style*="text-align:justify"] {
	text-indent: 1.5em;
}

/* Page "Histoire": "Sommaire" and the "1.0"/"2.0"… chapter markers in gold;
   the sub-chapter links (Chapitre 1/2/3, Makeb, CZ-98…) left alone, so they
   keep the page's own original color (#e8d9a0, from its embedded <style>,
   in the page content — not editable here). !important since a child
   theme stylesheet has no reliable load-order guarantee over an inline
   <style> in the page content. */
.histoire-nav-heading,
.histoire-nav-title {
	color: #ffd700 !important;
}

/* Chapter sub-lists (Chapitre 1/2/3 under "1.0", and the sub-items injected
   by JS — see swtor_child_histoire_nav_fix() in functions.php — under
   "2.0" through "7.0") start collapsed and only show once their group gets
   the .is-expanded class that same script toggles on click. A small
   chevron on the chapter title flips to show which are open. */
.histoire-nav-group > a:not(.histoire-nav-title) {
	display: none !important;
}
.histoire-nav-group.is-expanded > a:not(.histoire-nav-title) {
	display: block !important;
}
.histoire-nav-title {
	position: relative;
	padding-right: 16px !important;
}
.histoire-nav-title::after {
	content: '';
	position: absolute;
	right: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .15s ease;
}
.histoire-nav-group.is-expanded > .histoire-nav-title::after {
	transform: translateY(-30%) rotate(225deg);
}

/* Boss "Sommaire" of operation guides (swtor_child_sommaire() in
   functions.php): same look as the Histoire page's nav above. Sticky as the
   first child of .entry-content, so it follows the scroll for the whole
   page and stops where the text ends, never over the footer.
   Not docked (no room beside the text, see .is-docked below): a
   "☰ Sommaire" button top right opening the panel, both hanging off a
   zero-height bar so they don't push the text down. */
.swtor-sommaire {
	position: sticky;
	top: 20px;
	z-index: 500;
	height: 0;
	font-family: inherit;
}
/* Logged in: clear the WordPress admin bar (32px, 46px on small screens). */
.admin-bar .swtor-sommaire {
	top: 52px;
}
@media (max-width: 782px) {
	.admin-bar .swtor-sommaire {
		top: 66px;
	}
}
/* .swtor-sommaire in front: beats the "Boutons" rule that makes every
   <button> solid red. */
.swtor-sommaire .swtor-sommaire-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	background: var(--sith-bg) !important;
	color: #ffd700 !important;
	border: 1px solid #ffd70044 !important;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	cursor: pointer;
}
.swtor-sommaire .swtor-sommaire-toggle:hover {
	background: #2a2610 !important;
}
.swtor-sommaire-panel {
	display: none;
	position: absolute;
	top: 44px;
	right: 0;
	width: 220px;
	box-sizing: border-box;
	background: var(--sith-bg);
	border-radius: 10px;
	padding: 10px;
	max-height: 82vh;
	overflow-y: auto;
}
.swtor-sommaire.is-open .swtor-sommaire-panel {
	display: block;
}
.swtor-sommaire-heading {
	font-weight: 700;
	color: #ffd700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 6px 10px;
	border-bottom: 1px solid #ffffff1f;
	margin-bottom: 8px;
}
/* .entry-content nav… : beats Astra's ".ast-single-post .entry-content a",
   which underlines every content link. */
.entry-content nav.swtor-sommaire a {
	display: block;
	padding: 4px 6px;
	font-size: 13px;
	text-decoration: none;
	color: #e8d9a0;
	border-radius: 5px;
	line-height: 1.35;
}
/* Titres de niveau 3 : en retrait sous leur titre 2, plus petits, même
   couleur que les autres liens du sommaire. */
.entry-content nav.swtor-sommaire a.swtor-sommaire-h3 {
	padding-left: 18px;
	font-size: 12px;
}
.entry-content nav.swtor-sommaire a:hover,
.entry-content nav.swtor-sommaire a:focus {
	background: #ffd70022;
	color: #ffd700;
}
/* Docked (set by swtor_child_sommaire_script() whenever there's room beside
   the page's central block): always open, 14px right of that block like the
   Histoire nav. The script measures the block and sets --swtor-sommaire-left
   (from the bar's left edge), and --swtor-sommaire-shift to lift the panel
   back up once the end of the text scrolls past it, so it never overhangs
   the footer. Still absolutely positioned off the zero-height bar — not a
   float, which would push some blocks aside (a flex group, for one, moves
   to avoid it) and shift the very edge it's aligned to. */
.swtor-sommaire.is-docked .swtor-sommaire-toggle {
	display: none;
}
.swtor-sommaire.is-docked .swtor-sommaire-panel {
	display: block;
	top: 0;
	right: auto;
	left: var(--swtor-sommaire-left, 0px);
	transform: translateY(var(--swtor-sommaire-shift, 0px));
}

.swtor-logo {
	height: 200px;
	width: auto;
	max-width: none;
}
@media (max-width: 600px) {
	.swtor-logo {
		height: 90px;
	}
}

/* Home page layout: "Ajouté récemment" as the main column, the site's real
   widget sidebar next to it. Rendered via astra_content_before, outside
   Astra's own .ast-container, so it needs its own width to match the rest
   of the site.
   Flex rather than grid on purpose: the centering math (on .swtor-home-main
   below) only accounts for the Articles/Pages block's own width,
   not the sidebar — with flex, the sidebar simply flows right after
   .swtor-home-main wherever that ends up (shifted right to center on the
   viewport or not), staying glued to it via the gap alone, with zero
   awareness of the sidebar in the centering calculation itself. A grid's
   1fr/320px columns would instead pin the sidebar a fixed distance from
   the *viewport's* right edge, independent of where the centered content
   lands — which is what left the gap before. */
.swtor-home-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
	margin: 0 0 30px;
	padding: 0 20px;
	box-sizing: border-box;
}
/* The Articles/Pages tile block is always centered in the layout, on its
   own real width; the sidebar sits right after it (32px gap) only when it
   fits there *without* moving that block off-center — otherwise it drops
   to its own line below instead of pushing the tiles left.
   --swtor-home-main-w is the width of the tile block in the current tier
   (4 columns = 1272px, 3 = 952px, 2 = 632px; see .swtor-recent-groups's @container
   rules further down, which pick the columns from main's actual width).
   main is capped at that width, so its box ends exactly where the cards do
   (the sidebar is glued to main's box, not to the cards inside it), and
   margin-left centers that box: percentages in a flex item's margin
   resolve against the flex container's content box, so 100% is the
   layout's usable width (scrollbar and 2×20px padding already excluded).
   Using that same width as flex-basis makes the browser's own wrap
   decision match the rule above: flex-wrap checks margin + basis + gap +
   sidebar against the line, i.e. whether (100% - W) / 2 + W + 32px + the
   sidebar's basis fits in 100% — exactly "is there room for the sidebar
   right of the centered tiles". The sidebar is flexible: 260px basis (the
   least it needs), growing back to its full 320px whenever there's room.
   The viewport breakpoints below restate that same condition for the
   rules that must know which side of it they're on: content width =
   viewport - 2×20px padding - up to 17px for a classic desktop scrollbar
   (it eats into the layout but not into the viewport width media queries
   measure). So:
   - >= 1913px (1272 + 2×(32 + 260) + 57): 4 columns, sidebar beside — the
     sidebar narrowed below 320px up to ~2032px (e.g. ~263px on a 1920px
     screen with a Windows scrollbar), so 1920×1080 screens get 4 columns
     at 100% zoom with the tiles still centered;
   - 1713px-1912px (952 + 704 + 57): 3 columns, sidebar beside;
   - 1393px-1712px (632 + 704 + 57): 2 columns, sidebar beside — one
     column fewer than would fit, traded for keeping the (sticky) sidebar
     in view next to the tiles rather than way down below all of them;
   - <= 1392px: sidebar below, main still capped at 2 columns and centered
     on its own — even where 3 would fit again now that the sidebar is out
     of the way, so the column count only ever goes down as the screen
     narrows instead of bouncing 3 → 2 → 3 → 2. */
.swtor-home-main {
	--swtor-home-main-w: 1272px;
	flex: 1 1 var(--swtor-home-main-w);
	max-width: var(--swtor-home-main-w);
	margin-left: max( 0px, ( 100% - var(--swtor-home-main-w) ) / 2 );
}
@media (max-width: 1912px) {
	.swtor-home-main { --swtor-home-main-w: 952px; }
}
@media (max-width: 1712px) {
	.swtor-home-main { --swtor-home-main-w: 632px; }
}
/* Grows from its 260px basis back to 320px with whatever room is left right
   of the centered tiles (main itself can't take it: it's capped at its tier
   width). */
.swtor-home-aside {
	flex: 1 0 260px;
	max-width: 320px;
}
@media (max-width: 1392px) {
	.swtor-home-aside { flex-basis: 100%; max-width: none; }
}
/* Nudged down to sit level with the *top* of the first row of Articles/Pages
   tiles (measured live: 71px from the top of .swtor-home-main down to that
   row's top edge at the current tile size — revisit this number if either
   changes). Sticky so it stays on screen while the (much taller)
   Articles/Pages column scrolls past it — .swtor-home-layout already has
   align-items: start, which sticky positioning needs to work inside a grid
   item. Capped to the viewport height with its own scroll so it can never
   get taller than the screen and clip its own bottom. */
.swtor-home-aside {
	margin-top: 71px;
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}
@media (max-width: 1392px) {
	.swtor-home-aside {
		margin-top: 0;
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* "Ajouté récemment": latest posts and latest pages, each their own
   2-column × up-to-10-row block of cards with featured image + excerpt,
   sitting side by side (articles left, pages right). Fills its column —
   the centering (and the empty space that comes with it) is handled one
   level up, on .swtor-home-layout, so it centers together with the sidebar
   instead of leaving a gap between Pages and the sidebar. */
/* container-type here (not on .swtor-home-main itself) scopes the
   @container queries below to just this component's own rendered width,
   without turning the wider home layout into a size-containment context. */
.swtor-recent { margin: 0; container-type: inline-size; }
/* Uppercase title framed by two red rules fading out toward the edges.
   line-height pinned at 26px, same as the previous 20px title, so the first
   row of tiles still starts where .swtor-home-aside's margin-top expects. */
.swtor-recent-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--sith-text);
	font-family: var(--site-font-stack);
	font-size: 17px;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 16px;
	text-align: center;
}
.swtor-recent-title::before,
.swtor-recent-title::after {
	content: '';
	flex: 0 1 90px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sith-red));
}
.swtor-recent-title::after {
	transform: scaleX(-1);
}
/* Phones: tighter, so the title stays on one line between its rules. */
@media (max-width: 700px) {
	.swtor-recent-title { font-size: 15px; letter-spacing: .08em; gap: 10px; }
	.swtor-recent-title::before,
	.swtor-recent-title::after { flex-basis: 36px; }
}
/* Articles and Pages sit in 2 fixed-width columns — never 1fr — sized to
   however many tiles/row they can each actually show (620px = 2 tiles,
   300px = 1, see --swtor-tile-width), with justify-content centering that
   fixed-width pair as a block. A 1fr column stretches to fill whatever
   space the grid container has, whether or not its own tiles need that
   much room — its content then just sits centered inside that oversized
   track (each column also centers its own tiles, see .swtor-recent-grid
   below), opening a gap between the two columns instead of gluing them
   together, and effectively reserving room for a tile that isn't there.
   Fixed widths avoid both: there's never more column than content, so
   nothing to hold a gap open, and justify-content centers the actual glued
   Articles+Pages block against the available width instead of assuming a
   fixed number of tile-columns.
   Tiered by @container (not @media): what actually decides how many tiles
   fit per group is this component's own rendered width (main's, capped
   and centered per tier — see .swtor-home-main above), not the viewport's,
   so the columns always follow main instead of a second, separately
   derived set of viewport breakpoints that could drift from it.
   There's no narrower tier below the 632px pairing (1 tile + 1 tile): main
   is never narrower than that while these 2 columns sit side by side —
   it's exactly 632px when the sidebar is beside it, and above the 700px
   breakpoint below it has at least ~643px once the sidebar is on its own
   line — so the tile cards (.swtor-recent-grid > .swtor-recent-card below)
   never need to shrink below --swtor-tile-width here. */
.swtor-recent-groups {
	display: grid;
	grid-template-columns: repeat( 2, calc( 2 * var(--swtor-tile-width) + 20px ) );
	justify-content: center;
	gap: 32px;
}
@container (max-width: 1271px) {
	.swtor-recent-groups {
		grid-template-columns: var(--swtor-tile-width) calc( 2 * var(--swtor-tile-width) + 20px );
	}
}
@container (max-width: 951px) {
	.swtor-recent-groups {
		grid-template-columns: repeat( 2, var(--swtor-tile-width) );
	}
}
@media (max-width: 700px) {
	.swtor-recent-groups { grid-template-columns: 1fr; }
}
.swtor-recent-group-title {
	color: var(--sith-text-muted);
	font-family: var(--site-font-stack);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
/* Grey rules on each side, fading outward — same treatment as
   .swtor-recent-title above, in the border grey instead of red. */
.swtor-recent-group-title::before,
.swtor-recent-group-title::after {
	content: '';
	flex: 0 1 70px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sith-border));
}
.swtor-recent-group-title::after {
	transform: scaleX(-1);
}
/* Tile rows are flex, each row centered on its own — so an incomplete last
   row (e.g. 2 tiles out of 4) sits in the middle rather than under the
   first columns. */
.swtor-recent-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
/* Every tile, home page included, is the same fixed --swtor-tile-width
   (300px) — not stretched to fill its row. On the home page that leaves a
   few spare px in each 625px-wide group (2×300 + 20 gap = 620px); the
   grid's own justify-content: center (above) takes up that slack instead
   of the tiles stretching past 300px. */
.swtor-recent-grid > .swtor-recent-card {
	flex: 0 0 var(--swtor-tile-width);
	min-width: 0;
	max-width: 100%;
}
/* Category/tag/search/blog listings: same tile as above, as many per row
   as fit. */
.swtor-recent-grid.swtor-listing-grid {
	margin-bottom: 30px;
}
@media (max-width: 700px) {
	.swtor-recent-grid.swtor-listing-grid > .swtor-recent-card { flex-basis: 100%; }
}

/* Listing pages with a filter box ("Succès cachés"): 4 tiles per row,
   centered on the page, with the filter box glued to the right of the tiles
   but kept out of the centering — same idea as the home page. The equal
   1fr side columns center the tile block; the right one is floored at the
   box's width + gap so, on narrower screens, the tiles give way (left
   column shrinks first) instead of the box overlapping them. */
.swtor-listing-layout.has-filters {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, calc(4 * var(--swtor-tile-width) + 3 * 20px + 1px))
		minmax(352px, 1fr);
	align-items: start;
}
/* The +1px above: 4 tiles + 3 gaps fill this column exactly, and any
   sub-pixel rounding would otherwise wrap the 4th tile onto a new row. */
.swtor-listing-layout.has-filters .swtor-listing-main {
	grid-column: 2;
}
.swtor-listing-aside {
	grid-column: 3;
	width: 320px;
	margin-left: 32px;
	position: sticky;
	top: 20px;
}
@media (max-width: 900px) {
	.swtor-listing-layout.has-filters { grid-template-columns: 1fr; }
	.swtor-listing-layout.has-filters .swtor-listing-main,
	.swtor-listing-aside { grid-column: 1; }
	.swtor-listing-aside {
		grid-row: 1;
		width: auto;
		margin: 0 0 20px;
		position: static;
	}
}

/* Archive/search header (Astra's .ast-archive-description: the h1, the
   breadcrumb, the category description). Astra caps it at 1200px and
   left-aligns that box, so its centered h1 sat left of the centered tiles
   on any screen wider than ~1240px. Centered on the page here, which is
   where the plain listings center their tiles too. */
.ast-archive-description {
	margin-left: auto;
	margin-right: auto;
}
/* Listings with a filter box: the tiles are centered in the middle column
   of .swtor-listing-layout.has-filters (above), not on the page — the
   header gets the very same 3 columns so it centers over the tiles. */
body.category-succes .ast-archive-description,
body.category-succes-caches .ast-archive-description {
	max-width: none;
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, calc(4 * var(--swtor-tile-width) + 3 * 20px + 1px))
		minmax(352px, 1fr);
}
body.category-succes .ast-archive-description > *,
body.category-succes-caches .ast-archive-description > * {
	grid-column: 2;
}
@media (max-width: 900px) {
	body.category-succes .ast-archive-description,
	body.category-succes-caches .ast-archive-description {
		grid-template-columns: minmax(0, 1fr);
	}
	body.category-succes .ast-archive-description > *,
	body.category-succes-caches .ast-archive-description > * {
		grid-column: 1;
	}
}

.swtor-filter-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.swtor-filter-button {
	display: block;
	padding: 8px 12px;
	border: 1px solid var(--sith-border);
	border-radius: 6px;
	background: var(--sith-surface-2);
	color: var(--sith-text) !important;
	font-family: var(--site-font-stack);
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.swtor-filter-button:hover {
	border-color: var(--sith-red-dark);
}
.swtor-filter-button.is-active {
	background: var(--sith-red);
	border-color: var(--sith-red);
	color: #fff !important;
}
/* Tile. Markup (swtor_child_render_recent_cards() in functions.php):
   article > .frame > .inner > (a.img, .body). Sizes are unchanged from the
   previous plain tile: .frame's 1px padding is the old 1px border, and the
   badge row and the date/"Lire" footer below fill exactly the slots of the
   old date row and "Lire la suite" link.
   Chamfered corners come from clip-path on .frame (its steel gradient,
   showing through that 1px padding, is the outline) and on .inner. Pages
   are cut top-left + bottom-right, articles the mirror image: top-right +
   bottom-left. clip-path also clips box-shadow, so the hover glow is a
   drop-shadow filter on the unclipped article, which follows the cuts. */
.swtor-recent-grid > article.swtor-recent-card {
	--swtor-card-cut: 12px;
	display: flex;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	transition: transform .18s ease, filter .18s ease;
}
.swtor-recent-card:hover {
	transform: translateY(-3px);
	filter: drop-shadow(0 0 10px var(--sith-red-glow));
}
.swtor-recent-card-frame,
.swtor-recent-card-inner {
	clip-path: polygon(
		var(--swtor-card-cut) 0, 100% 0,
		100% calc(100% - var(--swtor-card-cut)), calc(100% - var(--swtor-card-cut)) 100%,
		0 100%, 0 var(--swtor-card-cut)
	);
}
.swtor-recent-card--post .swtor-recent-card-frame,
.swtor-recent-card--post .swtor-recent-card-inner {
	clip-path: polygon(
		0 0, calc(100% - var(--swtor-card-cut)) 0,
		100% var(--swtor-card-cut), 100% 100%,
		var(--swtor-card-cut) 100%, 0 calc(100% - var(--swtor-card-cut))
	);
}
.swtor-recent-card-frame {
	flex: 1;
	display: flex;
	min-width: 0;
	padding: 1px;
	background: linear-gradient(160deg, #737b87, #25282e 35%, #25282e 70%, #4b515b);
}
/* Red outline on hover. */
.swtor-recent-card:hover .swtor-recent-card-frame {
	background: linear-gradient(160deg, #ff5a6c, var(--sith-red-dark) 40%, var(--sith-red-dark) 70%, var(--sith-red));
}
.swtor-recent-card-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--sith-surface);
}

/* Color family of the card's type (swtor_child_card_type()): tints the type
   badge and the grid behind the image. */
.swtor-recent-card {
	--swtor-card-accent: #b9c0ca;
	--swtor-card-tint: rgba(185, 192, 202, .12);
	--swtor-card-grid: rgba(185, 192, 202, .05);
}
/* Succès: the green of the in-game achievement objective lines. */
.swtor-recent-card--succes {
	--swtor-card-accent: #50c662;
	--swtor-card-tint: rgba(80, 198, 98, .14);
	--swtor-card-grid: rgba(80, 198, 98, .05);
}
/* Opération / Boss, and Classe cards in the "Empire" category: red. */
.swtor-recent-card--operation,
.swtor-recent-card--empire {
	--swtor-card-accent: #ff6b7b;
	--swtor-card-tint: rgba(224, 38, 60, .16);
	--swtor-card-grid: rgba(224, 38, 60, .06);
}
/* Guides and Outils: gold. */
.swtor-recent-card--guide,
.swtor-recent-card--outil {
	--swtor-card-accent: var(--sith-gold);
	--swtor-card-tint: rgba(231, 198, 43, .14);
	--swtor-card-grid: rgba(231, 198, 43, .05);
}
/* Classe cards in the "République" category: blue. (Pages, and Classes in
   neither faction, keep the default grey set on .swtor-recent-card above.) */
.swtor-recent-card--republique {
	--swtor-card-accent: #5ab4ff;
	--swtor-card-tint: rgba(90, 180, 255, .14);
	--swtor-card-grid: rgba(90, 180, 255, .06);
}
/* Histoire: violet, the in-game story mission title color. */
.swtor-recent-card--histoire {
	--swtor-card-accent: #bf78cd;
	--swtor-card-tint: rgba(191, 120, 205, .14);
	--swtor-card-grid: rgba(191, 120, 205, .06);
}

.swtor-recent-card-img {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	/* Holo grid, showing behind the image wherever object-fit: contain (next
	   rule) letterboxes it, and filling the whole box when there's no image. */
	background:
		radial-gradient(ellipse at 50% 60%, var(--swtor-card-tint), transparent 65%),
		repeating-linear-gradient(0deg, transparent 0 11px, var(--swtor-card-grid) 11px 12px),
		repeating-linear-gradient(90deg, transparent 0 11px, var(--swtor-card-grid) 11px 12px),
		#0c1015;
}
/* contain, not cover: same reasoning as the carousel's real-image tiles
   (.swtor-car-slide.has-image in carousel.css) — cropping to fill/upscale
   the tile can cut off or blur text baked into the image itself (game-UI
   screenshots, achievement notifications), so the whole image is always
   shown in full instead, at its own resolution, letterboxed on whichever
   side its aspect ratio doesn't match the tile's. */
.swtor-recent-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.swtor-recent-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}
.swtor-recent-card-body {
	padding: 14px 16px 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
/* Category badges, one line, in a fixed 18.975px row (the old date row's
   height: its 11.5px text × Astra's 1.65 line-height) — extra badges are
   cut off rather than wrapping to a new line. */
.swtor-recent-badges {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 18.975px;
	overflow: hidden;
}
.swtor-recent-badge {
	flex-shrink: 0;
	font-family: var(--site-font-stack);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 2px 6px 1px;
	color: var(--sith-text);
	background: var(--sith-bg-alt);
	border: 1px solid #4a505a;
	white-space: nowrap;
}
.swtor-recent-badge--type {
	color: var(--swtor-card-accent);
	border-color: currentColor;
}
/* Zone badges are neutral, except Évènement and Héritage (category slugs
   "evenements", "heritage"): gold, and Zone litigieuse ("zl"): violet like
   Histoire. */
.swtor-recent-badge--zone-evenements,
.swtor-recent-badge--zone-heritage {
	color: var(--sith-gold);
	border-color: currentColor;
}
.swtor-recent-badge--zone-zl {
	color: #bf78cd;
	border-color: currentColor;
}
/* Faction badge, from the "Empire" / "République" category: red / blue. */
.swtor-recent-badge--faction-empire {
	color: #ff6b7b;
	border-color: currentColor;
}
.swtor-recent-badge--faction-republique {
	color: #5ab4ff;
	border-color: currentColor;
}
.swtor-recent-card-body h4 {
	font-size: 15px;
	margin: 0;
	font-family: var(--site-font-stack);
	line-height: 1.3;
	height: 58.5px; /* 3 lines, fixed — reserved even for a 1-line title */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.swtor-recent-card-body h4 a { color: var(--sith-text); }
.swtor-recent-card-body h4 a:hover { color: var(--sith-red); }
.swtor-recent-card-body p {
	margin: 0;
	font-size: 12.5px;
	color: var(--sith-text-muted);
	line-height: 1.5;
	height: 93.75px; /* 5 lines, fixed — reserved even when there's no excerpt at all */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Date + "Lire": 1px rule + 9px + one 19.8px line = 29.8px, i.e. the old
   "Lire la suite" row (4px + 19.8px) plus the 6px taken off the body's
   bottom padding above, so the tile keeps its height. */
.swtor-recent-card-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid var(--sith-border);
	padding-top: 9px;
	line-height: 19.8px;
}
.swtor-recent-card-date {
	font-size: 11.5px;
	color: var(--sith-text-muted);
}
.swtor-recent-card-more {
	font-family: var(--site-font-stack);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sith-red);
}
.swtor-recent-card-more:hover { color: var(--sith-link-hover); }

/* En-tête
   Menu bar (desktop and mobile): a faint top-down gradient, underlined by a
   single rule that runs steel → red → steel and fades out at both ends.
   The mobile wrapper's own border and glow are dropped so that rule isn't
   doubled by a second red line + halo right under it. */
.main-header-bar {
	background: linear-gradient(180deg, #121418, var(--sith-bg)) !important;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, transparent, #737b87 20%, var(--sith-red) 50%, #737b87 80%, transparent) 1;
	box-shadow: none;
}
.ast-header-break-point.ast-mobile-header-wrap,
.ast-mobile-header-wrap {
	background-color: var(--sith-bg) !important;
	border-bottom: 0;
	box-shadow: none;
}

/* Menu bar 25% thicker: Astra sets the row's height via a 30px min-height
   on its own grid-row container (not via padding on the links themselves,
   which have none), so that's the one value that actually needs raising —
   the nav links stretch to fill it automatically via the row's grid layout. */
.main-header-bar .ast-container {
	min-height: 37.5px !important;
}

/* Center the menu links in the bar instead of hugging the left edge.
   Astra lays this row out as a 2-column grid (menu | search), each column
   sized to fit its own content with nothing reserved in between — adding a
   real center column and moving the menu into it centers the links
   relative to the whole bar, while the search icon keeps its usual place
   pinned to the right. */
.main-header-bar .ast-builder-grid-row-has-sides.ast-builder-grid-row-no-center {
	grid-template-columns: 1fr auto 1fr !important;
}
.main-header-bar .site-header-primary-section-left {
	grid-column: 2;
	justify-self: center;
}
.main-header-bar .site-header-primary-section-right {
	grid-column: 3;
	justify-self: end;
}

.main-header-bar .main-header-bar-navigation a,
.ast-header-navigation-arrow,
.menu-item a {
	color: var(--sith-text) !important;
}

.main-header-menu li a:hover,
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a {
	color: var(--sith-red) !important;
}

/* Desktop top-level links: small spaced uppercase in steel grey. The
   glowing red underline and red text mark the current page (or the section
   it belongs to) at rest, and follow the mouse: while another item is
   hovered, it shrinks away under the current item and grows under the
   hovered one. Dropdown items and the mobile menu keep the rules above. */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	position: relative;
	padding: 0 13px;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #b9c0ca !important;
}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
	content: '';
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 4px;
	height: 2px;
	background: var(--sith-red);
	box-shadow: 0 0 8px var(--sith-red), 0 0 16px var(--sith-red-glow);
	transform: scaleX(0);
	transition: transform .25s ease;
}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	transition: color .2s ease;
}
/* Underlined + red: the hovered item, and the current item… */
#ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link,
#ast-desktop-header .main-header-menu > .current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--sith-red) !important;
}
#ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link::after,
#ast-desktop-header .main-header-menu > .current-menu-item > .menu-link::after,
#ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}
/* …except the current item while the mouse is on another one. */
#ast-desktop-header .main-header-menu:hover > .current-menu-item:not(:hover) > .menu-link,
#ast-desktop-header .main-header-menu:hover > .current-menu-ancestor:not(:hover) > .menu-link {
	color: #b9c0ca !important;
}
#ast-desktop-header .main-header-menu:hover > .current-menu-item:not(:hover) > .menu-link::after,
#ast-desktop-header .main-header-menu:hover > .current-menu-ancestor:not(:hover) > .menu-link::after {
	transform: scaleX(0);
}

/* Mobile menu button: a plain white burger icon instead of the solid red
   block every <button> gets from the "Boutons" rules further down. */
#ast-mobile-header .main-header-menu-toggle,
#ast-mobile-header .main-header-menu-toggle:hover,
#ast-mobile-header .main-header-menu-toggle:focus {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--sith-text) !important;
}
#ast-mobile-header .main-header-menu-toggle svg {
	fill: currentColor;
}

.main-header-menu .sub-menu,
.main-header-bar-navigation .sub-menu {
	background-color: var(--sith-surface-2) !important;
	border: 1px solid var(--sith-border);
}

.ast-search-menu-icon .search-field,
.ast-search-icon svg {
	background-color: var(--sith-surface);
	color: var(--sith-text);
}

/* Bannières / titres d'article et d'archive */
.ast-archive-title, .page-title,
.ast-single-post .entry-title,
.site-header-focus-item {
	color: var(--sith-text);
}

.single-banner-area,
.ast-archive-title-bar,
.special-banner {
	background-color: var(--sith-bg-alt);
	border-bottom: 1px solid var(--sith-border);
}

/* Contenu / articles */
article.post,
article.page,
.ast-article-single,
.entry-content {
	background-color: transparent;
}

.ast-separate-container .ast-article-single,
.ast-separate-container article {
	background-color: var(--sith-surface);
	border: 1px solid var(--sith-border);
	border-radius: 10px;
}

/* Level-4 subtitles centered on the page (titles carry no red side bar).
   Couleurs et liserets des titres h2 à h6 : voir plus haut, après les h1. */
.entry-content h4:not(.has-text-align-left):not(.has-text-align-right) {
	text-align: center;
}

.entry-meta, .entry-meta a, .posted-on, .byline, .cat-links {
	color: var(--sith-text-muted);
}

/* Boutons
   :not(.ast-menu-toggle) exclut la flèche d'ouverture des sous-menus du
   menu mobile : c'est aussi un <button> pour Astra, donc sans cette
   exclusion elle héritait du même pavé rouge plein qu'un vrai bouton
   d'action, complètement déconnecté visuellement du texte du menu. */
.ast-button,
button:not(.ast-menu-toggle),
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.search-submit {
	background-color: var(--sith-red) !important;
	border-color: var(--sith-red-dark) !important;
	color: #fff !important;
	font-family: var(--site-font-stack);
	border-radius: 6px;
}

.ast-button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.search-submit:hover {
	background-color: var(--sith-red-dark) !important;
	border-color: var(--sith-red) !important;
}

/* Formulaires (recherche, commentaires) */
.search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
	background-color: var(--sith-surface);
	color: var(--sith-text);
	border: 1px solid var(--sith-border);
	border-radius: 6px;
}

.search-field::placeholder,
input::placeholder,
textarea::placeholder {
	color: var(--sith-text-muted);
}

/* Widgets / sidebar */
#secondary .widget,
.widget-area .widget {
	background-color: var(--sith-surface);
	border: 1px solid var(--sith-border);
	border-radius: 8px;
	color: var(--sith-text);
	padding: 20px;
	margin-bottom: 20px;
}

/* Widget boxes — the home page sidebar (Catégories, En Bref…) and the
   "Filtres" box of the Succès listings: same frame as the "Ajouté récemment"
   tiles — a 1px steel outline with the Pages tiles' chamfers (top-left +
   bottom-right), on a faint holo grid. Drawn by
   two clipped layers behind the content (::before = outline, ::after =
   background inset by 1px), as the widget markup comes from WordPress and
   has no inner box to clip. 21px padding = the old 20px + the old 1px
   border, so each widget keeps its size. */
#secondary .widget,
.widget-area .widget {
	--swtor-card-cut: 12px;
	position: relative;
	isolation: isolate;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 21px;
}
#secondary .widget::before,
#secondary .widget::after,
.widget-area .widget::before,
.widget-area .widget::after {
	content: '';
	position: absolute;
	z-index: -1;
	clip-path: polygon(
		var(--swtor-card-cut) 0, 100% 0,
		100% calc(100% - var(--swtor-card-cut)), calc(100% - var(--swtor-card-cut)) 100%,
		0 100%, 0 var(--swtor-card-cut)
	);
}
#secondary .widget::before,
.widget-area .widget::before {
	inset: 0;
	background: linear-gradient(160deg, #737b87, #25282e 35%, #25282e 70%, #4b515b);
}
#secondary .widget::after,
.widget-area .widget::after {
	inset: 1px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(185, 192, 202, .08), transparent 60%),
		repeating-linear-gradient(0deg, transparent 0 11px, rgba(185, 192, 202, .035) 11px 12px),
		repeating-linear-gradient(90deg, transparent 0 11px, rgba(185, 192, 202, .035) 11px 12px),
		var(--sith-surface);
}

#secondary .widget-title,
.widget-title,
.widget-area .widget h1,
.widget-area .widget h2,
.widget-area .widget h3,
.widget-area .widget h4 {
	color: var(--sith-red);
	font-family: var(--site-font-stack);
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	margin: 0 0 14px;
}

/* "En Bref" widget */
.swtor-briefs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.swtor-brief-item {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sith-border);
}
.swtor-brief-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
.swtor-brief-item p {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--sith-text);
	line-height: 1.5;
}
.swtor-brief-item a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Pagination */
.page-numbers,
.ast-pagination a,
.pagination a {
	background-color: var(--sith-surface);
	color: var(--sith-text);
	border: 1px solid var(--sith-border);
}
.page-numbers.current,
.ast-pagination a:hover,
.pagination a:hover {
	background-color: var(--sith-red);
	border-color: var(--sith-red);
	color: #fff;
}

/* Pied de page */
.site-footer,
.footer-widget-area,
.ast-small-footer {
	background-color: var(--sith-bg-alt) !important;
	border-top: 1px solid var(--sith-red-dark);
	color: var(--sith-text-muted);
}

.footer-widget-area .widget-title {
	color: var(--sith-red);
}

.ast-small-footer a {
	color: var(--sith-text);
}

/* Legal disclaimer row: smaller text + tighter row padding than Astra's
   default, since it's a long fixed legal notice rather than real content —
   no reason to give it as much vertical space as a normal footer line. It
   sits below .swtor-site-footer (astra_above_footer, fires first inside the
   same <footer>), so it now reads as a trailing colophon line at the very
   end of the page rather than being the footer's only visible content. */
.site-below-footer-wrap {
	padding: 8px 0 !important;
}
.ast-footer-copyright {
	font-size: 11.5px !important;
	line-height: 1.5;
	color: var(--sith-text-muted);
}

/* Main footer content: logo + description, three link columns, contact. */
.swtor-site-footer {
	margin: 0;
	padding: 48px 20px 32px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	gap: 32px;
	border-bottom: 1px solid var(--sith-border);
}
@media (max-width: 900px) {
	.swtor-site-footer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.swtor-site-footer { grid-template-columns: 1fr; }
}

.swtor-footer-logo {
	height: 96px;
	width: auto;
}
.swtor-footer-desc {
	margin: 14px 0 0;
	max-width: 320px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sith-text-muted);
}

.swtor-footer-col-title {
	color: var(--sith-red);
	font-family: var(--site-font-stack);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 16px;
}
.swtor-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.swtor-footer-links a {
	color: var(--sith-text);
	font-size: 13px;
}
.swtor-footer-links a:hover {
	color: var(--sith-red);
}

/* Blocs Gutenberg / Kadence courants */
.wp-block-group,
.wp-block-column,
.wp-block-cover {
	color: inherit;
}

.wp-block-table table,
.wp-block-quote {
	background-color: var(--sith-surface);
	border-color: var(--sith-border);
}

.wp-block-separator {
	border-color: var(--sith-border) !important;
}

/* Bouton "retour en haut" */
#ast-scroll-top {
	background-color: var(--sith-red) !important;
	color: #fff !important;
}
#ast-scroll-top:hover {
	background-color: var(--sith-red-dark) !important;
}