/* =========================================================================
   AetherForge — feuille de style du theme.

   L identite est celle du launcher et du jeu : acier sombre et obsidienne,
   cyan d ame pour l accent, or pour l action principale. Les cadres sont les
   memes sprites que ceux du launcher (assets/images/ui), decoupes en 9 cases
   pour suivre n importe quelle taille de bloc. La typographie d affichage est
   condensee, en capitales espacees — c est la voix de la coque du launcher.

   Ce qui NE change pas, et pourquoi : les noms de classes. Le launcher injecte
   l historique des versions dans le CMS avec ce balisage (`.af-version`), les
   extensions wiki et candidature s appuient sur les variables `--af-*` et
   `--wiki-*`. Refondre l apparence sans casser ces contrats, c est refondre la
   feuille, pas le vocabulaire.

   Le site est sombre par nature ; un seul theme, pose en clair.
   ========================================================================= */

/* --- Fontes auto-hebergees --------------------------------------------
   Barlow Condensed tient le role de Bahnschrift (launcher) : grotesque
   condensee, chasse etroite, lisible en capitales espacees. Inter porte le
   texte courant, comme dans le CMS. Aucun appel externe : le site doit
   s afficher identique sans reseau tiers. */

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-700.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

/* --- Jetons ------------------------------------------------------------- */

:root {
    /* Fonds — memes valeurs que la coque du launcher, du plus profond au
       plus clair. L elevation se lit par le ton, pas par l ombre. */
    --af-abysse:   #070b0d;
    --af-nuit:     #0a1013;
    --af-obsidien: #10171b;
    --af-acier:    #162226;
    --af-acier-up: #1b2c30;

    /* Accents : un cyan, un or. Rien d autre ne brille. */
    --af-primaire:   #43d7d2;
    --af-primaire-9: #24aaa8;
    --af-secondaire: #2a8a87;
    --af-accent:     #6ae9e4;
    --af-or:         #d8ae5e;
    --af-or-clair:   #f3d68e;
    --af-or-sombre:  #b9934f;

    /* Palette d etat : conservee pour les types de changements et les
       encadres du wiki, accordee au fond cyan/acier. */
    --mc-herbe:     #43d7d2;
    --mc-terre:     #1b4a4d;
    --mc-pierre:    #6f8385;
    --mc-diamant:   #69ddd8;
    --mc-or:        #d8ae5e;
    --mc-emeraude:  #4cc76a;
    --mc-redstone:  #e05252;
    --mc-lapis:     #2a8a87;
    --mc-bois:      #3a4f52;

    /* Encre. Jamais #fff : sur l obsidienne, le blanc pur halote. */
    --af-encre:  #e3e9e8;
    --af-texte:  #c9d4d3;
    --af-doux:   #8c9b9d;
    --af-eteint: #5f6f71;

    --af-trait:    rgba(104, 151, 153, .12);
    --af-trait-up: rgba(116, 165, 166, .24);
    --af-focus:    rgba(79, 219, 215, .48);
    --af-surface:  rgba(16, 23, 27, .72);

    /* Une seule suite d espacements. */
    --pas-1: .25rem;
    --pas-2: .5rem;
    --pas-3: .75rem;
    --pas-4: 1rem;
    --pas-6: 1.5rem;
    --pas-8: 2rem;
    --pas-12: 3rem;
    --pas-16: 4rem;
    --pas-24: 6rem;

    /* Rayons courts : de l acier taille, pas du plastique. */
    --rayon:    3px;
    --rayon-lg: 4px;
    --rayon-xl: 4px;

    --mesure: 65ch;
    --large:  80rem;

    /* Typographies. */
    --af-affichage: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
    --af-corps:     "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --af-mono:      ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Sprites du launcher. */
    --ui-panel:    url("../images/ui/frame-panel.webp");
    --ui-or:       url("../images/ui/frame-launch-gold.webp");
    --ui-nav:      url("../images/ui/frame-nav-neutral.webp");
    --ui-nav-on:   url("../images/ui/frame-nav-active.webp");
    --ui-divider:  url("../images/ui/divider-gem.webp");
    --ui-diamant:  url("../images/ui/diamond-cyan.webp");
    --ui-diamant-or: url("../images/ui/diamond-gold.webp");
    --ui-crest:    url("../images/ui/crest-hourglass.webp");
    --ui-texture:  url("../images/ui/texture-panel-obsidian.webp");
    --ui-shell-haut: url("../images/ui/shell-top-fixed.webp");
    --ui-shell-bas:  url("../images/ui/shell-bottom-fixed.webp");

    /* Ombre : posee, jamais flottante. */
    --bloc:    0 10px 24px rgba(0, 0, 0, .55);
    --bloc-up: 0 14px 30px rgba(0, 0, 0, .65);
}

