/*
 * Composants Forever : portail d'accueil + hub PvP.
 * Chargé uniquement quand AK_GAME === 'forever' (inc/assets.php).
 *
 * Les couleurs passent par les tokens de tokens.css / game-forever.css.
 * Seule exception, déclarée en tête du portail : la famille « bronze »
 * (libellés, puces, filets) de la maquette d'accueil, qui est un rôle que
 * les tokens ne couvraient pas — --ak-accent est nettement plus clair.
 */

/* ════════════════════════════════════════════════════════════════
   PORTAIL D'ACCUEIL
   ════════════════════════════════════════════════════════════════ */

.ak-fw-portal {
    --fw-bronze:      #9C7C59;
    --fw-rule:        rgba(156, 124, 89, 0.28);
    --fw-rule-strong: rgba(156, 124, 89, 0.35);
    --fw-rule-soft:   rgba(156, 124, 89, 0.22);
    --fw-edge:        #3B2618;
    --fw-pad:         clamp(20px, 5vw, 72px);

    max-width: 1440px;
    margin: 0 auto;
    background: var(--ak-bg);
    color: var(--ak-text);
    border: 1px solid var(--fw-edge);
    font-family: 'Alegreya', Georgia, serif;
    font-size: 17px;
    line-height: 1.75;
}

/* Titres autonomes. Blocksy colore les h2 avec --theme-heading-2-color (ici
   l'or, herite de la config transposee depuis retail) et leur pose un filet.
   La maquette les veut creme et sans filet : on neutralise explicitement au
   niveau de la classe, pour ne pas dependre de la config du Customizer. */
.ak-fw-portal h1,
.ak-fw-portal h2,
.ak-fw-portal .ak-fw-portal-title,
.ak-fw-portal .ak-fw-dossier-title,
.ak-fw-portal .ak-fw-news-title {
    font-family: 'Marcellus', Georgia, serif;
    font-weight: 400;
    color: var(--ak-text-strong);
    border: 0;
    padding: 0;
    text-decoration: none;
    background: none;
}

.ak-fw-portal h1::after,
.ak-fw-portal h2::before,
.ak-fw-portal h2::after {
    content: none;
    display: none;
}

.ak-fw-portal a {
    color: var(--ak-interactive);
    text-decoration: none;
    border-bottom: 1px solid rgba(63, 179, 214, 0.35);
}

.ak-fw-portal a:hover {
    color: var(--ak-accent);
    border-bottom-color: rgba(224, 180, 114, 0.55);
}

.ak-fw-portal a:focus-visible {
    outline: 2px solid var(--ak-interactive);
    outline-offset: 3px;
}

.ak-fw-eyebrow {
    font-size: 16px;
    letter-spacing: 0.2em;
    color: var(--fw-bronze);
    margin-bottom: 20px;
}

/* ── Hero + compte à rebours ──
   Hauteur volontairement reduite de moitie par rapport a la maquette : les
   chiffres a 104px repoussaient les deux dossiers sous la ligne de flottaison.
   Toutes les valeurs verticales de ce bloc sont donc a ~50 %. */
.ak-fw-portal-hero {
    border-bottom: 1px solid var(--fw-rule);
    border-left: 2px solid var(--ak-interactive);
    padding: clamp(18px, 2.5vw, 36px) var(--fw-pad) clamp(16px, 2vw, 30px);
}

.ak-fw-portal-title {
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.1;
    margin: 0 0 8px;
}

.ak-fw-portal-lead {
    margin: 0 0 clamp(16px, 1.9vw, 27px);
    max-width: 760px;
    color: var(--ak-text);
}

.ak-fw-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--fw-rule-strong);
    border-bottom: 1px solid var(--fw-rule-strong);
}

.ak-fw-countdown-cell {
    padding: clamp(10px, 1.2vw, 17px) clamp(12px, 1.6vw, 24px) clamp(9px, 1vw, 15px) clamp(9px, 1.2vw, 17px);
    border-right: 1px solid var(--fw-rule-soft);
}

.ak-fw-countdown-cell--days {
    padding-left: 0;
}

