/* ==========================================================================
   Nebula — feuille de style du site public
   --------------------------------------------------------------------------
   Direction : « vide froid et lumiere d'alerte ». Le bleu est la lumiere de
   bord, seule couleur d'interface (liens, actions, focus). Le rouge n'apparait
   que la ou il y a tension : faction pirate, avertissements, la porte fermee de
   l'alpha. Le blanc est le signal lisible, le noir bleute est le vide.

   Contraintes qui ont faconne ce fichier :
   - La CSP interdit tout style en ligne et toute ressource externe. La police
     est donc auto-hebergee, et la texture est une data-URI SVG (autorisee par
     img-src 'self' data:).
   - Contraste AA verifie sur le fond compose le PIRE CAS (#1f2839 : pixel le
     plus clair de la nebuleuse + voile a .80 + halo bleu), pas sur le noir nu :
     texte 12,3:1, secondaire 5,3:1, tertiaire 4,5:1, bleu 4,6:1, rouge 4,5:1.
     Sur panneau opaque --surface les memes paires gagnent environ 1,3 point.
     Toute augmentation de l'opacite des halos de fond degrade ces chiffres.
   - Les classes site-header et site-footer sont assertees par les tests.
   ========================================================================== */

/* --- Police -------------------------------------------------------------- */
/* Space Grotesk variable : un seul fichier de 49 Ko couvre 300 a 700.
   Grotesque geometrique derive de Space Mono — caractere technique sans tomber
   dans l'Orbitron vu partout. SIL OFL, licence dans /fonts/OFL.txt. */
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-var.woff2") format("woff2-variations");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* --- Jetons -------------------------------------------------------------- */
:root {
    /* Profondeurs */
    --void: #06080f;
    --surface: #0d1120;
    --surface-2: #141a2c;
    --line: #1e2740;
    --line-lit: #2d3a5c;

    /* Encres */
    --text: #e6ebf7;
    --text-dim: #8f9bb8;
    /* Eclairci depuis #6b7897 : ce gris ne tenait 4,5:1 sur aucun des deux fonds
       reels (4,26 sur --surface, 3,35 sur l'ambiance texturee). La hierarchie
       avec --text-dim repose desormais sur la taille et la casse, pas sur un
       ecart de luminance qui coutait la lisibilite. */
    --text-faint: #8290b4;

    /* Lumiere de bord */
    --blue: #4d8dff;
    --blue-deep: #1c4fb8;
    --blue-veil: rgba(77, 141, 255, .14);
    --on-blue: #04070e;

    /* Tension */
    --red: #ff4d5e;
    --red-deep: #b8243a;
    --red-veil: rgba(255, 77, 94, .12);

    /* Factions. Le bleu et le rouge de la charte portent l opposition du jeu :
       la Federation tient l ordre, les Pirates la contestent. */
    --fed: #7fb2ff;
    --fed-deep: #1c4fb8;
    --pirate: #ff5566;
    --pirate-deep: #8e1b2c;

    /* Signaux */
    --ok: #3ddc97;
    --warn: #ffb454;

    /* Rythme */
    --gutter: clamp(1.25rem, 4vw, 3rem);
    /* Le min(..., 100%) n'est pas decoratif : une largeur en ch seule deborde
       des l'ecran etroit (62ch valent ~620 px, un telephone en fait 390). */
    --measure: min(62ch, 100%);
    --radius: 3px;
    --radius-lg: 6px;

    /* Ambiance de fond, surchargee en petit ecran plus bas. */
    --ambient: url("../img/nebula-1600.webp");

    /* Mouvement */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --fast: 140ms;
    --slow: 260ms;

    /* Ombres teintees, jamais du noir pur */
    --lift: 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px -12px rgba(4, 10, 30, .9);
    --lift-blue: 0 8px 28px -10px rgba(28, 79, 184, .7);
}

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

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Garde-fou : aucune cause de debordement horizontal ne doit produire un
       defilement lateral sur telephone. Les causes sont traitees en dessous
       (min-width: 0 sur les elements flex, largeurs en ch plafonnees) ; ceci
       n'est que la ceinture apres les bretelles. */
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100dvh;
    background: var(--void);
    color: var(--text);
    font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .005em;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
}