/* --- Socle ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    /* Couleur posee explicitement : si une image manque, la page reste
       sombre au lieu de repasser en blanc avec du texte clair. */
    background-color: var(--af-abysse);
    background-image:
        linear-gradient(180deg, rgba(4, 8, 10, .40), rgba(3, 7, 9, .55)),
        var(--ui-texture);
    background-size: auto, 320px 320px;
    background-attachment: fixed;
    color: var(--af-texte);
    font-family: var(--af-corps);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--af-primaire); text-decoration: none; }
a:hover { color: var(--af-accent); }

:focus-visible {
    outline: 2px solid var(--af-primaire);
    outline-offset: 3px;
    border-radius: var(--rayon);
}

.af-visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

code, kbd, .af-mono {
    font-family: var(--af-mono);
    font-variant-numeric: tabular-nums;
}

/* --- Typographie -------------------------------------------------------- */

h1, h2, h3, h4 {
    margin: 0 0 var(--pas-4);
    color: var(--af-encre);
    font-family: var(--af-affichage);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); letter-spacing: .04em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: .1em; }
h3 { font-size: 1.2rem; letter-spacing: .08em; }
h4 { font-size: .95rem; letter-spacing: .14em; color: var(--af-primaire); }
p  { margin: 0 0 var(--pas-4); }

.af-mesure { max-width: var(--mesure); }

/* Les titres de section en cyan, comme « SERVEUR EN LIGNE » sur le
   launcher : un seul ton, pas de degrade. */
.af-degrade,
.af-degrade--marque {
    color: var(--af-primaire);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.af-surtitre {
    display: block;
    margin-bottom: var(--pas-3);
    color: var(--af-doux);
    font-family: var(--af-affichage);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* --- Structure ---------------------------------------------------------- */

.af-conteneur {
    width: 100%;
    max-width: var(--large);
    margin-inline: auto;
    padding-inline: var(--pas-6);
}

.af-section { padding-block: var(--pas-24); position: relative; }
.af-section--sombre { background: rgba(5, 9, 11, .55); }

/* Entre deux sections, une ligne d acier fine : le sprite de coque du
   launcher porte un ornement a son bout gauche, qui sur une page fluide
   se lisait comme un defaut. La coque ne coiffe donc que l en-tete. */
.af-section--sombre::before,
.af-section--sombre::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(116, 165, 166, .38) 12%, rgba(116, 165, 166, .38) 88%, transparent);
    pointer-events: none;
}
.af-section--sombre::before { top: 0; }
.af-section--sombre::after  { bottom: 0; }

.af-entete-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pas-3);
    margin-bottom: var(--pas-16);
    text-align: center;
}
.af-entete-section p {
    margin: 0;
    max-width: 44rem;
    color: var(--af-doux);
    font-size: 1.1rem;
}
/* Le separateur a gemme du launcher, sous chaque titre de section. */
.af-entete-section h2::after,
.af-entete-section h1::after {
    content: "";
    display: block;
    width: min(100%, 28rem);
    height: 24px;
    margin: var(--pas-3) auto 0;
    background: var(--ui-divider) center / contain no-repeat;
}

/* --- Cadres : le sprite 9 cases du launcher --------------------------- */

.af-cadre,
.af-carte,
.af-etape,
.af-etat__case,
.af-version__corps,
.af-fiche-serveur,
.af-chiffre,
.af-repli,
.af-acces-launcher {
    border: 10px solid transparent;
    border-image: var(--ui-panel) 80 / 10px repeat;
    background:
        linear-gradient(rgba(8, 13, 15, .84), rgba(8, 13, 15, .9)),
        var(--ui-texture) center / 320px 320px repeat;
    background-clip: padding-box;
    box-shadow: var(--bloc);
}

/* --- Boutons ------------------------------------------------------------ */