.ak-fw-countdown-cell--seconds {
    border-right: 0;
    padding-right: 0;
}

.ak-fw-countdown-value {
    font-family: 'Marcellus', Georgia, serif;
    font-size: clamp(25px, 3.6vw, 52px);
    line-height: 0.92;
    color: var(--ak-text-strong);
    font-variant-numeric: tabular-nums;
}

.ak-fw-countdown-cell--seconds .ak-fw-countdown-value {
    color: var(--fw-bronze);
}

.ak-fw-countdown-label {
    margin-top: clamp(4px, 0.6vw, 9px);
    font-size: clamp(13px, 1vw, 14px);
    letter-spacing: 0.18em;
    color: var(--fw-bronze);
}

.ak-fw-countdown-date,
.ak-fw-portal-state {
    margin-top: clamp(8px, 0.8vw, 11px);
    font-size: 15px;
    color: var(--fw-bronze);
}

.ak-fw-portal-state {
    margin-top: 8px;
    letter-spacing: 0.06em;
}

/* ── Dossiers ── */
.ak-fw-dossiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--fw-rule);
}

.ak-fw-dossier {
    position: relative;
    overflow: hidden; /* borne le filigrane au volet */
    background: var(--ak-surface);
    border-top: 2px solid transparent;
    padding: clamp(30px, 3.9vw, 56px) var(--fw-pad) clamp(28px, 3.6vw, 52px);
    transition: border-top-color 0.15s ease;
}

/* Le combat : brun martial. Seule entorse assumée à la palette marine —
   le PvP a sa propre couleur sans quitter la charte, le bronze et la
   typographie restant communs aux deux volets. */
.ak-fw-dossier--combat {
    --fw-rule: rgba(196, 160, 116, 0.28);
    background: #3A2619;
}

.ak-fw-dossier:first-child {
    border-right: 1px solid var(--fw-rule);
}

.ak-fw-dossier:hover {
    border-top-color: var(--fw-bronze);
}

/* Filigrane : très en retrait, il doit se deviner et jamais concurrencer
   le texte. Débordant volontairement du volet, pour suggérer un motif plus
   grand que le cadre. */
.ak-fw-dossier-mark {
    position: absolute;
    width: clamp(220px, 26vw, 340px);
    height: auto;
    color: var(--fw-bronze);
    opacity: 0.09;
    pointer-events: none;
}

.ak-fw-dossier--monde .ak-fw-dossier-mark {
    top: -60px;
    right: -70px;
}

.ak-fw-dossier--combat .ak-fw-dossier-mark {
    bottom: -80px;
    right: -60px;
}

/* Le contenu repasse au-dessus du filigrane. */
.ak-fw-dossier > *:not(.ak-fw-dossier-mark) {
    position: relative;
    z-index: 1;
}

.ak-fw-dossier-title {
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: 1.15;
    margin: 0 0 18px;
}

/* Filet court sous le titre, à la place d'une bordure pleine largeur :
   il ponctue sans découper le volet en deux.
   Sélecteur volontairement plus spécifique que la règle qui neutralise les
   ::after des h2 (plus haut) : sans ça, ce filet serait tué avec le reste. */
.ak-fw-portal .ak-fw-dossier-title::after {
    content: "";
    display: block;
    width: 78px;
    height: 1px;
    margin-top: 18px;
    background: var(--fw-bronze);
    opacity: 0.85;
}

.ak-fw-dossier-lead {
    margin: 0 0 26px;
    max-width: 460px;
}