/* Halo ambiant : deux sources radiales, pas de degrade lineaire a 45deg.
   Le bleu domine, une braise rouge tres basse rappelle la tension. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        /* Nebuleuses de charte : le bleu domine en haut, la braise rouge remonte
           du bas. Elles teintent la vraie nebuleuse en dessous vers le bleu-rouge
           du site, sans avoir a regraver le fichier image.
           Les opacites sont bornees par le contraste, pas par le gout : au-dela
           de .13 le halo bleu remonte le fond a #23314c, ou le texte secondaire
           tombe a 4,29:1 et le bleu de lien a 4,05:1 — deux echecs AA. Mesure
           sur le pixel le plus clair de la nebuleuse, voile a .80. */
        radial-gradient(70rem 44rem at 12% -12%, rgba(77, 141, 255, .10), transparent 62%),
        radial-gradient(52rem 38rem at 96% 108%, rgba(184, 36, 58, .09), transparent 60%),
        /* Voile sombre : sans lui la nebuleuse remonte le fond et ruine le
           contraste du texte. Verifie a 12,4:1 sur les zones les plus claires. */
        linear-gradient(rgba(6, 8, 15, .80), rgba(6, 8, 15, .88)),
        /* Texture reelle plutot que des degrades ponctuels : a l echelle d une
           page de 3 000 px, une dizaine de points radiaux est invisible. */
        var(--ambient) center / cover no-repeat;
}

/* Variante allegee sur petit ecran : la version large n apporte rien sous
   1 000 px de viewport et coute le double. */
@media (max-width: 60rem) {
    :root { --ambient: url("../img/nebula-900.webp"); }
}

/* Grain : casse la platitude du numerique. Data-URI, donc conforme a la CSP. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Typographie --------------------------------------------------------- */
h1, h2, h3 {
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.03em;
    text-wrap: balance;
    /* Filet de securite : un mot long ne doit jamais pousser la page hors cadre. */
    overflow-wrap: break-word;
}

h1 {
    font-size: clamp(2.05rem, 1.35rem + 3.4vw, 4.75rem);
    font-weight: 700;
    letter-spacing: -.042em;
    margin-bottom: 1.25rem;
}

h2 {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.05rem);
    margin-bottom: .75rem;
}

h3 {
    font-size: 1.15rem;
    letter-spacing: -.018em;
}

p { text-wrap: pretty; }

a { color: var(--blue); }

code, .mono, time {
    font-family: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* --- Accessibilite ------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--blue);
    color: var(--on-blue);
    padding: .7rem 1.2rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus { left: 0; }

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

/* --- En-tete ------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem var(--gutter);
    padding: .9rem var(--gutter);
    background: rgba(6, 8, 15, .72);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.brand .glyph {
    color: var(--blue);
    font-size: .85em;
    transition: color var(--fast) var(--ease);
}

.brand:hover .glyph { color: var(--red); }

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.75rem;
    margin-right: auto;
}

.site-header nav a {
    position: relative;
    padding: .35rem 0;
    color: var(--text-dim);
    font-size: .95rem;
    text-decoration: none;
    transition: color var(--fast) var(--ease);
}

/* Le soulignement se deploie depuis la gauche — transform seulement, pas de
   width, pour rester sur le compositeur. */
.site-header nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--slow) var(--ease);
}

.site-header nav a:hover { color: var(--text); }
.site-header nav a:hover::after { transform: scaleX(1); }

.site-header nav a[aria-current="page"] { color: var(--text); }
.site-header nav a[aria-current="page"]::after { transform: scaleX(1); }

