/*
 * FortCraft — feuille de style du site public.
 *
 * Écrite à la main, sans cadre CSS : un serveur de jeu qui ressemble à un tableau de bord SaaS a
 * déjà perdu. Trois partis pris tiennent tout le reste :
 *
 * 1. **Des panneaux de pierre, pas des cartes arrondies.** Coins presque droits, biseau clair en
 *    haut, ombre portée dure, et des équerres vertes aux angles — le vocabulaire d'un HUD de jeu.
 * 2. **Les cases d'objet sont des cases d'inventaire.** Fond creusé, liseré clair en haut à gauche,
 *    et `image-rendering: pixelated` : une texture 16×16 agrandie doit rester nette, jamais floue.
 * 3. **Les chiffres du jeu sont en chasse fixe.** Un temps se lit `0:47.35` au centième ; en police
 *    proportionnelle, deux temps voisins ne s'alignent pas et le classement devient illisible.
 *
 * Aucune police ni image distante : la politique de sécurité de contenu du serveur n'autorise que
 * nos propres fichiers, et une page de jeu qui attend un CDN s'affiche nue.
 */

:root {
    --nuit: #070a0f;
    --basalte: #0b0f17;
    --pierre: #121926;
    --pierre-claire: #1a2332;
    --trait: #26324a;
    --trait-vif: #36486b;

    --texte: #e9eef7;
    --sourd: #94a2b8;
    --sourd-fort: #b6c2d4;

    --rune: #6ee7a0;
    --rune-sombre: #1f8a5f;
    --givre: #4cc2ff;
    --or: #ffc861;
    --sang: #ff6b78;

    --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

    --limite: 1180px;
    --ombre-dure: 0 18px 40px -20px #000c, 0 2px 0 #ffffff08 inset;

    color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body.page {
    margin: 0;
    background: var(--nuit);
    color: var(--texte);
    font: 16px/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: var(--rune); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #9df5c2; }

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

.limite { width: min(var(--limite), calc(100% - 2.5rem)); margin-inline: auto; }

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

.saut {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--rune);
    color: #04140c;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease;
}
.saut:focus { top: 1rem; }

/* ---------------------------------------------------------------- panneaux */

/*
 * L'équerre d'angle : deux pseudo-éléments qui ne dessinent que deux côtés.
 *
 * C'est ce qui donne aux panneaux leur air d'interface de jeu sans rien devoir à une image. On les
 * pose en haut à gauche et en bas à droite : deux angles marqués suffisent, quatre feraient cadre.
 */
.panneau {
    position: relative;
    background:
        linear-gradient(180deg, #ffffff06, transparent 35%),
        linear-gradient(160deg, var(--pierre-claire), var(--pierre));
    border: 1px solid var(--trait);
    border-radius: 3px;
    box-shadow: var(--ombre-dure);
}
.panneau::before,
.panneau::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--rune);
    opacity: 0.55;
    pointer-events: none;
}
.panneau::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panneau::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ----------------------------------------------------------------- boutons */