.ak-fw-dossier-points {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ak-fw-dossier-points li {
    display: flex;
    gap: 14px;
    align-items: baseline;
}

.ak-fw-bullet {
    width: 6px;
    height: 6px;
    background: var(--fw-bronze);
    flex: 0 0 auto;
}

.ak-fw-dossier-link {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 19px;
}

/* ── Rangée des classes ── */
.ak-fw-classes {
    padding: clamp(26px, 3vw, 44px) var(--fw-pad) clamp(28px, 3.3vw, 48px);
    border-bottom: 1px solid var(--fw-rule);
}

/* Les neuf classes sur UNE rangée, comme la maquette. Le conteneur de
   contenu de Blocksy fait ~1075px utiles, soit ~108px par vignette une fois
   les huit gouttières retirées : le minimum est donc calé à 100px, sinon
   auto-fit retombe à huit colonnes et « Voleur » part seul à la ligne. */
.ak-fw-classes-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.ak-fw-class-card {
    border: 1px solid var(--fw-edge);
    border-top: 2px solid var(--class-color, var(--fw-bronze));
    background: transparent;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ak-text);
    /* Icône et nom centrés dans la vignette : sur une colonne, align-items
       gère l'axe horizontal. */
    align-items: center;
    text-align: center;
}

/* .ak-fw-portal a impose la couleur de lien : il faut une specificite
   superieure pour que le nom de classe reste creme et non cyan. */
.ak-fw-portal .ak-fw-class-card {
    color: var(--ak-text);
    border-bottom-color: var(--fw-edge);
}

.ak-fw-portal .ak-fw-class-card:hover {
    background: var(--ak-surface);
    border-color: var(--class-color, var(--fw-bronze));
    color: var(--ak-text-strong);
}

.ak-fw-class-mark {
    width: 11px;
    height: 11px;
    border: 1px solid var(--class-color, var(--fw-bronze));
    transform: rotate(45deg);
}

/* Les icônes sont des .webp transparents : le liseré à la couleur de classe
   les détache du fond et rappelle le filet supérieur de la vignette. */
.ak-fw-class-icon {
    width: 44px;
    height: 44px;
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--class-color, var(--fw-bronze)) 45%, transparent);
    filter: saturate(0.85);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.ak-fw-class-card:hover .ak-fw-class-icon {
    filter: saturate(1.1);
    box-shadow: 0 0 0 1px var(--class-color, var(--fw-bronze));
}

.ak-fw-class-name {
    font-family: 'Marcellus', Georgia, serif;
    /* 15px : « Démoniste », le nom le plus long, doit tenir sans césure dans
       une vignette de ~108px moins ses 20px de padding. */
    font-size: 15px;
    white-space: nowrap;
}

/* ── Actualités ── */
.ak-fw-news {
    /* Même fond que les dossiers (.ak-fw-dossier) : les deux blocs éditoriaux
       se répondent, et la rangée des classes reste sur le fond de page. */
    background: var(--ak-surface);
    padding: clamp(28px, 3.3vw, 48px) var(--fw-pad) clamp(32px, 3.9vw, 56px);
}

.ak-fw-news-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.ak-fw-news-title {
    font-size: clamp(24px, 2vw, 28px);
    margin: 0;
}

.ak-fw-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--fw-rule);
}

.ak-fw-news-list li {
    border-bottom: 1px solid var(--fw-rule);
}

.ak-fw-portal .ak-fw-news-list a {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 32px;
    padding: 20px 0;
    color: var(--ak-text);
    border-bottom: none;
}

.ak-fw-portal .ak-fw-news-list a:hover {
    color: var(--ak-text-strong);
}

.ak-fw-news-date {
    color: var(--fw-bronze);
    font-size: 16px;
}

.ak-fw-news-headline {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 21px;
}