.af-bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-2);
    min-height: 3.25rem;
    padding: var(--pas-3) var(--pas-8);
    border: 1px solid var(--af-trait-up);
    border-radius: var(--rayon);
    background: linear-gradient(180deg, var(--af-acier), var(--af-obsidien));
    color: var(--af-encre);
    font-family: var(--af-affichage);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: var(--bloc);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, color .14s ease;
}
.af-bouton:hover {
    transform: translateY(-1px);
    border-color: var(--af-primaire);
    color: var(--af-accent);
    box-shadow: var(--bloc-up);
}
.af-bouton:active { transform: translateY(0); box-shadow: var(--bloc); }

/* L action principale porte le cadre or du launcher (« Entrer dans
   AetherForge »). Le sprite s etire sur le bouton ; le texte est or. */
.af-bouton--herbe,
.af-bouton--marque {
    min-height: 3.75rem;
    padding: var(--pas-4) var(--pas-12);
    border: 0;
    border-radius: 0;
    background: rgba(9, 13, 15, .92);
    color: var(--af-or-clair);
    font-size: 1.25rem;
    letter-spacing: .14em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
}
.af-bouton--herbe::before,
.af-bouton--marque::before {
    content: "";
    position: absolute;
    inset: -8px -10px;
    background: var(--ui-or) center / 100% 100% no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
    transition: filter .14s ease;
}
.af-bouton--herbe:hover,
.af-bouton--marque:hover {
    color: #fff1c8;
    transform: translateY(-1px);
}
.af-bouton--herbe:hover::before,
.af-bouton--marque:hover::before {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)) brightness(1.12);
}

/* Deux boutons cote a cote ou empiles : le cadre or deborde de son bouton,
   il lui faut de l air. */
.af-bouton + .af-bouton { margin-left: var(--pas-3); }
@media (max-width: 40rem) {
    .af-bouton { width: 100%; }
    .af-bouton + .af-bouton { margin: var(--pas-4) 0 0; }
}

.af-bouton--pierre {
    background: linear-gradient(180deg, var(--af-acier), var(--af-obsidien));
    border-color: var(--af-trait-up);
    color: var(--af-texte);
}
.af-bouton--pierre:hover { color: var(--af-accent); }

/* --- En-tete ------------------------------------------------------------ */

.af-tete {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    background: rgba(7, 11, 13, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--af-trait-up);
}
/* Le rail superieur du launcher, en fine coque metallique. */
.af-tete::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 13px;
    background: var(--ui-shell-bas) center / 100% 13px no-repeat;
    pointer-events: none;
}
.af-tete__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pas-6);
    height: 4.5rem;
}
.af-marque {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-3);
    color: var(--af-encre);
    font-family: var(--af-affichage);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.af-marque:hover { color: var(--af-accent); }
.af-marque img { width: 2.5rem; height: 2.5rem; border-radius: 0; }

/* Navigation : chaque entree est un onglet du rail, avec le cadre sprite
   du launcher, actif en cyan au survol. */
.af-nav { display: flex; align-items: center; gap: var(--pas-2); }
.af-nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.af-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: 0 var(--pas-4);
    color: var(--af-doux);
    font-family: var(--af-affichage);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--ui-nav) center / 100% 100% no-repeat;
    transition: color .14s ease;
}
.af-nav a:hover,
.af-nav a[aria-current="page"] {
    color: var(--af-accent);
    background-image: var(--ui-nav-on);
}

/* Bouton de copie de l adresse. */
.af-ip {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-2);
    padding: var(--pas-2) var(--pas-4);
    border: 1px solid var(--af-trait-up);
    border-radius: var(--rayon);
    background: var(--af-obsidien);
    color: var(--af-primaire);
    font-family: var(--af-mono);
    font-size: .9rem;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.af-ip:hover { border-color: var(--af-primaire); background: var(--af-acier); }
.af-ip[data-copie="oui"] { border-color: var(--mc-emeraude); color: var(--mc-emeraude); }
.af-ip__etat { font-size: .8rem; }
.af-ip--pleine { width: 100%; justify-content: center; margin-top: var(--pas-2); }

.af-burger {
    display: none;
    padding: var(--pas-2);
    border: 1px solid var(--af-trait-up);
    border-radius: var(--rayon);
    background: var(--af-obsidien);
    color: var(--af-primaire);
    cursor: pointer;
}