.lang-switch {
    padding: .3rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-decoration: none;
    transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.lang-switch:hover {
    border-color: var(--blue);
    color: var(--text);
}

/* --- Grille -------------------------------------------------------------- */
/* Grille a colonnes nommees plutot qu une simple boite centree : elle donne une
   colonne "content" bornee ET une colonne "full" pleine largeur, ce qui permet
   au hero cinematique de deborder sans recourir a 100vw (qui compte la barre de
   defilement et cree un debordement horizontal reel). */
main {
    flex: 1;
    /* min-width: 0 est indispensable : un element flex vaut min-width: auto par
       defaut, donc il refuse de retrecir sous la taille de son contenu et pousse
       toute la page hors cadre sur petit ecran. */
    min-width: 0;
    width: 100%;
    display: grid;
    align-content: start;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [content-start] min(72rem, 100% - var(--gutter) * 2) [content-end]
        minmax(var(--gutter), 1fr) [full-end];
    /* Bas plus genereux que le haut : compensation optique. */
    padding-block: clamp(3rem, 7vw, 6rem) clamp(5rem, 10vw, 8rem);
}

main > * { grid-column: content; }
main > .bleed { grid-column: full; }

/* Un element de grille est etire sur toute sa colonne par defaut. Pour un bloc
   de texte c'est ce qu'on veut ; pour un bouton enfant direct de main, cela
   produit une barre pleine largeur. On les laisse a leur taille naturelle —
   la regle petit ecran qui les repasse a 100 % continue de s'appliquer. */
main > .cta,
main > .download-btn { justify-self: start; }

/* Le hero cinematique se colle a l en-tete : la marge haute de main le
   decollerait du cadre et casserait l effet plein ecran. */
main:has(> .hero-cine) { padding-top: 0; }

main > p,
main > ol,
main > ul { max-width: var(--measure); }

.lede {
    max-width: min(46ch, 100%);
    margin-bottom: 2.5rem;
    color: var(--text-dim);
    font-size: clamp(1.075rem, 1rem + .5vw, 1.3rem);
    line-height: 1.55;
}

/* --- Accueil ------------------------------------------------------------- */
/* La mise en forme du hero vit plus bas, avec le bloc cinematique. */
.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

/* Sans min-width: 0, le bouton et la pastille refusent de retrecir et sortent
   du cadre au lieu de passer a la ligne. */
.hero-actions > * { min-width: 0; }

/* --- Actions ------------------------------------------------------------- */
.cta,
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.7rem;
    background: var(--blue);
    color: var(--on-blue);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -.005em;
    text-decoration: none;
    border: 1px solid var(--blue);
    border-radius: var(--radius);
    box-shadow: var(--lift-blue);
    transition: transform var(--fast) var(--ease),
                background-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
}

.cta:hover,
.download-btn:hover {
    background: #6b9fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(28, 79, 184, .85);
}

/* Retour physique au clic. */
.cta:active,
.download-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px -8px rgba(28, 79, 184, .8);
}

.download-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: 1rem 2rem;
    margin-bottom: 1.75rem;
}

.download-btn .size {
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .78rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

/* --- Statut serveur ------------------------------------------------------ */
.server-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .9rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: rgba(13, 17, 32, .6);
    color: var(--text-dim);
    font-size: .82rem;
    letter-spacing: .01em;
}

.server-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.server-status.status-online { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); }
.server-status.status-degraded { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); }
.server-status.status-unknown { color: var(--text-faint); }

/* --- Panneaux ------------------------------------------------------------ */
/* Pas de « bordure + ombre + fond » sur tout. Un filet vertical bleu marque le
   bord d'attaque, le fond reste presque invisible. */
.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1px;
    /* La derniere rangee est complete meme quand le nombre de panneaux ne tombe
       pas juste : voir la regle nth-child(5):last-child plus bas. */
    margin-top: 1rem;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pillars article {
    position: relative;
    padding: 1.9rem 1.75rem;
    background: var(--surface);
    transition: background-color var(--slow) var(--ease);
}

.pillars article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--blue), transparent);
    opacity: 0;
    transition: opacity var(--slow) var(--ease);
}

.pillars article:hover { background: var(--surface-2); }
.pillars article:hover::before { opacity: 1; }

/* Cinq panneaux sur trois colonnes laissaient une cellule vide, qui se lisait
   comme un bug de mise en page. Le dernier occupe la place restante. La
   condition nth-child(5):last-child limite la regle au cas a cinq : si un
   sixieme panneau est ajoute, la grille redevient pleine d'elle-meme. */
@media (min-width: 60rem) {
    .pillars { grid-template-columns: repeat(3, 1fr); }
    .pillars article:nth-child(5):last-child { grid-column: span 2; }
}

.pillars h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: .55rem;
}

.pillars p {
    color: var(--text-dim);
    font-size: .95rem;
    line-height: 1.6;
}

/* Troisieme niveau d'action, pour eviter le duo « bouton plein + bouton
   fantome » sur chaque bloc. La fleche avance au survol. */