/* ── Adaptations petites largeurs ── */
@media (max-width: 860px) {
    .ak-fw-dossiers {
        grid-template-columns: 1fr;
    }

    .ak-fw-dossier:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--fw-rule);
    }

    /* 2 × 2 : quatre colonnes de 104px ne tiennent pas sous 390px. */
    .ak-fw-countdown {
        grid-template-columns: 1fr 1fr;
    }

    .ak-fw-countdown-cell--days,
    .ak-fw-countdown-cell--hours {
        border-bottom: 1px solid var(--fw-rule-soft);
    }

    .ak-fw-countdown-cell--hours,
    .ak-fw-countdown-cell--seconds {
        border-right: 0;
        padding-right: 0;
    }

    .ak-fw-countdown-cell--minutes {
        padding-left: 0;
        border-right: 1px solid var(--fw-rule-soft);
    }

    /* Défilement horizontal plutôt que des cartes écrasées. */
    .ak-fw-classes-row {
        display: flex;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .ak-fw-class-card {
        flex: 0 0 auto;
        width: 104px;
    }

    .ak-fw-portal .ak-fw-news-list a {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ════════════════════════════════════════════════════════════════
   ÉLÉMENTS D'EN-TÊTE
   Rendus par [akalavolo_forever_countdown] et [akalavolo_forever_login],
   à déposer dans un élément « HTML » du constructeur d'en-tête Blocksy.
   Hors .ak-fw-portal : ils s'appuient directement sur les tokens.
   ════════════════════════════════════════════════════════════════ */

.ak-fw-hdr {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Aperçu du compte à rebours ──
   Libellé au-dessus, chiffres séparés par des deux-points, unité sous
   chaque nombre. L'esprit de la référence, mais dans notre typographie
   (Marcellus) et nos tokens — pas les couleurs de l'autre site. */
.ak-fw-hdr-countdown {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 14px;
    cursor: default;
}

.ak-fw-hdr-countdown-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ak-accent);
}

.ak-fw-hdr-countdown-units {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
}

.ak-fw-hdr-countdown-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 26px;
}

.ak-fw-hdr-countdown-num {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 19px;
    line-height: 1;
    color: var(--ak-text-strong);
    /* Chiffres de largeur fixe : sans ça, l'en-tête tressaute à chaque
       seconde quand un 1 remplace un 8. */
    font-variant-numeric: tabular-nums;
}

/* Une unité sur deux en bronze, comme la référence : ça donne du rythme
   sans recourir à une seconde police. */
.ak-fw-hdr-countdown-unit:nth-child(4n + 3) .ak-fw-hdr-countdown-num {
    color: var(--ak-accent);
}

.ak-fw-hdr-countdown-cap {
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ak-text-dim);
}

.ak-fw-hdr-countdown-sep {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 17px;
    line-height: 1;
    color: var(--ak-accent);
    opacity: 0.6;
}

/* ── Connexion Battle.net ──
   Bleu et forme de Blizzard, pour que le bouton soit reconnu au premier
   coup d'œil comme une connexion Battle.net et pas comme un bouton du site. */
.ak-fw-hdr-login {
    --bnet-blue: #148EFF;
    --bnet-blue-hi: #3BA4FF;

    gap: 9px;
    padding: 9px 20px;
    border: 0;
    border-radius: 6px;
    background: var(--bnet-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.ak-fw-hdr-login:hover,
.ak-fw-hdr-login:focus-visible {
    background: var(--bnet-blue-hi);
    color: #fff;
}

.ak-fw-hdr-login-icon {
    flex: 0 0 auto;
}

/* ── Compte connecté ── */
.ak-fw-hdr-account {
    position: relative;
}

.ak-fw-hdr-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ak-text-strong) 10%, transparent);
    color: var(--ak-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ak-fw-hdr-account-toggle:hover {
    background: color-mix(in srgb, var(--ak-text-strong) 18%, transparent);
}

.ak-fw-hdr-account-label {
    font-weight: 600;
}

.ak-fw-hdr-account-chevron {
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.ak-fw-hdr-account-toggle[aria-expanded="true"] .ak-fw-hdr-account-chevron {
    transform: rotate(180deg);
}

.ak-fw-hdr-account-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--ak-border-soft);
    border-radius: 10px;
    background: var(--ak-bg-deep);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.ak-fw-hdr-account-menu[hidden] {
    display: none;
}

.ak-fw-hdr-account-id {
    padding: 12px 14px 14px;
    font-size: 15px;
    border-bottom: 1px solid var(--ak-border-soft);
    margin-bottom: 6px;
}

.ak-fw-hdr-account-id-name {
    color: var(--ak-interactive);
    font-weight: 600;
}

/* Le discriminant s'efface derrière le nom, comme chez Blizzard. */
.ak-fw-hdr-account-id-disc {
    color: var(--ak-text-dim);
}

.ak-fw-hdr-account-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 6px;
    color: var(--ak-text);
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}