.af-nav-mobile {
    display: none;
    border-top: 1px solid var(--af-trait-up);
    background: rgba(7, 11, 13, .96);
}
.af-nav-mobile[data-ouvert="oui"] { display: block; }
.af-nav-mobile ul { list-style: none; margin: 0; padding: var(--pas-3); }
.af-nav-mobile a {
    display: block;
    padding: var(--pas-3) var(--pas-4);
    border-bottom: 1px solid var(--af-trait);
    color: var(--af-texte);
    font-family: var(--af-affichage);
    font-size: 1.05rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.af-nav-mobile a:hover { color: var(--af-accent); background: var(--af-obsidien); }

@media (max-width: 60rem) {
    .af-nav { display: none; }
    .af-burger { display: block; }
}

/* --- Hero --------------------------------------------------------------- */

.af-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding-block: 8rem var(--pas-16);
    overflow: hidden;
    text-align: center;
}
.af-hero__fond {
    position: absolute;
    inset: 0;
    background-color: var(--af-abysse);
    background-size: cover;
    background-position: center top;
    filter: saturate(.95) contrast(1.05);
    transform: scale(1.01);
}
.af-hero__voile {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(6, 14, 22, .10), rgba(5, 9, 12, .72) 70%),
        linear-gradient(to bottom, rgba(4, 7, 9, .30), rgba(7, 11, 13, .70) 60%, var(--af-abysse) 100%);
}
.af-hero__corps {
    position: relative;
    z-index: 1;
    max-width: 66rem;
    margin-inline: auto;
    padding: var(--pas-8);
}

/* Decor flottant : conserve pour compatibilite, desactive visuellement. */
.af-blocs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.af-bloc-flottant { display: none; }

.af-etiquettes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pas-3);
    margin-bottom: var(--pas-8);
}
.af-jeton {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-2);
    padding: var(--pas-2) var(--pas-4);
    border: 1px solid var(--af-trait-up);
    border-radius: var(--rayon);
    background: rgba(10, 16, 19, .82);
    color: var(--af-texte);
    font-family: var(--af-affichage);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.af-jeton--vivant { border-color: rgba(67, 215, 210, .4); color: var(--af-primaire); }
.af-jeton--bleu   { color: var(--af-texte); }
.af-jeton--or     { border-color: rgba(216, 174, 94, .45); color: var(--af-or); }

/* Pastille d etat : elle bat quand le serveur repond. */
.af-pouls { position: relative; display: inline-flex; width: .55rem; height: .55rem; }
.af-pouls::before,
.af-pouls::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--mc-emeraude);
}
.af-pouls::before { animation: af-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.af-pouls--eteint::before { animation: none; opacity: 0; }
.af-pouls--eteint::after { background: var(--af-eteint); }
@keyframes af-ping {
    75%, 100% { transform: scale(2.4); opacity: 0; }
}

.af-hero__titre {
    display: flex;
    justify-content: center;
    margin: 0 auto var(--pas-4);
}
.af-hero__logo {
    width: min(90vw, 40rem);
    height: auto;
    filter:
        drop-shadow(0 5px 0 rgba(0, 0, 0, .72))
        drop-shadow(0 16px 30px rgba(0, 0, 0, .6));
}
/* Le separateur a gemme sous le logo, comme sous le titre du launcher. */
.af-hero__titre::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(min(90vw, 40rem) * .37);
    width: min(80vw, 30rem);
    height: 26px;
    background: var(--ui-divider) center / contain no-repeat;
    pointer-events: none;
}