.quiet-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.1rem;
    color: var(--blue);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}

.quiet-link::after {
    content: "→";
    transition: transform var(--slow) var(--ease);
}

.quiet-link:hover { color: var(--text); }
.quiet-link:hover::after { transform: translateX(4px); }

/* --- FAQ ----------------------------------------------------------------- */
.faq {
    display: flex;
    flex-direction: column;
    max-width: var(--measure);
    border-top: 1px solid var(--line);
}

.faq details {
    border-bottom: 1px solid var(--line);
    transition: background-color var(--fast) var(--ease);
}

.faq details[open] { background: rgba(13, 17, 32, .5); }

.faq summary {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    padding: 1.15rem .5rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    transition: color var(--fast) var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }

/* Chevron maison : pas de puce native, et il pivote. */
.faq summary::before {
    content: "";
    flex: none;
    width: .45rem;
    height: .45rem;
    margin-top: .45rem;
    border-right: 1.5px solid var(--blue);
    border-bottom: 1.5px solid var(--blue);
    transform: rotate(-45deg);
    transition: transform var(--slow) var(--ease);
}

.faq details[open] summary::before { transform: rotate(45deg); }

.faq summary:hover { color: var(--blue); }

.faq p {
    padding: 0 .5rem 1.3rem 1.85rem;
    color: var(--text-dim);
    font-size: .95rem;
}

/* --- Devlog -------------------------------------------------------------- */
.news-item {
    max-width: var(--measure);
    padding: 1.85rem 0;
    border-bottom: 1px solid var(--line);
}

.news-item h2 {
    font-size: 1.2rem;
    margin-bottom: .35rem;
}

.news-item time {
    display: block;
    margin-bottom: .8rem;
    color: var(--text-faint);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.news-item p { color: var(--text-dim); }

/* --- Pages legales ------------------------------------------------------- */
.legal {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    max-width: var(--measure);
}

.legal p {
    color: var(--text-dim);
    font-size: .95rem;
}

/* --- Pied de page -------------------------------------------------------- */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    padding: 2.25rem var(--gutter);
    border-top: 1px solid var(--line);
}

/* Gris secondaire et non tertiaire : le pied de page n'a pas de fond opaque, ses
   liens reposent donc sur l'ambiance. Le tertiaire y tombait a 3,26:1 — sous le
   seuil AA. Le secondaire tient 5,6:1 et se lit mieux comme un lien. */
.site-footer a {
    color: var(--text-dim);
    font-size: .85rem;
    text-decoration: none;
    transition: color var(--fast) var(--ease);
}

.site-footer a:hover { color: var(--text); }

/* --- Pages d'erreur ------------------------------------------------------ */
.error-page { padding-block: clamp(3rem, 10vw, 7rem); }

.error-page .code {
    display: block;
    margin-bottom: .5rem;
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .85rem;
    letter-spacing: .22em;
    color: var(--red);
    text-transform: uppercase;
}

/* --- Petits ecrans ------------------------------------------------------- */
/* Le fichier precedent n'avait aucune media query : l'en-tete se comprimait
   sous ~640 px. */
@media (max-width: 46rem) {
    .site-header {
        gap: .65rem 1rem;
        padding: .75rem var(--gutter);
    }

    .site-header nav {
        order: 3;
        width: 100%;
        gap: .25rem 1.25rem;
        margin-right: 0;
    }

    .site-header nav a { font-size: .9rem; }

    .lang-switch { margin-left: auto; }

    .download-btn { width: 100%; }
}

/* --- Mouvement reduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Sections de la page d'accueil
   Ajoutees lors du passage a une vraie page de jeu : hero, factions, gameplay,
   devlog, appel final. Le decoupage suit les codes du genre (BSGO, Star
   Conflict) sans en copier les tics visuels.
   ========================================================================== */

/* --- Rythme de section ---------------------------------------------------- */
.band {
    padding-block: clamp(3.5rem, 9vw, 7rem);
    border-top: 1px solid var(--line);
}

.band:first-of-type { border-top: 0; padding-top: 0; }