.ak-fw-hdr-account-action:hover {
    background: color-mix(in srgb, var(--ak-text-strong) 10%, transparent);
    color: var(--ak-text-strong);
}

/* Dans le panneau latéral mobile, un élément d'en-tête occupe toute la
   largeur : on le centre au lieu de le laisser collé à gauche. */
.ct-panel .ak-fw-hdr,
.ct-header [data-device="mobile"] .ak-fw-hdr {
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════
   TABLEAUX ET ENCADRES DU CONTENU
   base.css style les tableaux avec les gris de retail (#444, #2E2E2E,
   #3a3a3a), qui virent au boueux sur un fond marine. On reprend tout ici
   en tokens. forever.css chargeant apres base.css, aucun !important
   n'est necessaire.
   ════════════════════════════════════════════════════════════════ */

.entry-content .wp-block-table {
    margin: 32px 0;
    /* Un tableau large defile plutot que d'ecraser ses colonnes. */
    overflow-x: auto;
}

/* width:auto plutot que 100% : un tableau de 2 colonnes courtes (ex. Rang /
   Déblocage) n'a aucune raison d'etirer sa 2e colonne jusqu'au bord du
   conteneur. La largeur suit le contenu ; max-width empeche seulement le
   depassement. Un tableau dont le contenu depasse reellement le conteneur
   (beaucoup de colonnes, texte long) est rattrape par l'overflow-x:auto du
   .wp-block-table plus haut. */
.entry-content .wp-block-table table {
    width: auto;
    max-width: 100%;
    border: 0;
    border-collapse: collapse;
    color: var(--ak-text);
    font-size: 0.95rem;
}

/* Annule has-fixed-layout : ses colonnes en % forcaient deja un etirement
   pleine largeur independamment du contenu. Les colonnes se dimensionnent
   desormais sur leur contenu. */
.entry-content .wp-block-table table.has-fixed-layout {
    table-layout: auto;
}

/* ── En-tete ──
   Les th n'avaient aucune regle : ils gardaient le text-align:center du
   navigateur face a un corps aligne a gauche, d'ou l'impression de colonnes
   decalees. */
.entry-content .wp-block-table th {
    background: var(--ak-surface);
    color: var(--ak-accent);
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--ak-accent) 45%, transparent);
    white-space: nowrap;
}

/* ── Cellules ──
   Filets horizontaux seuls : une grille complete alourdit inutilement un
   tableau de donnees. */
.entry-content .wp-block-table td {
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid var(--ak-border-soft);
    text-align: left;
    vertical-align: top;
}

.entry-content .wp-block-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Alternance tres discrete : elle guide l'oeil sur les lignes longues sans
   se voir. */
.entry-content .wp-block-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--ak-text-strong) 3%, transparent);
}

.entry-content .wp-block-table tbody tr:hover td {
    background: color-mix(in srgb, var(--ak-accent) 7%, transparent);
}

/* Rien a prevoir pour la ligne d'en-tete : elle ne contient que des th,
   que ni le zebrage ni le survol ne ciblent. */

/* Alignements choisis dans l'editeur. */
.entry-content .wp-block-table .has-text-align-right { text-align: right; }
.entry-content .wp-block-table .has-text-align-center { text-align: center; }
.entry-content .wp-block-table .has-text-align-left { text-align: left; }

/* Chasse fixe sur les colonnes alignees a droite : les chiffres s'alignent
   verticalement d'une ligne a l'autre. Pas de couleur d'accent ici — un
   alignement a droite signale un nombre a lire, pas une emphase ; c'est au
   <strong> de l'editeur de porter l'insistance. */
.entry-content .wp-block-table td.has-text-align-right {
    font-variant-numeric: tabular-nums;
}

/* ── Encadres (blockquote) ──
   Sur ce site ils servent surtout d'avertissement de provenance
   (« Beta — mise a jour 1.60.1 »). On les traite donc comme une note et non
   comme une citation : pas d'italique, qui nuirait a la lecture. */