.af-accroche {
    margin: var(--pas-6) 0 var(--pas-3);
    color: var(--af-primaire);
    font-family: var(--af-affichage);
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.af-sous-titre {
    max-width: 46rem;
    margin: 0 auto var(--pas-12);
    color: var(--af-texte);
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}
.af-sous-titre strong { color: var(--af-or); font-weight: 600; }

/* --- Chiffres du pack --------------------------------------------------- */

.af-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--pas-4);
    max-width: 44rem;
    margin: 0 auto var(--pas-12);
}
.af-chiffre {
    padding: var(--pas-3) var(--pas-2);
    text-align: center;
    transition: transform .14s ease;
}
.af-chiffre:hover { transform: translateY(-2px); }
.af-chiffre__icone { font-size: 1.5rem; line-height: 1; margin-bottom: var(--pas-2); }
.af-chiffre__valeur {
    color: var(--af-encre);
    font-family: var(--af-affichage);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.af-chiffre__libelle {
    color: var(--af-doux);
    font-family: var(--af-affichage);
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* Les couleurs de matiere disparaissent : un seul cyan pour la valeur qui
   compte, l or pour ce qui distingue. */
.af-chiffre--terre .af-chiffre__valeur,
.af-chiffre--lapis .af-chiffre__valeur,
.af-chiffre--emeraude .af-chiffre__valeur { color: var(--af-primaire); }
.af-chiffre--redstone .af-chiffre__valeur { color: var(--af-or); }

/* --- Mentions sous les boutons ------------------------------------------- */

.af-mention-liste {
    margin: var(--pas-4) 0 var(--pas-6);
    color: var(--af-doux);
    font-size: .92rem;
}
.af-mention-liste strong { color: var(--af-or); }

.af-acces-launcher {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-2);
    padding: var(--pas-2) var(--pas-4);
    color: var(--af-primaire);
    font-family: var(--af-affichage);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Adresse du serveur -------------------------------------------------- */

.af-adresse {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pas-4);
    padding: var(--pas-3) var(--pas-6);
    border: 1px solid var(--af-trait-up);
    border-radius: var(--rayon);
    background: var(--af-obsidien);
}
.af-adresse__libelle { color: var(--af-doux); font-family: var(--af-affichage); letter-spacing: .1em; text-transform: uppercase; }
.af-adresse__valeur { color: var(--af-or); font-family: var(--af-mono); font-weight: 600; font-size: 1.1rem; }
.af-adresse__valeur--port { color: var(--af-primaire); }

/* --- Cartes ------------------------------------------------------------- */

.af-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--pas-6);
}
.af-grille--essentiel { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.af-carte {
    padding: var(--pas-4);
    transition: transform .14s ease, box-shadow .14s ease;
}
.af-carte:hover { transform: translateY(-2px); box-shadow: var(--bloc-up); }
.af-carte--essentielle { min-height: 100%; }
.af-carte h3 {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    margin-bottom: var(--pas-4);
    padding-bottom: var(--pas-3);
    border-bottom: 1px solid var(--af-trait-up);
    color: var(--af-primaire);
}

/* Catalogue de mods : nom et role. */
.af-carte dl { margin: 0; }
.af-carte dt { margin-top: var(--pas-3); color: var(--af-encre); font-weight: 600; font-size: .95rem; }
.af-carte dt:first-child { margin-top: 0; }
.af-carte dd { margin: 0; color: var(--af-doux); font-size: .87rem; }

/* Pli « explorer tout le pack ». */
.af-repli {
    max-width: 64rem;
    margin: var(--pas-8) auto 0;
}
.af-repli > summary {
    padding: var(--pas-3) var(--pas-6);
    color: var(--af-primaire);
    font-family: var(--af-affichage);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    list-style-position: inside;
}
.af-repli > summary:hover { color: var(--af-accent); }
.af-repli[open] > summary { border-bottom: 1px solid var(--af-trait-up); }
.af-repli__contenu { margin: 0; padding: var(--pas-6) var(--pas-2) var(--pas-2); }
.af-repli--versions { max-width: 72rem; }

/* --- Guide en etapes ----------------------------------------------------- */

.af-etapes { display: grid; gap: var(--pas-6); counter-reset: af-etape; max-width: 56rem; margin-inline: auto; }
.af-etape {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: var(--pas-6);
    align-items: start;
    padding: var(--pas-4);
}
/* Le numero d etape : un losange cyan, comme les puces du launcher. */
.af-etape::before {
    counter-increment: af-etape;
    content: counter(af-etape);
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    background: var(--ui-diamant) center / contain no-repeat;
    color: var(--af-encre);
    font-family: var(--af-affichage);
    font-size: 1.35rem;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0, 0, 0, .95), 0 1px 2px rgba(0, 0, 0, .9);
}
.af-etape h3 { margin-bottom: var(--pas-2); color: var(--af-encre); }
.af-etape p:last-child { margin-bottom: 0; }
.af-etape small { color: var(--af-doux); }

/* --- Etat du serveur ----------------------------------------------------- */