/* Etiquette de section : mono, capitales espacees, precedee d un filet.
   Registre "console de bord" plutot que sur-titre marketing. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: .9rem;
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
}

.eyebrow::before {
    content: "";
    flex: none;
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: .55;
}

.band > h2 {
    max-width: min(22ch, 100%);
    margin-bottom: 1rem;
}

.band > .lede { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --- Hero cinematique ----------------------------------------------------- */
/* Plein cadre sur une vraie capture du jeu. C est ce qui separe une page de
   presentation d un site de jeu : l illustration porte, le texte accompagne.
   Le texte occupe la moitie droite parce que la capture place le vaisseau a
   gauche — la composition de l image dicte celle de la page, pas l inverse. */
.hero-cine {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(28rem, 78vh, 44rem);
    padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 7vh, 5rem);
    overflow: hidden;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cadre sur le vaisseau capital : c est le sujet, il doit survivre au
       recadrage en portrait ou l image perd les deux tiers de sa largeur. */
    object-position: 32% 50%;
}

/* Voiles. Le fondu vers le bas n est pas decoratif : sans lui l image se
   termine par une arete nette en travers de la page. Celui de droite creuse le
   contraste sous le texte, la ou le vide spatial est deja sombre. */
.hero-cine::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, var(--void) 2%, rgba(6, 8, 15, .55) 30%, transparent 68%),
        linear-gradient(to right, transparent 24%, rgba(6, 8, 15, .62) 58%, rgba(6, 8, 15, .88) 88%),
        linear-gradient(to bottom, rgba(6, 8, 15, .70), transparent 22%);
}

/* Balayage facon ecran de bord. A 5 % il se devine ; au-dela il devient un
   effet de style et salit la capture. */
.hero-cine::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .05;
    background: repeating-linear-gradient(
        to bottom,
        rgba(214, 232, 255, .9) 0 1px,
        transparent 1px 4px);
}

.hero-inner {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.hero-copy { max-width: min(36rem, 100%); }

@media (min-width: 64rem) {
    /* Le texte bascule a droite : la gauche appartient au vaisseau. */
    .hero-copy { margin-left: auto; }
}

.hero-cine h1 {
    max-width: min(16ch, 100%);
    font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.4rem);
    letter-spacing: -.03em;
    text-wrap: balance;
    /* Ombre portee large et douce : garantit la lisibilite sur les zones
       claires de la capture sans poser de plaque opaque derriere le titre. */
    text-shadow: 0 2px 24px rgba(4, 8, 20, .85);
}

.hero-cine .lede {
    max-width: min(38ch, 100%);
    /* Encre pleine et non attenuee : sur une illustration, le gris secondaire
       tombe sous le seuil de lisibilite. */
    color: var(--text);
    text-shadow: 0 1px 12px rgba(4, 8, 20, .9);
}

.hero-cine .eyebrow { color: var(--text-dim); }

.hero-cine .eyebrow strong {
    color: var(--red);
    font-weight: 600;
}

/* --- Factions ------------------------------------------------------------- */
/* Le coeur du design : deux moities qui s opposent, bleu contre rouge. Elles se
   font face — la Federation ancree a gauche, les Pirates a droite — pour que la
   confrontation se lise dans la mise en page et pas seulement dans le texte. */
.faction-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    overflow: hidden;
}

.faction {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(2rem, 4vw, 3.25rem);
    background: var(--surface);
    isolation: isolate;
    overflow: hidden;
}

/* Halo de faction, sous le contenu. Il s intensifie au survol : la moitie
   survolee s allume, l autre reste en retrait. */
.faction::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .55;
    transition: opacity var(--slow) var(--ease);
}

.faction:hover::before { opacity: 1; }

.faction--fed::before {
    background: radial-gradient(32rem 24rem at 30% -8%, rgba(77, 141, 255, .28), transparent 68%);
}

.faction--pirate::before {
    background: radial-gradient(32rem 24rem at 70% -8%, rgba(255, 85, 102, .24), transparent 68%);
}

/* Filet superieur aux couleurs de la faction, oriente vers son bord. */
.faction::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--fed), transparent 72%);
}

.faction--pirate::after {
    background: linear-gradient(to left, var(--pirate), transparent 72%);
}