.entry-content blockquote,
.entry-content .wp-block-quote {
    margin: 28px 0;
    padding: 18px 22px;
    border: 0;
    border-left: 3px solid var(--ak-accent);
    border-radius: 0 var(--ak-radius, 3px) var(--ak-radius, 3px) 0;
    background: color-mix(in srgb, var(--ak-accent) 6%, transparent);
    color: var(--ak-text);
    font-style: normal;
    quotes: none;
}

.entry-content blockquote p {
    margin: 0;
}

.entry-content blockquote p + p {
    margin-top: 10px;
}

/* Le <strong> d'ouverture fait office de titre de l'encadre. */
.entry-content blockquote strong:first-child {
    color: var(--ak-accent);
}

.entry-content blockquote cite {
    display: block;
    margin-top: 10px;
    color: var(--ak-text-dim);
    font-size: 0.9em;
    font-style: normal;
}

/* ════════════════════════════════════════════════════════════════
   LARGEUR DU CONTENU
   Reprise de la regle qui vivait dans le CSS additionnel de retail.
   Elle ne retrecit PAS la barre laterale : elle retire la largeur maximale
   du conteneur pour que le contenu s'etale, ce qui rend la barre
   proportionnellement moins envahissante.
   Versionnee ici plutot que dans le champ CSS additionnel : ce champ a deja
   ete ecrase une fois sur Forever par deploy/clone-da-to-forever.sh.
   !important conserve : la regle se bat contre le CSS genere par Blocksy.
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
    main#main > .ct-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-left: 0 !important;
        padding-right: 6vw !important; /* garde une marge a droite */
    }
}

/* ════════════════════════════════════════════════════════════════
   SOMMAIRE LATERAL
   Rendu par [akalavolo_forever_sommaire], rempli par js/toc.js.
   Portage du sommaire de retail, qui vivait dans le CSS additionnel du
   Customizer avec ses couleurs en dur (#f0d351, #E6E0D4) : ici tout passe
   par les tokens, donc le bloc suit la palette Forever au lieu de ramener
   le jaune de retail sur un fond marine.
   ════════════════════════════════════════════════════════════════ */

.ak-fw-toc {
    padding: 10px 5px;
}

/* !important assume : la regle historique de base.css impose l'or, un filet
   et display:flex a tout h2, elle aussi en !important. Deux classes suffisent
   a la battre a egalite de poids. Pas d'exclusion dans base.css ici : la
   classe .sidebar-toc-widget existe aussi sur retail, l'y ajouter changerait
   son sommaire. */
.ak-fw-toc .ak-fw-toc-title {
    display: block !important;
    color: var(--ak-text-strong) !important;
    font-family: var(--ak-font-display, inherit) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 20px 10px !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    border-bottom: 2px solid color-mix(in srgb, var(--ak-accent) 30%, transparent) !important;
}

.ak-fw-toc #sidebar-toc-list,
.ak-fw-toc #sidebar-toc-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ak-fw-toc #sidebar-toc-list li {
    margin-bottom: 4px;
}

.ak-fw-toc #sidebar-toc-list li a {
    display: block;
    padding: 10px 15px;
    color: var(--ak-accent);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--ak-radius, 6px);
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ak-fw-toc #sidebar-toc-list li a:hover {
    background-color: color-mix(in srgb, var(--ak-text-strong) 6%, transparent);
    color: var(--ak-accent-hi);
    border-left-color: var(--ak-accent);
}

/* ── Sections depliantes (h2 portant des h3) ── */
.ak-fw-toc #sidebar-toc-list li.has-children {
    position: relative;
}

.ak-fw-toc #sidebar-toc-list li.has-children > a {
    position: relative;
    padding-right: 35px; /* reserve la place du chevron */
}

.ak-fw-toc #sidebar-toc-list li.has-children > a::after {
    content: "\203A"; /* › */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    color: var(--ak-accent);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.ak-fw-toc #sidebar-toc-list li.is-open > a::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Depliage anime. max-height plutot que height : la hauteur reelle n'est pas
   connue en CSS, et 1000px couvre largement une section. */