.af-etat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--pas-6);
    max-width: 62rem;
    margin: 0 auto var(--pas-12);
}
.af-etat__case { padding: var(--pas-4); text-align: center; }
.af-etat__valeur {
    margin-bottom: var(--pas-1);
    color: var(--af-encre);
    font-family: var(--af-affichage);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.af-etat__case:first-child .af-etat__valeur { color: var(--af-primaire); }
.af-etat__libelle {
    margin: 0;
    color: var(--af-doux);
    font-family: var(--af-affichage);
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.af-fiche-serveur {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--pas-8);
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--pas-6);
    text-align: center;
}
.af-fiche-serveur dt {
    margin-bottom: var(--pas-2);
    color: var(--af-doux);
    font-family: var(--af-affichage);
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.af-fiche-serveur dd {
    margin: 0;
    color: var(--af-encre);
    font-family: var(--af-affichage);
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 600;
    letter-spacing: .04em;
}
.af-fiche-serveur > div:nth-child(1) dd { color: var(--af-or); }
.af-fiche-serveur > div:nth-child(2) dd { color: var(--af-primaire); }

/* --- Historique des versions ---------------------------------------------
   Meme lecture que « Dernieres nouveautes » sur le launcher : un embleme
   cyan, la version en capitales cyan, la date discrete a droite. */

.af-histo { position: relative; max-width: 52rem; margin-inline: auto; }
.af-histo::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 1.5rem;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--af-trait-up) 10%, var(--af-trait-up) 90%, transparent);
}
.af-version {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--pas-6);
    margin-bottom: var(--pas-8);
}
.af-version__pastille {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: transparent;
    background: var(--ui-diamant) center / 2rem 2rem no-repeat;
}
.af-version__corps {
    padding: var(--pas-4);
    transition: box-shadow .14s ease;
}
.af-version__corps:hover { box-shadow: var(--bloc-up); }
.af-version__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pas-3);
    margin-bottom: var(--pas-3);
    padding-bottom: var(--pas-3);
    border-bottom: 1px solid var(--af-trait-up);
}
.af-version__num {
    color: var(--af-or);
    font-family: var(--af-affichage);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.af-version__nom {
    color: var(--af-encre);
    font-size: .95rem;
    font-weight: 600;
}
.af-version__date {
    margin-left: auto;
    color: var(--af-doux);
    font-family: var(--af-mono);
    font-size: .8rem;
}

.af-version ul { margin: 0; padding: 0; list-style: none; }
.af-version li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--pas-2);
    align-items: baseline;
    margin-bottom: var(--pas-2);
    font-size: .92rem;
    color: var(--af-texte);
}
.af-version li b {
    font-family: var(--af-affichage);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.af-version li[data-type="add"] b,
.af-version li[data-type="new"] b    { color: var(--mc-emeraude); }
.af-version li[data-type="change"] b { color: var(--af-primaire); }
.af-version li[data-type="fix"] b    { color: var(--af-or); }
.af-version li[data-type="remove"] b { color: var(--mc-redstone); }

/* --- Pied de page -------------------------------------------------------- */

.af-pied {
    position: relative;
    padding-block: var(--pas-12);
    border-top: 1px solid var(--af-trait-up);
    background: rgba(5, 9, 11, .8);
}
.af-pied::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(116, 165, 166, .38) 12%, rgba(116, 165, 166, .38) 88%, transparent);
    pointer-events: none;
}
.af-pied__haut {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--pas-8);
    margin-bottom: var(--pas-8);
}
.af-pied .af-marque { font-size: 1.4rem; }
.af-pied h4 { margin-bottom: var(--pas-4); }
.af-pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pas-2); }
.af-pied a { color: var(--af-doux); }
.af-pied a:hover { color: var(--af-accent); }
.af-pied dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--pas-2) var(--pas-3); }
.af-pied dt { color: var(--af-eteint); }
.af-pied dd { margin: 0; color: var(--af-doux); }
.af-pied__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pas-3);
    padding-top: var(--pas-8);
    border-top: 1px solid var(--af-trait);
    color: var(--af-eteint);
    font-size: .87rem;
}

@media (max-width: 52rem) {
    .af-pied__haut { grid-template-columns: 1fr; }
    .af-grille--essentiel { grid-template-columns: 1fr; }
    .af-etape, .af-version { grid-template-columns: 1fr; }
    .af-histo::before { display: none; }
    .af-version__pastille { display: none; }
    .af-marque > span { display: none; }
    .af-repli__contenu { padding: var(--pas-4) 0 0; }
}

/* --- Contenu long (pages du CMS) ----------------------------------------- */

.af-page { padding-block: 8rem var(--pas-24); }
.af-page__corps { max-width: var(--mesure); }
.af-page__corps :is(h2, h3) { margin-top: var(--pas-8); }
.af-page__corps table { display: block; overflow-x: auto; width: 100%; }