.faction img {
    width: clamp(10rem, 21vw, 16rem);
    height: auto;
    margin-bottom: 1.75rem;
    /* Les sources ont un canal alpha : plus besoin du mix-blend-mode: screen qui
       servait a effacer un fond noir, et qui delavait le blanc de la Federation. */
    filter: drop-shadow(0 10px 30px rgba(4, 10, 30, .9));
    transition: transform var(--slow) var(--ease);
}

.faction:hover img { transform: translateY(-5px) scale(1.03); }

.faction h3 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
    margin-bottom: .5rem;
}

/* Indicatif de faction en mono, comme un code d escadron. */
.faction .tag {
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    padding: .2rem .5rem;
    border: 1px solid currentColor;
    border-radius: var(--radius);
}

.faction--fed h3 { color: var(--fed); }
.faction--pirate h3 { color: var(--pirate); }

.faction p {
    max-width: min(42ch, 100%);
    color: var(--text-dim);
    font-size: .97rem;
}

.faction .role {
    width: 100%;
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    color: var(--text-faint);
    font-size: .85rem;
}

/* Les deux camps se font face. En dessous de cette largeur les cartes
   s empilent et le miroir n a plus de sens. */
@media (min-width: 56rem) {
    .faction--pirate {
        align-items: flex-end;
        text-align: right;
    }

    .faction--pirate h3 { flex-direction: row-reverse; }
}

/* --- Releve technique ----------------------------------------------------- */
/* Remplace la grille de cartes du gameplay. Avec quatre textes de longueurs
   tres inegales, des cellules cote a cote s alignaient sur la plus haute et
   laissaient de grands vides : la page paraissait cassee. Des lignes pleine
   largeur se dimensionnent sur leur propre contenu, le probleme disparait. */
.readout { border-top: 1px solid var(--line); }

.readout-row {
    display: grid;
    gap: .4rem 2rem;
    padding: clamp(1.4rem, 3vw, 2.1rem) clamp(.75rem, 2vw, 1.25rem);
    border-bottom: 1px solid var(--line);
    transition: background-color var(--slow) var(--ease);
}

@media (min-width: 52rem) {
    .readout-row {
        grid-template-columns: 3.5rem minmax(11rem, 16rem) 1fr;
        align-items: baseline;
    }
}

.readout-row:hover { background: rgba(20, 26, 44, .55); }

.readout-row .idx {
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .16em;
    color: var(--blue);
}

.readout-row h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.28rem); }

.readout-row p {
    max-width: min(58ch, 100%);
    color: var(--text-dim);
    font-size: .97rem;
}

/* --- Vaisseaux ------------------------------------------------------------ */
/* Quatre classes, telles qu elles existent dans le registre serveur. Les roles
   sont decrits, jamais chiffres : l equilibrage bouge et le site mentirait au
   premier reglage. */
.ship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.ship {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    background: var(--surface);
    transition: background-color var(--slow) var(--ease);
}

.ship:hover { background: var(--surface-2); }

.ship .hull {
    margin-bottom: 1.5rem;
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2em;
    color: var(--text-faint);
}

.ship h3 {
    font-size: 1.12rem;
    margin-bottom: .5rem;
}

.ship .duty {
    margin-bottom: .75rem;
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blue);
}

.ship p {
    color: var(--text-dim);
    font-size: .93rem;
    line-height: 1.6;
}

/* Armement epingle en bas : les cartes forment une ligne propre quelle que soit
   la longueur du texte au-dessus. */
.ship .arms {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--text-faint);
}

/* --- Apercu du devlog ----------------------------------------------------- */
.devlog-teaser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 1.5rem;
}

.devlog-card {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.devlog-card:hover {
    border-color: var(--line-lit);
    transform: translateY(-3px);
}

.devlog-card time {
    color: var(--text-faint);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.devlog-card h3 {
    margin: .55rem 0 .6rem;
    font-size: 1.05rem;
}

.devlog-card p {
    color: var(--text-dim);
    font-size: .92rem;
    /* Trois lignes puis coupure : les entrees ont des longueurs tres
       differentes et les cartes doivent rester alignees. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lien epingle en bas : les cartes forment une ligne propre quel que soit le
   volume de texte au-dessus. */
.devlog-card .quiet-link {
    margin-top: auto;
    padding-top: 1.1rem;
}

/* Lien de renvoi en fin de section. */
.band-more { margin-top: 1.5rem; }