.ak-fw-toc #sidebar-toc-list li ul {
    padding-left: 15px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                margin 0.4s ease;
}

.ak-fw-toc #sidebar-toc-list li.is-open > ul {
    max-height: 1000px;
    opacity: 1;
    margin: 8px 0 12px;
}

.ak-fw-toc #sidebar-toc-list li ul li a {
    font-size: 0.9em;
    color: var(--ak-text);
    opacity: 0.7;
    padding: 4px 10px;
    border-left: 1px solid color-mix(in srgb, var(--ak-accent) 30%, transparent);
    border-radius: 0;
}

.ak-fw-toc #sidebar-toc-list li ul li a:hover {
    opacity: 1;
    color: var(--ak-accent);
}

/* ── Surbrillance au defilement (scrollspy de toc.js) ── */
.ak-fw-toc #sidebar-toc-list li.active-scroll > a {
    color: var(--ak-accent);
    font-weight: 700;
}

.ak-fw-toc #sidebar-toc-list li.active-scroll {
    margin-left: -2px;
    border-left: 2px solid var(--ak-accent);
    background: color-mix(in srgb, var(--ak-accent) 5%, transparent);
}

/* Respecte le reglage systeme « reduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .ak-fw-toc #sidebar-toc-list li a,
    .ak-fw-toc #sidebar-toc-list li ul,
    .ak-fw-toc #sidebar-toc-list li.has-children > a::after {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════
   HUB PvP
   ════════════════════════════════════════════════════════════════ */

.ak-fw {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px;
}

.ak-fw-section-title {
    font-family: var(--ak-font-display, inherit);
    color: var(--ak-accent);
    font-size: 1.4rem;
    margin: 0 0 16px;
}

.ak-fw-hero-title {
    font-family: var(--ak-font-display, inherit);
    font-size: 2.4rem;
    color: var(--ak-text-strong);
    margin: 0 0 16px;
}

.ak-fw-lead {
    color: var(--ak-text-muted);
    line-height: 1.6;
}

.ak-fw-empty {
    color: var(--ak-text-dim);
    font-style: italic;
    padding: 12px 0;
}

.ak-fw-pvp-block {
    margin-bottom: 40px;
}

.ak-fw-rank-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ak-fw-rank-row {
    display: grid;
    grid-template-columns: 32px 1fr 2fr auto;
    align-items: center;
    gap: 12px;
    background: var(--ak-surface);
    border: 1px solid var(--ak-border-soft);
    border-radius: var(--ak-radius, 4px);
    padding: 8px 12px;
}

.ak-fw-rank-number {
    color: var(--ak-gold);
    font-weight: 700;
    text-align: center;
}

.ak-fw-rank-name {
    color: var(--ak-text-strong);
}

.ak-fw-rank-rewards {
    color: var(--ak-text-muted);
    font-size: 0.9rem;
}

.ak-fw-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ak-fw-bg-card {
    background: var(--ak-surface);
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius, 4px);
    padding: 16px;
}

.ak-fw-bg-name {
    color: var(--ak-text-strong);
    margin: 0 0 4px;
}

.ak-fw-bg-players {
    color: var(--ak-text-dim);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.ak-fw-bg-desc {
    color: var(--ak-text-muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .ak-fw-rank-row {
        grid-template-columns: 28px 1fr;
        row-gap: 4px;
    }

    .ak-fw-rank-rewards {
        grid-column: 2;
    }
}

/* ── Badge de provenance (Ak_Fw_Provenance::badge_html()) ── */
.ak-fw-provenance {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--ak-border);
    color: var(--ak-text-dim);
}

.ak-fw-provenance--officielle {
    color: var(--ak-positive);
    border-color: var(--ak-positive);
}

.ak-fw-provenance--beta,
.ak-fw-provenance--dataminee {
    color: var(--ak-gold);
    border-color: var(--ak-gold);
}

.ak-fw-provenance--experimentale {
    color: var(--ak-negative);
    border-color: var(--ak-negative);
}