/* --- Candidature (l extension apporte sa feuille, pilotee par --af-*) -- */

.af-alerte {
    padding: var(--pas-3) var(--pas-4);
    border: 1px solid rgba(224, 82, 82, .5);
    border-radius: var(--rayon);
    background: rgba(224, 82, 82, .12);
    color: #ffb4b4;
}
.af-formulaire input:not([type="radio"]):not([type="checkbox"]),
.af-formulaire textarea,
.af-formulaire select {
    width: 100%;
    padding: var(--pas-3) var(--pas-4);
    border: 1px solid var(--af-trait-up);
    border-radius: var(--rayon);
    background: var(--af-obsidien);
    color: var(--af-encre);
    font: inherit;
}
.af-formulaire input:focus,
.af-formulaire textarea:focus,
.af-formulaire select:focus {
    outline: none;
    border-color: var(--af-primaire);
    box-shadow: 0 0 0 3px var(--af-focus);
}
.af-formulaire label,
.af-formulaire legend {
    display: block;
    margin-bottom: var(--pas-2);
    color: var(--af-doux);
    font-family: var(--af-affichage);
    font-size: .9rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.af-formulaire button[type="submit"] { margin-top: var(--pas-4); }

/* --- Wiki -----------------------------------------------------------------
   Le module Wiki pilote sa mise en forme par des variables : on lui donne
   l identite du site — encre, cyan, or, et des encadres lisibles sur
   l obsidienne. */

/* Prefixe `main` : la feuille du module est chargee apres le theme et
   redefinit ces memes variables ; a specificite egale elle gagnerait. */
main .wiki {
    --wiki-encre:     var(--af-encre);
    --wiki-doux:      var(--af-doux);
    --wiki-trait:     var(--af-trait-up);
    --wiki-surface:   rgba(16, 23, 27, .8);
    --wiki-accent:    var(--af-primaire);
    --wiki-astuce:    var(--mc-emeraude);
    --wiki-attention: var(--af-or);
    --wiki-info:      var(--af-primaire);
}

.af-tete + main .wiki { padding-top: 7rem; }
.af-tete + main .wiki :is(h1, h2, h3, h4)[id] { scroll-margin-top: 6.5rem; }
.wiki-sommaire { top: 6rem; }

/* Les cartes du sommaire et la navigation laterale portent le cadre du
   launcher, comme le reste du site. */
main .wiki-carte,
main .wiki-nav,
main .wiki-sommaire {
    border: 10px solid transparent;
    border-image: var(--ui-panel) 80 / 10px repeat;
    border-radius: 0;
    background:
        linear-gradient(rgba(8, 13, 15, .86), rgba(8, 13, 15, .9)),
        var(--ui-texture) center / 320px 320px repeat;
    background-clip: padding-box;
}
main .wiki-nav__lien.est-actif {
    color: var(--af-accent);
    background: rgba(67, 215, 210, .10);
    border-left: 2px solid var(--af-primaire);
    border-radius: 0;
}
main .wiki-nav__accueil,
main .wiki-sommaire__titre { color: var(--af-primaire); font-family: var(--af-affichage); letter-spacing: .12em; text-transform: uppercase; }
main .wiki-entete h1 { color: var(--af-primaire); }
main .wiki-corps__titre { color: var(--af-encre); }
main .wiki-badge {
    padding: .1rem var(--pas-2);
    border: 1px solid rgba(216, 174, 94, .5);
    border-radius: var(--rayon);
    color: var(--af-or);
    font-family: var(--af-affichage);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    vertical-align: middle;
}

@media (max-width: 40rem) {
    .af-hero { min-height: auto; padding-block: 7.5rem var(--pas-12); }
    .af-hero__fond { background-position: 50% top; }
    .af-hero__corps { padding-inline: var(--pas-2); }
    .af-hero__titre::after { display: none; }
    .af-bouton--herbe, .af-bouton--marque { padding-inline: var(--pas-6); font-size: 1.05rem; }
    .af-version__corps { min-width: 0; width: 100%; overflow-wrap: anywhere; }
    .af-tete + main .wiki { padding-top: 6rem; }
    .af-tete + main .wiki :is(h1, h2, h3, h4)[id] { scroll-margin-top: 5.5rem; }
}

/* --- Mouvement ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}