.bouton {
    --fond: var(--pierre-claire);
    --bord: var(--trait-vif);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--bord);
    border-radius: 2px;
    background: var(--fond);
    color: var(--texte);
    font: 600 0.95rem/1 var(--sans);
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    /* L'ombre dure sous le bouton : il a l'air posé, pas dessiné. */
    box-shadow: 0 3px 0 #0008;
}
.bouton:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #0009; }
.bouton:active { transform: translateY(1px); box-shadow: 0 1px 0 #0009; }

.bouton-rune {
    --fond: linear-gradient(180deg, #7df0ad, #38c483);
    --bord: #8ff7bd;
    color: #04160d;
    font-weight: 800;
}
.bouton-rune:hover { color: #04160d; }

.bouton-fantome {
    --fond: #ffffff08;
    --bord: var(--trait-vif);
    color: var(--texte);
}

.bouton-inerte {
    --fond: #ffffff05;
    --bord: var(--trait);
    color: var(--sourd);
    cursor: not-allowed;
    box-shadow: none;
}
.bouton-inerte:hover { transform: none; box-shadow: none; }

.bouton-grand { padding: 0.95rem 1.6rem; font-size: 1.02rem; }

/* ------------------------------------------------------------------ entête */

.entete {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 0.9rem max(1.25rem, calc((100vw - var(--limite)) / 2));
    background: #080c13e6;
    border-bottom: 1px solid var(--trait);
    backdrop-filter: blur(12px);
}

.marque { display: flex; align-items: center; gap: 0.7rem; color: inherit; text-decoration: none; }
.marque-sceau {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(150deg, var(--rune), var(--rune-sombre));
    color: #04160d;
    border-radius: 3px;
    font: 900 1.25rem/1 var(--sans);
    box-shadow: 0 0 22px #6ee7a038, 0 2px 0 #0007;
}
.marque-texte strong { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.marque-texte small {
    display: block;
    color: var(--sourd);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.entete-menu { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.entete-menu a {
    color: var(--sourd-fort);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.entete-menu a:hover { color: var(--texte); }
.entete-menu a.bouton { color: #04160d; }

.entete-bascule {
    display: none;
    margin-left: auto;
    padding: 0.55rem;
    background: #ffffff08;
    border: 1px solid var(--trait);
    border-radius: 2px;
    cursor: pointer;
}
.entete-bascule span:not(.lecteur-ecran) {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--texte);
}
.entete-bascule span + span { margin-top: 4px; }

/* ------------------------------------------------------------------- héros */

/*
 * Le hero tient sur trois couches superposées, et l'ordre compte :
 *
 * 1. `heros-fond` — les halos et la trame, visibles si l'image tarde à charger ;
 * 2. `heros-image` — le spawn creusé dans la montagne, servi localement ;
 * 3. `heros-voile` — un dégradé qui garde le titre et la carte lisibles devant la pierre claire.
 */
.heros {
    position: relative;
    display: grid;
    align-items: center;
    min-height: min(92vh, 900px);
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
    overflow: hidden;
}

/*
 * Le fond : deux halos et une trame isométrique.
 *
 * La trame est faite de deux dégradés répétés inclinés à 30° — l'angle des faces d'un cube en vue
 * isométrique. Estompée par un masque vertical, elle donne une profondeur de terrain sans peser
 * un seul octet d'image.
 */
.heros-fond {
    position: absolute;
    inset: -20% -10% 0;
    background:
        radial-gradient(48rem 26rem at 78% -12%, #12694a4d, transparent 70%),
        radial-gradient(34rem 22rem at 8% 8%, #1b3a7a40, transparent 70%),
        repeating-linear-gradient(30deg, #ffffff06 0 1px, transparent 1px 46px),
        repeating-linear-gradient(-30deg, #ffffff06 0 1px, transparent 1px 46px);
    mask-image: linear-gradient(180deg, #000 10%, #0007 55%, transparent 100%);
    pointer-events: none;
}

/*
 * Le panorama occupe tout le hero. La porte du grand hall reste dans la moitié droite et les
 * terrasses descendent vers la lave sous la carte « rejoindre ».
 */
.heros-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 44%;
    pointer-events: none;
}

.heros-voile {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #070a0ff7 0%, #070a0fe8 26%, #070a0fa6 47%, #070a0f30 77%),
        linear-gradient(0deg, var(--nuit), transparent 36%),
        linear-gradient(180deg, #070a0f7d, transparent 25%);
    pointer-events: none;
}

.heros-corps {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    width: min(var(--limite), calc(100% - 2.5rem));
    margin-inline: auto;
}

.heros .carte-rejoindre {
    align-self: end;
    margin-top: clamp(11rem, 20vw, 18rem);
}

.surtitre {
    margin-bottom: 1rem;
    color: var(--rune);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.surtitre::before {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 2px;
    margin-right: 0.7rem;
    vertical-align: 0.28em;
    background: var(--rune);
}

/*
 * Le titre : trois verbes, trois lignes, une par geste du jeu.
 *
 * Chaque mot est **taillé dans la pierre** : un dégradé clair vers gris posé dans le texte, un
 * liseré sombre en bas et une ombre dure décalée d'un pixel plein. C'est le même vocabulaire que les
 * panneaux du site — un bloc a une face éclairée, une arête et une ombre — appliqué à des lettres.
 */
.titre-geant {
    display: grid;
    font-size: clamp(2.7rem, 7.2vw, 5.6rem);
    line-height: 0.94;
    letter-spacing: -0.052em;
    text-transform: uppercase;
    font-weight: 900;
}
.titre-geant .mot {
    background: linear-gradient(180deg, #ffffff 8%, #cfd9ea 52%, #8e9db6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* L'ombre dure passe sous le texte découpé : elle lui donne son épaisseur. */
    filter: drop-shadow(3px 4px 0 #00000066);
}
.titre-geant .accent-rune {
    background: linear-gradient(180deg, #d9ffe9 6%, var(--rune) 48%, #2fa877 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 4px 0 #00000066) drop-shadow(0 0 26px #6ee7a055);
}

/* Les trois verbes se posent l'un après l'autre : le rythme du titre, pas une animation d'entrée. */
@media (prefers-reduced-motion: no-preference) {
    .titre-geant .mot {
        animation: monter-mot 0.62s cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
    }
    .titre-geant .mot:nth-child(2) { animation-delay: 0.09s; }
    .titre-geant .mot:nth-child(3) { animation-delay: 0.18s; }
}

@keyframes monter-mot {
    from { opacity: 0; transform: translateY(0.38em); }
    to { opacity: 1; transform: none; }
}

.accent-rune { color: var(--rune); }

.heros-accroche {
    max-width: 46ch;
    margin-top: 1.4rem;
    color: var(--sourd-fort);
    font-size: 1.08rem;
}

.heros-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ------------------------------------------------------------------ chrono */

/* La barre de boss du jeu : 2:00, trois cœurs, et la jauge verte qui passera au rouge. */
.chrono { max-width: 25rem; margin-top: 2.75rem; }
.chrono-tete { display: flex; align-items: center; gap: 0.85rem; }
.chrono-valeur {
    font: 700 1.35rem/1 var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.chrono-coeurs { display: flex; gap: 0.3rem; }
.coeur {
    width: 13px;
    height: 12px;
    background: var(--sang);
    /* Un cœur de Minecraft : deux bosses et une pointe, découpées au polygone. */
    clip-path: polygon(50% 100%, 0 45%, 0 18%, 22% 0, 50% 18%, 78% 0, 100% 18%, 100% 45%);
    box-shadow: 0 0 10px #ff6b7840;
}
/* Une vie perdue s'éteint, elle ne disparaît pas : on doit voir qu'il en reste deux sur trois. */
.coeur-perdu {
    background: #3a4558;
    box-shadow: none;
    opacity: 0.55;
}

/*
 * La jauge suit le vrai chrono : `--reste` va de 1 à 0, et le script ne touche qu'à cette variable.
 *
 * La couleur change par palier, comme la barre du jeu — verte, jaune à mi-temps, rouge sous les
 * trente dernières secondes. Un dégradé continu aurait été plus doux et aurait perdu l'information :
 * ce sont des paliers, et ils veulent dire quelque chose.
 */
.chrono-jauge {
    --reste: 1;
    height: 9px;
    margin-top: 0.6rem;
    background: #ffffff0f;
    border: 1px solid var(--trait);
    border-radius: 2px;
    overflow: hidden;
}
.chrono-jauge span {
    display: block;
    width: calc(var(--reste) * 100%);
    height: 100%;
    background: var(--rune);
    box-shadow: 0 0 12px color-mix(in srgb, var(--rune) 55%, transparent);
}
.chrono-jauge[data-phase="mi-temps"] span {
    background: var(--or);
    box-shadow: 0 0 12px color-mix(in srgb, var(--or) 55%, transparent);
}
.chrono-jauge[data-phase="urgence"] span {
    background: var(--sang);
    box-shadow: 0 0 14px color-mix(in srgb, var(--sang) 65%, transparent);
}
.chrono-legende { margin-top: 0.55rem; color: var(--sourd); font-size: 0.82rem; max-width: 34ch; }

/* -------------------------------------------------------- carte « rejoindre » */

.carte-rejoindre {
    position: relative;
    padding: 1.5rem 1.4rem 1.35rem;
    background:
        linear-gradient(180deg, #ffffff07, transparent 40%),
        linear-gradient(165deg, var(--pierre-claire), var(--pierre));
    border: 1px solid var(--trait);
    border-radius: 3px;
    box-shadow: var(--ombre-dure);
}
.carte-rejoindre::before,
.carte-rejoindre::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--rune);
    opacity: 0.6;
}
.carte-rejoindre::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.carte-rejoindre::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.carte-rejoindre-titre {
    color: var(--sourd);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.adresse { display: grid; gap: 0.75rem; margin: 1.1rem 0 0; }
.adresse dt {
    color: var(--sourd);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.adresse dd { margin: 0.3rem 0 0; }
.adresse code {
    display: block;
    padding: 0.6rem 0.75rem;
    background: #060a11;
    border: 1px solid var(--trait);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 #ffffff0a;
    color: var(--texte);
    font: 600 1rem/1.3 var(--mono);
    word-break: break-all;
    cursor: pointer;
}
.adresse code:hover { border-color: var(--rune-sombre); }
/* Ce que le petit script pose après une copie réussie. */
.adresse code[data-copie]::after {
    content: attr(data-copie);
    float: right;
    color: var(--rune);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.carte-rejoindre-motd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-weight: 600;
}
.voyant {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rune);
    box-shadow: 0 0 12px var(--rune);
}
.sourd { color: var(--sourd); font-weight: 400; }

.carte-rejoindre-pas {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    color: var(--sourd-fort);
    font-size: 0.92rem;
}
.carte-rejoindre-pas li + li { margin-top: 0.35rem; }
.carte-rejoindre-pas b { color: var(--texte); }

.carte-rejoindre-instance {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--trait);
    color: var(--sourd);
    font-size: 0.82rem;
}

/* -------------------------------------------------------------- les chiffres */

.bande-chiffres {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    background: linear-gradient(180deg, var(--basalte), var(--nuit));
    border-block: 1px solid var(--trait);
}

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--trait);
    border: 1px solid var(--trait);
}
.tuile { padding: 1.15rem 1.2rem; background: var(--pierre); }
.tuile-valeur {
    font: 800 clamp(1.7rem, 3.2vw, 2.3rem)/1 var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--texte);
}
.tuile-label {
    margin-top: 0.5rem;
    color: var(--rune);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tuile-note { margin-top: 0.25rem; color: var(--sourd); font-size: 0.84rem; }

.bande-note { margin-top: 0.9rem; color: var(--sourd); font-size: 0.82rem; }

.avis-degrade,
.avis {
    margin-top: 1.1rem;
    padding: 0.8rem 1rem;
    background: #ffc8611a;
    border-left: 3px solid var(--or);
    color: #ffe0a8;
    font-size: 0.9rem;
}
.avis { margin-bottom: 2rem; }

/* ----------------------------------------------------------------- sections */

.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-sombre { background: linear-gradient(180deg, var(--basalte), #090d15); border-block: 1px solid var(--trait); }
.section-vide { min-height: 60vh; display: grid; align-content: center; }

.section-tete { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-tete h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-accroche { margin-top: 1rem; color: var(--sourd-fort); }

/* ------------------------------------------------------------------ étapes */

.etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}
.etape {
    position: relative;
    padding: 1.6rem 1.4rem 1.5rem;
    background:
        linear-gradient(180deg, #ffffff06, transparent 40%),
        linear-gradient(165deg, var(--pierre-claire), var(--pierre));
    border: 1px solid var(--trait);
    border-radius: 3px;
    box-shadow: var(--ombre-dure);
}
/* La barre verte du haut : elle relie visuellement les quatre étapes. */
.etape::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 42px;
    height: 3px;
    background: var(--rune);
}
.etape-index {
    color: var(--trait-vif);
    font: 800 2.1rem/1 var(--mono);
    letter-spacing: -0.04em;
}
.etape h3 { margin: 0.55rem 0 0.7rem; font-size: 1.2rem; }
.etape p { color: var(--sourd-fort); font-size: 0.95rem; }

/* ---------------------------------------------------------------- défenses */

.famille + .famille { margin-top: 2.75rem; }
.famille-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; margin-bottom: 1.1rem; }
.famille-tete h3 { font-size: 1.22rem; }
.famille-tete p { color: var(--sourd); font-size: 0.92rem; }

.defenses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.defense {
    display: flex;
    gap: 0.9rem;
    padding: 0.85rem;
    background: #111825;
    border: 1px solid var(--trait);
    border-radius: 3px;
}
.defense:hover { border-color: var(--trait-vif); background: #141d2c; }

/*
 * Une case d'inventaire, telle que le client la dessine : creusée, liseré clair en haut à gauche,
 * texture nette. `pixelated` n'est pas un détail — une texture 16×16 lissée à 40 pixels devient
 * une tache, et plus personne ne reconnaît le bloc.
 */
.case-objet {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: #0a0e16;
    border: 1px solid #000;
    box-shadow: inset 1px 1px 0 #ffffff14, inset -1px -1px 0 #00000080;
}
.case-objet img { width: 40px; height: 40px; image-rendering: pixelated; }
.case-objet-vide {
    width: 22px;
    height: 22px;
    border: 2px dashed var(--trait-vif);
    transform: rotate(45deg);
}

.defense-nom { font-weight: 700; }
.defense-sorte {
    color: var(--givre);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
}
.traits li {
    padding: 0.15rem 0.45rem;
    background: #ffffff0a;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--sourd-fort);
    font: 600 0.76rem/1.45 var(--mono);
}

/* -------------------------------------------------------------- classement */

.table-enveloppe {
    overflow-x: auto;
    border: 1px solid var(--trait);
    border-radius: 3px;
    background: var(--pierre);
}
.classement { width: 100%; border-collapse: collapse; min-width: 44rem; }
.classement th {
    padding: 0.8rem 1rem;
    background: #0d131e;
    border-bottom: 1px solid var(--trait);
    color: var(--sourd);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.classement td { padding: 0.85rem 1rem; border-bottom: 1px solid #1b2433; }
.classement tbody tr:last-child td { border-bottom: 0; }
.classement tbody tr:hover { background: #ffffff06; }

.rang {
    width: 3rem;
    font: 800 1.05rem/1 var(--mono);
    color: var(--sourd);
    text-align: center;
}
/* Les couleurs du podium, celles que le jeu donne aux trois premiers temps. */
.rang-or { color: #ffd76e; text-shadow: 0 0 14px #ffd76e4d; }
.rang-argent { color: #d6e0ee; }
.rang-bronze { color: #e0a06a; }

.cellule-nom { font-weight: 700; }
.chiffre { font: 600 0.95rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--sourd-fort); }
.temps {
    font: 700 1rem/1.2 var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--rune);
    white-space: nowrap;
}
.temps-assaut { color: var(--givre); }
.temps small { display: block; margin-top: 0.15rem; color: var(--sourd); font: 400 0.74rem/1 var(--sans); }

.vide {
    padding: 2.5rem 1.5rem;
    background: var(--pierre);
    border: 1px dashed var(--trait-vif);
    border-radius: 3px;
    color: var(--sourd);
    text-align: center;
}

/* ---------------------------------------------------------------- paniers */

.paniers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.panier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.5rem 1.35rem 1.4rem;
    background:
        linear-gradient(180deg, #ffffff06, transparent 40%),
        linear-gradient(165deg, var(--pierre-claire), var(--pierre));
    border: 1px solid var(--trait);
    border-radius: 3px;
    box-shadow: var(--ombre-dure);
}
.panier-phare { border-color: #ffc86159; box-shadow: 0 18px 40px -20px #000c, 0 0 0 1px #ffc8611f; }
.panier-ruban {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 0.28rem 0.6rem;
    background: var(--or);
    color: #241703;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Une pièce, en CSS : disque doré, bord sombre, et un reflet en haut à gauche. */
.piece {
    width: 34px;
    height: 34px;
    margin-bottom: 0.55rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, #fff2c8 0 12%, #ffc861 45%, #d08a1e 100%);
    box-shadow: inset 0 -2px 0 #8a5610, 0 0 18px #ffc86133;
}

.panier-pieces { font: 800 1.85rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.panier-pieces span { color: var(--or); font: 700 0.85rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.panier-prime { color: var(--rune); font-size: 0.82rem; font-weight: 700; }
.panier-nom { margin-top: 0.4rem; font-weight: 700; }
.panier-note { color: var(--sourd); font-size: 0.88rem; }
.panier-prix { margin: 0.7rem 0 0.9rem; font: 800 1.3rem/1 var(--sans); }
.panier .bouton { width: 100%; margin-top: auto; }

/* ------------------------------------------------------------------- pied */

.pied { padding: 2.5rem 0 3rem; background: var(--nuit); border-top: 1px solid var(--trait); }
.pied-corps {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    align-items: flex-start;
    justify-content: space-between;
    width: min(var(--limite), calc(100% - 2.5rem));
    margin-inline: auto;
}
.pied-marque { font-weight: 800; letter-spacing: -0.02em; }
.pied-note { max-width: 52ch; margin-top: 0.4rem; color: var(--sourd); font-size: 0.88rem; }
.pied-mention { color: var(--sourd); font-size: 0.82rem; }
.pied-annee { display: block; margin-top: 0.3rem; color: #6c7a90; }

/* ---------------------------------------------------------------- écrans étroits */

@media (max-width: 900px) {
    .heros-corps { grid-template-columns: minmax(0, 1fr); }
    .heros .carte-rejoindre { max-width: 26rem; margin-top: 0; }

    /*
     * Sur une colonne, le panorama reste en haut et s'éteint avant la carte. Le grand hall reste
     * visible derrière le titre sans étirer une image sur toute la hauteur de la page.
     */
    .heros { min-height: auto; }
    .heros-image {
        height: 38rem;
        object-position: 62% top;
    }
    .heros-voile {
        background:
            linear-gradient(90deg, #070a0fda, #070a0f52),
            linear-gradient(180deg, #070a0f61, #070a0fc2 23rem, var(--nuit) 38rem);
    }
}

@media (max-width: 760px) {
    .entete { flex-wrap: wrap; }
    .entete-bascule { display: block; }
    .entete-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        width: 100%;
        margin: 0.9rem 0 0.2rem;
        padding-top: 0.9rem;
        border-top: 1px solid var(--trait);
    }
    .entete-menu[data-ouvert] { display: flex; }
    .entete-menu a { padding: 0.65rem 0.2rem; }
    .entete-menu a.bouton { margin-top: 0.5rem; justify-content: center; }
    .adresse { grid-template-columns: 1fr 1fr; }
}

/* Une jauge qui bouge n'apporte rien à qui a demandé moins d'animation. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
    .entete, .heros-fond, .heros-actions { display: none; }
    body.page { background: #fff; color: #000; }
}