/* Réglages généraux */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #78d7ff;
}

/* Écran principal */

.ecran-accueil {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(
        to bottom,
        #42bff5 0%,
        #a7eaff 63%,
        #128cd2 64%,
        #0269b1 100%
    );
}

/* Soleil */

.soleil {
    position: absolute;
    top: 8%;
    right: 10%;

    width: 120px;
    height: 120px;
    border-radius: 50%;

    background: #ffe36e;
    box-shadow:
        0 0 35px #ffe36e,
        0 0 90px rgba(255, 227, 110, 0.7);
}

/* Nuages */

.nuages {
    position: absolute;
    width: 170px;
    height: 45px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.85);
}

.nuages::before,
.nuages::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.nuages::before {
    width: 70px;
    height: 70px;
    left: 30px;
    bottom: 5px;
}

.nuages::after {
    width: 90px;
    height: 90px;
    right: 20px;
    bottom: 3px;
}

.nuage-1 {
    top: 15%;
    left: 8%;
    animation: flottement 5s ease-in-out infinite;
}

.nuage-2 {
    top: 30%;
    right: 22%;
    transform: scale(0.7);
    animation: flottement 7s ease-in-out infinite reverse;
}

/* Carte centrale */

.contenu-accueil {
    position: relative;
    z-index: 10;

    width: min(90%, 650px);
    padding: 45px 35px;

    text-align: center;

    background: rgba(255, 255, 255, 0.91);
    border: 5px solid #123f68;
    border-radius: 24px;

    box-shadow:
        0 12px 0 #0b2b48,
        0 25px 45px rgba(0, 41, 75, 0.35);
}

.sous-titre {
    margin-bottom: 5px;

    color: #e56a28;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
}

h1 {
    margin-bottom: 15px;

    color: #0879bf;
    font-size: clamp(55px, 10vw, 100px);
    line-height: 1;
    letter-spacing: 3px;

    text-shadow:
        4px 4px 0 #ffffff,
        7px 7px 0 #123f68;
}

.description {
    max-width: 520px;
    margin: 0 auto 28px;

    color: #24435b;
    font-size: 18px;
    line-height: 1.6;
}

#bouton-jouer {
    padding: 18px 32px;

    color: white;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;

    background: linear-gradient(to bottom, #ffad32, #f06b20);
    border: 4px solid #8d3814;
    border-radius: 14px;

    box-shadow: 0 7px 0 #8d3814;
    cursor: pointer;

    transition: transform 0.15s, box-shadow 0.15s;
}

#bouton-jouer:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 0 #8d3814;
}

#bouton-jouer:active {
    transform: translateY(5px);
    box-shadow: 0 2px 0 #8d3814;
}

.version {
    margin-top: 22px;
    color: #6b879b;
    font-size: 13px;
}

/* Décor */

.ile {
    position: absolute;
    z-index: 5;
    bottom: 14%;
    left: 8%;

    width: 210px;
    height: 55px;
    border-radius: 50%;

    background: #efc366;
    border-bottom: 15px solid #8d5a2b;
}

.palmier {
    position: absolute;
    bottom: 24px;
    left: 48px;
}

.tronc {
    width: 18px;
    height: 100px;
    margin-left: 45px;

    background: #8d542d;
    border: 3px solid #60341e;
    border-radius: 50%;

    transform: rotate(8deg);
}

.feuilles {
    position: absolute;
    top: -53px;
    left: 3px;
    font-size: 85px;
}

.bateau {
    position: absolute;
    left: 340px;
    top: 55px;

    font-size: 70px;
    animation: bateau 3s ease-in-out infinite;
}

.mer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
}

.vague {
    position: absolute;
    width: 140%;
    height: 70px;
    left: -20%;

    border-radius: 50%;
    border-top: 8px solid rgba(255, 255, 255, 0.65);
}

.vague-1 {
    top: 0;
    animation: vagues 5s linear infinite;
}

.vague-2 {
    top: 45px;
    animation: vagues 7s linear infinite reverse;
}

.vague-3 {
    top: 90px;
    animation: vagues 9s linear infinite;
}

/* Animations */

@keyframes flottement {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes bateau {
    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-10px) rotate(3deg);
    }
}

@keyframes vagues {
    from {
        transform: translateX(-30px);
    }

    to {
        transform: translateX(30px);
    }
}

/* Adaptation aux téléphones */

@media (max-width: 700px) {
    .contenu-accueil {
        padding: 35px 20px;
    }

    .description {
        font-size: 16px;
    }

    .ile {
        left: -40px;
        transform: scale(0.75);
    }

    .soleil {
        width: 85px;
        height: 85px;
    }
}/* Écran de création du personnage */

.cache {
    display: none !important;
}

/* =========================================
   V95 — ACCÈS JOUEUR AVANT LA CRÉATION
========================================= */

.ecran-acces {
    position: fixed;
    z-index: 100;
    inset: 0;
    padding: 24px;
    display: grid;
    place-items: center;
    overflow-y: auto;
    color: #eaf4f8;
    background:
        linear-gradient(120deg, rgba(3, 22, 39, .78), rgba(3, 52, 78, .55)),
        url("images/mer-bleue-creation.png") center / cover fixed;
}

.panneau-acces-joueur {
    width: min(560px, 100%);
    overflow: hidden;
    background: #081a2b;
    border: 2px solid #c9943e;
    border-radius: 18px;
    box-shadow:
        0 0 0 5px #082b4a,
        0 24px 70px rgba(0, 8, 18, .72);
}

.entete-acces-joueur {
    padding: 18px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    text-align: left;
    background: linear-gradient(90deg, #061d35, #0b365b 48%, #061d35);
    border-bottom: 2px solid #c9943e;
}

.entete-acces-joueur > img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.entete-acces-joueur div {
    display: grid;
}

.entete-acces-joueur small {
    color: #54d9e7;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.6px;
}

.entete-acces-joueur strong {
    color: #f6d58c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    letter-spacing: 2px;
}

.contenu-acces-joueur {
    padding: 30px 34px 28px;
    text-align: center;
}

.sur-titre-acces {
    margin: 0 0 7px;
    color: #62dce8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.contenu-acces-joueur h1 {
    margin: 0;
    color: #f3f8fb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 5vw, 36px);
    line-height: 1.1;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(51, 190, 220, 0.22);
}

.description-acces-joueur {
    max-width: 450px;
    margin: 13px auto 0;
    color: #9cb4c3;
    font-size: 13px;
    line-height: 1.55;
}

.avantages-acces-joueur {
    margin: 22px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.avantages-acces-joueur span {
    min-height: 72px;
    padding: 10px 7px;
    display: grid;
    place-items: center;
    gap: 5px;
    color: #bcd1dc;
    font-size: 10px;
    font-weight: 800;
    background: #0c263a;
    border: 1px solid #284d65;
    border-radius: 9px;
}

.avantages-acces-joueur img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.actions-acces-joueur {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action-acces-principale,
.action-acces-secondaire,
.action-acces-hors-ligne {
    min-height: 46px;
    padding: 11px 15px;
    font-weight: 900;
    border-radius: 9px;
    cursor: pointer;
}

.action-acces-principale {
    color: #04141d;
    background: linear-gradient(135deg, #48dce5, #18a6c1);
    border: 1px solid #71edf1;
    box-shadow: 0 3px 0 #08667c;
}

.action-acces-secondaire {
    color: #d8e8ef;
    background: #0e2e45;
    border: 1px solid #3d6a83;
    box-shadow: 0 3px 0 #061522;
}

.action-acces-principale:hover,
.action-acces-secondaire:hover,
.action-acces-hors-ligne:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.separateur-acces-joueur {
    margin: 20px 0 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #668397;
    font-size: 9px;
    font-weight: 900;
}

.separateur-acces-joueur::before,
.separateur-acces-joueur::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #29485d;
}

.action-acces-hors-ligne {
    width: 100%;
    color: #a9c0cd;
    background: transparent;
    border: 1px solid #36566b;
}

.note-acces-joueur {
    margin: 11px 0 0;
    color: #6f8b9c;
    font-size: 10px;
    line-height: 1.45;
}

.statut-acces-joueur {
    min-height: 15px;
    margin: 10px 0 0;
    color: #e7bc65;
    font-size: 10px;
}

@media (max-width: 560px) {
    .ecran-acces {
        padding: 12px;
    }

    .contenu-acces-joueur {
        padding: 24px 18px 22px;
    }

    .actions-acces-joueur {
        grid-template-columns: 1fr;
    }

    .avantages-acces-joueur span {
        min-height: 65px;
        font-size: 9px;
    }
}

.creation-personnage {
    position: fixed;
    z-index: 100;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 25px;
    overflow-y: auto;

    background:
        linear-gradient(rgba(5, 68, 110, 0.55), rgba(4, 34, 65, 0.75)),
        linear-gradient(to bottom, #5ed8ff, #0872b5);
}

.panneau-creation {
    width: min(950px, 100%);
    padding: 28px;

    background: #fffaf0;
    border: 5px solid #173f61;
    border-radius: 24px;

    box-shadow:
        0 10px 0 #0b2b48,
        0 25px 60px rgba(0, 0, 0, 0.35);
}

.titre-creation {
    margin-bottom: 25px;
    text-align: center;
}

.titre-creation p {
    color: #e66c27;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.titre-creation h2 {
    color: #0879bf;
    font-size: clamp(30px, 6vw, 50px);
    text-shadow: 3px 3px 0 #bceaff;
}

.zone-creation {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 35px;
}

/* Aperçu du personnage */

.apercu-personnage {
    min-height: 470px;
    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: linear-gradient(#8be1ff 0 65%, #e6c479 65%);
    border: 4px solid #245577;
    border-radius: 18px;
}

.avatar {
    position: relative;

    width: 180px;
    height: 290px;

    transition: background-color 0.2s;
}

.visage {
    position: absolute;
    z-index: 2;
    top: 35px;
    left: 37px;

    width: 106px;
    height: 125px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px 25px;

    background: inherit;
    border: 4px solid #593d31;
    border-radius: 48% 48% 44% 44%;
}

.oeil {
    color: #183348;
    font-size: 19px;
}

.sourire {
    position: absolute;
    bottom: 23px;
    left: 38px;

    width: 30px;
    height: 14px;

    border-bottom: 4px solid #713e34;
    border-radius: 50%;
}

.tenue {
    position: absolute;
    z-index: 1;
    bottom: 0;

    width: 180px;
    height: 155px;

    border: 5px solid #173f61;
    border-radius: 45px 45px 15px 15px;
}

.tenue::after {
    content: "";
    position: absolute;
    top: 0;
    left: 67px;

    width: 36px;
    height: 55px;

    background: #fff3dc;
    border: 4px solid #173f61;
    border-top: 0;
    border-radius: 0 0 18px 18px;
}

/* Peaux */

.peau-claire {
    background-color: #ffd4b8;
}

.peau-doree {
    background-color: #dc9e65;
}

.peau-brune {
    background-color: #a96743;
}

.peau-foncee {
    background-color: #70422f;
}

/* Coiffures */

.cheveux {
    position: absolute;
    z-index: 4;
    top: 13px;
    left: 27px;

    width: 126px;
    height: 70px;

    border: 4px solid #3a261e;
}

.cheveux-courts {
    border-radius: 55px 55px 18px 18px;
}

.cheveux-piques {
    top: 0;
    height: 82px;

    border-radius: 70% 30% 65% 25%;
    transform: rotate(-6deg);
}

.cheveux-longs {
    left: 23px;
    width: 134px;
    height: 170px;

    border-radius: 55px 55px 30px 30px;
}

/* Couleurs des cheveux */

.couleur-brune {
    background: #6f3f26;
}

.couleur-noire {
    background: #1c2630;
}

.couleur-blonde {
    background: #f2c84b;
}

.couleur-rouge {
    background: #b73b2f;
}

.couleur-bleue {
    background: #237fbe;
}

/* Tenues */

.tenue-bleue {
    background: #1688ca;
}

.tenue-rouge {
    background: #d84c3f;
}

.tenue-verte {
    background: #48985a;
}

.tenue-noire {
    background: #303a46;
}

#nom-apercu {
    z-index: 5;
    margin-top: 18px;

    color: #173f61;
    font-size: 24px;
    font-weight: bold;
}

.rang-depart {
    z-index: 5;
    margin-top: 6px;
    color: #73513b;
}

/* Options */

.options-personnage {
    display: flex;
    flex-direction: column;
}

.options-personnage label {
    margin: 11px 0 6px;

    color: #173f61;
    font-size: 15px;
    font-weight: bold;
}

.options-personnage input,
.options-personnage select {
    width: 100%;
    padding: 12px;

    color: #173f61;
    font-size: 16px;

    background: white;
    border: 3px solid #9bc4db;
    border-radius: 10px;
    outline: none;
}

.options-personnage input:focus,
.options-personnage select:focus {
    border-color: #0879bf;
}

.bouton-valider {
    margin-top: 24px;
    padding: 15px;

    color: white;
    font-size: 16px;
    font-weight: bold;

    background: linear-gradient(#ffad32, #ef6c23);
    border: 3px solid #8d3814;
    border-radius: 12px;

    box-shadow: 0 5px 0 #8d3814;
    cursor: pointer;
}

.bouton-retour {
    margin-top: 15px;
    padding: 10px;

    color: #31566f;
    font-weight: bold;

    background: transparent;
    border: 0;
    cursor: pointer;
}

@media (max-width: 750px) {
    .zone-creation {
        grid-template-columns: 1fr;
    }

    .apercu-personnage {
        min-height: 390px;
    }

    .panneau-creation {
        padding: 18px;
    }
}/* Écran principal du jeu */

.ecran-jeu {
    min-height: 100vh;
    overflow-y: auto;

    color: #173f61;
    background:
        linear-gradient(rgba(210, 244, 255, 0.88), rgba(225, 242, 247, 0.95)),
        linear-gradient(to bottom, #55cffa, #0872b5);
}

.barre-superieure {
    min-height: 90px;
    padding: 15px 5%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;

    color: white;
    background: #123f68;
    border-bottom: 6px solid #f09a2d;
}

.barre-superieure h2 {
    font-size: 32px;
}

.barre-superieure p {
    color: #a9e6ff;
}

.ressources {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ressources span {
    padding: 10px 15px;

    background: #092c49;
    border: 2px solid #3e789f;
    border-radius: 12px;
}

.contenu-jeu {
    width: min(1200px, 94%);
    margin: 35px auto;

    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 28px;
}

/* Profil */

.profil-joueur {
    height: max-content;
    padding: 25px;

    text-align: center;

    background: #fffaf0;
    border: 4px solid #173f61;
    border-radius: 20px;
    box-shadow: 0 8px 0 #0b2b48;
}

.portrait-jeu {
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 85px;

    background: linear-gradient(#86dcff 65%, #e4bd65 65%);
    border: 4px solid #173f61;
    border-radius: 50%;
}

.profil-joueur h3 {
    font-size: 26px;
}

.statut-joueur {
    margin-top: 5px;
    color: #d26727;
    font-weight: bold;
}

.bloc-experience {
    margin-top: 25px;
}

.ligne-experience {
    margin-bottom: 7px;

    display: flex;
    justify-content: space-between;

    font-size: 14px;
    font-weight: bold;
}

.barre-experience {
    height: 18px;
    overflow: hidden;

    background: #d5e1e8;
    border: 3px solid #173f61;
    border-radius: 20px;
}

#remplissage-experience {
    width: 0%;
    height: 100%;

    background: linear-gradient(to right, #ff9a2f, #ffd84e);
    transition: width 0.3s;
}

.bouton-secondaire {
    margin-top: 25px;
    padding: 10px 15px;

    color: #31566f;
    font-weight: bold;

    background: #e3edf2;
    border: 2px solid #799aae;
    border-radius: 9px;
    cursor: pointer;
}

/* Entraînements */

.zone-entrainement {
    min-width: 0;
}

.entete-zone {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
}

.petit-titre {
    color: #df6521;
    font-weight: bold;
    text-transform: uppercase;
}

.entete-zone h2 {
    color: #123f68;
    font-size: 35px;
}

.entete-zone > p {
    max-width: 280px;
    text-align: right;
}

.cartes-entrainement {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.carte-entrainement {
    padding: 22px;

    display: flex;
    flex-direction: column;

    background: #fffaf0;
    border: 4px solid #173f61;
    border-radius: 18px;

    box-shadow: 0 7px 0 #0b2b48;
    transition: transform 0.2s;
}

.carte-entrainement:hover {
    transform: translateY(-5px);
}

.carte-sabre {
    border-top-color: #df5454;
}

.carte-combat {
    border-top-color: #e2972e;
}

.carte-tir {
    border-top-color: #368b62;
}

.icone-discipline {
    margin-bottom: 12px;
    font-size: 55px;
}

.carte-entrainement h3 {
    margin-bottom: 12px;
    font-size: 22px;
}

.carte-entrainement p {
    min-height: 85px;
    color: #557084;
    line-height: 1.5;
}

.niveau-competence {
    margin: 18px 0;
    padding: 10px;

    text-align: center;
    font-size: 18px;

    background: #e5f3f8;
    border-radius: 9px;
}

.bouton-entrainement {
    margin-top: auto;
    padding: 13px;

    color: white;
    font-size: 16px;
    font-weight: bold;

    background: #0879bf;
    border: 0;
    border-radius: 10px;

    box-shadow: 0 5px 0 #064f7b;
    cursor: pointer;
}

.bouton-entrainement:hover {
    background: #0b8bd8;
}

.bouton-entrainement:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #064f7b;
}

.bouton-entrainement span {
    display: block;
    margin-top: 4px;

    color: #c7efff;
    font-size: 12px;
}

.bouton-entrainement:disabled {
    background: #8b9ba5;
    box-shadow: 0 5px 0 #65727a;
    cursor: not-allowed;
}

.message-jeu {
    margin-top: 25px;
    padding: 17px;

    text-align: center;
    font-weight: bold;

    background: #fff7ce;
    border: 3px solid #e1a83b;
    border-radius: 12px;
}

@media (max-width: 950px) {
    .cartes-entrainement {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .barre-superieure {
        flex-direction: column;
        align-items: flex-start;
    }

    .contenu-jeu {
        grid-template-columns: 1fr;
    }

    .entete-zone {
        display: block;
    }

    .entete-zone > p {
        margin-top: 10px;
        text-align: left;
    }
}/* Un seul écran doit être visible à la fois */

.ecran-accueil.cache,
.creation-personnage.cache,
.ecran-jeu.cache {
    display: none !important;
}/* Décors manga de Mer Bleue */

.creation-personnage {
    background:
        linear-gradient(
            rgba(5, 47, 78, 0.25),
            rgba(5, 47, 78, 0.45)
        ),
        url("images/mer-bleue-creation.png");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.ecran-jeu {
    background:
        linear-gradient(
            rgba(224, 247, 255, 0.35),
            rgba(205, 231, 239, 0.55)
        ),
        url("images/mer-bleue-entrainement.png");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Panneaux légèrement transparents */

.panneau-creation {
    background: rgba(255, 250, 240, 0.94);
    backdrop-filter: blur(4px);
}

.profil-joueur,
.carte-entrainement {
    background: rgba(255, 250, 240, 0.94);
    backdrop-filter: blur(4px);
}/* =========================================
   SÉLECTION DES PERSONNAGES MANGA
========================================= */

#formulaire-personnage {
    display: flex;
    flex-direction: column;
}

.zone-nom {
    width: min(500px, 100%);
    margin: 0 auto 22px;

    display: flex;
    flex-direction: column;
}

.zone-nom label {
    margin-bottom: 7px;

    color: #173f61;
    font-size: 16px;
    font-weight: bold;
}

.zone-nom input {
    width: 100%;
    padding: 14px;

    color: #173f61;
    font-size: 17px;

    background: white;
    border: 3px solid #8fc4df;
    border-radius: 11px;
    outline: none;
}

.zone-nom input:focus {
    border-color: #0879bf;
    box-shadow: 0 0 0 4px rgba(8, 121, 191, 0.15);
}

.instruction-personnage {
    margin-bottom: 15px;

    color: #173f61;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.grille-personnages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.carte-personnage {
    position: relative;
    overflow: hidden;

    padding: 0;

    background: #d9f4ff;
    border: 4px solid #94b9ca;
    border-radius: 16px;

    box-shadow: 0 6px 0 #65879a;
    cursor: pointer;

    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}

.carte-personnage:hover {
    transform: translateY(-5px);
    border-color: #168bc8;
}

.carte-personnage img {
    width: 100%;
    height: 330px;

    display: block;

    object-fit: cover;
    object-position: center top;
}

.carte-personnage span {
    display: block;
    padding: 11px;

    color: #173f61;
    font-size: 15px;
    font-weight: bold;

    background: rgba(255, 255, 255, 0.94);
}

.carte-personnage.selectionne {
    border-color: #f08025;

    box-shadow:
        0 6px 0 #9c4318,
        0 0 0 5px rgba(255, 160, 56, 0.35);

    transform: translateY(-5px);
}

.carte-personnage.selectionne::after {
    content: "✓";

    position: absolute;
    top: 10px;
    right: 10px;

    width: 36px;
    height: 36px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    font-size: 22px;
    font-weight: bold;

    background: #f08025;
    border: 3px solid white;
    border-radius: 50%;
}

#formulaire-personnage .bouton-valider {
    width: min(420px, 100%);
    margin: 28px auto 5px;
}

/* Portrait du personnage dans le jeu */

.portrait-jeu {
    width: 190px;
    height: 260px;

    padding: 0;
    overflow: hidden;

    background: #8edfff;
    border-radius: 16px;
}

.portrait-jeu img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;
}

/* Adaptation aux écrans plus petits */

@media (max-width: 900px) {
    .grille-personnages {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .grille-personnages {
        grid-template-columns: 1fr;
    }

    .carte-personnage img {
        height: 420px;
    }
}

/* ========================================================================== */
/* V70 — Arène Endgame                                                       */
/* ========================================================================== */

.entete-arene-endgame {
    border-color: rgba(242, 195, 90, 0.38);
    background: linear-gradient(135deg, rgba(24, 38, 57, 0.96), rgba(20, 28, 43, 0.96));
}

.resume-arene-endgame {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.resume-arene-endgame span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 132px;
    padding: 10px 14px;
    border: 1px solid rgba(242, 195, 90, 0.22);
    border-radius: 10px;
    background: rgba(8, 18, 30, 0.55);
    color: #9fb5c8;
    font-size: 12px;
}

.resume-arene-endgame strong {
    color: #f2c35a;
    font-size: 17px;
}

.message-arene-endgame {
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid rgba(64, 181, 215, 0.24);
    border-radius: 10px;
    background: rgba(8, 28, 43, 0.72);
    color: #b9d6e4;
}

.grille-boss-endgame {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.carte-boss-endgame {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(76, 156, 191, 0.28);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(14, 34, 51, 0.96), rgba(7, 20, 33, 0.98));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.carte-boss-endgame.vaincu {
    border-color: rgba(242, 195, 90, 0.48);
}

.carte-boss-endgame.verrouille {
    filter: saturate(0.45);
    opacity: 0.68;
}

.portrait-boss-endgame {
    height: 300px;
    margin: -4px -4px 12px;
    border-bottom: 1px solid rgba(76, 156, 191, 0.2);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: radial-gradient(circle at 50% 70%, rgba(42, 92, 119, 0.2), transparent 66%);
}

.portrait-boss-endgame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.carte-boss-endgame.verrouille .portrait-boss-endgame img {
    filter: brightness(0.18) grayscale(1);
}

.rang-boss-endgame {
    color: #f2c35a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.carte-boss-endgame h3 {
    margin: 5px 0 12px;
    color: #e7f5fb;
    font-size: 21px;
}

.stats-boss-endgame {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}

.stats-boss-endgame span {
    padding: 8px;
    border-radius: 8px;
    background: rgba(4, 15, 26, 0.7);
    text-align: center;
}

.stats-boss-endgame small,
.stats-boss-endgame strong {
    display: block;
}

.stats-boss-endgame small {
    color: #6f92a8;
    font-size: 9px;
}

.stats-boss-endgame strong {
    margin-top: 3px;
    color: #d9ecf5;
    font-size: 13px;
}

.mecanique-carte-endgame,
.mecanique-boss-endgame {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-left: 3px solid #45b9d8;
    background: rgba(29, 81, 103, 0.16);
    color: #9ebac9;
    font-size: 12px;
    line-height: 1.45;
}

.mecanique-carte-endgame strong,
.mecanique-boss-endgame strong {
    color: #65d2ed;
}

.recompenses-boss-endgame {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 11px 0;
    color: #e7c875;
    font-size: 12px;
}

.record-boss-endgame {
    display: block;
    margin-bottom: 10px;
    color: #7fa4b7;
}

.carte-boss-endgame > .bouton-affronter-outre-horizon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    border: 1px solid #72d9ed;
    border-radius: 10px;
    background: linear-gradient(135deg, #20b8d3, #3dd2df);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.35),
        0 7px 18px rgba(21, 156, 187, 0.24);
    color: #04131d;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.carte-boss-endgame > .bouton-affronter-outre-horizon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.carte-boss-endgame > .bouton-affronter-outre-horizon:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.42),
        0 10px 24px rgba(24, 185, 215, 0.38);
}

.carte-boss-endgame > .bouton-affronter-outre-horizon:not(:disabled):active {
    transform: translateY(0);
}

.carte-boss-endgame > .bouton-affronter-outre-horizon:disabled {
    border-color: rgba(112, 139, 153, 0.28);
    background: rgba(18, 42, 57, 0.72);
    box-shadow: none;
    color: #718895;
    cursor: not-allowed;
    opacity: 0.74;
}

.carte-boss-endgame > .bouton-affronter-outre-horizon:focus-visible {
    outline: 3px solid rgba(100, 224, 244, 0.42);
    outline-offset: 3px;
}

.combat-arene-endgame {
    display: grid;
    grid-template-columns: minmax(220px, 34%) 1fr;
    gap: 22px;
    min-height: 410px;
    margin: 16px 0 20px;
    padding: 18px;
    border: 1px solid rgba(242, 195, 90, 0.36);
    border-radius: 14px;
    background: radial-gradient(circle at 16% 55%, rgba(50, 112, 137, 0.19), transparent 36%), rgba(6, 18, 29, 0.96);
}

.combat-outre-horizon-principal {
    min-height: 520px;
    margin-top: 0;
    border-color: rgba(87, 210, 231, 0.52);
    background:
        radial-gradient(circle at 17% 58%, rgba(38, 153, 183, 0.24), transparent 38%),
        linear-gradient(145deg, rgba(8, 31, 47, 0.98), rgba(4, 16, 28, 0.99));
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.05),
        0 14px 34px rgba(0, 8, 17, 0.34);
}

.visuel-combat-endgame {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 370px;
}

.visuel-combat-endgame img {
    width: 100%;
    height: 370px;
    object-fit: contain;
    object-position: center bottom;
}

.infos-combat-endgame {
    align-self: center;
}

.entete-combat-endgame {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.entete-combat-endgame small {
    color: #5dbcd8;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.entete-combat-endgame h3 {
    margin: 4px 0 16px;
    color: #f0f7fa;
    font-size: 28px;
}

.chrono-endgame {
    padding: 9px 12px;
    border: 1px solid rgba(242, 195, 90, 0.36);
    border-radius: 9px;
    color: #f2c35a;
    font-size: 22px;
}

.barre-pv-endgame {
    height: 14px;
    overflow: hidden;
    border: 1px solid rgba(98, 175, 201, 0.24);
    border-radius: 999px;
    background: rgba(2, 11, 18, 0.9);
}

.barre-pv-endgame i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b53f4e, #e76d68);
    transition: width 0.16s linear;
}

.valeurs-pv-endgame {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 15px;
    color: #9db6c5;
    font-size: 12px;
}

.valeurs-pv-endgame strong {
    color: #edf7fa;
}

.infos-combat-endgame > button {
    margin-top: 14px;
}

.carte-coffre.coffre-endgame {
    border-color: rgba(242, 195, 90, 0.42);
    background: linear-gradient(180deg, rgba(52, 44, 25, 0.36), rgba(10, 24, 38, 0.96));
}

.carte-coffre.coffre-endgame .visuel-coffre img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.carte-coffre.coffre-endgame .etiquette-rarete {
    color: #f2c35a;
}

@media (max-width: 1100px) {
    .grille-boss-endgame {
        grid-template-columns: 1fr;
    }

    .portrait-boss-endgame {
        height: 250px;
    }
}

@media (max-width: 760px) {
    .combat-arene-endgame {
        grid-template-columns: 1fr;
    }

    .visuel-combat-endgame,
    .visuel-combat-endgame img {
        height: 280px;
        min-height: 280px;
    }

    .entete-combat-endgame,
    .valeurs-pv-endgame {
        flex-direction: column;
    }
}


/* =========================================
   TABLEAU DE BORD ET COMBAT AUTOMATIQUE
========================================= */

.tableau-jeu {
    height: 100vh;
    overflow-y: auto;
    min-height: 100vh;
    color: #dcecff;
    background: #07152a;
}

.barre-app {
    min-height: 76px;
    padding: 13px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    background: #09192f;
    border-bottom: 1px solid #254261;
}

.logo-jeu {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #53d6f3;
    font-size: 27px;
    letter-spacing: 2px;
}

.logo-jeu span {
    color: #efb746;
    font-size: 34px;
}

.ressources-app {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ressource-app,
.experience-app {
    min-height: 44px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dcecff;
    background: #102440;
    border: 1px solid #315274;
    border-radius: 11px;
}

.ressource-app strong {
    color: #f6c553;
}

.experience-app {
    min-width: 280px;
}

.experience-app > span {
    color: #59d8f1;
    font-weight: bold;
}

.barre-xp-app {
    width: 100px;
    height: 9px;
    overflow: hidden;
    background: #071425;
    border-radius: 20px;
}

.barre-xp-app #remplissage-experience {
    height: 100%;
    background: linear-gradient(to right, #19a6be, #47e2ce);
    transition: width 0.3s;
}

.experience-app > strong {
    min-width: 76px;
    font-size: 12px;
}

.coquille-jeu {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
}

.navigation-jeu {
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    background: #0b1b34;
    border-right: 1px solid #28445f;
}

.mini-profil {
    padding: 15px;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 12px;
    background: #102541;
    border: 1px solid #315172;
    border-radius: 14px;
}

.mini-profil img {
    width: 58px;
    height: 70px;
    object-fit: cover;
    object-position: center top;
    background: #8ce2f4;
    border: 2px solid #47cbe6;
    border-radius: 10px;
}

.mini-profil h2 {
    overflow: hidden;
    color: white;
    font-size: 17px;
    text-overflow: ellipsis;
}

.mini-profil p {
    margin-top: 5px;
    color: #72cee4;
    font-size: 13px;
}

.menu-jeu {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.menu-jeu button {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #cddcef;
    font-size: 15px;
    text-align: left;
    background: #10223d;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
}

.menu-jeu button:hover,
.menu-jeu button.actif {
    color: white;
    background: linear-gradient(90deg, #087d9e, #115372);
    border-color: #27b8d7;
}

.bouton-recommencer {
    margin-top: auto;
    padding: 11px;
    color: #9fb4cb;
    background: transparent;
    border: 1px solid #3c5875;
    border-radius: 9px;
    cursor: pointer;
}

.contenu-tableau {
    width: min(1120px, calc(100% - 40px));
    margin: 25px auto 45px;
}

.module-combat {
    overflow: hidden;
    background: #0d2039;
    border: 1px solid #315473;
    border-radius: 17px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}

.entete-module-combat {
    min-height: 68px;
    padding: 13px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #102540;
}

.commandes-combat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.commandes-combat label {
    color: #8fa8bd;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

#selecteur-region {
    max-width: 220px;
    padding: 10px 35px 10px 12px;
    color: white;
    background: #08182b;
    border: 1px solid #3b607d;
    border-radius: 9px;
    cursor: pointer;
}

#selecteur-region:focus {
    outline: 2px solid #16b6d4;
}

.controle-region-cache {
    display: none !important;
}

.ile-active-combat {
    min-width: 190px;
    padding: 8px 12px;
    background: #08182b;
    border: 1px solid #3b607d;
    border-radius: 9px;
}

.ile-active-combat span {
    display: block;
    color: #7893aa;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.ile-active-combat strong {
    display: block;
    margin-top: 3px;
    color: #62d9eb;
    font-size: 12px;
}

.chrono-boss {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 9px 12px;
    color: #ffd25e;
    background: #351922;
    border: 1px solid #b64f5e;
    border-radius: 9px;
    animation: pulsation-chrono 1s ease-in-out infinite;
}

.chrono-boss.visible {
    display: flex;
}

.chrono-boss strong {
    font-size: 20px;
}

.degats-combat.coup-special {
    color: #ffd45c;
    font-size: 27px;
    text-shadow:
        0 2px 0 #6d361b,
        0 0 12px rgba(255, 195, 54, 0.7);
}

@keyframes pulsation-chrono {
    50% {
        box-shadow: 0 0 12px rgba(237, 77, 91, 0.35);
    }
}

.details-prochain-boss {
    margin-top: 10px;
    display: grid;
    gap: 5px;
}

.details-prochain-boss span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #819bb3;
    font-size: 11px;
}

.details-prochain-boss strong {
    color: #f4bd50;
}

.verdict-puissance-boss {
    margin-top: 10px;
    padding: 7px 8px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    border-radius: 7px;
}

.verdict-puissance-boss.suffisant {
    color: #77edb4;
    background: rgba(25, 122, 81, 0.25);
    border: 1px solid #2b9e70;
}

.verdict-puissance-boss.limite {
    color: #ffd36f;
    background: rgba(150, 103, 24, 0.25);
    border: 1px solid #b47b27;
}

.verdict-puissance-boss.insuffisant {
    color: #ff8b91;
    background: rgba(151, 42, 54, 0.25);
    border: 1px solid #a74250;
}

#affronter-prochain-boss.boss-disponible {
    color: white;
    font-weight: bold;
    background: linear-gradient(135deg, #ec6b28, #d72f45);
    border: 1px solid #ffb44f;
    box-shadow:
        0 0 0 2px rgba(255, 180, 79, 0.15),
        0 0 16px rgba(230, 63, 57, 0.48);
    cursor: pointer;
    animation: appel-boss 1.4s ease-in-out infinite;
}

#affronter-prochain-boss.boss-disponible:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ff843b, #ed4055);
}

@keyframes appel-boss {
    50% {
        box-shadow:
            0 0 0 4px rgba(255, 180, 79, 0.1),
            0 0 24px rgba(230, 63, 57, 0.7);
    }
}

.pastille-section {
    color: #58d9ef;
    font-size: 13px;
    font-weight: bold;
}

.entete-module-combat h2 {
    margin-top: 4px;
    color: white;
    font-size: 20px;
}

.progression-combat {
    min-width: 110px;
    padding: 9px 13px;
    text-align: center;
    background: #08182b;
    border: 1px solid #315473;
    border-radius: 10px;
}

.progression-combat strong {
    color: #5de0ef;
    font-size: 20px;
}

.zone-pv-ennemi {
    padding: 10px 18px;
    display: grid;
    grid-template-columns: 28px 1fr 92px;
    align-items: center;
    gap: 10px;
    color: #bdd0e5;
    background: #091a30;
}

.zone-pv-ennemi > strong {
    font-size: 12px;
    text-align: right;
}

.zone-pv-ennemi .barre-pv-ennemi {
    width: 100%;
    height: 12px;
    margin: 0;
    overflow: hidden;
    background: #05101f;
    border: 0;
    border-radius: 20px;
}

.zone-pv-ennemi #remplissage-pv-ennemi {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #e94255, #ff6e67);
    transition: width 0.35s;
}

.scene-combat {
    position: relative;
    height: clamp(300px, 40vw, 440px);
    overflow: hidden;
    background:
        linear-gradient(rgba(6, 35, 54, 0.04), rgba(5, 24, 36, 0.22)),
        url("images/mer-bleue-entrainement.png");
    background-size: cover;
    background-position: center;
}

.chrono-boss-scene {
    position: absolute;
    z-index: 30;
    top: 16px;
    left: 50%;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: #fff2bd;
    background: rgba(53, 14, 24, 0.94);
    border: 2px solid #f05a63;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
    animation: pulsation-chrono 1s ease-in-out infinite;
}

.chrono-boss-scene.visible {
    display: flex;
}

.chrono-boss-scene span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.chrono-boss-scene div {
    display: grid;
    gap: 3px;
}

.chrono-boss-scene small {
    color: #ffbdc3;
    font-size: 10px;
    font-weight: 800;
}

.chrono-boss-scene small.victoire-probable {
    color: #78efad;
}

.chrono-boss-scene small.temps-insuffisant {
    color: #ff8c96;
}

.chrono-boss-scene strong,
.chrono-boss-scene strong span {
    color: #ffd25e;
    font-size: 24px;
}

.scene-combat.biome-camp {
    box-shadow: inset 0 0 90px rgba(225, 171, 74, 0.12);
}

.scene-combat.biome-foret,
.scene-combat.biome-jungle {
    box-shadow: inset 0 0 110px rgba(35, 133, 73, 0.3);
}

.scene-combat.biome-desert {
    box-shadow: inset 0 0 110px rgba(225, 153, 44, 0.35);
}

.scene-combat.biome-marais {
    box-shadow: inset 0 0 120px rgba(75, 99, 58, 0.45);
}

.scene-combat.biome-volcan {
    box-shadow: inset 0 0 130px rgba(199, 48, 27, 0.5);
}

.scene-combat.biome-glace {
    box-shadow: inset 0 0 120px rgba(87, 203, 238, 0.38);
}

.scene-combat.biome-tempete {
    box-shadow: inset 0 0 130px rgba(51, 67, 126, 0.55);
}

.scene-combat.biome-celeste {
    box-shadow: inset 0 0 120px rgba(214, 237, 255, 0.38);
}

.scene-combat.biome-abysse {
    box-shadow: inset 0 0 140px rgba(47, 17, 76, 0.7);
}

.image-ennemi {
    position: absolute;
    z-index: 2;
    right: 50%;
    bottom: -2%;
    width: auto;
    height: 91%;
    transform: translateX(50%);
    transform-origin: center bottom;
    filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.35));
}

.image-ennemi.boss {
    height: 102%;
    filter:
        drop-shadow(0 0 18px rgba(255, 73, 79, 0.7))
        drop-shadow(0 12px 10px rgba(0, 0, 0, 0.45));
}

.image-ennemi.ennemi-entre {
    animation: ennemi-arrive 0.55s ease-out;
}

.image-ennemi.ennemi-touche {
    animation: ennemi-touche 0.32s ease-out;
}

.image-ennemi.ennemi-sort {
    animation: ennemi-sort 0.45s ease-in forwards;
}

.scene-combat .degats-combat {
    position: absolute;
    z-index: 20;
    top: 30%;
    left: 55%;
    margin: 0;
    color: #ff8a36;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 3px 0 #4e160a, 0 0 8px white;
    will-change: transform, opacity;
}

.scene-combat .degats-combat.animation-degats {
    animation: degats-flottants 0.8s ease-out forwards;
}

.impact-degats {
    position: absolute;
    z-index: 8;
    top: 30%;
    color: #ff8a36;
    font-size: 38px;
    font-weight: 900;
    pointer-events: none;
    text-shadow: 0 3px 0 #4e160a, 0 0 8px white;
    animation: degats-flottants 0.8s ease-out forwards;
}

.impact-degats.coup-special {
    color: #ffd45c;
    font-size: 42px;
    text-shadow:
        0 3px 0 #6d361b,
        0 0 14px rgba(255, 195, 54, 0.85);
}

.recompenses-combat {
    min-height: 54px;
    padding: 10px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    background: #0a1b30;
}

.recompenses-combat span {
    padding: 7px 13px;
    color: #f4c65a;
    background: #102641;
    border: 1px solid #42627d;
    border-radius: 20px;
}

.recompenses-combat span:nth-child(2) {
    color: #64c8ff;
}

.recompenses-combat p {
    margin-left: auto;
    color: #9eb5cb;
    font-size: 13px;
}

.modules-futurs {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

.modules-futurs article {
    min-height: 180px;
    padding: 20px 15px;
    text-align: center;
    background: #0d2039;
    border: 1px solid #2e4d6a;
    border-radius: 14px;
}

.icone-module {
    color: #67cbe4;
    font-size: 36px;
}

.modules-futurs h3 {
    margin-top: 12px;
    color: white;
    font-size: 16px;
}

.modules-futurs p {
    min-height: 38px;
    margin-top: 8px;
    color: #849cb4;
    font-size: 13px;
}

.modules-futurs button {
    margin-top: 12px;
    padding: 8px 10px;
    color: #758da5;
    background: #0a192c;
    border: 1px solid #294660;
    border-radius: 8px;
}

@keyframes ennemi-arrive {
    from {
        opacity: 0;
        transform: translateX(145%);
    }

    to {
        opacity: 1;
        transform: translateX(50%);
    }
}

@keyframes ennemi-touche {
    0%,
    100% {
        transform: translateX(50%);
    }

    35% {
        transform: translateX(43%) rotate(-4deg);
        filter:
            brightness(1.8)
            drop-shadow(0 0 15px rgba(255, 118, 67, 0.9));
    }
}

@keyframes ennemi-sort {
    from {
        opacity: 1;
        transform: translateX(50%) rotate(0);
    }

    to {
        opacity: 0;
        transform: translateX(-150%) rotate(-13deg);
    }
}

@keyframes degats-flottants {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.8);
    }

    25% {
        opacity: 1;
        transform: translateY(0) scale(1.15);
    }

    100% {
        opacity: 0;
        transform: translateY(-45px) scale(1);
    }
}

@media (max-width: 900px) {
    .barre-app {
        align-items: flex-start;
        flex-direction: column;
    }

    .ressources-app {
        width: 100%;
        flex-wrap: wrap;
    }

    .experience-app {
        min-width: 250px;
        flex: 1;
    }

    .coquille-jeu {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .navigation-jeu {
        padding: 13px 8px;
    }

    .mini-profil {
        display: block;
        padding: 8px;
    }

    .mini-profil img {
        width: 48px;
        height: 58px;
        margin: auto;
        display: block;
    }

    .mini-profil div,
    .menu-jeu span,
    .bouton-recommencer {
        display: none;
    }

    .menu-jeu button {
        justify-content: center;
        padding: 14px 8px;
        font-size: 20px;
    }

    .contenu-tableau {
        width: calc(100% - 24px);
        margin-top: 12px;
    }

    .modules-futurs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .logo-jeu {
        font-size: 21px;
    }

    .ressources-app {
        align-items: stretch;
        flex-direction: column;
    }

    .experience-app {
        min-width: 0;
    }

    .coquille-jeu {
        display: block;
    }

    .navigation-jeu {
        border-right: 0;
        border-bottom: 1px solid #28445f;
    }

    .mini-profil,
    .bouton-recommencer {
        display: none;
    }

    .menu-jeu {
        margin: 0;
        flex-direction: row;
        overflow-x: auto;
    }

    .menu-jeu button {
        min-width: 52px;
    }

    .scene-combat {
        height: 330px;
    }

    .image-ennemi {
        height: 86%;
    }

    .recompenses-combat {
        flex-wrap: wrap;
    }

    .recompenses-combat p {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .modules-futurs {
        grid-template-columns: 1fr;
    }
}

/* Carte des régions */

.entete-regions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.progression-carte-iles {
    min-width: 145px;
    padding: 12px 15px;
    color: #8fa8bd;
    text-align: center;
    background: #08182b;
    border: 1px solid #3b607d;
    border-radius: 10px;
}

.progression-carte-iles strong {
    display: block;
    margin-top: 4px;
    color: #f4bd50;
    font-size: 22px;
}

.grille-regions {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.carte-region {
    position: relative;
    overflow: hidden;
    padding: 18px;
    background:
        linear-gradient(145deg, rgba(21, 49, 78, 0.94), #0b1c32);
    border: 2px solid #315473;
    border-radius: 14px;
}

.carte-region::after {
    content: "";
    position: absolute;
    top: -55px;
    right: -45px;
    width: 150px;
    height: 150px;
    background: var(--couleur-biome, #3c789a);
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}

.carte-region.biome-camp { --couleur-biome: #e2aa48; }
.carte-region.biome-foret { --couleur-biome: #4fa45e; }
.carte-region.biome-jungle { --couleur-biome: #1dd17e; }
.carte-region.biome-desert { --couleur-biome: #e69736; }
.carte-region.biome-marais { --couleur-biome: #7d9252; }
.carte-region.biome-volcan { --couleur-biome: #ed4d35; }
.carte-region.biome-glace { --couleur-biome: #6fddf4; }
.carte-region.biome-tempete { --couleur-biome: #747bdc; }
.carte-region.biome-celeste { --couleur-biome: #e0f3ff; }
.carte-region.biome-abysse { --couleur-biome: #9a55d2; }

.carte-region.active {
    border-color: #42d6e9;
    box-shadow: 0 0 20px rgba(66, 214, 233, 0.2);
}

.carte-region.terminee {
    border-color: #3b9d72;
}

.carte-region.boss {
    border-color: #dc654f;
    box-shadow: 0 0 18px rgba(220, 74, 55, 0.18);
}

.carte-region.verrouillee {
    filter: grayscale(0.65);
    opacity: 0.58;
}

.numero-ile {
    color: #6fcfe1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.icone-biome {
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 18px;
    font-size: 31px;
}

.carte-region h3 {
    max-width: calc(100% - 50px);
    margin-top: 7px;
    color: white;
    font-size: 18px;
}

.nom-biome {
    margin-top: 3px;
    color: #8fa8bd;
    font-size: 12px;
}

.etat-region {
    display: inline-block;
    margin-top: 11px;
    padding: 5px 8px;
    color: #bcd2e3;
    font-size: 11px;
    font-weight: bold;
    background: #07182b;
    border-radius: 6px;
}

.barre-progression-region {
    height: 7px;
    margin-top: 10px;
    overflow: hidden;
    background: #061427;
    border-radius: 10px;
}

.barre-progression-region span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #168dab, #56dfc2);
}

.stats-region {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.stats-region span {
    padding: 7px;
    color: #718ca4;
    font-size: 10px;
    text-align: center;
    background: rgba(5, 20, 37, 0.65);
    border-radius: 6px;
}

.stats-region strong {
    display: block;
    margin-top: 2px;
    color: #d3e4ef;
}

.carte-region button {
    width: 100%;
    margin-top: 11px;
    padding: 9px;
    color: white;
    font-weight: bold;
    background: #087f9d;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.carte-region button:disabled {
    color: #6f8497;
    background: #172e44;
    cursor: not-allowed;
}

.carte-region .bouton-boss-region {
    margin-top: 7px;
    color: #fff4d3;
    background: linear-gradient(135deg, #b53a45, #7d2030);
    border: 1px solid #ef6871;
    box-shadow: 0 4px 12px rgba(181, 58, 69, 0.25);
}

.carte-region .bouton-boss-region:hover:not(:disabled) {
    background: linear-gradient(135deg, #d34b55, #96283a);
}

.carte-region small {
    display: block;
    margin-top: 7px;
    color: #9aafc0;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 750px) {
    .entete-regions {
        align-items: stretch;
        flex-direction: column;
    }

    .grille-regions {
        grid-template-columns: 1fr;
    }

    .stats-region {
        grid-template-columns: 1fr;
    }
}

/* Page Personnage */

.entete-page-personnage {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #102540;
    border: 1px solid #315473;
    border-radius: 16px 16px 0 0;
}

.entete-page-personnage h2 {
    margin-top: 7px;
    color: white;
}

.points-personnage {
    padding: 11px 15px;
    color: #cde1f2;
    background: #08182b;
    border: 1px solid #3b607d;
    border-radius: 10px;
}

.points-personnage strong {
    color: #f4bd50;
    font-size: 22px;
}

.fiche-personnage {
    padding: 25px;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    background: #0d2039;
    border: 1px solid #315473;
    border-top: 0;
    border-radius: 0 0 16px 16px;
}

.grand-portrait {
    padding: 18px;
    text-align: center;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 14px;
}

.grand-portrait img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    object-position: center top;
    background: #8cdef0;
    border-radius: 11px;
}

.grand-portrait h3 {
    margin-top: 14px;
    color: white;
    font-size: 23px;
}

.grand-portrait p {
    margin-top: 5px;
    color: #63cee4;
}

.style-combat-actuel,
.progression-niveau-personnage {
    margin-top: 12px;
    padding: 10px;
    color: #8fa8bd;
    font-size: 12px;
    background: #091a30;
    border: 1px solid #315473;
    border-radius: 9px;
}

.style-combat-actuel strong,
.progression-niveau-personnage strong {
    display: block;
    margin-top: 4px;
    color: #5ed7ea;
    font-size: 15px;
}

.resume-combat-personnage {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.resume-combat-personnage div {
    padding: 10px 6px;
    background: #091a30;
    border: 1px solid #315473;
    border-radius: 9px;
}

.resume-combat-personnage span {
    display: block;
    color: #819bb3;
    font-size: 11px;
    text-transform: uppercase;
}

.resume-combat-personnage strong {
    display: block;
    margin-top: 4px;
    color: #f4bd50;
    font-size: 20px;
}

.liste-statistiques {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.liste-statistiques article {
    min-height: 82px;
    padding: 13px 16px;
    display: grid;
    grid-template-columns: 42px 1fr 42px 42px;
    align-items: center;
    gap: 13px;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 12px;
}

.liste-statistiques article > span {
    font-size: 29px;
}

.liste-statistiques h3 {
    color: white;
    font-size: 16px;
}

.liste-statistiques p {
    margin-top: 3px;
    color: #88a2b9;
    font-size: 13px;
}

.liste-statistiques article > strong {
    color: #f4bd50;
    font-size: 24px;
    text-align: center;
}

.liste-statistiques article > strong small {
    display: block;
    color: #5bd8a4;
    font-size: 11px;
    white-space: nowrap;
}

.liste-statistiques button {
    width: 40px;
    height: 40px;
    color: white;
    font-size: 23px;
    background: #0788a9;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.liste-statistiques button:disabled {
    color: #71869a;
    background: #182f47;
    cursor: not-allowed;
}

@media (max-width: 750px) {
    .entete-page-personnage {
        align-items: flex-start;
        flex-direction: column;
    }

    .fiche-personnage {
        grid-template-columns: 1fr;
    }

    .grand-portrait img {
        height: 460px;
    }
}

.detail-dps-personnage {
    margin-top: 18px;
    padding: 22px;
    background: #0d2039;
    border: 1px solid #315473;
    border-radius: 16px;
}

.detail-dps-personnage > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.detail-dps-personnage h2 {
    margin-top: 6px;
    color: white;
}

.detail-dps-personnage header p {
    margin-top: 5px;
    color: #8fa8bd;
    font-size: 13px;
}

.dps-final-personnage {
    min-width: 150px;
    padding: 12px 16px;
    color: #8fa8bd;
    text-align: center;
    background: #08182b;
    border: 1px solid #e6a83c;
    border-radius: 11px;
}

.dps-final-personnage strong {
    display: block;
    margin-top: 3px;
    color: #ffd45c;
    font-size: 28px;
}

.formule-dps {
    margin-top: 17px;
    padding: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #6f8da7;
    background: #07182c;
    border: 1px solid #315473;
    border-radius: 10px;
}

.formule-dps strong {
    padding: 7px 10px;
    color: #cbe0ef;
    background: #102b48;
    border-radius: 7px;
}

.formule-dps strong:last-child {
    color: #182238;
    background: linear-gradient(90deg, #e9a934, #ffe080);
}

.grille-detail-dps {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.grille-detail-dps article {
    padding: 15px;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 11px;
}

.grille-detail-dps h3 {
    margin-bottom: 10px;
    color: white;
    font-size: 15px;
}

.lignes-calcul {
    display: grid;
    gap: 7px;
}

.lignes-calcul > div {
    padding-bottom: 7px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    color: #8fa8bd;
    font-size: 12px;
    border-bottom: 1px solid rgba(75, 107, 135, 0.35);
}

.lignes-calcul > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lignes-calcul strong {
    color: #d8e8f3;
    text-align: right;
}

.lignes-calcul .bonus-actif {
    color: #63e0a8;
}

.lignes-calcul .malus-actif {
    color: #ff8b91;
}

.lignes-calcul .total-calcul {
    color: #ffd45c;
    font-size: 14px;
}

@media (max-width: 750px) {
    .detail-dps-personnage > header {
        align-items: stretch;
        flex-direction: column;
    }

    .grille-detail-dps {
        grid-template-columns: 1fr;
    }
}

/* Pages Équipement et Inventaire */

.entete-page-secondaire {
    padding: 22px 24px;
    background: #102540;
    border: 1px solid #315473;
    border-radius: 16px;
}

.entete-page-secondaire h2 {
    margin-top: 7px;
    color: white;
}

.entete-page-secondaire p {
    margin-top: 6px;
    color: #91a9bf;
}

.grille-equipement,
.grille-inventaire {
    margin-top: 18px;
    display: grid;
    gap: 14px;
}

/* Spécialisations */

.entete-specialisation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.monnaie-maitrise {
    padding: 12px 15px;
    color: #a9bfd3;
    background: #08182b;
    border: 1px solid #8c63c7;
    border-radius: 10px;
}

.actions-specialisation {
    display: grid;
    gap: 8px;
}

#reinitialiser-specialisation {
    padding: 9px 12px;
    color: #ffb0b5;
    font-weight: bold;
    background: rgba(139, 36, 52, 0.25);
    border: 1px solid #a74250;
    border-radius: 9px;
    cursor: pointer;
}

#reinitialiser-specialisation:hover:not(:disabled) {
    color: white;
    background: #a43a4b;
}

#reinitialiser-specialisation:disabled {
    color: #61778b;
    background: #132a40;
    border-color: #2b465e;
    cursor: not-allowed;
}

.monnaie-maitrise strong {
    margin-left: 6px;
    color: #cf8bff;
    font-size: 22px;
}

.progression-specialisation {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.progression-specialisation div {
    padding: 13px;
    text-align: center;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 10px;
}

.progression-specialisation span {
    display: block;
    color: #819bb3;
    font-size: 11px;
    text-transform: uppercase;
}

.progression-specialisation strong {
    display: block;
    margin-top: 5px;
    color: #f4bd50;
}

.grille-specialisations {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.carte-specialisation {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background: #102541;
    border: 2px solid #315473;
    border-radius: 15px;
    transition:
        transform 0.2s,
        border-color 0.2s,
        background 0.2s,
        box-shadow 0.2s;
}

.carte-specialisation:hover {
    transform: translateY(-3px);
}

.carte-specialisation.active {
    padding-top: 48px;
    background:
        linear-gradient(
            145deg,
            rgba(244, 189, 80, 0.2),
            rgba(16, 37, 65, 0.96) 48%
        );
    border-color: #ffd45c !important;
    box-shadow:
        0 0 0 2px rgba(244, 189, 80, 0.13),
        0 0 26px rgba(244, 189, 80, 0.3);
}

.carte-specialisation.active::before {
    content: "✓ VOIE ACTIVE · PALIER " attr(data-palier-actif);
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    padding: 8px 12px;
    color: #182238;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
    background: linear-gradient(90deg, #e9a934, #ffe080);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.carte-specialisation.bagarreur {
    border-top-color: #e16d57;
}

.carte-specialisation.sabreur {
    border-top-color: #53c7e3;
}

.carte-specialisation.tireur {
    border-top-color: #9c79e1;
}

.icone-specialisation {
    display: block;
    font-size: 43px;
}

.carte-specialisation small {
    display: block;
    margin-top: 12px;
    color: #64d2e7;
    font-weight: bold;
}

.carte-specialisation h3 {
    margin-top: 4px;
    color: white;
}

.carte-specialisation > p {
    min-height: 38px;
    margin-top: 7px;
    color: #91a9bf;
    font-size: 13px;
}

.carte-specialisation ul {
    min-height: 122px;
    margin: 15px 0 15px 18px;
    color: #c2d5e4;
    font-size: 13px;
    line-height: 1.7;
}

.carte-specialisation .condition-specialisation {
    margin-top: 5px;
    color: #f4bd50;
    font-weight: bold;
}

.liste-paliers-specialisation {
    min-height: 380px;
    margin: 15px 0;
    display: grid;
    gap: 7px;
}

.ligne-palier {
    padding: 9px 10px;
    color: #718ba3;
    background: #0a1c32;
    border: 1px solid #294966;
    border-radius: 8px;
    opacity: 0.72;
}

.ligne-palier header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ligne-palier header strong {
    color: #b3c8d9;
    font-size: 12px;
}

.ligne-palier header span {
    color: #c98cff;
    font-size: 11px;
    font-weight: bold;
}

.ligne-palier p {
    min-height: 0;
    margin-top: 4px;
    color: #8fa9bd;
    font-size: 11px;
}

.ligne-palier small {
    margin-top: 4px;
    color: #668098;
    font-size: 10px;
}

.ligne-palier.obtenu {
    background: rgba(35, 133, 93, 0.18);
    border-color: #3aa776;
    opacity: 1;
}

.ligne-palier.obtenu header strong {
    color: #6ee0aa;
}

.ligne-palier.prochain {
    background: rgba(206, 151, 48, 0.13);
    border-color: #d09b3f;
    opacity: 1;
    box-shadow: 0 0 12px rgba(208, 155, 63, 0.12);
}

.ligne-palier.prochain header strong {
    color: #ffd36f;
}

.carte-specialisation button {
    width: 100%;
    padding: 10px;
    color: white;
    font-weight: bold;
    background: #087f9d;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.carte-specialisation button:disabled {
    color: #71869a;
    background: #182f47;
    cursor: not-allowed;
}

.carte-specialisation.active button:disabled {
    color: #182238;
    background: linear-gradient(90deg, #e9a934, #ffe080);
    border: 1px solid #fff0ae;
    opacity: 1;
}

.message-specialisation {
    margin-top: 14px;
    padding: 12px;
    color: #a9bfd3;
    text-align: center;
    background: #0b1d34;
    border: 1px solid #315473;
    border-radius: 10px;
}

.emplacement-equipement {
    min-height: 125px;
    padding: 20px;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 18px;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 14px;
}

.icone-emplacement,
.visuel-coffre {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    font-size: 34px;
    background: #091a30;
    border: 1px solid #3b607d;
    border-radius: 12px;
}

.emplacement-equipement small {
    color: #5bc9e2;
    font-weight: bold;
}

.emplacement-equipement h3,
.objet-inventaire h3 {
    margin-top: 4px;
    color: white;
}

.inventaire-fusionne {
    margin-top: 24px;
}

.inventaire-fusionne > .entete-page-secondaire {
    display: none;
}

#page-equipement .grille-equipement {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 16px;
    background: linear-gradient(145deg, #0b1d33, #071526);
    border: 1px solid #3e6280;
    border-radius: 18px;
    box-shadow: inset 0 0 24px rgba(60, 155, 190, 0.08);
}

#page-equipement .emplacement-equipement {
    grid-template-columns: 58px 1fr;
    align-content: center;
    border-color: #8a6a3f;
    box-shadow: inset 0 0 18px rgba(207, 159, 77, 0.08);
}

#page-equipement .emplacement-equipement .icone-emplacement {
    width: 56px;
    height: 56px;
}

#page-equipement .emplacement-equipement > button {
    grid-column: 1 / -1;
}

@media (max-width: 1050px) {
    #page-equipement .grille-equipement {
        grid-template-columns: 1fr;
    }
}

.emplacement-equipement p,
.objet-inventaire p {
    margin-top: 5px;
    color: #8fa8bd;
}

.note-parchemin-v58 {
    margin: 12px 0 0;
    padding: 11px 14px;
    border: 1px solid rgba(244, 190, 74, 0.45);
    border-radius: 10px;
    color: #f4cf7a;
    background: rgba(91, 60, 18, 0.2);
    font-size: 12px;
    line-height: 1.45;
}

.emplacement-equipement button,
.objet-inventaire button {
    padding: 10px 15px;
    color: #71869a;
    background: #182f47;
    border: 1px solid #315473;
    border-radius: 9px;
}

.objet-inventaire {
    padding: 20px;
    display: grid;
    grid-template-columns: 70px 1fr 55px auto;
    align-items: center;
    gap: 18px;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 14px;
}

.rarete-commune {
    color: #9cc4dd;
    font-size: 11px;
    font-weight: bold;
}

.objet-inventaire > strong {
    color: #f4bd50;
    font-size: 28px;
    text-align: center;
}

.resultat-ouverture {
    padding: 22px;
    text-align: center;
    background: linear-gradient(135deg, #163857, #102541);
    border: 1px solid #e0aa43;
    border-radius: 14px;
    animation: apparition-recompense 0.45s ease;
}

.bouton-butins {
    width: 100%;
    padding: 14px;
    color: #d9efff;
    font-weight: bold;
    background: #123554;
    border: 1px solid #3b698d;
    border-radius: 11px;
    cursor: pointer;
}

.bouton-butins:hover {
    background: #174564;
}

.panneau-butins {
    max-height: 72vh;
    overflow-y: auto;
    padding: 20px;
    background: #0b1d34;
    border: 1px solid #315473;
    border-radius: 14px;
}

.panneau-butins > header {
    position: sticky;
    z-index: 2;
    top: -20px;
    padding: 8px 0;
    background: #0b1d34;
}

.panneau-butins > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.panneau-butins h3 {
    margin-top: 5px;
    color: white;
    font-size: 21px;
}

#fermer-butins-coffre {
    padding: 8px 12px;
    color: white;
    background: #29445e;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.resume-taux-coffre {
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.resume-taux-coffre span {
    padding: 11px;
    color: #9bb3c8;
    text-align: center;
    background: #102a46;
    border-radius: 9px;
}

.resume-taux-coffre strong {
    display: block;
    color: #f4bd50;
    font-size: 19px;
}

.explication-taux {
    margin-top: 14px;
    color: #8fa8bd;
    font-size: 13px;
    text-align: center;
}

.onglets-rarete {
    margin-top: 16px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.onglets-rarete button {
    flex: 0 0 auto;
    padding: 9px 12px;
    color: #9db3c7;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 8px;
    cursor: pointer;
}

.onglets-rarete button:hover,
.onglets-rarete button.actif {
    color: white;
    background: #087f9d;
    border-color: #37c2dd;
}

.liste-butins-coffre {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.ligne-butin {
    padding: 10px;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 9px;
    color: #dceaf5;
    background: #102541;
    border: 1px solid #294965;
    border-radius: 8px;
}

.ligne-butin > span {
    width: 30px;
    height: 38px;
    display: grid;
    place-items: center;
}

.ligne-butin > span img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ligne-butin.rare {
    border-color: #2d72ae;
}

.ligne-butin small {
    display: block;
    margin-top: 2px;
    color: #7692a9;
}

.ligne-butin > strong {
    color: #f4bd50;
    font-size: 12px;
}

.ligne-butin > strong.taux-par-coffre {
    max-width: 235px;
    line-height: 1.35;
    text-align: right;
}

.ligne-butin.commun > div {
    color: #d0d7dd;
}

.ligne-butin.rare > div {
    color: #4eacff;
}

.ligne-butin.epique > div {
    color: #c477ff;
}

.ligne-butin.legendaire > div {
    color: #ffad42;
}

.ligne-butin.mythique > div {
    color: #ff5261;
}

.ligne-butin.divin > div {
    color: #ffe878;
    text-shadow: 0 0 7px rgba(255, 226, 74, 0.65);
}

.resultat-ouverture > span {
    color: #f4bd50;
    font-size: 12px;
    font-weight: bold;
}

.resultat-ouverture > strong {
    display: block;
    margin-top: 8px;
    color: white;
    font-size: 23px;
}

.resultat-ouverture > p {
    margin-top: 6px;
    color: #a9c2d6;
}

@keyframes apparition-recompense {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.titre-sac {
    margin-top: 0;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #102540;
    border: 1px solid #315473;
    border-radius: 14px;
}

.sac-a-dos {
    margin-top: 18px;
    padding: 16px;
    background:
        linear-gradient(rgba(24, 55, 75, 0.94), rgba(10, 31, 51, 0.96)),
        repeating-linear-gradient(
            45deg,
            #70492f 0,
            #70492f 8px,
            #5b3825 8px,
            #5b3825 16px
        );
    border: 3px solid #8f6845;
    border-radius: 22px 22px 15px 15px;
    box-shadow:
        inset 0 0 0 3px #352318,
        0 12px 25px rgba(0, 0, 0, 0.2);
}

.sac-a-dos .titre-sac {
    background: rgba(9, 26, 48, 0.88);
    border-color: #9b7550;
}

.icone-sac {
    width: 52px;
    height: 52px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    font-size: 30px;
    background: #50351f;
    border: 2px solid #a47a4c;
    border-radius: 50%;
}

.titre-coffres {
    margin-top: 28px;
    padding: 18px 20px;
    background: #102540;
    border: 1px solid #315473;
    border-radius: 14px;
}

.titre-coffres h2 {
    margin-top: 6px;
    color: white;
}

.grille-coffres {
    margin-top: 13px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.carte-coffre {
    padding: 18px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 14px;
}

.carte-coffre.coffre-rare {
    border-color: #3c8ad2;
}

.carte-coffre.coffre-epique {
    border-color: #985ed1;
}

.carte-coffre .visuel-coffre {
    width: 76px;
    height: 76px;
    font-size: 39px;
}

.carte-coffre .etiquette-rarete {
    margin-top: 12px;
    color: #9cc4dd;
    font-size: 10px;
    font-weight: bold;
}

.carte-coffre.coffre-rare .etiquette-rarete {
    color: #5aacff;
}

.carte-coffre.coffre-epique .etiquette-rarete {
    color: #c980ff;
}

.carte-coffre h3 {
    margin-top: 4px;
    color: white;
}

.carte-coffre p {
    min-height: 34px;
    margin-top: 6px;
    color: #8fa8bd;
    font-size: 12px;
}

.carte-coffre > strong {
    margin: 13px 0;
    color: #f4bd50;
    font-size: 27px;
}

.carte-coffre button {
    width: 100%;
    padding: 9px;
    color: white;
    background: #087f9d;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.carte-coffre button:disabled {
    color: #71869a;
    background: #182f47;
    cursor: not-allowed;
}

.grille-coffres + .bouton-butins {
    margin-top: 12px;
}

.titre-sac h2 {
    color: white;
}

.titre-sac p,
.titre-sac > span {
    margin-top: 4px;
    color: #91a9bf;
}

.titre-sac strong {
    color: #c67cff;
}

.liste-inventaire-equipements {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.carte-objet {
    padding: 16px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    background: #102541;
    border: 1px solid #315473;
    border-radius: 12px;
}

.carte-objet.rare {
    border-color: #398fe3;
    box-shadow: inset 0 0 18px rgba(44, 132, 221, 0.12);
}

.icone-objet {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 25px;
    background: #091a30;
    border-radius: 9px;
}

.carte-objet h3 {
    color: white;
    font-size: 16px;
}

.carte-objet .ligne-objet {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.carte-objet .rarete {
    color: #9cc4dd;
    font-size: 10px;
    font-weight: bold;
}

.carte-objet.rare .rarete {
    color: #56aeff;
}

.carte-objet .bonus-objet {
    margin-top: 5px;
    color: #5bd8a4;
    font-size: 12px;
}

.prerequis-objet,
.comparaison-objet {
    margin-top: 5px;
    font-size: 11px;
}

.prerequis-objet {
    color: #e8ad5a;
}

.comparaison-objet.positif {
    color: #5bd8a4;
}

.comparaison-objet.negatif {
    color: #ef7d83;
}

.comparaison-objet.neutre {
    color: #91a9bf;
}

.actions-objet {
    margin-top: 11px;
    display: flex;
    gap: 7px;
}

.actions-objet button {
    padding: 7px 10px;
    color: white;
    background: #087f9d;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.actions-objet button[data-action="vendre"] {
    background: #6c4650;
}

.actions-objet button:disabled {
    color: #71869a;
    background: #182f47;
    cursor: not-allowed;
}

.inventaire-vide {
    padding: 30px;
    color: #819bb3;
    text-align: center;
    background: #102541;
    border: 1px dashed #315473;
    border-radius: 12px;
    grid-column: 1 / -1;
}

/* Sac à dos façon MMORPG */

.sac-a-dos .liste-inventaire-equipements {
    padding: 14px;
    grid-template-columns: repeat(6, minmax(82px, 1fr));
    gap: 9px;
    background:
        linear-gradient(rgba(5, 17, 31, 0.94), rgba(9, 27, 45, 0.96)),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(255, 255, 255, 0.025) 32px
        );
    border: 2px solid #21170f;
    border-radius: 12px;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7);
}

.slot-inventaire {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    padding: 8px 5px 6px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: white;
    background:
        radial-gradient(circle at 50% 35%, #1d3a53, #081626 72%);
    border: 2px solid #637586;
    border-radius: 7px;
    box-shadow:
        inset 0 0 0 2px #030a12,
        inset 0 0 18px rgba(0, 0, 0, 0.65);
    cursor: pointer;
}

.slot-inventaire:hover,
.slot-inventaire.selectionne {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 2px #07121d,
        0 0 13px currentColor;
}

.slot-inventaire.commun {
    border-color: #aab5bf;
}

.slot-inventaire.rare {
    border-color: #3999ef;
}

.slot-inventaire.epique {
    border-color: #b65cff;
}

.slot-inventaire.legendaire {
    border-color: #ff9f32;
}

.slot-inventaire.mythique {
    border-color: #f04454;
}

.slot-inventaire.divin {
    border-color: #ffe16b;
    box-shadow:
        inset 0 0 0 2px #5d4b13,
        0 0 12px rgba(255, 225, 107, 0.5);
}

.icone-slot {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 31px;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.7));
}

.quantite-slot {
    position: absolute;
    top: 5px;
    right: 6px;
    padding: 2px 5px;
    color: white;
    font-size: 11px;
    background: rgba(2, 8, 15, 0.84);
    border-radius: 10px;
}

.nom-objet {
    width: 100%;
    margin-top: 7px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nom-objet.commun,
.detail-rarete-objet.commun,
#detail-nom-objet.commun {
    color: #d0d7dd;
}

.nom-objet.rare,
.detail-rarete-objet.rare,
#detail-nom-objet.rare {
    color: #4eacff;
}

.nom-objet.epique,
.detail-rarete-objet.epique,
#detail-nom-objet.epique {
    color: #c477ff;
}

.nom-objet.legendaire,
.detail-rarete-objet.legendaire,
#detail-nom-objet.legendaire {
    color: #ffad42;
}

.nom-objet.mythique,
.detail-rarete-objet.mythique,
#detail-nom-objet.mythique {
    color: #ff5261;
}

.nom-objet.divin,
.detail-rarete-objet.divin,
#detail-nom-objet.divin {
    color: #ffe878;
    text-shadow: 0 0 7px rgba(255, 226, 74, 0.65);
}

.detail-objet-inventaire {
    margin-top: 13px;
    padding: 17px;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 17px;
    background: rgba(5, 18, 33, 0.94);
    border: 1px solid #8f6845;
    border-radius: 12px;
}

.detail-icone-objet {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    font-size: 46px;
    background: radial-gradient(circle, #234661, #081626);
    border: 2px solid #536e83;
    border-radius: 9px;
}

.detail-rarete-objet {
    font-size: 10px;
    font-weight: bold;
}

.detail-contenu-objet h3 {
    margin-top: 3px;
    font-size: 20px;
}

@media (max-width: 750px) {
    .emplacement-equipement,
    .objet-inventaire {
        grid-template-columns: 58px 1fr;
    }

    .emplacement-equipement button,
    .objet-inventaire button,
    .objet-inventaire > strong {
        grid-column: 2;
        justify-self: start;
    }

    .liste-inventaire-equipements {
        grid-template-columns: 1fr;
    }

    .sac-a-dos .liste-inventaire-equipements {
        grid-template-columns: repeat(3, minmax(76px, 1fr));
    }

    .detail-objet-inventaire {
        grid-template-columns: 65px 1fr;
    }

    .detail-icone-objet {
        width: 65px;
        height: 65px;
        font-size: 34px;
    }

    .titre-sac {
        align-items: flex-start;
        flex-direction: column;
    }

    .entete-specialisation {
        align-items: flex-start;
        flex-direction: column;
    }

    .progression-specialisation,
    .grille-specialisations {
        grid-template-columns: 1fr;
    }

    .resume-taux-coffre,
    .liste-butins-coffre {
        grid-template-columns: 1fr;
    }

    .grille-coffres {
        grid-template-columns: 1fr;
    }
}

/* Boutique */

.entete-boutique {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.infos-boutique {
    min-width: 185px;
    display: grid;
    gap: 7px;
}

.infos-boutique span {
    padding: 8px 11px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #8099ae;
    font-size: 11px;
    background: #08182b;
    border: 1px solid #315473;
    border-radius: 8px;
}

.infos-boutique strong {
    color: #ffd36f;
}

.legende-boutique {
    margin-top: 13px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #8fa8bd;
    font-size: 12px;
    background: #0b1d34;
    border: 1px solid #315473;
    border-radius: 9px;
}

.legende-boutique span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legende-boutique i {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
}

.pastille-commun {
    background: #a9bdcb;
}

.pastille-rare {
    background: #48a8ff;
    box-shadow: 0 0 8px rgba(72, 168, 255, 0.65);
}

.legende-boutique > strong {
    margin-left: auto;
    color: #5ed7ea;
}

.grille-boutique {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.article-boutique {
    position: relative;
    overflow: hidden;
    min-height: 255px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    background: #102541;
    border: 2px solid #49677d;
    border-radius: 12px;
}

.article-boutique:focus-visible,
.article-boutique:hover {
    border-color: #5ed7ea;
    box-shadow: 0 0 0 2px rgba(94, 215, 234, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.24);
    outline: 0;
    transform: translateY(-2px);
}

.article-boutique.rare {
    background:
        radial-gradient(circle at top right, rgba(57, 139, 230, 0.2), transparent 42%),
        #102541;
    border-color: #3d92df;
    box-shadow: 0 0 15px rgba(61, 146, 223, 0.12);
}

.article-boutique.epique {
    border-color: #aa65ef;
}

.article-boutique.legendaire {
    border-color: #f0a42e;
}

.article-boutique.mythique {
    border-color: #ef5579;
}

.article-boutique.divin {
    border-color: #ffe476;
    box-shadow: 0 0 18px rgba(255, 228, 118, 0.14);
}

.article-boutique.possede {
    opacity: 0.68;
}

.icone-article-boutique {
    min-height: 62px;
    display: grid;
    place-items: center;
    font-size: 45px;
    background: #091a30;
    border-radius: 9px;
}

.icone-article-boutique img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icone-article-boutique.avec-visuel {
    height: 116px;
    padding: 5px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(75, 169, 205, 0.2), transparent 58%),
        #091a30;
}

.icone-article-boutique.avec-visuel img {
    width: 88px;
    height: 108px;
    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.42));
}

.icone-article-boutique.visuel-arme img {
    width: 126px;
    height: 106px;
}

.article-boutique small {
    margin-top: 11px;
    font-size: 10px;
    font-weight: 900;
}

.article-boutique small.commun {
    color: #a9bdcb;
}

.article-boutique small.rare {
    color: #56b6ff;
}

.article-boutique small.epique {
    color: #c982ff;
}

.article-boutique small.legendaire {
    color: #ffb43f;
}

.article-boutique small.mythique {
    color: #ff6f91;
}

.article-boutique small.divin {
    color: #ffe476;
}

.article-boutique h3 {
    margin-top: 4px;
    color: white;
    font-size: 14px;
}

.article-boutique p {
    margin-top: 7px;
    color: #89a4ba;
    font-size: 11px;
    line-height: 1.45;
}

.article-boutique button {
    width: 100%;
    min-height: 40px;
    margin-top: auto;
    padding: 8px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    background: #0788a9;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.article-boutique.rare button {
    background: #376fbd;
}

.article-boutique button:disabled {
    color: #71869a;
    background: #182f47;
    cursor: not-allowed;
}

.message-boutique {
    margin-top: 13px;
    padding: 11px;
    color: #9eb4c7;
    text-align: center;
    background: #0b1d34;
    border: 1px solid #315473;
    border-radius: 9px;
}

.comparaison-equipement {
    position: fixed;
    z-index: 10000;
    width: min(340px, calc(100vw - 28px));
    padding: 15px;
    color: #d9e8f5;
    pointer-events: none;
    background: rgba(5, 20, 37, 0.98);
    border: 1px solid #4c7898;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.comparaison-equipement.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.comparaison-equipement header {
    display: grid;
    gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #294862;
}

.comparaison-equipement header small {
    color: #54d9eb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.comparaison-equipement header strong {
    color: #fff;
    font-size: 14px;
}

.comparaison-equipement .objet-actuel {
    margin: 9px 0;
    color: #8fa9bd;
    font-size: 11px;
}

.comparaison-equipement ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comparaison-equipement li,
.comparaison-dps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px 64px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    font-size: 11px;
}

.comparaison-equipement li strong,
.comparaison-equipement li em,
.comparaison-dps strong,
.comparaison-dps em {
    text-align: right;
    font-style: normal;
}

.comparaison-equipement .entete-comparaison {
    color: #6f8ca3;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.comparaison-dps {
    margin-top: 7px;
    padding-top: 10px;
    color: white;
    border-top: 1px solid #294862;
    font-weight: 900;
}

.comparaison-equipement .positif {
    color: #56e39f;
}

.comparaison-equipement .negatif {
    color: #ff6f79;
}

.comparaison-equipement .neutre {
    color: #91a8ba;
}

@media (max-width: 1050px) {
    .grille-boutique {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .entete-boutique {
        align-items: stretch;
        flex-direction: column;
    }

    .grille-boutique {
        grid-template-columns: 1fr;
    }

    .legende-boutique {
        align-items: flex-start;
        flex-direction: column;
    }

    .legende-boutique > strong {
        margin-left: 0;
    }
}

/* Fenêtres de boss et de voyage */

.superposition-modale {
    position: fixed;
    z-index: 1000;
    inset: 0;
    padding: 20px;
    display: grid;
    place-items: center;
    overflow-y: auto;
    background: rgba(2, 10, 21, 0.86);
    backdrop-filter: blur(6px);
}

.superposition-modale.cache {
    display: none;
}

.fenetre-combat-boss {
    width: min(540px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    color: #d8e8f3;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(194, 62, 55, 0.22), transparent 42%),
        #0d2039;
    border: 2px solid #d75d4e;
    border-radius: 18px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(215, 69, 62, 0.18);
}

.fenetre-combat-boss.victoire {
    background:
        radial-gradient(circle at top, rgba(224, 174, 62, 0.24), transparent 42%),
        #0d2039;
    border-color: #e3b34c;
}

.icone-fenetre-boss {
    display: block;
    font-size: 54px;
}

.fenetre-combat-boss > small {
    display: block;
    margin-top: 7px;
    color: #f49a79;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.fenetre-combat-boss.victoire > small {
    color: #ffd36f;
}

.fenetre-combat-boss h2 {
    margin-top: 7px;
    color: white;
    font-size: 25px;
}

.portrait-fenetre-boss {
    display: block;
    width: 118px;
    height: 142px;
    margin: 8px auto 0;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.45));
}

.fenetre-combat-boss > p {
    margin-top: 10px;
    color: #9bb1c4;
    line-height: 1.55;
}

.resume-fenetre-boss {
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.resume-fenetre-boss span {
    padding: 10px 7px;
    color: #748fa7;
    font-size: 11px;
    background: #07182b;
    border: 1px solid #2e506d;
    border-radius: 8px;
}

.resume-fenetre-boss strong {
    display: block;
    margin-top: 4px;
    color: #ffd36f;
}

.conseil-chance-boss {
    margin-top: 11px !important;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
}

.conseil-chance-boss.favorable {
    color: #78e5b3;
    background: rgba(37, 126, 86, 0.2);
    border: 1px solid #348c65;
}

.conseil-chance-boss.risque {
    color: #ffd36f;
    background: rgba(151, 105, 29, 0.2);
    border: 1px solid #a97931;
}

.conseil-chance-boss.insuffisant {
    color: #ff969d;
    background: rgba(151, 42, 54, 0.2);
    border: 1px solid #a74250;
}

.preparation-boss-final {
    margin-top: 10px;
    padding: 10px;
    text-align: left;
    background: rgba(5, 18, 32, 0.88);
    border: 1px solid #516d82;
    border-radius: 9px;
}

.preparation-boss-final.cache {
    display: none;
}

.preparation-boss-final > strong {
    display: block;
    margin-bottom: 7px;
    color: #f1c65f;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#liste-preparation-boss-final {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.etat-preparation-boss {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 7px;
    color: #a9bdcc;
    font-size: 10px;
    background: #0b2438;
    border: 1px solid #29475e;
    border-radius: 6px;
}

.etat-preparation-boss strong {
    flex: 0 0 auto;
    font-size: 9px;
    text-transform: uppercase;
}

.etat-preparation-boss.valide strong {
    color: #66e1a5;
}

.etat-preparation-boss.conseille strong {
    color: #ffd36f;
}

.etat-preparation-boss.insuffisant strong {
    color: #ff8994;
}

.cout-voyage-modal {
    margin-top: 17px;
    padding: 11px;
    color: #819bb2;
    background: #07182b;
    border: 1px solid #7f6937;
    border-radius: 9px;
}

.cout-voyage-modal strong {
    display: block;
    margin-top: 3px;
    color: #ffd36f;
    font-size: 21px;
}

.actions-fenetre-boss {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.actions-fenetre-boss button {
    min-height: 44px;
    padding: 10px 13px;
    color: white;
    font-weight: bold;
    border-radius: 9px;
    cursor: pointer;
}

.bouton-secondaire-modal {
    background: #17314a;
    border: 1px solid #456681;
}

.bouton-principal-modal {
    background: linear-gradient(135deg, #e46b2f, #ce3846);
    border: 1px solid #ffae55;
}

.fenetre-combat-boss.victoire .bouton-principal-modal {
    color: #172238;
    background: linear-gradient(135deg, #e6a938, #ffe080);
    border-color: #fff0a2;
}

.actions-fenetre-boss button:disabled {
    color: #6f8293;
    background: #142b40;
    border-color: #2c465c;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .resume-fenetre-boss,
    .actions-fenetre-boss {
        grid-template-columns: 1fr;
    }

    #liste-preparation-boss-final {
        grid-template-columns: 1fr;
    }
}

/* Équipage et taverne */

.entete-place-marche {
    border-color: #8a6837;
    background:
        radial-gradient(circle at 90% 0, rgba(225, 168, 61, 0.13), transparent 45%),
        #102541;
}

.onglets-place-marche {
    margin-top: 15px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    background: #07182b;
    border: 1px solid #315473;
    border-radius: 12px;
}

.onglets-place-marche button {
    min-height: 42px;
    padding: 9px 12px;
    color: #8ca5b9;
    font-weight: 800;
    background: #10263e;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.onglets-place-marche button:hover,
.onglets-place-marche button.actif {
    color: white;
    background: linear-gradient(135deg, #a76c25, #7d431d);
    border-color: #e0a846;
}

.panneau-place-marche {
    margin-top: 14px;
}

.panneau-place-marche.cache {
    display: none;
}

#panneau-marche-marchand,
#panneau-marche-taverne,
#panneau-marche-navire {
    padding: 16px;
    background: #091a2e;
    border: 1px solid #315473;
    border-radius: 16px;
}

#panneau-marche-taverne .taverne-equipage {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.entete-port,
.entete-marche-naval {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.resume-port {
    display: grid;
    grid-template-columns: repeat(3, minmax(105px, 1fr));
    gap: 8px;
}

.resume-port span {
    padding: 9px 12px;
    color: #7f9bb2;
    font-size: 10px;
    text-transform: uppercase;
    background: #07182b;
    border: 1px solid #315473;
    border-radius: 9px;
}

.resume-port strong {
    display: block;
    margin-top: 3px;
    color: #f2c35e;
    font-size: 17px;
}

.liste-navires-possedes {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.carte-navire-possede,
.carte-offre-navire {
    position: relative;
    overflow: hidden;
    padding: 15px;
    background:
        linear-gradient(145deg, rgba(21, 58, 82, 0.9), rgba(7, 24, 43, 0.98));
    border: 1px solid #3b6480;
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.carte-navire-possede.actif {
    border-color: #e5b345;
    box-shadow: 0 0 0 2px rgba(229, 179, 69, 0.13);
}

.carte-navire-possede.rare,
.carte-offre-navire.rare {
    background:
        radial-gradient(circle at 90% 0, rgba(67, 147, 233, 0.22), transparent 38%),
        linear-gradient(145deg, #143b61, #07182b);
    border-color: #488ee1;
}

.identite-navire {
    display: flex;
    align-items: center;
    gap: 11px;
}

.visuel-navire,
.visuel-offre-navire {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    font-size: 35px;
    background: #06172a;
    border: 1px solid #355a73;
    border-radius: 10px;
}

.identite-navire h3,
.carte-offre-navire h3 {
    margin: 4px 0 0;
    color: #fff;
}

.rarete-offre-navire,
.rarete-navire {
    color: #94adbf;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.rarete-offre-navire.rare,
.rarete-navire.rare {
    color: #61a8ff;
}

.badge-navire-actif {
    margin-left: auto;
    padding: 5px 8px;
    color: #1b2830;
    font-size: 10px;
    font-weight: 900;
    background: #f2c35e;
    border-radius: 999px;
}

.stats-navire,
.stats-offre-navire {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.stats-navire span,
.stats-offre-navire span {
    padding: 8px;
    color: #829eb3;
    font-size: 11px;
    text-align: center;
    background: rgba(3, 17, 31, 0.72);
    border-radius: 7px;
}

.stats-navire strong,
.stats-offre-navire strong {
    display: block;
    color: #e7f2f8;
    font-size: 15px;
}

.durabilite-navire {
    margin-top: 11px;
    color: #8da9bd;
    font-size: 11px;
}

.barre-durabilite {
    height: 7px;
    margin-top: 5px;
    overflow: hidden;
    background: #061423;
    border-radius: 99px;
}

.barre-durabilite > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #26a776, #72e1a6);
}

.identite-navire > span {
    color: #94adbf;
    font-size: 10px;
    font-weight: 900;
}

.identite-navire > span.rare {
    color: #61a8ff;
}

.identite-navire small {
    margin-left: auto;
    color: #f2c35e;
    font-size: 9px;
    font-weight: 900;
}

.actions-navire {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.actions-navire button,
.carte-offre-navire button,
.commandes-marche-naval button {
    min-height: 38px;
    padding: 8px;
    color: white;
    font-weight: 800;
    background: linear-gradient(135deg, #247c9b, #19516f);
    border: 1px solid #42b5d5;
    border-radius: 7px;
    cursor: pointer;
}

.actions-navire button:disabled,
.carte-offre-navire button:disabled,
.commandes-marche-naval button:disabled {
    color: #658095;
    background: #132a3e;
    border-color: #2c475d;
    cursor: not-allowed;
}

.marche-naval {
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid #315473;
}

.commandes-marche-naval {
    display: flex;
    align-items: center;
    gap: 8px;
}

.commandes-marche-naval select {
    min-height: 38px;
    padding: 7px 10px;
    color: #dcebf4;
    background: #07182b;
    border: 1px solid #3d6480;
    border-radius: 7px;
}

.grille-offres-navires {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.carte-offre-navire .visuel-offre-navire {
    margin-bottom: 9px;
}

.carte-offre-navire button {
    width: 100%;
    margin-top: 11px;
}

.carte-offre-navire.vide {
    min-height: 250px;
    display: grid;
    place-items: center;
    color: #637f94;
    text-align: center;
    border-style: dashed;
}

.message-navire {
    min-height: 37px;
    margin-top: 12px;
    padding: 10px;
    color: #9bb3c5;
    text-align: center;
    background: #07172a;
    border-radius: 8px;
}

.entete-equipage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.resume-equipage {
    display: grid;
    grid-template-columns: repeat(3, minmax(105px, 1fr));
    gap: 8px;
}

.resume-equipage span {
    padding: 10px 12px;
    color: #7f9bb2;
    font-size: 10px;
    text-transform: uppercase;
    background: #08192d;
    border: 1px solid #315473;
    border-radius: 9px;
}

.resume-equipage strong {
    display: block;
    margin-top: 4px;
    color: #67dbea;
    font-size: 17px;
}

.panneau-bonus-equipage {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.panneau-bonus-equipage > div {
    padding: 13px;
    display: grid;
    gap: 4px;
    background: linear-gradient(145deg, #102941, #0a1d33);
    border: 1px solid #315473;
    border-radius: 12px;
}

.panneau-bonus-equipage span {
    color: #dbe9f3;
    font-weight: 800;
}

.panneau-bonus-equipage strong {
    color: #74e0ab;
}

.panneau-bonus-equipage small {
    color: #7793a9;
}

.section-membres-equipage,
.taverne-equipage {
    margin-top: 20px;
    padding: 17px;
    background: #091a2e;
    border: 1px solid #315473;
    border-radius: 16px;
}

.section-membres-equipage > header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;
}

.section-membres-equipage h3 {
    margin-top: 7px;
    color: white;
}

.section-membres-equipage header p {
    color: #7893aa;
    font-size: 12px;
}

.reserve-equipage {
    border-color: #5f536f;
}

.grille-moussaillons,
.grille-candidats-taverne {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.carte-moussaillon,
.place-moussaillon-vide,
.carte-candidat {
    min-width: 0;
    padding: 13px;
    background: linear-gradient(160deg, #132c45, #091a2e);
    border: 1px solid #355974;
    border-radius: 13px;
}

.carte-moussaillon.rare,
.carte-candidat.rare {
    background:
        radial-gradient(circle at 80% 0, rgba(52, 137, 214, 0.22), transparent 45%),
        linear-gradient(160deg, #153654, #091b31);
    border-color: #3e9bea;
    box-shadow: inset 0 0 18px rgba(55, 148, 225, 0.08);
}

/* V65 — Les moussaillons épiques restent lisibles dans les cartes existantes
   sans modifier la mise en page de l'équipage. */
.carte-moussaillon.epique,
.carte-candidat.epique {
    background:
        radial-gradient(circle at 80% 0, rgba(190, 92, 255, 0.25), transparent 45%),
        linear-gradient(160deg, #33204f, #11142e);
    border-color: #c46cff;
    box-shadow: inset 0 0 20px rgba(195, 100, 255, 0.12);
}

.rarete-moussaillon.epique {
    color: #d995ff;
}

.recrue-epique-en-attente {
    margin-top: 15px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(circle at 10% 0, rgba(194, 102, 255, 0.22), transparent 40%),
        linear-gradient(135deg, #2b1b48, #111a35);
    border: 1px solid #b963ef;
    border-radius: 13px;
}

.recrue-epique-en-attente.cache {
    display: none;
}

.recrue-epique-en-attente img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    background: #09152c;
    border: 1px solid #c77aff;
    border-radius: 50%;
}

.recrue-epique-en-attente small,
.chance-recrue-epique {
    color: #da97ff !important;
    font-weight: 900;
}

.recrue-epique-en-attente h3 {
    margin: 3px 0;
    color: #fff;
}

.recrue-epique-en-attente p {
    color: #b9a7ce;
    font-size: 12px;
}

.recrue-epique-en-attente button {
    padding: 10px 14px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #8d3bc3, #5d2d9c);
    border: 1px solid #d295ff;
    border-radius: 8px;
}

.recrue-epique-en-attente button:disabled {
    opacity: 0.5;
}

.portrait-moussaillon,
.portrait-candidat {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    font-size: 29px;
    background: #061528;
    border: 1px solid #3b607d;
    border-radius: 50%;
}

.identite-moussaillon {
    margin-top: 9px;
}

.rarete-moussaillon {
    color: #b5c2cc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.rarete-moussaillon.rare {
    color: #56b5ff;
}

.identite-moussaillon h4,
.carte-candidat h3 {
    margin-top: 3px;
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identite-moussaillon p,
.carte-candidat > p {
    margin-top: 3px;
    color: #8ba6bb;
    font-size: 12px;
}

.stats-moussaillon {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.stats-moussaillon span,
.stats-candidat {
    padding: 6px;
    color: #718ca2;
    font-size: 9px;
    text-align: center;
    background: #07172a;
    border-radius: 6px;
}

.stats-moussaillon strong {
    display: block;
    margin-top: 2px;
    color: #f2c65a;
    font-size: 13px;
}

.bonus-moussaillon,
.bonus-candidat {
    min-height: 31px;
    margin-top: 8px;
    color: #72e0ae;
    font-size: 10px;
}

.bonus-moussaillon.neutre {
    color: #728da2;
}

.origine-moussaillon {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #6e899f;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-moussaillon {
    margin-top: 10px;
    display: grid;
    gap: 5px;
}

.actions-moussaillon button,
.carte-candidat button,
.actions-taverne button {
    padding: 8px;
    color: white;
    font-size: 10px;
    font-weight: 800;
    background: #087f9d;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.actions-moussaillon .renvoyer {
    color: #ff9ba2;
    background: #3b1e2a;
}

.place-moussaillon-vide,
.carte-candidat.vide {
    min-height: 240px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    color: #536f84;
    background: rgba(7, 21, 37, 0.65);
    border-style: dashed;
}

.place-moussaillon-vide > span,
.carte-candidat.vide > span {
    font-size: 30px;
}

.place-moussaillon-vide small,
.carte-candidat.vide small {
    text-align: center;
}

.entete-taverne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.entete-taverne h2 {
    margin-top: 7px;
    color: white;
}

.entete-taverne p {
    margin-top: 5px;
    color: #829db3;
}

.entete-taverne p strong {
    color: #55b9ff;
}

.actions-taverne {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.actions-taverne span {
    color: #819bb0;
    font-size: 11px;
}

.actions-taverne span strong {
    color: #f2c45c;
}

.actions-taverne button {
    padding: 10px 14px;
    background: linear-gradient(135deg, #b67b27, #8d511f);
}

.grille-candidats-taverne {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.carte-candidat {
    display: grid;
    align-content: start;
}

.carte-candidat .rarete-moussaillon {
    margin-top: 9px;
}

.stats-candidat {
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
}

.stats-candidat strong {
    color: #f1c55d;
}

.carte-candidat button {
    width: 100%;
    margin-top: 11px;
}

.carte-candidat button:disabled,
.actions-taverne button:disabled {
    color: #6b8397;
    background: #172e43;
    cursor: not-allowed;
}

.message-equipage {
    margin-top: 12px;
    padding: 10px;
    color: #9bb3c5;
    text-align: center;
    background: #07172a;
    border-radius: 8px;
}

@media (max-width: 1250px) {
    .grille-moussaillons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .entete-equipage,
    .entete-taverne,
    .entete-port,
    .entete-marche-naval,
    .section-membres-equipage > header {
        align-items: stretch;
        flex-direction: column;
    }

    .resume-equipage,
    .resume-port,
    .panneau-bonus-equipage,
    .grille-candidats-taverne,
    .grille-offres-navires {
        grid-template-columns: 1fr;
    }

    .actions-taverne,
    .commandes-marche-naval {
        justify-items: stretch;
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .onglets-place-marche {
        grid-template-columns: 1fr;
    }

    .grille-moussaillons {
        grid-template-columns: 1fr;
    }

    .liste-navires-possedes {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   V59 — JOURNAL DE QUÊTES
   ========================================================= */

.titre-actif-mini-profil {
    margin: 5px 0 0;
    color: #f2d49b;
    font-size: 12px;
    font-weight: 700;
}

.page-quetes {
    color: #eaf6ff;
}

.entete-quetes,
.titres-joueur,
.carte-quete {
    border: 1px solid #234b68;
    background: linear-gradient(145deg, #0b2236, #0b1b2c);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.entete-quetes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 14px;
}

.entete-quetes h2,
.titres-joueur h3 {
    margin: 5px 0;
}

.entete-quetes p,
.titres-joueur p {
    margin: 0;
    color: #9db3c6;
}

.resume-quetes {
    display: flex;
    gap: 8px;
}

.resume-quetes span {
    min-width: 112px;
    padding: 9px 12px;
    border: 1px solid #28536f;
    border-radius: 9px;
    background: #081a2a;
    color: #91abc0;
    font-size: 12px;
}

.resume-quetes strong {
    display: block;
    margin-top: 2px;
    color: #39d9f0;
    font-size: 18px;
}

.onglets-quetes {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}

.onglets-quetes button {
    padding: 9px 16px;
    border: 1px solid #28536f;
    border-radius: 9px;
    background: #0b2134;
    color: #b7c9d8;
    cursor: pointer;
}

.onglets-quetes button.actif {
    border-color: #21cbe8;
    background: linear-gradient(135deg, #087e9b, #0d9bb3);
    color: #fff;
}

.liste-quetes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.carte-quete {
    padding: 15px;
    border-radius: 12px;
}

.carte-quete.pret-a-reclamer {
    border-color: #e6b84e;
    box-shadow: 0 0 0 1px rgba(230, 184, 78, .18), 0 10px 24px rgba(0,0,0,.18);
}

.carte-quete header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.carte-quete h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.carte-quete p {
    margin: 0;
    color: #91a9bc;
    font-size: 12px;
}

.palier-quete {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: #102e46;
    color: #65dff2;
    font-size: 11px;
    font-weight: 800;
}

.barre-quete {
    position: relative;
    height: 10px;
    margin: 13px 0 7px;
    overflow: hidden;
    border: 1px solid #29516c;
    border-radius: 999px;
    background: #071522;
}

.barre-quete i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #10b7d7, #43e5ee);
}

.progression-quete,
.recompense-quete {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.progression-quete strong {
    color: #f3f7fa;
}

.recompense-quete {
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #1c3a50;
    color: #f0cd71;
}

.recompense-quete button {
    padding: 7px 11px;
    border: 1px solid #d8a936;
    border-radius: 8px;
    background: #b37b13;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.recompense-quete button:disabled {
    border-color: #2b475b;
    background: #132a3b;
    color: #70889b;
    cursor: default;
}

.titres-joueur {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
}

.titres-joueur header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
}

.liste-titres-joueur {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.liste-titres-joueur button {
    padding: 7px 11px;
    border: 1px solid #38536a;
    border-radius: 999px;
    background: #0c2031;
    color: #b9cad7;
    cursor: pointer;
}

.liste-titres-joueur button.actif {
    border-color: #e5b74f;
    color: #ffe3a0;
    background: #463515;
}

.aucun-titre {
    color: #70889b;
    font-size: 12px;
}

.message-quetes {
    margin: 10px 2px 0;
    color: #77d8e7;
    font-size: 12px;
}

@media (max-width: 980px) {
    .liste-quetes {
        grid-template-columns: 1fr;
    }

    .entete-quetes,
    .titres-joueur header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   V47 — COMPÉTENCES DANS SPÉCIALISATION
========================================= */

#page-personnage .resume-competences-fiche-v47 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

#page-personnage .resume-competences-fiche-v47 > span {
    min-height: 42px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 6px;
    background: #0a2235;
    border: 1px solid #29485b;
}

#page-personnage .resume-competences-fiche-v47 i {
    font-size: 15px;
    font-style: normal;
}

#page-personnage .resume-competences-fiche-v47 small {
    color: #8fb4c8;
    font-size: 10px;
}

#page-personnage .resume-competences-fiche-v47 strong {
    color: #f0bd58;
    font-size: 15px;
}

#page-personnage .resume-competences-fiche-v47 em {
    grid-column: 2 / -1;
    color: #5edba4;
    font-size: 8px;
    font-style: normal;
}

#page-personnage .note-competences-fiche-v47 {
    color: #7f9bac;
    font-size: 9px;
    text-align: center;
}

#page-personnage .acces-specialisation-v47 {
    width: calc(100% - 20px);
    min-height: 30px;
    padding: 6px 10px;
    color: #d9f4ff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    letter-spacing: .5px;
    background: linear-gradient(90deg, #0b6688, #0d91ad);
    border: 1px solid #43c9df;
    cursor: pointer;
}

#page-specialisation .panneau-competences-specialisation-v47 {
    margin-top: 14px;
    padding: 16px;
    background:
        radial-gradient(circle at 80% 0, rgba(21, 136, 167, .12), transparent 35%),
        #0b2035;
    border: 1px solid #315473;
    border-radius: 12px;
}

#page-specialisation .panneau-competences-specialisation-v47 > header {
    margin-bottom: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

#page-specialisation .panneau-competences-specialisation-v47 h2 {
    margin-top: 5px;
    color: #fff;
    font-size: 20px;
}

#page-specialisation .panneau-competences-specialisation-v47 header p {
    margin-top: 4px;
    color: #86a2b7;
    font-size: 11px;
}

#page-specialisation .panneau-competences-specialisation-v47 .points-personnage {
    flex: 0 0 auto;
    font-size: 12px;
}

#page-specialisation .panneau-competences-specialisation-v47 .points-personnage strong {
    margin-left: 6px;
}

#page-specialisation .liste-statistiques {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#page-specialisation .liste-statistiques article {
    min-height: 62px;
    padding: 8px 11px;
    grid-template-columns: 26px minmax(0, 1fr) 48px 32px;
    gap: 8px;
    background: #102a43;
    border: 1px solid #315b77;
    border-radius: 9px;
}

#page-specialisation .liste-statistiques article > span {
    font-size: 19px;
}

#page-specialisation .liste-statistiques h3 {
    font-size: 12px;
}

#page-specialisation .liste-statistiques p {
    margin-top: 2px;
    font-size: 9px;
}

#page-specialisation .liste-statistiques article > strong {
    font-size: 18px;
}

#page-specialisation .liste-statistiques article > strong small {
    font-size: 8px;
}

#page-specialisation .liste-statistiques button {
    width: 30px;
    height: 30px;
    font-size: 18px;
    border-radius: 4px;
}

@media (max-width: 760px) {
    #page-specialisation .panneau-competences-specialisation-v47 > header {
        align-items: stretch;
        flex-direction: column;
    }

    #page-specialisation .liste-statistiques,
    #page-personnage .resume-competences-fiche-v47 {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   V68 — COLLECTION DES PARCHEMINS
========================================= */

.collection-parchemins-v68 {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #31566f;
    border-radius: 14px;
    background: linear-gradient(145deg, #0b1d33, #071526);
}

.collection-parchemins-v68 > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.collection-parchemins-v68 > header h2 {
    margin: 5px 0 4px;
    color: #eefaff;
}

.collection-parchemins-v68 > header p {
    max-width: 760px;
    color: #8fa8bd;
    font-size: 12px;
    line-height: 1.45;
}

#progression-collection-parchemins {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #745fa0;
    border-radius: 8px;
    color: #d9bdff;
    background: #1a1730;
    font-size: 11px;
    font-weight: 800;
}

.liste-collection-parchemins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.carte-parchemin-v68 {
    min-width: 0;
    padding: 11px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    border: 1px solid #4c3d70;
    border-radius: 10px;
    background: #11182b;
}

.carte-parchemin-v68.legendaire {
    border-color: #81642c;
    background: linear-gradient(145deg, #211d1a, #171626);
}

.carte-parchemin-v68.non-obtenu {
    opacity: .72;
}

.carte-parchemin-v68.equipe {
    box-shadow: inset 0 0 0 1px #54ced8, 0 0 14px rgba(84, 206, 216, .12);
}

.visuel-parchemin-v68 {
    width: 44px;
    height: 44px;
    padding: 5px;
    display: grid;
    place-items: center;
    border: 1px solid #40536d;
    border-radius: 8px;
    background: #081724;
}

.visuel-parchemin-v68 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.infos-parchemin-v68 {
    min-width: 0;
}

.infos-parchemin-v68 small {
    color: #b58ce3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
}

.carte-parchemin-v68.legendaire .infos-parchemin-v68 small {
    color: #f0c660;
}

.infos-parchemin-v68 h3 {
    margin: 2px 0 4px;
    color: #edf6fb;
    font-size: 12px;
}

.infos-parchemin-v68 strong {
    color: #9bdbea;
    font-size: 10px;
}

.infos-parchemin-v68 p {
    margin-top: 3px;
    color: #819aaa;
    font-size: 9px;
    line-height: 1.35;
}

.statut-parchemin-v68 {
    padding: 4px 6px;
    border-radius: 6px;
    color: #8196a4;
    background: #0a1b28;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.carte-parchemin-v68.possede .statut-parchemin-v68 {
    color: #d9bdff;
    background: #2b1e41;
}

.carte-parchemin-v68.equipe .statut-parchemin-v68 {
    color: #9ff4f4;
    background: #12383e;
}

.carte-parchemin-v68 > button {
    grid-column: 1 / -1;
    padding: 7px 9px;
    border: 1px solid #3a627a;
    border-radius: 7px;
    color: #bfe9f1;
    background: #0d2b3b;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.carte-parchemin-v68 > button:hover {
    border-color: #61c7d3;
    color: #ffffff;
}

.fenetre-apercu-parchemin {
    width: min(620px, calc(100vw - 30px));
}

.contenu-apercu-parchemin {
    margin: 14px 0;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    text-align: left;
}

#personnage-apercu-parchemin {
    width: 210px;
    height: 315px;
    border: 1px solid #3e6980;
    background: linear-gradient(#123f57 70%, #5b4c2c);
}

.details-apercu-parchemin {
    display: grid;
    gap: 9px;
}

#rarete-apercu-parchemin {
    color: #c198ed;
    font-size: 11px;
    font-weight: 900;
}

#rarete-apercu-parchemin.legendaire {
    color: #f2c65e;
}

.details-apercu-parchemin p,
.details-apercu-parchemin aside {
    margin: 0;
    color: #a6bbc8;
    font-size: 11px;
    line-height: 1.5;
}

#bonus-apercu-parchemin {
    color: #8be2e8;
    font-weight: 900;
}

.details-apercu-parchemin aside {
    padding: 9px;
    border: 1px solid #5e4a28;
    border-radius: 8px;
    color: #e5c878;
    background: rgba(82, 58, 18, .24);
}

@media (max-width: 1000px) {
    .liste-collection-parchemins {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .collection-parchemins-v68 > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .liste-collection-parchemins {
        grid-template-columns: 1fr;
    }

    .contenu-apercu-parchemin {
        grid-template-columns: 1fr;
    }

    #personnage-apercu-parchemin {
        width: 170px;
        height: 255px;
        margin: 0 auto;
    }
}

/* =========================================
   CRÉATEUR DE PERSONNAGE MODULAIRE V16
========================================= */

.panneau-creation {
    width: min(1080px, 100%);
}

.createur-apparence {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
    gap: 26px;
    align-items: stretch;
}

.colonne-apercu {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    background:
        radial-gradient(
            circle at 50% 43%,
            #c8f4ff 0,
            #76d3ed 35%,
            #28708f 70%,
            #153a56 100%
        );
    border: 3px solid #173f61;
    border-radius: 18px;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.25);
}

.personnage-compose {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    aspect-ratio: 2 / 3;
}

.calque-personnage {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    image-rendering: auto;
    pointer-events: none;
}

.calque-personnage[hidden] {
    display: none !important;
}

.calque-tenue {
    z-index: 5;
    transform-origin: center center;
}

.personnage-compose[data-sexe="femme"] .calque-tenue {
    transform: scaleX(.88);
}

.icone-slot img,
.icone-emplacement img,
.detail-icone-objet img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.personnage-compose-grand {
    width: min(300px, 92%);
    background: transparent;
    filter: drop-shadow(0 14px 8px rgba(5, 24, 39, .38));
}

.apparence-definitive {
    margin-top: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 2px rgba(5, 30, 48, .75);
}

.colonne-apercu .instruction-personnage {
    color: #ffffff;
    text-shadow: 0 2px 2px rgba(5, 30, 48, .7);
}

.options-apparence {
    display: grid;
    gap: 12px;
    align-content: center;
}

.note-creation-v1 {
    padding: 18px;
    display: grid;
    gap: 7px;
    color: #173f61;
    background: linear-gradient(135deg, #ecfaff, #dceff8);
    border: 1px solid #9bcce0;
    border-radius: 13px;
}

.note-creation-v1 strong {
    color: #0879bf;
    font-size: 16px;
}

.note-creation-v1 span {
    font-size: 13px;
    line-height: 1.5;
}

.groupe-apparence {
    min-width: 0;
    padding: 12px 14px 14px;
    background: #f5fbff;
    border: 2px solid #a9d4e7;
    border-radius: 13px;
}

.groupe-apparence legend {
    padding: 0 7px;
    color: #173f61;
    font-size: 14px;
    font-weight: 900;
}

.choix-apparence {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.option-apparence {
    min-height: 42px;
    padding: 8px 15px;
    color: #173f61;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    background: white;
    border: 2px solid #8fbdd2;
    border-radius: 10px;
    box-shadow: 0 3px 0 #6c9bb1;
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.option-apparence:hover {
    transform: translateY(-2px);
    border-color: #168bc8;
}

.option-apparence.selectionne {
    color: white;
    background: #0879bf;
    border-color: #f1a13c;
    box-shadow: 0 3px 0 #9c4318, 0 0 0 3px rgba(240,128,37,.22);
}

.pastille-couleur {
    width: 46px;
    min-width: 46px;
    padding: 0;
    background: var(--couleur);
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #8fbdd2, 0 3px 0 #6c9bb1;
}

.pastille-couleur.selectionne {
    background: var(--couleur);
    border-color: white;
    box-shadow:
        0 0 0 4px #f08025,
        0 5px 0 #9c4318;
}

.personnage-compose-mini {
    width: 58px;
    height: 70px;
    background: linear-gradient(#8ce2f4 70%, #d6ba72);
    border: 2px solid #47cbe6;
    border-radius: 10px;
}

.personnage-compose-fiche {
    width: 100%;
    height: 390px;
    background: linear-gradient(#8cdef0 70%, #d6ba72);
    border-radius: 11px;
}

@media (max-width: 820px) {
    .createur-apparence {
        grid-template-columns: 1fr;
    }

    .personnage-compose-grand {
        width: 190px;
    }
}

@media (max-width: 520px) {
    .creation-personnage {
        padding: 10px;
        align-items: flex-start;
    }

    .panneau-creation {
        padding: 18px 12px;
    }

    .choix-numerote {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .choix-numerote .option-apparence {
        padding-inline: 8px;
    }
}

/* -------------------------------------------------------------------------
   V75 — Identité publique et classements en ligne
   ---------------------------------------------------------------------- */

.profil-public-compte {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid #214967;
    border-radius: 12px;
    background: #091d2d;
}

.profil-public-compte label {
    color: #57d8ec;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profil-public-compte small {
    color: #829db0;
    line-height: 1.4;
}

.saisie-pseudo-public {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.saisie-pseudo-public input {
    min-width: 0;
}

.page-classements {
    padding: 24px;
}

.entete-classements {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.entete-classements small {
    color: #52d9ed;
    font-weight: 900;
    letter-spacing: .09em;
}

.entete-classements h2 {
    margin: 5px 0;
    color: #eef9ff;
    font-size: 28px;
}

.entete-classements p,
.note-classement {
    margin: 0;
    color: #87a6b9;
}

.statut-classement {
    max-width: 340px;
    padding: 9px 12px;
    border: 1px solid #234d69;
    border-radius: 10px;
    color: #9eb7c7;
    background: #0a2133;
    font-size: 12px;
    line-height: 1.4;
}

.statut-classement.erreur {
    border-color: #85474d;
    color: #efadb1;
}

.onglets-classements {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.onglets-classements button {
    min-width: 130px;
    padding: 9px 14px;
    border: 1px solid #28516b;
    border-radius: 9px;
    color: #8eacbd;
    background: #0b2335;
    font-weight: 800;
    cursor: pointer;
}

.onglets-classements button.actif {
    border-color: #42cfe5;
    color: #071923;
    background: #50d8eb;
}

.rang-personnel {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 15px;
    padding: 13px 16px;
    border: 1px solid #3eaac0;
    border-radius: 12px;
    background: linear-gradient(135deg, #0c3143, #0a2232);
}

.rang-personnel.cache {
    display: none;
}

.rang-personnel > div:first-child {
    display: grid;
    min-width: 90px;
}

.rang-personnel small {
    color: #70dceb;
    font-size: 10px;
    font-weight: 900;
}

.rang-personnel-position,
#rang-personnel-position {
    color: #fff;
    font-size: 24px;
}

.rang-personnel-identite {
    display: grid;
    gap: 2px;
}

.rang-personnel-identite b {
    color: #eaf8ff;
}

.rang-personnel-identite span {
    color: #91adbd;
    font-size: 12px;
}

.tableau-classement {
    overflow: hidden;
    border: 1px solid #1f435a;
    border-radius: 12px;
    background: #081d2c;
}

.ligne-classement {
    display: grid;
    grid-template-columns: 70px minmax(150px, 1.4fr) minmax(150px, 1.2fr) 85px 120px;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 15px;
    border-bottom: 1px solid #17394f;
    color: #b7ccd8;
}

.entete-ligne-classement {
    min-height: 38px;
    color: #5fd9e9;
    background: #0c2a3e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.liste-classement .ligne-classement:last-child {
    border-bottom: 0;
}

.ligne-classement.est-moi {
    background: rgba(73, 207, 229, .09);
    box-shadow: inset 3px 0 #4bd6e8;
}

.rang-classement {
    color: #63dbea;
    font-size: 16px;
    font-weight: 900;
}

.pseudo-classement {
    overflow: hidden;
    color: #eefaff;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progression-classement,
.niveau-classement,
.dps-classement {
    color: #91aebe;
    font-size: 12px;
}

.dps-classement {
    color: #f2c762;
    font-weight: 800;
}

.classement-vide {
    margin: 0;
    padding: 28px 18px;
    color: #829fb1;
    text-align: center;
}

.note-classement {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .page-classements {
        padding: 16px 12px;
    }

    .entete-classements {
        flex-direction: column;
    }

    .statut-classement {
        max-width: none;
        width: 100%;
    }

    .entete-ligne-classement {
        display: none;
    }

    .ligne-classement {
        grid-template-columns: 50px minmax(120px, 1fr) auto;
        gap: 5px 10px;
        padding: 11px 12px;
    }

    .progression-classement {
        grid-column: 2 / 4;
    }

    .niveau-classement {
        display: none;
    }

    .dps-classement {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }
}

@media (max-width: 520px) {
    .saisie-pseudo-public {
        grid-template-columns: 1fr;
    }

    .onglets-classements button {
        flex: 1;
        min-width: 0;
    }
}

/* Expéditions */

.entete-expeditions {
    border-color: #327ca0;
    background:
        radial-gradient(circle at 90% 0, rgba(38, 167, 190, 0.17), transparent 42%),
        linear-gradient(145deg, #102c47, #091a2e);
}

.resume-expeditions {
    display: grid;
    grid-template-columns: repeat(3, minmax(125px, 1fr));
    gap: 8px;
}

.resume-expeditions span {
    padding: 10px 12px;
    color: #7f9eb5;
    font-size: 10px;
    text-transform: uppercase;
    background: #07182b;
    border: 1px solid #315b78;
    border-radius: 9px;
}

.resume-expeditions strong {
    display: block;
    margin-top: 4px;
    color: #70d9e8;
    font-size: 15px;
    text-transform: none;
}

.expedition-active {
    margin-top: 15px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    color: white;
    background:
        radial-gradient(circle at 10% 0, rgba(49, 201, 216, 0.2), transparent 40%),
        linear-gradient(135deg, #0d4661, #09253d);
    border: 1px solid #45b8cb;
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(38, 177, 197, 0.12);
}

.expedition-active.cache {
    display: none;
}

.expedition-active h3 {
    margin: 7px 0 4px;
    font-size: 22px;
}

.expedition-active p {
    color: #a9c6d5;
}

.chrono-expedition {
    min-width: 240px;
    text-align: right;
}

.chrono-expedition small {
    display: block;
    color: #8db6c9;
    text-transform: uppercase;
}

.chrono-expedition strong {
    display: block;
    margin: 3px 0 8px;
    color: #f1c65f;
    font-size: 28px;
}

.valider-retour-expedition {
    width: 100%;
    margin-top: 11px;
    padding: 10px 14px;
    color: #17262c;
    font-weight: 900;
    background: linear-gradient(135deg, #f3cb62, #e49b36);
    border: 1px solid #ffe28e;
    border-radius: 8px;
    cursor: pointer;
    animation: pulse-validation-expedition 1.4s ease-in-out infinite;
}

.valider-retour-expedition.cache {
    display: none;
}

@keyframes pulse-validation-expedition {
    50% {
        box-shadow: 0 0 18px rgba(243, 203, 98, 0.42);
        transform: translateY(-1px);
    }
}

.barre-progression-expedition {
    height: 8px;
    overflow: hidden;
    background: #061725;
    border-radius: 99px;
}

.barre-progression-expedition i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #2dc6d7, #79e4bd);
    transition: width 0.5s linear;
}

.preparation-expedition {
    margin-top: 15px;
    padding: 17px;
    background: #091b30;
    border: 1px solid #315473;
    border-radius: 14px;
}

.preparation-expedition > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.preparation-expedition h3 {
    margin: 7px 0 3px;
    color: white;
}

.preparation-expedition p {
    color: #829db2;
}

.puissance-equipe-expedition {
    display: flex;
    gap: 7px;
}

.puissance-equipe-expedition span {
    min-width: 90px;
    padding: 8px 10px;
    color: #7f9bb0;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    background: #06172a;
    border-radius: 7px;
}

.puissance-equipe-expedition strong {
    display: block;
    margin-top: 3px;
    color: #f1c55d;
    font-size: 16px;
}

.selection-moussaillons-expedition {
    margin-top: 13px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.choix-moussaillon-expedition {
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #b0c3d1;
    text-align: left;
    background: #0d263d;
    border: 1px solid #315473;
    border-radius: 9px;
    cursor: pointer;
}

.choix-moussaillon-expedition:hover,
.choix-moussaillon-expedition.selectionne {
    color: white;
    background: #13435a;
    border-color: #4bd0d8;
}

.choix-moussaillon-expedition.selectionne {
    box-shadow: inset 0 0 0 2px rgba(75, 208, 216, 0.13);
}

.choix-moussaillon-expedition:disabled {
    cursor: not-allowed;
}

.portrait-selection-expedition {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 23px;
    background: #06172a;
    border-radius: 8px;
}

.choix-moussaillon-expedition strong,
.choix-moussaillon-expedition small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choix-moussaillon-expedition small {
    margin-top: 2px;
    color: #7592a7;
    font-size: 9px;
}

.choix-moussaillon-expedition b {
    grid-column: 1 / -1;
    color: #f1c55d;
    font-size: 11px;
}

.aucun-moussaillon-expedition {
    grid-column: 1 / -1;
    padding: 15px;
    text-align: center;
    background: #06172a;
    border-radius: 8px;
}

.liste-expeditions {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.carte-expedition {
    padding: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(41, 142, 174, 0.14), transparent 38%),
        linear-gradient(145deg, #102a43, #08192d);
    border: 1px solid #365d78;
    border-radius: 13px;
}

.carte-expedition.accessible {
    border-color: #3aa886;
}

.carte-expedition.verrouillee {
    background: linear-gradient(145deg, #10253a, #081624);
}

.carte-expedition > header {
    display: flex;
    gap: 12px;
}

.icone-expedition {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    font-size: 30px;
    background: #06172a;
    border: 1px solid #315473;
    border-radius: 10px;
}

.carte-expedition header small {
    color: #54c6d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.carte-expedition h3 {
    margin: 3px 0;
    color: white;
}

.carte-expedition header p {
    color: #829db1;
    font-size: 12px;
}

.conditions-expedition,
.recompenses-expedition,
.taux-expedition {
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.conditions-expedition span,
.recompenses-expedition span,
.taux-expedition span {
    padding: 6px 8px;
    color: #93adbf;
    font-size: 10px;
    background: #06172a;
    border-radius: 6px;
}

.conditions-expedition span.valide {
    color: #65d7a5;
}

.conditions-expedition span.invalide {
    color: #ff7777;
}

.taux-expedition span:nth-child(2) {
    color: #60a9ff;
}

.taux-expedition span:nth-child(3) {
    color: #c887ff;
}

.carte-expedition > button {
    width: 100%;
    min-height: 42px;
    margin-top: 13px;
    padding: 9px;
    color: white;
    font-weight: 900;
    background: linear-gradient(135deg, #238e85, #176774);
    border: 1px solid #51cfbd;
    border-radius: 8px;
    cursor: pointer;
}

.carte-expedition > button:disabled {
    color: #6c8497;
    background: #142a3d;
    border-color: #2c465a;
    cursor: not-allowed;
}

.message-expedition {
    margin-top: 13px;
    padding: 11px;
    color: #a2bac9;
    text-align: center;
    background: #07172a;
    border-radius: 8px;
}

.statut-moussaillon-expedition {
    padding: 7px;
    color: #61d5e0;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    background: #0b3549;
    border-radius: 7px;
}

.recompenses-retour-expedition {
    border-color: #e2ae48;
    background:
        radial-gradient(circle at 50% 0, rgba(240, 191, 78, 0.18), transparent 42%),
        linear-gradient(145deg, #102b43, #08192d);
}

.grille-recompenses-retour {
    margin: 18px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.grille-recompenses-retour > span {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #88a5b9;
    font-size: 11px;
    text-align: left;
    background: #07182b;
    border: 1px solid #315473;
    border-radius: 9px;
}

.grille-recompenses-retour > span strong {
    color: #f1c55d;
    font-size: 16px;
}

.grille-recompenses-retour > span:last-child,
#bloc-recompense-expedition-equipement {
    grid-column: 1 / -1;
}

.grille-recompenses-retour > span.sans-recompense strong {
    color: #7892a6;
}

.recompenses-retour-expedition > button {
    width: 100%;
    min-height: 44px;
}

/* V99 — Récapitulatif des récompenses des Trois Couronnes. */
.recompenses-boss-outre-horizon {
    width: min(620px, calc(100vw - 28px));
    border-color: #e2ae48;
    background:
        radial-gradient(circle at 50% 0, rgba(240, 191, 78, 0.22), transparent 40%),
        linear-gradient(145deg, #102b43, #071625);
}

.entete-recompenses-boss-outre-horizon {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.entete-recompenses-boss-outre-horizon > img {
    width: 62px;
    height: 62px;
    padding: 9px;
    object-fit: contain;
    border: 1px solid rgba(240, 191, 78, 0.48);
    border-radius: 15px;
    background: rgba(240, 191, 78, 0.1);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.42));
}

.entete-recompenses-boss-outre-horizon small {
    color: #f1c55d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.entete-recompenses-boss-outre-horizon h2 {
    margin: 3px 0;
}

.entete-recompenses-boss-outre-horizon p {
    color: #8fb2c5;
    font-size: 12px;
}

.resume-victoire-boss-outre-horizon {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 18px 0 10px;
}

.resume-victoire-boss-outre-horizon span {
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #7799ad;
    font-size: 10px;
    text-align: left;
    background: rgba(5, 20, 34, 0.84);
    border: 1px solid #315473;
    border-radius: 9px;
}

.resume-victoire-boss-outre-horizon strong {
    color: #e9f5fa;
    font-size: 15px;
}

.grille-recompenses-boss-outre-horizon {
    display: grid;
    gap: 9px;
}

.grille-recompenses-boss-outre-horizon article {
    min-height: 74px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: rgba(7, 24, 43, 0.92);
    border: 1px solid rgba(226, 174, 72, 0.42);
    border-radius: 10px;
}

.grille-recompenses-boss-outre-horizon article.sans-recompense {
    border-color: rgba(83, 116, 137, 0.36);
    filter: saturate(0.55);
}

.grille-recompenses-boss-outre-horizon article > img,
.icone-recompense-boss-outre-horizon,
.icone-recompense-boss-outre-horizon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.grille-recompenses-boss-outre-horizon article small,
.grille-recompenses-boss-outre-horizon article strong {
    display: block;
}

.grille-recompenses-boss-outre-horizon article small {
    color: #7799ad;
    font-size: 9px;
    letter-spacing: 0.08em;
}

.grille-recompenses-boss-outre-horizon article strong {
    margin-top: 4px;
    color: #f1c55d;
    font-size: 14px;
}

.grille-recompenses-boss-outre-horizon article > span:last-child {
    color: #7de5a9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.grille-recompenses-boss-outre-horizon article.sans-recompense > span:last-child,
.grille-recompenses-boss-outre-horizon article.sans-recompense strong {
    color: #7790a2;
}

.prochain-boss-outre-horizon {
    margin: 12px 0 0;
    padding: 10px 12px;
    color: #9fe9f2;
    font-size: 12px;
    background: rgba(24, 126, 151, 0.18);
    border: 1px solid rgba(62, 190, 213, 0.32);
    border-radius: 9px;
}

.recompenses-boss-outre-horizon > button {
    width: 100%;
    min-height: 46px;
    margin-top: 16px;
}

@media (max-width: 560px) {
    .resume-victoire-boss-outre-horizon {
        grid-template-columns: 1fr;
    }

    .grille-recompenses-boss-outre-horizon article {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .grille-recompenses-boss-outre-horizon article > span:last-child {
        grid-column: 2;
    }
}

@media (max-width: 1100px) {
    .selection-moussaillons-expedition {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .recrue-epique-en-attente {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .recrue-epique-en-attente button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {
    .entete-expeditions,
    .expedition-active,
    .preparation-expedition > header {
        align-items: stretch;
        flex-direction: column;
    }

    .resume-expeditions,
    .liste-expeditions {
        grid-template-columns: 1fr;
    }

    .chrono-expedition {
        min-width: 0;
        text-align: left;
    }

    .puissance-equipe-expedition {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 620px) {
    .selection-moussaillons-expedition,
    .puissance-equipe-expedition {
        grid-template-columns: 1fr;
    }

    .grille-recompenses-retour {
        grid-template-columns: 1fr;
    }

    .grille-recompenses-retour > span:last-child {
        grid-column: auto;
    }
}

/* =========================================
   CRÉATION DU PERSONNAGE — FICHE AVENTURIER V19
========================================= */

#creation-personnage {
    --creation-bleu: #082b4a;
    --creation-bleu-clair: #0c7fa8;
    --creation-turquoise: #12b8d4;
    --creation-or: #c9943e;
    --creation-ivoire: #fbf3df;
    --creation-encre: #163a55;

    padding: 18px;
    align-items: center;
    background:
        linear-gradient(120deg, rgba(3, 22, 39, .68), rgba(3, 52, 78, .35)),
        url("images/mer-bleue-creation.png") center / cover fixed;
}

#creation-personnage .panneau-creation {
    position: relative;
    width: min(1220px, 100%);
    max-height: calc(100vh - 36px);
    padding: 0;
    overflow-y: auto;
    scrollbar-color: var(--creation-or) var(--creation-bleu);
    color: var(--creation-encre);
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .8), transparent 35%),
        linear-gradient(135deg, #fffaf0, #f1e3c4);
    border: 3px solid var(--creation-or);
    border-radius: 20px;
    box-shadow:
        0 0 0 5px var(--creation-bleu),
        0 20px 60px rgba(0, 11, 24, .58);
}

#creation-personnage .panneau-creation::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 7px;
    border: 1px solid rgba(201, 148, 62, .44);
    border-radius: 12px;
    pointer-events: none;
}

#creation-personnage .titre-creation {
    position: relative;
    z-index: 3;
    min-height: 88px;
    margin: 0;
    padding: 14px 30px;
    display: grid;
    grid-template-columns: 185px 1fr 185px;
    align-items: center;
    color: var(--creation-ivoire);
    text-align: center;
    background:
        linear-gradient(90deg, #061d35, #0b365b 48%, #061d35);
    border-bottom: 3px solid var(--creation-or);
}

#creation-personnage .titre-creation::after {
    content: "⚓";
    justify-self: end;
    color: var(--creation-or);
    font-size: 34px;
    filter: drop-shadow(0 2px 0 #031525);
}

#creation-personnage .marque-creation {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #f6d58c;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 1.5px;
}

#creation-personnage .marque-creation span {
    font-size: 30px;
}

#creation-personnage .titre-creation p {
    margin-bottom: 2px;
    color: #54d9e7;
    font-size: 11px;
    letter-spacing: 3px;
}

#creation-personnage .titre-creation h2 {
    color: var(--creation-ivoire);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(27px, 3.2vw, 43px);
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 3px 0 #03182a;
}

#creation-personnage #formulaire-personnage {
    position: relative;
    z-index: 1;
    padding: 20px 24px 22px;
}

#creation-personnage .createur-apparence {
    grid-template-columns: minmax(340px, .9fr) minmax(500px, 1.35fr);
    gap: 20px;
}

#creation-personnage .colonne-apercu {
    position: relative;
    min-height: 500px;
    padding: 17px 18px 14px;
    justify-content: space-between;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(to bottom, rgba(5, 60, 91, .08), rgba(4, 31, 49, .28)),
        url("images/mer-bleue-creation.png") 29% center / cover;
    border: 2px solid var(--creation-or);
    border-radius: 14px;
    box-shadow:
        inset 0 0 0 4px rgba(5, 35, 57, .48),
        0 7px 16px rgba(15, 45, 63, .22);
}

#creation-personnage .colonne-apercu::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(transparent, rgba(4, 28, 46, .72));
    pointer-events: none;
}

#creation-personnage .instruction-personnage {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 7px 13px;
    color: white;
    font-size: 12px;
    letter-spacing: 1.5px;
    background: rgba(5, 35, 58, .84);
    border: 1px solid rgba(246, 213, 140, .8);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 18, 31, .25);
}

#creation-personnage .instruction-personnage span {
    color: #f6d58c;
}

#creation-personnage .personnage-compose-grand {
    z-index: 2;
    width: min(330px, 86%);
    margin: -12px auto -18px;
    filter: drop-shadow(0 15px 7px rgba(2, 22, 34, .52));
}

#creation-personnage .rang-creation {
    position: relative;
    z-index: 3;
    width: min(280px, 88%);
    padding: 9px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    color: #d8f8ff;
    background: rgba(5, 35, 58, .9);
    border: 1px solid var(--creation-or);
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(0, 17, 29, .32);
}

#creation-personnage .rang-creation span {
    color: #72dbe8;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

#creation-personnage .rang-creation strong {
    color: #fff2c9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}

#creation-personnage .options-apparence {
    gap: 8px;
}

#creation-personnage .zone-nom {
    width: 100%;
    margin: 0 0 2px;
    padding: 13px 15px;
    background: rgba(255, 250, 238, .86);
    border: 1px solid #d4b271;
    border-radius: 11px;
    box-shadow: 0 3px 8px rgba(47, 55, 52, .08);
}

#creation-personnage .zone-nom label {
    margin-bottom: 6px;
    color: var(--creation-encre);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
}

#creation-personnage .champ-nom-creation {
    position: relative;
}

#creation-personnage .zone-nom input {
    height: 44px;
    padding: 10px 45px 10px 13px;
    color: #17384e;
    font-size: 15px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #b9975e;
    border-radius: 8px;
}

#creation-personnage .zone-nom input:focus {
    border-color: var(--creation-turquoise);
    box-shadow: 0 0 0 3px rgba(18, 184, 212, .18);
}

#creation-personnage .champ-nom-creation > span {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #8e6733;
    font-size: 20px;
    transform: translateY(-50%);
}

#creation-personnage .groupe-apparence {
    padding: 8px 13px 11px;
    background:
        linear-gradient(100deg, rgba(255, 253, 247, .96), rgba(245, 236, 215, .96));
    border: 1px solid #d1ae6d;
    border-radius: 10px;
    box-shadow:
        inset 3px 0 0 var(--creation-bleu),
        0 3px 7px rgba(42, 51, 50, .07);
}

#creation-personnage .groupe-apparence legend {
    padding: 0 8px;
    color: var(--creation-bleu);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 800;
}

#creation-personnage .groupe-apparence legend::before {
    content: attr(data-icone);
    margin-right: 7px;
    color: #b47726;
    font-family: Arial, sans-serif;
}

#creation-personnage .choix-apparence {
    gap: 8px;
}

#creation-personnage .option-apparence {
    min-height: 37px;
    padding: 7px 13px;
    color: var(--creation-encre);
    font-size: 12px;
    background: #fffdf8;
    border: 1px solid #bc9b66;
    border-radius: 8px;
    box-shadow: 0 2px 0 #927246;
}

#creation-personnage .option-apparence:hover {
    border-color: var(--creation-turquoise);
    box-shadow: 0 3px 0 #08718b;
}

#creation-personnage .option-apparence.selectionne {
    color: white;
    background: linear-gradient(#13aeca, #087da3);
    border-color: #f0c56d;
    box-shadow:
        0 3px 0 #07536e,
        0 0 0 2px rgba(18, 184, 212, .2);
}

#creation-personnage .option-sexe {
    min-width: 150px;
    min-height: 45px;
    padding: 4px 17px 4px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
}

#creation-personnage .miniature-sexe {
    position: relative;
    width: 36px;
    height: 36px;
    overflow: hidden;
    flex: 0 0 auto;
    background: #cceff5;
    border: 1px solid rgba(12, 65, 88, .35);
    border-radius: 50%;
}

#creation-personnage .miniature-sexe img {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 74px;
    height: auto;
    max-width: none;
    transform: translateX(-50%);
}

#creation-personnage .pastille-couleur {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    background: var(--couleur);
    border: 3px solid #fffdf8;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px #9f8050,
        0 2px 0 #80643e;
}

#creation-personnage .pastille-couleur.selectionne {
    background: var(--couleur);
    border-color: white;
    box-shadow:
        0 0 0 3px var(--creation-turquoise),
        0 4px 0 #08718b;
}

#creation-personnage .pied-creation {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

#creation-personnage .apparence-definitive {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #6e502c;
    font-size: 12px;
    text-shadow: none;
}

#creation-personnage .apparence-definitive span {
    width: 29px;
    height: 29px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #3b2b13;
    background: #f3ba48;
    border: 1px solid #9d6c20;
    border-radius: 50%;
}

#creation-personnage #formulaire-personnage .bouton-valider {
    width: auto;
    min-width: 330px;
    margin: 0;
    padding: 13px 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #fffaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    letter-spacing: 1px;
    background: linear-gradient(#18c6dc, #0785ac);
    border: 2px solid #f0c56d;
    border-radius: 9px;
    box-shadow:
        0 4px 0 #064b69,
        0 0 0 3px var(--creation-bleu);
}

#creation-personnage #formulaire-personnage .bouton-valider:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 6px 0 #064b69,
        0 0 0 3px var(--creation-bleu);
}

#creation-personnage #formulaire-personnage .bouton-valider:active {
    transform: translateY(3px);
    box-shadow:
        0 1px 0 #064b69,
        0 0 0 3px var(--creation-bleu);
}

#creation-personnage #formulaire-personnage .bouton-valider span {
    color: #f9d98c;
    font-size: 23px;
}

@media (max-width: 900px) {
    #creation-personnage {
        padding: 10px;
        align-items: flex-start;
    }

    #creation-personnage .panneau-creation {
        max-height: none;
    }

    #creation-personnage .titre-creation {
        grid-template-columns: 1fr;
        padding: 17px;
    }

    #creation-personnage .marque-creation,
    #creation-personnage .titre-creation::after {
        display: none;
    }

    #creation-personnage .createur-apparence {
        grid-template-columns: 1fr;
    }

    #creation-personnage .colonne-apercu {
        min-height: 430px;
    }

    #creation-personnage .personnage-compose-grand {
        width: 260px;
    }
}

@media (max-width: 560px) {
    #creation-personnage #formulaire-personnage {
        padding: 14px 11px 18px;
    }

    #creation-personnage .titre-creation h2 {
        font-size: 25px;
    }

    #creation-personnage .colonne-apercu {
        min-height: 390px;
    }

    #creation-personnage .personnage-compose-grand {
        width: 220px;
    }

    #creation-personnage .option-sexe {
        min-width: calc(50% - 4px);
    }

    #creation-personnage .pied-creation {
        align-items: stretch;
        flex-direction: column;
    }

    #creation-personnage #formulaire-personnage .bouton-valider {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================
   PAGE PRINCIPALE — TABLEAU DE COMBAT V21
========================================= */

#ecran-jeu {
    --fond-page: #061321;
    --fond-navigation: #081a2d;
    --fond-carte: #0b2035;
    --fond-carte-clair: #102a43;
    --bordure-carte: #25465f;
    --texte-principal: #f0f6fa;
    --texte-secondaire: #8faabd;
    --accent: #1bc3d5;
    --accent-fonce: #087b9c;
    --or: #f0bd4e;

    color: var(--texte-principal);
    background:
        radial-gradient(circle at 70% 0, rgba(16, 87, 118, .17), transparent 38%),
        var(--fond-page);
}

#ecran-jeu .barre-app {
    position: sticky;
    z-index: 50;
    top: 0;
    min-height: 76px;
    margin-left: 245px;
    padding: 12px 20px;
    background: rgba(7, 24, 41, .96);
    border-bottom: 1px solid #1d3c55;
    box-shadow: 0 8px 24px rgba(0, 8, 17, .22);
    backdrop-filter: blur(10px);
}

#ecran-jeu .logo-jeu {
    color: #62dce8;
    font-size: 24px;
    font-weight: 900;
}

#ecran-jeu .logo-jeu span {
    color: #62dce8;
    font-size: 28px;
}

#ecran-jeu .ressources-app {
    gap: 9px;
}

#ecran-jeu .ressource-app,
#ecran-jeu .experience-app {
    min-height: 46px;
    padding: 8px 13px;
    background: #0d2339;
    border: 1px solid #203f59;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

#ecran-jeu .ressource-app strong {
    color: var(--texte-principal);
}

#ecran-jeu .ressource-app:first-child strong {
    color: var(--or);
}

/* V60 — Centre de notifications. L'historique reste volontairement en
   mémoire de session : aucun de ces éléments n'entre dans la sauvegarde. */
#ecran-jeu .centre-notifications {
    position: relative;
    flex: 0 0 auto;
}

#ecran-jeu .bouton-notifications {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #dcecff;
    font-size: 20px;
    background: #0d2339;
    border: 1px solid #203f59;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

#ecran-jeu .bouton-notifications:hover,
#ecran-jeu .bouton-notifications[aria-expanded="true"] {
    background: #12304a;
    border-color: #2ed4e3;
}

#ecran-jeu .bouton-notifications:active {
    transform: translateY(1px);
}

#ecran-jeu #compteur-notifications {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #071829;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    background: #f0bd4e;
    border: 2px solid #071829;
    border-radius: 999px;
}

#ecran-jeu #compteur-notifications.cache {
    display: none;
}

#ecran-jeu .panneau-notifications {
    position: absolute;
    z-index: 120;
    top: calc(100% + 12px);
    right: 0;
    width: min(390px, calc(100vw - 32px));
    overflow: hidden;
    background: #0a1c2f;
    border: 1px solid #28506b;
    border-radius: 13px;
    box-shadow: 0 18px 42px rgba(0, 6, 13, .48);
}

#ecran-jeu .panneau-notifications.cache {
    display: none;
}

#ecran-jeu .panneau-notifications > header {
    min-height: 66px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #0d253c;
    border-bottom: 1px solid #203f59;
}

#ecran-jeu .panneau-notifications > header small {
    color: #62dce8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

#ecran-jeu .panneau-notifications > header h2 {
    margin: 2px 0 0;
    color: #f0f6fa;
    font-size: 18px;
}

#ecran-jeu #fermer-notifications {
    width: 32px;
    height: 32px;
    color: #9fb8c8;
    font-size: 24px;
    line-height: 1;
    background: transparent;
    border: 1px solid #29465d;
    border-radius: 8px;
    cursor: pointer;
}

#ecran-jeu #fermer-notifications:hover {
    color: #f0f6fa;
    border-color: #62dce8;
}

#ecran-jeu .liste-notifications {
    max-height: min(480px, calc(100vh - 180px));
    overflow-y: auto;
}

#ecran-jeu .notifications-vides {
    margin: 0;
    padding: 28px 18px;
    color: #8faabd;
    text-align: center;
    font-size: 13px;
}

#ecran-jeu .notification-jeu {
    padding: 13px 15px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    border-bottom: 1px solid #17344b;
}

#ecran-jeu .notification-jeu:last-child {
    border-bottom: 0;
}

#ecran-jeu .notification-jeu .icone-notification {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-size: 18px;
    background: #102b43;
    border: 1px solid #26516b;
    border-radius: 9px;
}

#ecran-jeu .notification-jeu strong {
    display: block;
    color: #eef7fb;
    font-size: 13px;
}

#ecran-jeu .notification-jeu p {
    margin: 3px 0 0;
    color: #9fb5c3;
    font-size: 12px;
    line-height: 1.4;
}

#ecran-jeu .notification-jeu time {
    padding-top: 2px;
    color: #6f8b9d;
    font-size: 10px;
    white-space: nowrap;
}

/* V61 — Manuel du joueur. Le guide est une fenêtre autonome afin de ne
   modifier aucune des pages de jeu existantes. */
#ecran-jeu .centre-guide {
    flex: 0 0 auto;
}

#ecran-jeu .bouton-guide {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #62dce8;
    font-size: 21px;
    font-weight: 900;
    background: #0d2339;
    border: 1px solid #203f59;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

#ecran-jeu .bouton-guide:hover,
#ecran-jeu .bouton-guide[aria-expanded="true"] {
    color: #f0bd4e;
    background: #12304a;
    border-color: #2ed4e3;
}

#ecran-jeu .bouton-guide:active {
    transform: translateY(1px);
}

#ecran-jeu .fenetre-guide {
    position: fixed;
    z-index: 210;
    inset: 0;
    padding: 28px;
    display: grid;
    place-items: center;
    background: rgba(2, 11, 20, .78);
    backdrop-filter: blur(7px);
}

#ecran-jeu .fenetre-guide.cache {
    display: none;
}

#ecran-jeu .dialogue-guide {
    width: min(1120px, calc(100vw - 56px));
    height: min(780px, calc(100vh - 56px));
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: #081a2b;
    border: 1px solid #2b526c;
    border-radius: 15px;
    box-shadow: 0 28px 70px rgba(0, 5, 11, .65);
}

#ecran-jeu .entete-guide {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background:
        radial-gradient(circle at 15% 0, rgba(30, 182, 202, .13), transparent 38%),
        #0c2338;
    border-bottom: 1px solid #23455d;
}

#ecran-jeu .entete-guide small,
#ecran-jeu .etiquette-guide {
    color: #62dce8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

#ecran-jeu .entete-guide h2 {
    margin: 2px 0 0;
    color: #f2f8fb;
    font-size: 24px;
}

#ecran-jeu .entete-guide p {
    margin: 3px 0 0;
    color: #8faabd;
    font-size: 12px;
}

#ecran-jeu #fermer-guide {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: #a9bdc9;
    font-size: 28px;
    line-height: 1;
    background: #0a1c2e;
    border: 1px solid #31516a;
    border-radius: 9px;
    cursor: pointer;
}

#ecran-jeu #fermer-guide:hover {
    color: #f0f6fa;
    border-color: #62dce8;
}

#ecran-jeu .corps-guide {
    min-height: 0;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
}

#ecran-jeu .navigation-guide {
    min-height: 0;
    padding: 13px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    background: #071725;
    border-right: 1px solid #1d3b51;
}

#ecran-jeu .navigation-guide button {
    min-height: 46px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9fb5c3;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

#ecran-jeu .navigation-guide button:hover {
    color: #e7f3f7;
    background: #0d283e;
}

#ecran-jeu .navigation-guide button.actif {
    color: #eef9fb;
    background: linear-gradient(90deg, rgba(17, 151, 174, .24), rgba(13, 49, 69, .5));
    border-color: #1e8296;
}

#ecran-jeu .contenu-guide {
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: #28516a #081a2b;
}

#ecran-jeu .section-guide {
    max-width: 850px;
    margin: 0 auto;
    padding: 28px 32px 38px;
}

#ecran-jeu .section-guide.cache {
    display: none;
}

#ecran-jeu .section-guide h3 {
    margin: 5px 0 10px;
    color: #f2f8fb;
    font-size: 25px;
}

#ecran-jeu .section-guide h4 {
    margin: 24px 0 8px;
    color: #eaf4f8;
    font-size: 17px;
}

#ecran-jeu .section-guide > p {
    margin: 0 0 16px;
    color: #a5b9c5;
    font-size: 14px;
    line-height: 1.65;
}

#ecran-jeu .grille-guide {
    margin: 18px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

#ecran-jeu .grille-guide.trois-colonnes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#ecran-jeu .grille-guide article {
    padding: 15px;
    background: #0c2438;
    border: 1px solid #21465f;
    border-radius: 10px;
}

#ecran-jeu .grille-guide article strong {
    color: #eaf5f8;
    font-size: 14px;
}

#ecran-jeu .grille-guide article p {
    margin: 6px 0 0;
    color: #8fa9b9;
    font-size: 12px;
    line-height: 1.5;
}

#ecran-jeu .liste-guide {
    margin: 18px 0;
    display: grid;
    gap: 8px;
}

#ecran-jeu .liste-guide article,
#ecran-jeu .table-guide > div {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(135px, .42fr) minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    background: #0b2235;
    border: 1px solid #1c4058;
    border-radius: 9px;
}

#ecran-jeu .liste-guide b,
#ecran-jeu .table-guide strong {
    color: #dbeaf0;
    font-size: 13px;
}

#ecran-jeu .liste-guide span,
#ecran-jeu .table-guide span {
    color: #91a9b8;
    font-size: 12px;
    line-height: 1.5;
}

#ecran-jeu .table-guide {
    margin: 18px 0;
    display: grid;
    gap: 6px;
}

#ecran-jeu .table-guide.compact {
    max-width: 690px;
}

#ecran-jeu .astuce-guide {
    margin: 20px 0 0;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    color: #a9c4cf;
    background: rgba(22, 135, 151, .1);
    border: 1px solid #236978;
    border-radius: 9px;
}

#ecran-jeu .astuce-guide strong {
    color: #62dce8;
    font-size: 12px;
    white-space: nowrap;
}

#ecran-jeu .astuce-guide span,
#ecran-jeu .note-guide {
    font-size: 12px;
    line-height: 1.5;
}

#ecran-jeu .section-guide > .note-guide {
    margin-top: 16px;
    color: #718d9e;
    font-size: 11px;
}

@media (max-width: 820px) {
    #ecran-jeu .fenetre-guide {
        padding: 12px;
    }

    #ecran-jeu .dialogue-guide {
        width: calc(100vw - 24px);
        height: calc(100vh - 24px);
    }

    #ecran-jeu .corps-guide {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    #ecran-jeu .navigation-guide {
        padding: 8px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid #1d3b51;
    }

    #ecran-jeu .navigation-guide button {
        min-width: max-content;
    }

    #ecran-jeu .section-guide {
        padding: 22px 20px 30px;
    }

    #ecran-jeu .grille-guide.trois-colonnes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    #ecran-jeu .entete-guide {
        padding: 14px 15px;
    }

    #ecran-jeu .entete-guide p {
        display: none;
    }

    #ecran-jeu .grille-guide {
        grid-template-columns: 1fr;
    }

    #ecran-jeu .liste-guide article,
    #ecran-jeu .table-guide > div,
    #ecran-jeu .astuce-guide {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    #ecran-jeu .section-guide h3 {
        font-size: 22px;
    }
}

@media (max-width: 1120px) {
    #ecran-jeu .panneau-notifications {
        position: fixed;
        top: 86px;
        right: 14px;
    }
}

@media (max-width: 480px) {
    #ecran-jeu .panneau-notifications {
        top: 12px;
        right: 10px;
        width: calc(100vw - 20px);
    }

    #ecran-jeu .liste-notifications {
        max-height: calc(100vh - 100px);
    }
}

#ecran-jeu .experience-app {
    min-width: 245px;
}

#ecran-jeu .coquille-jeu {
    min-height: 0;
    display: block;
}

#ecran-jeu .navigation-jeu {
    position: fixed;
    z-index: 60;
    inset: 0 auto 0 0;
    width: 245px;
    padding: 18px 12px 14px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 0 0, rgba(25, 114, 143, .15), transparent 34%),
        var(--fond-navigation);
    border-right: 1px solid #21415a;
    box-shadow: 10px 0 30px rgba(0, 8, 18, .2);
}

#ecran-jeu .mini-profil {
    padding: 12px;
    grid-template-columns: 64px 1fr;
    gap: 11px;
    background: rgba(13, 38, 61, .9);
    border: 1px solid #27516c;
    border-radius: 13px;
}

#ecran-jeu .personnage-compose-mini {
    width: 64px;
    height: 78px;
    background: linear-gradient(#70d2e2 72%, #b89351);
    border: 1px solid #44c8da;
    border-radius: 9px;
}

#ecran-jeu .mini-profil h2 {
    color: white;
    font-size: 16px;
}

#ecran-jeu .mini-profil p {
    margin-top: 4px;
    color: #76dbe7;
    font-size: 12px;
}

#ecran-jeu .mini-profil .specialisation-mini-profil {
    color: #d9e9f2;
    font-size: 11px;
}

#ecran-jeu .specialisation-mini-profil strong {
    color: #4fd8e7;
}

#ecran-jeu .xp-mini-profil {
    grid-column: 1 / -1;
    margin-top: 2px;
}

#ecran-jeu .xp-mini-profil > div {
    height: 7px;
    overflow: hidden;
    background: #05111f;
    border: 1px solid #29475f;
    border-radius: 999px;
}

#ecran-jeu .xp-mini-profil i {
    width: 0;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #0da7c5, #36d6d0);
    border-radius: inherit;
    transition: width .3s;
}

#ecran-jeu .xp-mini-profil small {
    margin-top: 5px;
    display: block;
    color: #8fa9bc;
    font-size: 10px;
}

#ecran-jeu .menu-jeu {
    margin-top: 14px;
    gap: 5px;
}

#ecran-jeu .mini-profil > div {
    display: block;
}

#ecran-jeu .menu-jeu span {
    display: inline;
}

#ecran-jeu .bouton-recommencer {
    display: block;
}

#ecran-jeu .menu-jeu button {
    min-height: 46px;
    padding: 11px 13px;
    gap: 12px;
    color: #c8d8e4;
    font-size: 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
}

#ecran-jeu .menu-jeu button:hover {
    background: #0e2a43;
    border-color: #244c66;
}

#ecran-jeu .menu-jeu button.actif {
    color: white;
    background: linear-gradient(100deg, #0b83a3, #12aabe);
    border-color: #37d5e3;
    box-shadow: 0 7px 18px rgba(5, 133, 159, .2);
}

#ecran-jeu .bouton-recommencer {
    margin-top: 15px;
    color: #809bad;
    border-color: #29475f;
}

#ecran-jeu .contenu-tableau {
    width: auto;
    max-width: none;
    margin: 18px 18px 44px 263px;
}

#page-accueil .module-combat {
    background: var(--fond-carte);
    border: 1px solid var(--bordure-carte);
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(0, 7, 15, .28);
}

#page-accueil .entete-module-combat {
    min-height: 70px;
    padding: 12px 17px;
    background: #0c2136;
    border-bottom: 1px solid #28475f;
}

#page-accueil .pastille-section {
    display: inline-flex;
    padding: 7px 10px;
    color: #4ee0eb;
    font-size: 11px;
    letter-spacing: .35px;
    background: rgba(11, 128, 158, .16);
    border: 1px solid #168ca9;
    border-radius: 8px;
}

#page-accueil .entete-module-combat h2 {
    margin-top: 6px;
    font-size: 20px;
}

#page-accueil .progression-combat {
    min-width: 128px;
    padding: 7px 12px;
    background: #071728;
    border-color: #294960;
    border-radius: 9px;
}

#page-accueil .progression-combat small {
    margin-right: 8px;
    color: #7e9aac;
    font-size: 9px;
    font-weight: 900;
}

#page-accueil .progression-combat strong {
    color: var(--accent);
    font-size: 19px;
}

#page-accueil .scene-combat {
    height: clamp(360px, 40vw, 475px);
    background:
        linear-gradient(rgba(3, 20, 33, .24), rgba(3, 19, 31, .43)),
        url("images/mer-bleue-entrainement.png") center / cover;
    border-bottom: 1px solid #29475f;
    box-shadow: inset 0 0 70px rgba(0, 14, 27, .27);
}

#page-accueil .fiche-ennemi-scene {
    position: absolute;
    z-index: 12;
    top: 18px;
    left: 50%;
    width: min(460px, calc(100% - 40px));
    padding: 10px 14px;
    text-align: center;
    background: rgba(5, 23, 37, .82);
    border: 1px solid rgba(73, 150, 176, .62);
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(0, 10, 19, .28);
    transform: translateX(-50%);
    backdrop-filter: blur(7px);
}

#page-accueil .fiche-ennemi-scene h3 {
    color: white;
    font-size: 16px;
}

#page-accueil .zone-pv-ennemi {
    margin-top: 7px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 9px;
    color: #d8e6ef;
    background: transparent;
}

#page-accueil .zone-pv-ennemi > strong {
    font-size: 11px;
}

#page-accueil .zone-pv-ennemi .barre-pv-ennemi {
    height: 13px;
    background: #07111e;
    border: 1px solid rgba(255, 255, 255, .14);
}

#page-accueil .zone-pv-ennemi #remplissage-pv-ennemi {
    background: linear-gradient(90deg, #e54352, #ff716c);
}

#page-accueil .chrono-boss-scene {
    top: 94px;
}

#page-accueil .image-ennemi {
    bottom: 0;
    height: 76%;
}

#page-accueil .image-ennemi.boss {
    height: 86%;
}

#page-accueil .scene-combat .degats-combat {
    top: 31%;
    left: 57%;
    color: #ff6f5f;
    font-size: 42px;
    text-shadow:
        0 3px 0 #551d18,
        0 0 13px rgba(255, 209, 184, .65);
}

#page-accueil .dps-scene-combat,
#page-accueil .statut-scene-combat {
    position: absolute;
    z-index: 12;
    bottom: 15px;
    padding: 8px 12px;
    color: #d8e7ef;
    font-size: 12px;
    font-weight: 800;
    background: rgba(5, 23, 37, .82);
    border: 1px solid rgba(73, 150, 176, .5);
    border-radius: 9px;
    backdrop-filter: blur(6px);
}

#page-accueil .dps-scene-combat {
    left: 15px;
}

#page-accueil .dps-scene-combat strong {
    color: #5ce2eb;
}

#page-accueil .statut-scene-combat {
    right: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #66e5a0;
}

#page-accueil .statut-scene-combat i {
    width: 9px;
    height: 9px;
    background: #48dc82;
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(72, 220, 130, .72);
}

#page-accueil .recompenses-combat {
    min-height: 52px;
    padding: 9px 15px;
    justify-content: flex-start;
    background: #091c30;
}

#page-accueil .recompenses-combat span {
    padding: 6px 11px;
    background: #0e2942;
    border-color: #294b64;
    border-radius: 8px;
}

#page-accueil .recompenses-combat p {
    color: #8fa7b8;
}

#page-accueil .modules-futurs {
    margin-top: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 14px;
}

#page-accueil .modules-futurs .module-accueil-masque {
    display: none;
}

#page-accueil .modules-futurs article {
    min-height: 235px;
    padding: 18px;
    text-align: left;
    background:
        radial-gradient(circle at 100% 0, rgba(18, 131, 160, .11), transparent 40%),
        var(--fond-carte);
    border: 1px solid var(--bordure-carte);
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(0, 7, 15, .2);
}

#page-accueil .modules-futurs article > header {
    display: flex;
    align-items: center;
    gap: 11px;
}

#page-accueil .modules-futurs .icone-module {
    color: #4fdce8;
    font-size: 28px;
}

#page-accueil .modules-futurs h3 {
    margin: 0;
    color: white;
    font-size: 18px;
}

#page-accueil .barre-progression-ile {
    height: 18px;
    margin-top: 30px;
    overflow: hidden;
    background: #061523;
    border: 1px solid #29475e;
    border-radius: 7px;
}

#page-accueil .barre-progression-ile i {
    width: 0;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #0ca5c4, #41d3de);
    border-radius: inherit;
    transition: width .35s;
}

#page-accueil .carte-progression-ile > p {
    min-height: 0;
    margin-top: 14px;
    color: #91aabc;
    font-size: 14px;
}

#page-accueil .carte-progression-ile > p strong {
    color: #3fdce8;
    font-size: 19px;
}

#page-accueil .objectif-progression-ile {
    margin-top: 18px;
    padding-top: 14px;
    color: #8099aa;
    font-size: 13px;
    border-top: 1px solid #24435a;
}

#page-accueil .objectif-progression-ile.objectif-accompli {
    color: #66dfa0;
}

#page-accueil .carte-prochain-boss > header small {
    color: #62dce8;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

#page-accueil .carte-prochain-boss > header h3 {
    margin-top: 3px;
    font-size: 15px;
}

#page-accueil .contenu-prochain-boss {
    margin-top: 13px;
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 14px;
}

#page-accueil .portrait-prochain-boss {
    position: relative;
    min-height: 118px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, #183950, #071421 75%);
    border: 1px solid #2b526c;
    border-radius: 10px;
}

#page-accueil .portrait-prochain-boss img {
    position: absolute;
    bottom: -26px;
    left: 50%;
    width: 120px;
    height: 170px;
    object-fit: contain;
    filter:
        brightness(.45)
        saturate(.7)
        drop-shadow(0 0 13px rgba(38, 155, 181, .28));
    transform: translateX(-50%);
}

#page-accueil .infos-prochain-boss > p {
    min-height: 0;
    margin: 0;
}

#page-accueil .details-prochain-boss {
    margin-top: 7px;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
}

#page-accueil .details-prochain-boss span {
    font-size: 10px;
}

#page-accueil .details-prochain-boss strong {
    color: #52dce7;
}

#page-accueil .verdict-puissance-boss {
    margin-top: 8px;
}

#page-accueil #affronter-prochain-boss {
    width: 100%;
    margin-top: 12px;
    padding: 9px 12px;
    color: #839aaa;
    font-weight: 800;
    background: #13283a;
    border: 1px solid #365269;
    border-radius: 8px;
}

#page-accueil #affronter-prochain-boss.boss-disponible {
    color: white;
    background: linear-gradient(135deg, #ec6b28, #d72f45);
}

@media (max-width: 1120px) {
    #ecran-jeu .barre-app {
        align-items: stretch;
        flex-direction: column;
    }

    #ecran-jeu .ressources-app {
        width: 100%;
        flex-wrap: wrap;
    }

    #ecran-jeu .experience-app {
        flex: 1;
    }

    #page-accueil .modules-futurs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    #ecran-jeu .barre-app {
        position: static;
        margin-left: 0;
    }

    #ecran-jeu .navigation-jeu {
        position: static;
        width: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid #21415a;
    }

    #ecran-jeu .mini-profil {
        display: grid;
        max-width: 420px;
    }

    #ecran-jeu .mini-profil div,
    #ecran-jeu .menu-jeu span,
    #ecran-jeu .bouton-recommencer {
        display: initial;
    }

    #ecran-jeu .menu-jeu {
        flex-flow: row wrap;
    }

    #ecran-jeu .menu-jeu button {
        min-width: 150px;
        flex: 1;
        justify-content: flex-start;
        font-size: 13px;
    }

    #ecran-jeu .contenu-tableau {
        margin: 14px 10px 35px;
    }

    #page-accueil .entete-module-combat {
        align-items: flex-start;
        flex-direction: column;
    }

    #page-accueil .commandes-combat {
        width: 100%;
    }

    #page-accueil .progression-combat {
        margin-left: auto;
    }

    #page-accueil .scene-combat {
        height: 360px;
    }

    #page-accueil .contenu-prochain-boss {
        grid-template-columns: 90px 1fr;
    }

    #page-accueil .recompenses-combat {
        flex-wrap: wrap;
    }

    #page-accueil .recompenses-combat p {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    #ecran-jeu .ressources-app {
        flex-direction: column;
    }

    #ecran-jeu .experience-app {
        min-width: 0;
    }

    #page-accueil .details-prochain-boss {
        grid-template-columns: 1fr;
    }

    #page-accueil .contenu-prochain-boss {
        grid-template-columns: 1fr;
    }

    #page-accueil .portrait-prochain-boss {
        min-height: 105px;
    }
}

/* =========================================
   PAGE PRINCIPALE — REPRODUCTION MAQUETTE V22
========================================= */

@media (min-width: 761px) {
    #ecran-jeu .navigation-jeu {
        top: 18px;
        bottom: 28px;
        left: 12px;
        width: 244px;
        padding: 28px 12px 14px;
        border: 1px solid #203e56;
        border-radius: 10px;
        box-shadow: 0 16px 40px rgba(0, 5, 13, .3);
    }

    #ecran-jeu .barre-app {
        top: 18px;
        min-height: 76px;
        margin: 18px 12px 0 270px;
        padding: 10px 18px 10px 28px;
        border: 1px solid #203e56;
        border-radius: 10px;
    }

    #ecran-jeu .contenu-tableau {
        margin: 14px 12px 28px 270px;
    }
}

#ecran-jeu .logo-jeu {
    min-width: 340px;
}

#ecran-jeu .logo-jeu span {
    display: none;
}

#ecran-jeu .logo-jeu strong {
    color: #65d8e5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    letter-spacing: 1px;
    text-shadow: 0 3px 0 #0a4960;
}

#ecran-jeu .ressources-app {
    width: 100%;
    justify-content: flex-end;
}

#ecran-jeu .ressource-app,
#ecran-jeu .experience-app {
    min-width: 160px;
    justify-content: flex-start;
    gap: 11px;
}

#ecran-jeu .experience-app {
    min-width: 265px;
}

#ecran-jeu .icone-ressource-app {
    width: 36px;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    color: #57d7e6;
    font-size: 21px;
    font-weight: 900;
    background: #092036;
    border: 1px solid #2c536d;
    border-radius: 50%;
}

#ecran-jeu .experience-app > .icone-ressource-app {
    color: #54dceb;
    font-size: 11px;
}

#ecran-jeu .ressource-or .icone-ressource-app {
    color: #f7c24f;
}

#ecran-jeu .ressource-app small,
#ecran-jeu .experience-app > div:last-child small {
    display: block;
    color: #9fb2c0;
    font-size: 10px;
    font-weight: 800;
}

#ecran-jeu .ressource-app strong,
#ecran-jeu .experience-app > div:last-child strong {
    min-width: 0;
    display: block;
    margin-top: 2px;
    color: white;
    font-size: 16px;
}

#ecran-jeu .ressource-or small,
#ecran-jeu .ressource-or strong {
    color: #f2c45b;
}

#ecran-jeu .barre-xp-app {
    display: none;
}

#ecran-jeu .mini-profil {
    padding: 0 4px 20px;
    grid-template-columns: 90px 1fr;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #18344a;
    border-radius: 0;
}

#ecran-jeu .personnage-compose-mini {
    width: 90px;
    height: 104px;
    background: #0e2b43;
    border: 2px solid #2f5269;
    border-radius: 10px;
}

#ecran-jeu .personnage-compose-mini .calque-personnage {
    transform: scale(2.15) translateY(10%);
    transform-origin: center top;
}

#ecran-jeu .mini-profil h2 {
    font-size: 19px;
}

#ecran-jeu .mini-profil p {
    font-size: 13px;
}

#ecran-jeu .mini-profil .specialisation-mini-profil {
    margin-top: 8px;
    font-size: 12px;
}

#ecran-jeu .xp-mini-profil {
    margin-top: 5px;
}

#ecran-jeu .xp-mini-profil > div {
    height: 14px;
    border-color: #486276;
}

#ecran-jeu .xp-mini-profil small {
    margin: 0 0 6px;
    color: #9db3c2;
    font-size: 11px;
}

#ecran-jeu .menu-jeu {
    margin-top: 20px;
    gap: 0;
}

#ecran-jeu .menu-jeu button {
    min-height: 66px;
    padding: 13px 15px;
    font-size: 15px;
    border-bottom: 1px solid #18344a;
    border-radius: 0;
}

#ecran-jeu .menu-jeu button.actif {
    min-height: 60px;
    margin: 0 0 3px;
    border: 1px solid #2ed4e3;
    border-radius: 10px;
}

#ecran-jeu .pied-navigation-jeu {
    margin-top: auto;
    padding: 13px 11px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #18344a;
}

#ecran-jeu .pied-navigation-jeu button {
    min-height: 42px;
    color: #b8c8d2;
    font-size: 25px;
    background: transparent;
    border: 0;
    border-right: 1px solid #18344a;
    cursor: pointer;
}

#ecran-jeu .pied-navigation-jeu button:last-child {
    border-right: 0;
}

#ecran-jeu .pied-navigation-jeu button:disabled {
    opacity: .75;
    cursor: default;
}

#ecran-jeu .pied-navigation-jeu .bouton-recommencer {
    margin: 0;
    padding: 0;
    display: block;
    border: 0;
    border-radius: 0;
}

#page-accueil .module-combat {
    position: relative;
    border-radius: 11px;
}

#page-accueil .entete-module-combat {
    position: absolute;
    z-index: 25;
    inset: 0 0 auto;
    height: 98px;
    padding: 0;
    display: block;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(5, 22, 36, .94),
        rgba(5, 22, 36, .58),
        transparent
    );
    border: 0;
}

#page-accueil .entete-module-combat > div:first-child {
    display: contents;
}

#page-accueil .entete-module-combat .pastille-section {
    position: absolute;
    top: 14px;
    left: 18px;
    padding: 10px 13px;
    font-size: 12px;
    pointer-events: auto;
}

#page-accueil .entete-module-combat h2 {
    position: absolute;
    top: 14px;
    left: 50%;
    margin: 0;
    font-size: clamp(19px, 1.6vw, 27px);
    white-space: nowrap;
    transform: translateX(-50%);
}

#page-accueil .commandes-combat {
    display: contents;
}

#page-accueil .progression-combat {
    position: absolute;
    top: 54px;
    left: 50%;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    background: transparent;
    border: 0;
    transform: translateX(-50%);
}

#page-accueil .progression-combat small {
    color: #a9bbc7;
    font-size: 13px;
    font-weight: 500;
}

#page-accueil .progression-combat strong {
    font-size: 18px;
}

#page-accueil .progression-combat span {
    color: #a9bbc7;
}

#page-accueil .chrono-boss {
    position: absolute;
    top: 14px;
    right: 16px;
    pointer-events: auto;
}

#page-accueil .scene-combat {
    height: clamp(460px, 33.55vw, 535px);
    background:
        linear-gradient(rgba(3, 16, 27, .4), rgba(3, 17, 28, .5)),
        url("images/mer-bleue-entrainement.png") center / cover;
    border: 0;
    border-radius: 10px;
}

#page-accueil .fiche-ennemi-scene {
    top: 132px;
    width: min(400px, calc(100% - 40px));
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

#page-accueil .fiche-ennemi-scene h3 {
    font-size: 16px;
    text-shadow: 0 2px 4px #00101c;
}

#page-accueil .zone-pv-ennemi {
    margin-top: 8px;
    display: block;
}

#page-accueil .zone-pv-ennemi .barre-pv-ennemi {
    position: relative;
    height: 24px;
    background: rgba(156, 170, 179, .72);
    border: 1px solid #c2d4dc;
    border-radius: 8px;
}

#page-accueil .zone-pv-ennemi > strong {
    position: absolute;
    z-index: 4;
    top: 34px;
    left: 50%;
    color: white;
    font-size: 12px;
    text-shadow: 0 1px 2px #381319;
    transform: translateX(-50%);
}

#page-accueil .zone-pv-ennemi #remplissage-pv-ennemi {
    border-radius: 7px 0 0 7px;
}

#page-accueil .chrono-boss-scene {
    top: 104px;
}

#page-accueil .image-ennemi {
    bottom: 68px;
    height: 52%;
}

#page-accueil .image-ennemi.boss {
    bottom: 36px;
    height: 66%;
}

#page-accueil .scene-combat .degats-combat {
    top: 38%;
    left: 56%;
    font-size: 43px;
}

#page-accueil .recompenses-combat {
    position: absolute;
    z-index: 14;
    top: 51%;
    left: 31%;
    min-height: 0;
    padding: 0;
    display: grid;
    justify-content: start;
    gap: 8px;
    background: transparent;
}

#page-accueil .recompenses-combat span {
    width: max-content;
    padding: 3px 6px;
    font-size: 13px;
    background: transparent;
    border: 0;
    text-shadow: 0 2px 4px #00101c;
}

#page-accueil .recompenses-combat p {
    display: none;
}

#page-accueil .dps-scene-combat,
#page-accueil .statut-scene-combat {
    bottom: 13px;
    padding: 6px 9px;
    background: transparent;
    border: 0;
    font-size: 13px;
    backdrop-filter: none;
}

#page-accueil .dps-scene-combat {
    left: 12px;
}

#page-accueil .statut-scene-combat {
    right: 12px;
}

#page-accueil .modules-futurs {
    grid-template-columns: .83fr 1.05fr;
    gap: 14px;
}

#page-accueil .modules-futurs article {
    min-height: 308px;
    padding: 27px;
    border-radius: 11px;
}

#page-accueil .modules-futurs .icone-module {
    font-size: 31px;
}

#page-accueil .modules-futurs h3 {
    font-size: 20px;
    text-transform: uppercase;
}

#page-accueil .barre-progression-ile {
    position: relative;
    height: 38px;
    margin-top: 30px;
}

#page-accueil .barre-progression-ile i {
    position: absolute;
    inset: 0 auto 0 0;
}

#page-accueil .barre-progression-ile span {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 13px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 24, 37, .8);
}

#page-accueil .carte-progression-ile > p {
    margin-top: 16px;
    font-size: 16px;
}

#page-accueil .carte-progression-ile > p strong {
    font-size: 18px;
}

#page-accueil .objectif-progression-ile {
    margin-top: 22px;
    padding-top: 20px;
    font-size: 15px;
}

#page-accueil .carte-prochain-boss > header h3 {
    font-size: 20px;
    text-transform: uppercase;
}

#page-accueil .contenu-prochain-boss {
    margin-top: 18px;
    grid-template-columns: minmax(175px, .72fr) minmax(220px, 1fr);
    gap: 24px;
}

#page-accueil .portrait-prochain-boss {
    min-height: 220px;
}

#page-accueil .portrait-prochain-boss img {
    bottom: -45px;
    width: 190px;
    height: 270px;
    filter:
        brightness(.35)
        saturate(.55)
        drop-shadow(0 0 18px rgba(38, 155, 181, .23));
}

#page-accueil .infos-prochain-boss h4 {
    margin: 5px 0 17px;
    color: white;
    font-size: 21px;
}

#page-accueil .infos-prochain-boss #statut-prochain-boss,
#page-accueil .verdict-puissance-boss,
#page-accueil .details-prochain-boss span:nth-child(1),
#page-accueil .details-prochain-boss span:nth-child(4) {
    display: none;
}

#page-accueil .details-prochain-boss {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

#page-accueil .details-prochain-boss span {
    justify-content: flex-start;
    gap: 7px;
    color: #a8b9c5;
    font-size: 16px;
}

#page-accueil .details-prochain-boss span:nth-child(2) strong {
    color: #ff6e64;
}

#page-accueil .details-prochain-boss span:nth-child(3) strong {
    color: #38d4e3;
}

#page-accueil #affronter-prochain-boss {
    margin-top: 22px;
    padding: 15px 12px;
    font-size: 13px;
    text-transform: uppercase;
}

@media (max-width: 1180px) and (min-width: 761px) {
    #ecran-jeu .logo-jeu {
        min-width: 210px;
    }

    #ecran-jeu .barre-app {
        align-items: center;
        flex-direction: row;
    }

    #ecran-jeu .ressource-app,
    #ecran-jeu .experience-app {
        min-width: 0;
        flex: 1;
    }

    #ecran-jeu .experience-app {
        min-width: 210px;
    }

    #page-accueil .contenu-prochain-boss {
        grid-template-columns: 135px 1fr;
    }
}

@media (max-width: 760px) {
    #ecran-jeu .pied-navigation-jeu {
        display: none;
    }

    #page-accueil .recompenses-combat {
        left: 15%;
    }

    #page-accueil .modules-futurs article {
        min-height: 250px;
    }
}

/* =========================================
   INTERFACE COMPACTE V23
   - Combat visible sans défilement
   - Défilement invisible sur les autres pages
   - Fenêtres secondaires plus compactes
========================================= */

#ecran-jeu,
#ecran-jeu .navigation-jeu,
#ecran-jeu .contenu-tableau,
#ecran-jeu .page-interne {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#ecran-jeu::-webkit-scrollbar,
#ecran-jeu .navigation-jeu::-webkit-scrollbar,
#ecran-jeu .contenu-tableau::-webkit-scrollbar,
#ecran-jeu .page-interne::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

@media (min-width: 761px) {
    #ecran-jeu {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    #ecran-jeu .navigation-jeu {
        overflow-y: auto;
    }

    #ecran-jeu .contenu-tableau {
        height: calc(100vh - 122px);
        min-height: 0;
        margin-bottom: 14px;
        overflow: hidden;
    }

    /* La page Combat occupe exactement l'espace disponible. */
    #page-accueil {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(280px, 1fr) clamp(165px, 24vh, 225px);
        gap: 12px;
        overflow: hidden;
    }

    #page-accueil.cache {
        display: none;
    }

    #page-accueil .module-combat,
    #page-accueil .scene-combat {
        height: 100%;
        min-height: 0;
    }

    #page-accueil .modules-futurs {
        min-height: 0;
        margin-top: 0;
        gap: 12px;
    }

    #page-accueil .modules-futurs article {
        height: 100%;
        min-height: 0;
        padding: 17px 20px;
        overflow: hidden;
    }

    #page-accueil .modules-futurs .icone-module {
        font-size: 25px;
    }

    #page-accueil .modules-futurs h3,
    #page-accueil .carte-prochain-boss > header h3 {
        font-size: 17px;
    }

    #page-accueil .barre-progression-ile {
        height: 27px;
        margin-top: 17px;
    }

    #page-accueil .carte-progression-ile > p {
        margin-top: 11px;
        font-size: 14px;
    }

    #page-accueil .carte-progression-ile > p strong {
        font-size: 16px;
    }

    #page-accueil .objectif-progression-ile {
        margin-top: 12px;
        padding-top: 11px;
        font-size: 12px;
    }

    #page-accueil .contenu-prochain-boss {
        height: calc(100% - 34px);
        min-height: 0;
        margin-top: 10px;
        grid-template-columns: minmax(105px, .6fr) minmax(190px, 1fr);
        gap: 16px;
    }

    #page-accueil .portrait-prochain-boss {
        min-height: 0;
        height: 100%;
    }

    #page-accueil .portrait-prochain-boss img {
        bottom: -36px;
        width: 145px;
        height: 205px;
    }

    #page-accueil .infos-prochain-boss h4 {
        margin: 2px 0 9px;
        font-size: 17px;
    }

    #page-accueil .details-prochain-boss {
        gap: 7px;
    }

    #page-accueil .details-prochain-boss span {
        font-size: 13px;
    }

    #page-accueil #affronter-prochain-boss {
        margin-top: 12px;
        padding: 10px;
        font-size: 11px;
    }

    /* Les autres pages défilent, mais la barre reste invisible. */
    #ecran-jeu .page-interne:not(#page-accueil) {
        height: 100%;
        min-height: 0;
        padding: 0 4px 22px 0;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: .92rem;
    }

    /* En-têtes et panneaux secondaires plus discrets. */
    #ecran-jeu .page-interne:not(#page-accueil) .entete-page-secondaire {
        padding: 15px 18px;
        border-radius: 11px;
    }

    #ecran-jeu .page-interne:not(#page-accueil) .entete-page-secondaire h2 {
        margin-top: 2px;
        font-size: 21px;
    }

    #ecran-jeu .page-interne:not(#page-accueil) .entete-page-secondaire p {
        margin-top: 3px;
        font-size: 12px;
    }

    #ecran-jeu .page-interne:not(#page-accueil) :where(
        .grille-regions,
        .grille-equipement,
        .grille-inventaire,
        .grille-specialisations,
        .grille-coffres,
        .grille-boutique,
        .grille-offres-navires,
        .grille-moussaillons,
        .grille-candidats-taverne,
        .liste-expeditions
    ) {
        margin-top: 12px;
        gap: 11px;
    }

    #ecran-jeu .page-interne:not(#page-accueil) :where(
        .carte-region,
        .carte-specialisation,
        .carte-coffre,
        .carte-objet,
        .carte-navire-possede,
        .carte-offre-navire,
        .carte-moussaillon,
        .carte-candidat,
        .carte-expedition,
        .emplacement-equipement,
        .liste-statistiques article,
        .grille-detail-dps article
    ) {
        padding: 14px;
        border-radius: 11px;
    }

    #ecran-jeu .page-interne:not(#page-accueil) :where(
        .fiche-personnage,
        .sac-a-dos,
        .panneau-butins,
        .panneau-bonus-equipage,
        .section-membres-equipage,
        .taverne-equipage,
        #panneau-marche-marchand,
        #panneau-marche-taverne,
        #panneau-marche-navire
    ) {
        padding: 16px;
        border-radius: 12px;
    }

    #ecran-jeu .page-interne:not(#page-accueil) :where(
        .carte-region,
        .carte-specialisation,
        .carte-coffre,
        .carte-objet,
        .carte-navire-possede,
        .carte-offre-navire,
        .carte-moussaillon,
        .carte-candidat,
        .carte-expedition
    ) h3 {
        font-size: 16px;
    }

    #ecran-jeu .page-interne:not(#page-accueil) button {
        min-height: 0;
    }
}

/* Sur un écran peu haut, le combat reste intégralement visible. */
@media (min-width: 761px) and (max-height: 760px) {
    #ecran-jeu .navigation-jeu {
        top: 10px;
        bottom: 10px;
        padding-top: 14px;
    }

    #ecran-jeu .mini-profil {
        padding-bottom: 10px;
        grid-template-columns: 64px 1fr;
    }

    #ecran-jeu .personnage-compose-mini {
        width: 64px;
        height: 76px;
    }

    #ecran-jeu .menu-jeu {
        margin-top: 8px;
    }

    #ecran-jeu .menu-jeu button {
        min-height: 43px;
        padding: 8px 12px;
        font-size: 13px;
    }

    #ecran-jeu .barre-app {
        top: 10px;
        min-height: 62px;
        margin-top: 10px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #ecran-jeu .ressource-app,
    #ecran-jeu .experience-app {
        min-height: 40px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #ecran-jeu .contenu-tableau {
        height: calc(100vh - 94px);
        margin-top: 10px;
        margin-bottom: 12px;
    }

    #page-accueil {
        grid-template-rows: minmax(260px, 1fr) clamp(150px, 25vh, 190px);
        gap: 9px;
    }

    #page-accueil .modules-futurs {
        gap: 9px;
    }

    #page-accueil .modules-futurs article {
        padding: 12px 15px;
    }

    #page-accueil .modules-futurs h3,
    #page-accueil .carte-prochain-boss > header h3 {
        font-size: 15px;
    }

    #page-accueil .barre-progression-ile {
        height: 22px;
        margin-top: 10px;
    }

    #page-accueil .objectif-progression-ile {
        margin-top: 8px;
        padding-top: 8px;
    }

    #page-accueil .contenu-prochain-boss {
        height: calc(100% - 26px);
        margin-top: 6px;
    }

    #page-accueil .infos-prochain-boss h4 {
        margin-bottom: 5px;
        font-size: 15px;
    }

    #page-accueil .details-prochain-boss {
        gap: 4px;
    }

    #page-accueil #affronter-prochain-boss {
        margin-top: 7px;
        padding: 7px;
    }
}

/* =========================================
   CORRECTIF V24 — CARTES SOUS LE COMBAT
========================================= */

@media (min-width: 761px) {
    #page-accueil {
        display: flex;
        flex-direction: column;
    }

    #page-accueil .module-combat {
        position: relative;
        z-index: 1;
        min-height: 260px;
        flex: 1 1 0;
    }

    #page-accueil .modules-futurs {
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 180px;
        flex: 0 0 clamp(180px, 25vh, 230px);
        display: grid !important;
        grid-template-columns: minmax(0, .83fr) minmax(0, 1.05fr) !important;
        visibility: visible;
        opacity: 1;
    }

    #page-accueil .carte-progression-ile,
    #page-accueil .carte-prochain-boss {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    #page-accueil .details-prochain-boss {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    #page-accueil .details-prochain-boss .info-pv-boss-cachee {
        display: none;
    }

    #page-accueil .details-prochain-boss span:nth-child(n) {
        min-width: 0;
        padding: 7px 9px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        color: #91a8b8;
        font-size: 11px;
        background: rgba(5, 22, 36, .64);
        border: 1px solid #24475f;
        border-radius: 7px;
    }

    #page-accueil .details-prochain-boss span small {
        color: #8299aa;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .45px;
    }

    #page-accueil .details-prochain-boss span strong {
        color: #51dbe7;
        font-size: 13px;
    }

    #page-accueil .details-prochain-boss span:nth-of-type(2) strong {
        color: #ff756b;
    }

    #page-accueil .details-prochain-boss span:nth-of-type(4) strong {
        color: #f0c15a;
    }
}

@media (min-width: 761px) and (max-height: 760px) {
    #page-accueil .modules-futurs {
        min-height: 168px;
        flex-basis: clamp(168px, 27vh, 190px);
    }

    #page-accueil .details-prochain-boss {
        gap: 4px;
    }

    #page-accueil .details-prochain-boss span:nth-child(n) {
        padding: 4px 7px;
    }

    #page-accueil .details-prochain-boss span small {
        font-size: 7px;
    }

    #page-accueil .details-prochain-boss span strong {
        font-size: 11px;
    }
}

/* =========================================
   CORRECTIF V25 — PROCHAIN BOSS NON COUPÉ
========================================= */

@media (min-width: 761px) {
    #page-accueil .module-combat {
        min-height: 235px;
    }

    #page-accueil .modules-futurs {
        min-height: 210px;
        flex-basis: clamp(210px, 29vh, 250px);
    }

    #page-accueil .modules-futurs article {
        padding: 12px 15px;
    }

    #page-accueil .modules-futurs article > header {
        min-height: 24px;
        gap: 8px;
    }

    #page-accueil .modules-futurs .icone-module {
        font-size: 21px;
    }

    #page-accueil .modules-futurs h3,
    #page-accueil .carte-prochain-boss > header h3 {
        font-size: 15px;
    }

    #page-accueil .contenu-prochain-boss {
        height: calc(100% - 30px);
        min-height: 0;
        margin-top: 6px;
        grid-template-columns: minmax(90px, .52fr) minmax(240px, 1fr);
        gap: 12px;
    }

    #page-accueil .portrait-prochain-boss {
        height: 100%;
        min-height: 0;
    }

    #page-accueil .portrait-prochain-boss img {
        bottom: -31px;
        width: 122px;
        height: 172px;
    }

    #page-accueil .infos-prochain-boss {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    #page-accueil .infos-prochain-boss h4 {
        margin: 0 0 5px;
        font-size: 14px;
        line-height: 1.15;
    }

    #page-accueil .details-prochain-boss {
        margin: 0;
        gap: 5px;
    }

    #page-accueil .details-prochain-boss .info-pv-boss-cachee {
        display: none !important;
    }

    #page-accueil .details-prochain-boss span:nth-child(n) {
        min-height: 38px;
        padding: 5px 8px;
        justify-content: center;
    }

    #page-accueil .details-prochain-boss span small {
        font-size: 7px;
        line-height: 1;
    }

    #page-accueil .details-prochain-boss span strong {
        font-size: 11px;
        line-height: 1.1;
    }

    #page-accueil #affronter-prochain-boss {
        min-height: 28px;
        margin-top: 6px;
        padding: 5px 8px;
        font-size: 9px;
        line-height: 1.1;
    }
}

@media (min-width: 761px) and (max-height: 700px) {
    #page-accueil .module-combat {
        min-height: 215px;
    }

    #page-accueil .modules-futurs {
        min-height: 194px;
        flex-basis: 194px;
    }

    #page-accueil .modules-futurs article {
        padding: 9px 12px;
    }

    #page-accueil .contenu-prochain-boss {
        height: calc(100% - 25px);
        margin-top: 3px;
    }

    #page-accueil .portrait-prochain-boss img {
        bottom: -35px;
        width: 108px;
        height: 154px;
    }

    #page-accueil .infos-prochain-boss h4 {
        margin-bottom: 3px;
        font-size: 13px;
    }

    #page-accueil .details-prochain-boss span:nth-child(n) {
        min-height: 33px;
        padding: 3px 6px;
    }

    #page-accueil #affronter-prochain-boss {
        min-height: 24px;
        margin-top: 4px;
        padding: 4px 7px;
    }
}

/* =========================================
   ICÔNES DU MENU V26
========================================= */

#ecran-jeu .menu-jeu button {
    column-gap: 13px;
}

#ecran-jeu .menu-jeu .icone-menu {
    width: 25px;
    height: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 25px;
    color: #d7d1bd;
    transition:
        color .2s ease,
        filter .2s ease,
        transform .2s ease;
}

#ecran-jeu .menu-jeu .icone-menu svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#ecran-jeu .menu-jeu .libelle-menu {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ecran-jeu .menu-jeu button:hover .icone-menu {
    color: #72dce7;
    transform: translateX(1px);
}

#ecran-jeu .menu-jeu button.actif .icone-menu {
    color: #e8f8f7;
    filter: drop-shadow(0 0 5px rgba(68, 222, 232, .38));
}

@media (max-width: 760px) {
    #ecran-jeu .menu-jeu .icone-menu,
    #ecran-jeu .menu-jeu .libelle-menu {
        display: inline-flex;
    }
}

/* =========================================
   ICÔNES EXACTES DE LA MAQUETTE V27
   La capture validée sert directement de
   planche d'icônes : aucune réinterprétation.
========================================= */

#ecran-jeu .menu-jeu .icone-menu {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    color: transparent;
    background-image: url("images/icones-menu-reference.png");
    background-repeat: no-repeat;
    background-size: 168px 460px;
    image-rendering: auto;
    mix-blend-mode: lighten;
    filter: none;
    transform: none;
}

#ecran-jeu .menu-jeu .icone-menu svg {
    display: none;
}

#ecran-jeu .menu-jeu button[data-page="accueil"] .icone-menu {
    background-position: 0 -9px;
}

#ecran-jeu .menu-jeu button[data-page="regions"] .icone-menu {
    background-position: 0 -67px;
}

#ecran-jeu .menu-jeu button[data-page="boutique"] .icone-menu {
    background-position: 0 -124px;
}

#ecran-jeu .menu-jeu button[data-page="equipage"] .icone-menu {
    background-position: 0 -181px;
}

#ecran-jeu .menu-jeu button[data-page="personnage"] .icone-menu {
    background-position: 0 -238px;
}

#ecran-jeu .menu-jeu button[data-page="specialisation"] .icone-menu {
    background-position: 0 -294px;
}

#ecran-jeu .menu-jeu button[data-page="equipement"] .icone-menu {
    background-position: 0 -352px;
}

#ecran-jeu .menu-jeu button[data-page="expeditions"] .icone-menu {
    background-position: 0 -408px;
}

#ecran-jeu .menu-jeu button:hover .icone-menu,
#ecran-jeu .menu-jeu button.actif .icone-menu {
    filter: none;
    transform: none;
}

/* =========================================
   LIVRE DES CAPITAINES V51
========================================= */

#ecran-jeu .menu-jeu button[data-page="capitaines"] .icone-menu {
    color: #d7d1bd;
    background: none;
    mix-blend-mode: normal;
}

#ecran-jeu .menu-jeu button[data-page="quetes"] .icone-menu {
    color: #d7d1bd;
    background: none;
    mix-blend-mode: normal;
}

#ecran-jeu .menu-jeu button[data-page="capitaines"] .icone-menu svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
}

#ecran-jeu .menu-jeu button[data-page="quetes"] .icone-menu svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
}

#ecran-jeu .menu-jeu button[data-page="capitaines"]:hover .icone-menu,
#ecran-jeu .menu-jeu button[data-page="capitaines"].actif .icone-menu {
    color: #e8f8f7;
}

#page-capitaines {
    --capitaine-fond: rgba(7, 29, 48, .9);
    --capitaine-bord: rgba(77, 148, 181, .38);
    padding: 14px;
}

.entete-capitaines {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 14px;
    padding: 15px 18px;
    border: 1px solid var(--capitaine-bord);
    border-radius: 13px;
    background: linear-gradient(105deg, rgba(12, 47, 71, .92), rgba(7, 27, 45, .96));
}

.progression-capitaines {
    width: min(260px, 32%);
    min-width: 210px;
    padding: 11px 13px;
    border: 1px solid rgba(65, 197, 212, .28);
    border-radius: 10px;
    background: rgba(2, 18, 32, .58);
}

.progression-capitaines > span {
    display: block;
    color: #9eb8ca;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.progression-capitaines > strong {
    display: block;
    margin: 3px 0 8px;
    color: #f8d773;
    font-size: 1.25rem;
}

.progression-capitaines > div {
    height: 7px;
    overflow: hidden;
    border-radius: 10px;
    background: #142e43;
}

.progression-capitaines i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #11b9d2, #60e5d4);
    box-shadow: 0 0 10px rgba(30, 223, 222, .4);
    transition: width .35s ease;
}

.mise-en-page-capitaines {
    display: grid;
    grid-template-columns: minmax(430px, 1.12fr) minmax(330px, .88fr);
    gap: 14px;
    min-height: 520px;
}

.grille-capitaines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.carte-capitaine {
    position: relative;
    min-height: 145px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 94px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 2px 11px;
    padding: 10px;
    border: 1px solid var(--capitaine-bord);
    border-radius: 12px;
    color: #eaf7ff;
    text-align: left;
    background: linear-gradient(145deg, rgba(14, 49, 73, .92), rgba(5, 25, 43, .98));
}

.carte-capitaine:hover,
.carte-capitaine.selectionne {
    border-color: #27c7d9;
    box-shadow: 0 0 0 1px rgba(39, 199, 217, .18), 0 7px 18px rgba(0, 0, 0, .2);
    transform: translateY(-1px);
}

.carte-capitaine.selectionne::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #24d5db;
}

.numero-capitaine {
    grid-column: 2;
    color: #56d8e6;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.miniature-capitaine {
    grid-column: 1;
    grid-row: 1 / 4;
    height: 123px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border: 1px solid rgba(86, 159, 189, .28);
    border-radius: 8px;
    background: radial-gradient(circle at 50% 45%, #174d6a, #071d31 72%);
}

.miniature-capitaine img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.carte-capitaine.verrouille .miniature-capitaine img,
.portrait-detail-capitaine.verrouille img {
    filter: brightness(0) saturate(0);
    opacity: .72;
}

.nom-capitaine {
    align-self: end;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.08;
}

.carte-capitaine > small {
    grid-column: 2;
    color: #91adbf;
    font-size: .72rem;
}

.etat-capitaine {
    position: absolute;
    right: 9px;
    top: 8px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #79eadb;
    background: rgba(4, 20, 33, .78);
    font-size: .75rem;
    font-style: normal;
}

.carte-capitaine.verrouille {
    color: #a6b4be;
    background: linear-gradient(145deg, rgba(18, 37, 53, .94), rgba(5, 18, 31, .98));
}

.detail-capitaine {
    position: sticky;
    top: 0;
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(150px, 42%) 1fr;
    grid-template-rows: auto auto auto 1fr;
    gap: 13px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--capitaine-bord);
    border-radius: 14px;
    color: #eef8ff;
    background: radial-gradient(circle at 24% 18%, rgba(28, 147, 170, .14), transparent 36%), linear-gradient(145deg, rgba(10, 39, 61, .96), rgba(4, 20, 34, .99));
}

.portrait-detail-capitaine {
    grid-row: 1 / 5;
    position: relative;
    min-height: 475px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 1px solid rgba(68, 169, 192, .35);
    border-radius: 11px;
    background: radial-gradient(circle at 50% 35%, #18546d, #061a2c 70%);
}

.portrait-detail-capitaine img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.portrait-detail-capitaine > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(219, 238, 245, .75);
    font-family: Georgia, serif;
    font-size: 5rem;
    text-shadow: 0 4px 20px #000;
}

.identite-capitaine small,
.technique-capitaine > small,
.recompenses-capitaine > small {
    color: #57d6e3;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.identite-capitaine h3 {
    margin: 4px 0 0;
    color: #fff;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem);
}

.statistiques-capitaine {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.statistiques-capitaine > span {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(67, 137, 166, .32);
    border-radius: 8px;
    background: rgba(1, 15, 27, .55);
}

.statistiques-capitaine small,
.statistiques-capitaine strong {
    display: block;
}

.statistiques-capitaine small {
    color: #8faaba;
    font-size: .56rem;
    font-weight: 900;
}

.statistiques-capitaine strong {
    margin-top: 3px;
    overflow: hidden;
    color: #f5d678;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technique-capitaine,
.recompenses-capitaine,
.indice-capitaine,
.capitaine-a-decouvrir {
    padding: 11px;
    border: 1px solid rgba(67, 137, 166, .3);
    border-radius: 9px;
    background: rgba(2, 17, 29, .55);
}

.technique-capitaine h4 {
    margin: 5px 0 3px;
    color: #efcf70;
}

.technique-capitaine p,
.indice-capitaine {
    margin: 0;
    color: #b8cbd7;
    font-size: .78rem;
    line-height: 1.45;
}

.recompenses-capitaine > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
}

.recompenses-capitaine span {
    padding: 6px 8px;
    border-radius: 7px;
    color: #c6d9e4;
    background: rgba(20, 55, 77, .65);
    font-size: .72rem;
}

.indice-capitaine {
    align-self: start;
}

.indice-capitaine span {
    display: block;
    margin-bottom: 7px;
    color: #e5c96f;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.capitaine-a-decouvrir {
    color: #8da4b3;
    font-size: .75rem;
}

@media (max-width: 1180px) {
    .mise-en-page-capitaines { grid-template-columns: 1fr; }
    .detail-capitaine { position: static; min-height: 420px; }
    .portrait-detail-capitaine { min-height: 380px; }
}

@media (max-width: 720px) {
    .entete-capitaines { align-items: stretch; flex-direction: column; }
    .progression-capitaines { width: auto; min-width: 0; }
    .grille-capitaines { grid-template-columns: 1fr; }
    .detail-capitaine { display: block; }
    .portrait-detail-capitaine { height: 350px; min-height: 0; margin-bottom: 12px; }
    .detail-capitaine > :not(.portrait-detail-capitaine) { margin-top: 10px; }
}

/* =========================================
   DÉCORS DE COMBAT PAR ÎLE V28
========================================= */

#page-accueil .scene-combat {
    --decor-combat: url("images/mer-bleue-entrainement.png");
    --voile-combat-haut: rgba(3, 16, 27, .32);
    --voile-combat-bas: rgba(3, 17, 28, .46);

    background-image:
        linear-gradient(
            var(--voile-combat-haut),
            var(--voile-combat-bas)
        ),
        var(--decor-combat);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-accueil .scene-combat.biome-camp {
    --decor-combat: url("images/mer-bleue-entrainement.png");
}

#page-accueil .scene-combat.biome-foret {
    --decor-combat: url("images/regions/ile-02-foret-temperee.png");
}

#page-accueil .scene-combat.biome-jungle {
    --decor-combat: url("images/regions/ile-03-jungle-tropicale.png");
}

#page-accueil .scene-combat.biome-desert {
    --decor-combat: url("images/regions/ile-04-desert.png");
    --voile-combat-haut: rgba(25, 16, 5, .24);
    --voile-combat-bas: rgba(19, 12, 5, .38);
}

#page-accueil .scene-combat.biome-marais {
    --decor-combat: url("images/regions/ile-05-marais.png");
    --voile-combat-haut: rgba(2, 20, 25, .27);
    --voile-combat-bas: rgba(3, 18, 24, .4);
}

#page-accueil .scene-combat.biome-volcan {
    --decor-combat: url("images/regions/ile-06-volcan.png");
    --voile-combat-haut: rgba(25, 5, 5, .2);
    --voile-combat-bas: rgba(16, 4, 7, .36);
}

#page-accueil .scene-combat.biome-glace {
    --decor-combat: url("images/regions/ile-07-glace.png");
    --voile-combat-haut: rgba(5, 25, 43, .29);
    --voile-combat-bas: rgba(4, 21, 36, .43);
}

#page-accueil .scene-combat.biome-tempete {
    --decor-combat: url("images/regions/ile-08-tempete.png");
    --voile-combat-haut: rgba(2, 9, 30, .18);
    --voile-combat-bas: rgba(2, 10, 25, .32);
}

#page-accueil .scene-combat.biome-celeste {
    --decor-combat: url("images/regions/ile-09-celeste.png");
    --voile-combat-haut: rgba(3, 25, 45, .36);
    --voile-combat-bas: rgba(3, 20, 35, .5);
}

#page-accueil .scene-combat.biome-abysse {
    --decor-combat: url("images/regions/ile-10-abysse.png");
    --voile-combat-haut: rgba(1, 8, 25, .12);
    --voile-combat-bas: rgba(2, 7, 22, .26);
}

/* =========================================
   COMBAT ADAPTÉ AUX ÉCRANS PLUS PETITS V32
   - Barre de PV placée en bas
   - Ennemi agrandi sans chevauchement
========================================= */

.competence-boss-scene {
    position: absolute;
    z-index: 12;
    top: 12px;
    right: 14px;
    width: min(310px, 34%);
    padding: 8px 11px;
    color: #d8edf5;
    font-size: 10px;
    line-height: 1.3;
    background: rgba(5, 19, 32, .9);
    border: 1px solid rgba(231, 179, 76, .65);
    border-radius: 8px;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
}

.competence-boss-scene strong,
.competence-boss-scene span {
    display: block;
}

.competence-boss-scene strong {
    margin-bottom: 2px;
    color: #f1c65f;
    font-size: 11px;
}

#page-accueil .competence-prochain-boss {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px;
    align-items: center;
    margin: 6px 0 0;
    padding: 5px 7px;
    color: #9eb5c5;
    font-size: 9px;
    line-height: 1.2;
    background: rgba(19, 40, 58, .72);
    border: 1px solid #294c63;
    border-radius: 6px;
}

#page-accueil .competence-prochain-boss strong {
    color: #f1c65f;
    white-space: nowrap;
}

#page-accueil .competence-prochain-boss span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competence-boss-fenetre {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 10px 0;
    padding: 9px 12px;
    color: #c6dce8;
    font-size: 12px;
    background: rgba(9, 28, 43, .82);
    border: 1px solid #876d37;
    border-radius: 8px;
}

.competence-boss-fenetre strong {
    color: #f1c65f;
}

#page-accueil .fiche-ennemi-scene {
    top: auto;
    bottom: 12px;
    width: min(430px, calc(100% - 300px));
}

#page-accueil .fiche-ennemi-scene h3 {
    margin-bottom: 4px;
    font-size: 15px;
}

#page-accueil .zone-pv-ennemi {
    margin-top: 0;
}

#page-accueil .zone-pv-ennemi .barre-pv-ennemi {
    height: 20px;
    background: rgba(7, 17, 30, .88);
    border-color: rgba(213, 232, 240, .72);
    box-shadow: 0 4px 13px rgba(0, 8, 16, .42);
}

#page-accueil .zone-pv-ennemi > strong {
    top: 27px;
    font-size: 11px;
}

#page-accueil .image-ennemi {
    bottom: 62px;
    height: 68%;
    max-height: calc(100% - 72px);
}

#page-accueil .image-ennemi.boss {
    bottom: 62px;
    height: 79%;
    max-height: calc(100% - 72px);
}

#page-accueil .scene-combat .degats-combat {
    top: 31%;
}

@media (max-width: 1180px) and (min-width: 761px) {
    #page-accueil .fiche-ennemi-scene {
        bottom: 9px;
        width: min(360px, calc(100% - 250px));
    }

    #page-accueil .fiche-ennemi-scene h3 {
        font-size: 13px;
    }

    #page-accueil .zone-pv-ennemi .barre-pv-ennemi {
        height: 18px;
    }

    #page-accueil .zone-pv-ennemi > strong {
        top: 24px;
        font-size: 10px;
    }

    #page-accueil .image-ennemi {
        bottom: 56px;
        height: 72%;
        max-height: calc(100% - 64px);
    }

    #page-accueil .image-ennemi.boss {
        bottom: 56px;
        height: 82%;
        max-height: calc(100% - 64px);
    }
}

@media (max-width: 760px) {
    .competence-boss-scene {
        top: 8px;
        right: 8px;
        width: min(260px, calc(100% - 16px));
    }

    #page-accueil .fiche-ennemi-scene {
        bottom: 8px;
        width: calc(100% - 26px);
    }

    #page-accueil .fiche-ennemi-scene h3 {
        font-size: 13px;
    }

    #page-accueil .zone-pv-ennemi .barre-pv-ennemi {
        height: 18px;
    }

    #page-accueil .zone-pv-ennemi > strong {
        top: 24px;
        font-size: 10px;
    }

    #page-accueil .image-ennemi {
        bottom: 56px;
        height: 70%;
        max-height: calc(100% - 65px);
    }

    #page-accueil .image-ennemi.boss {
        bottom: 56px;
        height: 80%;
        max-height: calc(100% - 65px);
    }
}

/* V33.1 : un seul chrono de boss, placé hors du visage du boss. */
#page-accueil #chrono-boss {
    display: none !important;
}

#page-accueil .chrono-boss-scene {
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    transform: none !important;
}

@media (max-width: 760px) {
    #page-accueil .chrono-boss-scene {
        top: 8px !important;
        left: 8px !important;
        max-width: calc(100% - 16px);
        padding: 8px 11px;
    }
}

/* V34 : portraits complets des moussaillons. */
.portrait-moussaillon,
.portrait-candidat {
    width: 100%;
    height: 220px;
    overflow: hidden;
    display: grid;
    place-items: end center;
    background:
        radial-gradient(circle at 50% 72%, rgba(50, 185, 214, 0.2), transparent 42%),
        linear-gradient(180deg, #102e48, #07172a);
    border: 1px solid #3b607d;
    border-radius: 11px;
}

.portrait-candidat {
    height: 250px;
}

.portrait-moussaillon img,
.portrait-candidat img,
.portrait-selection-expedition img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
}

.carte-moussaillon.rare .portrait-moussaillon,
.carte-candidat.rare .portrait-candidat {
    border-color: #4ba8ef;
    box-shadow:
        inset 0 0 24px rgba(48, 153, 232, 0.14),
        0 0 12px rgba(48, 153, 232, 0.08);
}

.portrait-selection-expedition {
    width: 46px;
    height: 54px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 75%, rgba(50, 185, 214, 0.18), transparent 46%),
        #06172a;
    border: 1px solid #315473;
    border-radius: 8px;
}

@media (max-width: 760px) {
    .portrait-moussaillon {
        height: 185px;
    }

    .portrait-candidat {
        height: 210px;
    }
}

/* V34.2 : cadrage complet des moussaillons, de la tête aux bottes. */
.portrait-moussaillon,
.portrait-candidat {
    position: relative;
    display: block;
}

.portrait-moussaillon img,
.portrait-candidat img {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: auto;
    height: calc(100% + 10px);
    max-width: none;
    object-fit: contain;
    object-position: center;
    transform: translateX(-50%);
}

.portrait-selection-expedition img {
    width: 76%;
    height: 88%;
    align-self: end;
}

/* V36 : équipement individuel des moussaillons. */
.portrait-moussaillon .base-moussaillon,
.portrait-moussaillon .tenue-moussaillon {
    z-index: 1;
}

.portrait-moussaillon .tenue-moussaillon {
    z-index: 2;
}

/* V37 : les calques de tenue utilisent un canevas transparent plus grand que
   leur dessin réel. Ce cadrage commun agrandit ensemble le moussaillon et sa
   tenue : les deux couches restent parfaitement superposées, de la tête aux
   bottes, quelle que soit la tenue équipée. */
.portrait-moussaillon.avec-tenue .base-moussaillon,
.portrait-moussaillon.avec-tenue .tenue-moussaillon {
    bottom: 4px;
    height: calc(100% + 10px);
    max-width: none;
}

/* V39 : une tenue de biome est désormais précomposée avec le moussaillon.
   Une seule image est affichée, ce qui élimine tout décalage entre les deux
   couches et garantit le même cadrage pour les 240 combinaisons. */
.portrait-moussaillon .portrait-moussaillon-final,
.portrait-candidat .portrait-moussaillon-final {
    bottom: 4px;
    height: calc(100% + 10px);
    max-width: none;
    z-index: 2;
}

.arme-moussaillon {
    position: absolute;
    right: 7px;
    bottom: 7px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 18px;
    background: rgba(4, 17, 30, .92);
    border: 1px solid #e4b85a;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

.tenue-icone-moussaillon {
    position: absolute;
    left: 7px;
    bottom: 7px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 18px;
    background: rgba(4, 17, 30, .92);
    border: 1px solid #5ed9eb;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

.resume-equipement-moussaillon {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.resume-equipement-moussaillon > span {
    min-width: 0;
    padding: 5px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    background: #061629;
    border: 1px solid #294b67;
    border-radius: 7px;
}

.resume-equipement-moussaillon b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
}

.resume-equipement-moussaillon b img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.resume-equipement-moussaillon small {
    overflow: hidden;
    color: #91aabd;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-moussaillon .gerer-equipement {
    color: #092033;
    background: linear-gradient(135deg, #f1c35c, #d5912f);
}

.actions-moussaillon button:disabled {
    color: #6d8294;
    background: #172d40;
    cursor: not-allowed;
}

.fenetre-equipement-moussaillon {
    position: fixed;
    inset: 0;
    z-index: 140;
    padding: 24px;
    display: grid;
    place-items: center;
    overflow: auto;
    background: rgba(1, 8, 16, .82);
    backdrop-filter: blur(7px);
}

.contenu-equipement-moussaillon {
    width: min(1060px, 100%);
    max-height: calc(100vh - 48px);
    padding: 20px;
    overflow: auto;
    color: #dcebf5;
    background:
        radial-gradient(circle at 85% 0, rgba(29, 154, 185, .16), transparent 38%),
        linear-gradient(155deg, #102b44, #071729 65%);
    border: 1px solid #3b708e;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}

.contenu-equipement-moussaillon > header,
.sac-equipement-moussaillon > header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.contenu-equipement-moussaillon > header h2 {
    margin-top: 7px;
    color: white;
}

.contenu-equipement-moussaillon > header p,
.sac-equipement-moussaillon header p {
    margin-top: 5px;
    color: #8ca8bb;
    font-size: 12px;
}

#fermer-equipement-moussaillon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    color: #dcebf5;
    font-size: 26px;
    background: #132e45;
    border: 1px solid #456a84;
    border-radius: 10px;
    cursor: pointer;
}

.resume-fenetre-moussaillon {
    margin-top: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 16px;
    background: rgba(5, 20, 35, .78);
    border: 1px solid #315775;
    border-radius: 13px;
}

.portrait-equipement-moussaillon {
    position: relative;
    width: 180px;
    height: 225px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 70%, #1f5870, #071728 72%);
    border: 1px solid #4285a4;
    border-radius: 11px;
}

.portrait-equipement-moussaillon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portrait-equipement-moussaillon .tenue-moussaillon {
    z-index: 2;
}

.portrait-equipement-moussaillon .portrait-moussaillon-final {
    inset: auto auto 4px 50%;
    width: auto;
    height: calc(100% + 12px);
    max-width: none;
    object-fit: contain;
    transform: translateX(-50%);
    z-index: 2;
}

.portrait-equipement-moussaillon.avec-tenue .base-moussaillon,
.portrait-equipement-moussaillon.avec-tenue .tenue-moussaillon {
    inset: auto auto 4px 50%;
    width: auto;
    height: calc(100% + 12px);
    max-width: none;
    transform: translateX(-50%);
}

.portrait-equipement-moussaillon .arme-moussaillon {
    z-index: 3;
}

.resume-fenetre-moussaillon > div:last-child > span {
    color: #5ed9eb;
    font-size: 10px;
    font-weight: 900;
}

.resume-fenetre-moussaillon h3 {
    margin: 5px 0 10px;
    color: white;
    font-size: 24px;
}

.resume-fenetre-moussaillon p {
    margin-top: 5px;
    color: #8fa9bc;
}

.resume-fenetre-moussaillon p strong {
    color: #f0c45c;
}

.resume-fenetre-moussaillon .dps-total-moussaillon strong {
    color: #65e5b2;
    font-size: 20px;
}

.emplacements-moussaillon {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.emplacements-moussaillon article {
    padding: 11px;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 10px;
    background: #081a2d;
    border: 1px solid #85683f;
    border-radius: 11px;
}

.icone-equipement-moussaillon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    font-size: 27px;
    background: #102b43;
    border-radius: 8px;
}

.icone-equipement-moussaillon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.emplacements-moussaillon small,
.emplacements-moussaillon p {
    color: #7894a9;
    font-size: 9px;
}

.emplacements-moussaillon strong {
    display: block;
    margin: 3px 0;
    color: white;
}

.emplacements-moussaillon button,
.objet-pour-moussaillon button {
    padding: 8px 10px;
    color: white;
    font-weight: 800;
    background: #087f9d;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.emplacements-moussaillon button:disabled,
.objet-pour-moussaillon button:disabled {
    color: #6f8596;
    background: #172e42;
    cursor: not-allowed;
}

.sac-equipement-moussaillon {
    margin-top: 14px;
    padding: 14px;
    background: rgba(5, 17, 30, .84);
    border: 1px solid #315473;
    border-radius: 13px;
}

#nombre-objets-moussaillon {
    color: #f0c45c;
    font-size: 12px;
    font-weight: 800;
}

.liste-equipements-moussaillon {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.objet-pour-moussaillon {
    min-width: 0;
    padding: 9px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    background: #0c2238;
    border: 1px solid #536a7b;
    border-left: 3px solid currentColor;
    border-radius: 9px;
}

.objet-pour-moussaillon.incompatible {
    opacity: .52;
}

.icone-objet-moussaillon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    font-size: 25px;
    background: #061526;
    border-radius: 7px;
}

.icone-objet-moussaillon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.infos-objet-moussaillon {
    min-width: 0;
}

.infos-objet-moussaillon > span,
.infos-objet-moussaillon small,
.infos-objet-moussaillon p {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infos-objet-moussaillon > span {
    font-weight: 800;
}

.infos-objet-moussaillon small,
.infos-objet-moussaillon p {
    margin-top: 3px;
    color: #7895aa;
    font-size: 9px;
}

.aucun-equipement-moussaillon {
    grid-column: 1 / -1;
    padding: 18px;
    color: #7895aa;
    text-align: center;
    background: #07182a;
    border-radius: 9px;
}

.portrait-selection-expedition {
    position: relative;
    overflow: hidden;
}

.portrait-selection-expedition img {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: auto;
    height: 90%;
    transform: translateX(-50%);
}

.portrait-selection-expedition .tenue-moussaillon {
    z-index: 2;
}

@media (max-width: 760px) {
    .fenetre-equipement-moussaillon {
        padding: 10px;
    }

    .contenu-equipement-moussaillon {
        max-height: calc(100vh - 20px);
        padding: 13px;
    }

    .emplacements-moussaillon,
    .liste-equipements-moussaillon {
        grid-template-columns: 1fr;
    }

    .resume-fenetre-moussaillon {
        grid-template-columns: 95px 1fr;
    }

    .portrait-equipement-moussaillon {
        width: 95px;
        height: 120px;
    }
}
/* =========================================
   FICHE PERSONNAGE V46 — ARSENAL DES MARÉES
========================================= */

#page-personnage.fiche-aventurier-v46 {
    --fiche-or: #9b7340;
    --fiche-or-clair: #d0ae73;
    --fiche-bleu: #65cfff;
    --fiche-fond: #041423;
    padding: 0 4px 18px 0;
    color: #d9e6ec;
    font-family: Georgia, "Times New Roman", serif;
}

#page-personnage .fiche-v46-principale {
    min-height: 600px;
    display: grid;
    grid-template-columns: minmax(275px, .95fr) minmax(250px, .72fr) minmax(360px, 1.12fr);
    gap: 14px;
}

#page-personnage .panneau-v46 {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 28%, rgba(23, 83, 119, .24), transparent 42%),
        linear-gradient(145deg, #071c2e, var(--fiche-fond));
    border: 1px solid #674d2d;
    box-shadow:
        inset 0 0 0 4px rgba(1, 12, 22, .72),
        inset 0 0 0 5px rgba(145, 105, 56, .34),
        0 12px 30px rgba(0, 7, 14, .3);
}

#page-personnage .panneau-v46::before,
#page-personnage .panneau-v46::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 34px;
    height: 34px;
    pointer-events: none;
}

#page-personnage .panneau-v46::before {
    top: 7px;
    left: 7px;
    border-top: 2px solid var(--fiche-or);
    border-left: 2px solid var(--fiche-or);
}

#page-personnage .panneau-v46::after {
    right: 7px;
    bottom: 7px;
    border-right: 2px solid var(--fiche-or);
    border-bottom: 2px solid var(--fiche-or);
}

#page-personnage .titre-panneau-v46 {
    position: relative;
    z-index: 3;
    min-height: 42px;
    margin: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: #8ec8e3;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
}

#page-personnage .titre-panneau-v46 span {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, #42627a);
}

#page-personnage .titre-panneau-v46 span:last-child {
    background: linear-gradient(90deg, #42627a, transparent);
}

#page-personnage .panneau-v46-personnage {
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr) auto;
}

#page-personnage .portrait-v46 {
    width: calc(100% - 30px);
    height: auto;
    min-height: 0;
    max-height: 510px;
    margin: 0 15px;
    align-self: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(24, 94, 131, .28), transparent 42%),
        repeating-radial-gradient(circle at 50% 44%, transparent 0 52px, rgba(75, 124, 151, .08) 53px 54px),
        #061827;
    border: 1px solid #344b55;
    border-radius: 2px;
    filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .42));
}

#page-personnage .portrait-v46 .calque-personnage {
    padding: 10px 0 2px;
}

#page-personnage .identite-v46 {
    position: relative;
    z-index: 3;
    padding: 8px 18px 15px;
    text-align: center;
}

#page-personnage .identite-v46 > strong {
    display: block;
    color: #e8f4f8;
    font-size: 21px;
}

#page-personnage .identite-v46 span {
    margin-top: 4px;
    display: block;
    color: #87a9bb;
    font-size: 11px;
}

#page-personnage .identite-v46 b {
    color: var(--fiche-or-clair);
}

#page-personnage .panneau-v46-arme {
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr) auto auto;
    border-color: #258ed0;
    box-shadow:
        inset 0 0 0 4px rgba(1, 12, 22, .72),
        inset 0 0 0 5px rgba(36, 140, 200, .7),
        0 0 18px rgba(0, 164, 255, .34);
}

#page-personnage .visuel-arme-v46 {
    min-height: 0;
    margin: 4px 18px 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #5aaed6;
    font-size: 110px;
    background:
        radial-gradient(circle, rgba(33, 124, 185, .3), transparent 45%),
        radial-gradient(circle at 35% 30%, #1d97d2 0 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, #3cc7ff 0 1px, transparent 2px);
}

#page-personnage .visuel-arme-v46 img {
    width: 100%;
    height: 100%;
    max-height: 380px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(74, 184, 255, .55));
}

#page-personnage .arme-vide-v46 {
    opacity: .35;
    filter: drop-shadow(0 0 14px #127cad);
}

#page-personnage .identite-arme-v46 {
    padding: 2px 18px 8px;
    text-align: center;
}

#page-personnage .identite-arme-v46 h3 {
    color: #61bfff;
    font-size: clamp(17px, 1.4vw, 25px);
    line-height: 1.05;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#page-personnage .identite-arme-v46 strong {
    margin-top: 5px;
    display: block;
    color: #48aee8;
    font-size: 11px;
    letter-spacing: 2px;
}

#page-personnage .bonus-arme-v46 {
    min-height: 70px;
    padding: 9px 24px 17px;
    color: #b4c6d0;
    font-size: 11px;
    line-height: 1.45;
    border-top: 1px solid rgba(71, 120, 147, .22);
}

#page-personnage .bonus-arme-v46 span {
    display: block;
}

#page-personnage .panneau-v46-statistiques {
    padding-bottom: 14px;
    overflow-y: auto;
    scrollbar-width: none;
}

#page-personnage .style-v46 {
    min-height: 145px;
    margin: 0 16px 12px;
    padding: 18px;
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 18px;
    background: rgba(5, 24, 39, .85);
    border: 1px solid #624a2e;
    box-shadow: inset 0 0 0 4px #061524;
}

#page-personnage .blason-v46 {
    width: 82px;
    height: 96px;
    display: grid;
    place-items: center;
    color: #e4eaf0;
    font-size: 46px;
    background: linear-gradient(145deg, #2f5064, #081a2a);
    border: 3px double var(--fiche-or-clair);
    clip-path: polygon(50% 0, 92% 17%, 85% 77%, 50% 100%, 15% 77%, 8% 17%);
}

#page-personnage .style-v46 small,
#page-personnage .dps-v46 small {
    color: #72acc9;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#page-personnage .style-v46 strong {
    margin-top: 7px;
    display: block;
    color: #d2efff;
    font-size: 24px;
    text-transform: uppercase;
}

#page-personnage .style-v46 p {
    margin-top: 7px;
    color: #cdbb9e;
    font-size: 12px;
    line-height: 1.35;
}

#page-personnage .dps-v46 {
    min-height: 88px;
    margin: 0 16px 10px;
    padding: 13px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(5, 24, 39, .88);
    border: 1px solid #624a2e;
    box-shadow: inset 0 0 0 4px #061524;
}

#page-personnage .dps-v46 strong {
    display: block;
    color: #a7dcff;
    font-size: clamp(31px, 3vw, 48px);
    font-weight: 500;
    text-shadow: 0 0 12px rgba(48, 166, 234, .6);
}

#page-personnage .dps-v46 > span {
    color: var(--fiche-or-clair);
    font-size: 45px;
}

#page-personnage .resume-combat-v46 {
    margin: 0 16px 9px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

#page-personnage .resume-combat-v46 > span {
    padding: 7px;
    display: flex;
    justify-content: space-between;
    color: #7599ad;
    font-size: 10px;
    background: #061827;
    border: 1px solid #29485b;
}

#page-personnage .resume-combat-v46 strong {
    color: #d3e8f2;
}

#page-personnage .dps-technique-cache {
    display: none !important;
}

#page-personnage .ligne-source-v46 {
    margin: 0 16px 8px;
    background: rgba(4, 19, 31, .9);
    border: 1px solid #624a2e;
}

#page-personnage .ligne-source-v46 summary {
    min-height: 46px;
    padding: 9px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #82b6d1;
    font-size: 17px;
    list-style: none;
    cursor: pointer;
}

#page-personnage .ligne-source-v46 summary::-webkit-details-marker {
    display: none;
}

#page-personnage .ligne-source-v46 summary strong {
    color: #a8d7f2;
    font-weight: 500;
}

#page-personnage .ligne-source-v46 summary i {
    margin-right: 18px;
    font-style: normal;
}

#page-personnage .ligne-source-v46[open] summary {
    border-bottom: 1px solid #374752;
}

#page-personnage .ligne-source-v46 > :not(summary) {
    margin: 10px;
}

#page-personnage .entete-competences-v46 {
    padding: 8px 10px;
    color: #9ab2bf;
    font-size: 11px;
    text-align: right;
}

#page-personnage .entete-competences-v46 b {
    color: #f0be63;
    font-size: 16px;
}

#page-personnage .liste-statistiques {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

#page-personnage .liste-statistiques article {
    min-height: 58px;
    padding: 7px;
    grid-template-columns: 24px 1fr 34px 28px;
    gap: 6px;
    background: #0a2235;
    border: 1px solid #29485b;
    border-radius: 2px;
}

#page-personnage .liste-statistiques article > span {
    font-size: 17px;
}

#page-personnage .liste-statistiques h3 {
    font-size: 11px;
}

#page-personnage .liste-statistiques p {
    font-size: 9px;
    line-height: 1.2;
}

#page-personnage .liste-statistiques article > strong {
    font-size: 16px;
}

#page-personnage .liste-statistiques button {
    width: 26px;
    height: 26px;
    font-size: 17px;
    border-radius: 3px;
}

#page-personnage .ligne-source-v46 .formule-dps {
    padding: 8px;
    font-size: 10px;
}

#page-personnage .ligne-source-v46 .formule-dps strong {
    padding: 5px;
}

#page-personnage .ligne-source-v46 .lignes-calcul > div {
    font-size: 10px;
}

#page-personnage .grille-details-v46 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#page-personnage .grille-details-v46 h3 {
    margin-bottom: 8px;
    color: #b8d9e9;
    font-size: 12px;
}

#page-personnage .equipement-v46 {
    min-height: 170px;
    margin-top: 14px;
    padding: 0 18px 16px;
}

#page-personnage .grille-equipement-v46 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

#page-personnage .grille-equipement-v46 article {
    min-height: 105px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: minmax(75px, 1fr) 92px minmax(90px, 1fr);
    align-items: center;
    gap: 10px;
    background: rgba(5, 24, 39, .85);
    border: 1px solid #5b452e;
    box-shadow: inset 0 0 0 4px #061524;
}

#page-personnage .grille-equipement-v46 small {
    color: #87b7cf;
    font-size: 13px;
    text-align: right;
    text-transform: uppercase;
}

#page-personnage .grille-equipement-v46 article > strong {
    color: #c2d9e3;
    font-size: 11px;
    line-height: 1.25;
}

#page-personnage .icone-equipement-v46 {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #668ca0;
    font-size: 40px;
    background: #071a2a;
    border: 1px solid #765a34;
}

#page-personnage .icone-equipement-v46 img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

#page-personnage :where(.rarete-v46-rare) {
    border-color: #249ee4;
    box-shadow: 0 0 12px rgba(31, 159, 232, .25);
}

#page-personnage :where(.rarete-v46-epique) {
    border-color: #a25de1;
    box-shadow: 0 0 12px rgba(155, 82, 218, .28);
}

#page-personnage :where(.rarete-v46-legendaire) {
    border-color: #ef9e35;
    box-shadow: 0 0 12px rgba(239, 158, 53, .28);
}

@media (min-width: 761px) and (min-height: 790px) {
    #page-personnage.fiche-aventurier-v46 {
        overflow: hidden;
    }

    #page-personnage .fiche-v46-principale {
        min-height: 0;
        height: calc(100% - 184px);
    }

    #page-personnage .equipement-v46 {
        height: 170px;
    }
}

@media (max-width: 1180px) {
    #page-personnage .fiche-v46-principale {
        grid-template-columns: minmax(240px, .9fr) minmax(220px, .7fr) minmax(330px, 1.1fr);
    }

    #page-personnage .style-v46 {
        grid-template-columns: 70px 1fr;
        gap: 10px;
    }

    #page-personnage .blason-v46 {
        width: 66px;
        height: 78px;
        font-size: 34px;
    }

    #page-personnage .liste-statistiques {
        grid-template-columns: 1fr;
    }

    #page-personnage .grille-equipement-v46 article {
        grid-template-columns: 72px 75px 1fr;
    }

    #page-personnage .icone-equipement-v46 {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 920px) {
    #page-personnage .fiche-v46-principale {
        grid-template-columns: 1fr 1fr;
    }

    #page-personnage .panneau-v46-statistiques {
        grid-column: 1 / -1;
    }

    #page-personnage .grille-equipement-v46 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    #page-personnage .fiche-v46-principale {
        grid-template-columns: 1fr;
    }

    #page-personnage .panneau-v46-statistiques {
        grid-column: auto;
    }

    #page-personnage .portrait-v46 {
        max-width: 330px;
        max-height: none;
        margin-inline: auto;
    }

    #page-personnage .grille-details-v46,
    #page-personnage .liste-statistiques {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   V62 — ICONOGRAPHIE MER BLEU
========================================= */

#ecran-jeu .icone-v62,
.creation-personnage .icone-v62 {
    width: 1.35em;
    height: 1.35em;
    display: inline-block;
    flex: 0 0 auto;
    object-fit: contain;
    vertical-align: -0.24em;
    pointer-events: none;
    user-select: none;
}

#ecran-jeu .icone-ressource-app .icone-v62 {
    width: 29px;
    height: 29px;
    vertical-align: middle;
}

#ecran-jeu .bouton-guide .icone-v62,
#ecran-jeu .bouton-notifications .icone-v62 {
    width: 31px;
    height: 31px;
    vertical-align: middle;
}

#ecran-jeu .navigation-guide button > .icone-v62 {
    width: 22px;
    height: 22px;
    margin-right: 7px;
    vertical-align: middle;
}

#ecran-jeu .icone-notification .icone-v62 {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

.creation-personnage legend .icone-v62 {
    width: 25px;
    height: 25px;
    margin-right: 7px;
    vertical-align: middle;
}

/* La V61 a ajouté deux commandes à droite de la barre. Les largeurs fixes
   historiques dépassaient alors l'espace disponible et rognaient la cloche. */
@media (min-width: 1321px) {
    #ecran-jeu .logo-jeu {
        min-width: 190px;
        flex: 0 1 230px;
    }

    #ecran-jeu .ressources-app {
        min-width: 0;
        flex: 1 1 auto;
    }

    #ecran-jeu .ressource-app {
        min-width: 126px;
        flex: 1 1 140px;
    }

    #ecran-jeu .experience-app {
        min-width: 220px;
        flex: 1.35 1 250px;
    }
}

@media (max-width: 1320px) and (min-width: 761px) {
    #ecran-jeu .logo-jeu {
        min-width: 160px;
    }

    #ecran-jeu .ressources-app {
        min-width: 0;
    }

    #ecran-jeu .ressource-app {
        min-width: 100px;
    }

    #ecran-jeu .experience-app {
        min-width: 170px;
    }
}

.carte-personnage.selectionne::after {
    content: "";
    background: #f08025 url("images/icones-v62/validation.png") center / 30px 30px no-repeat;
}

.carte-specialisation.active::before {
    content: "VOIE ACTIVE · PALIER " attr(data-palier-actif);
    padding-left: 34px;
    background:
        url("images/icones-v62/validation.png") 10px center / 20px 20px no-repeat,
        linear-gradient(90deg, #e9a934, #ffe080);
}

#creation-personnage .titre-creation::after {
    content: "";
    width: 38px;
    height: 38px;
    background: url("images/icones-v62/ancre.png") center / contain no-repeat;
}

/* =========================================
   V72 — FINITION UI / RESPONSIVE
========================================= */

/* Les ressources doivent pouvoir se contracter sans repousser les commandes
   Guide / Notifications hors de l'écran lorsque la fenêtre se resserre. */
#ecran-jeu .barre-app,
#ecran-jeu .ressources-app,
#ecran-jeu .ressource-app,
#ecran-jeu .experience-app,
#ecran-jeu .ressource-app > div,
#ecran-jeu .experience-app > div {
    min-width: 0;
}

#ecran-jeu .notification-jeu strong,
#ecran-jeu .notification-jeu p {
    overflow-wrap: anywhere;
}

/* Un repère clavier unique améliore l'utilisation sans modifier l'apparence
   des commandes à la souris. */
#ecran-jeu button:focus-visible,
#ecran-jeu select:focus-visible,
#creation-personnage button:focus-visible,
#creation-personnage input:focus-visible {
    outline: 2px solid #4edbe8;
    outline-offset: 2px;
}

@media (max-width: 1320px) and (min-width: 1121px) {
    #ecran-jeu .barre-app {
        gap: 14px;
    }

    #ecran-jeu .logo-jeu {
        flex: 0 1 auto;
    }

    #ecran-jeu .ressources-app {
        flex: 1 1 620px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #ecran-jeu .ressource-app {
        flex: 1 1 108px;
    }

    #ecran-jeu .experience-app {
        flex: 1.4 1 185px;
    }
}

@media (max-width: 760px) {
    /* Une seule rangée défilante garde le contenu de jeu visible sur mobile
       tout en conservant les libellés des rubriques. */
    #ecran-jeu .navigation-jeu {
        padding-bottom: 10px;
    }

    #ecran-jeu .menu-jeu {
        flex-flow: row nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 6px;
        scrollbar-width: thin;
        scrollbar-color: #28516a #071725;
    }

    #ecran-jeu .menu-jeu button {
        min-width: max-content;
        flex: 0 0 auto;
        justify-content: flex-start;
        white-space: nowrap;
    }
}

/* =========================================
   V63 — SUCCÈS, HAUTS FAITS ET TITRES
========================================= */

#ecran-jeu .menu-jeu button[data-page="succes"] .icone-menu {
    color: #d7d1bd;
    background: none;
    mix-blend-mode: normal;
}

#ecran-jeu .menu-jeu button[data-page="succes"] .icone-menu .icone-v62 {
    width: 29px;
    height: 29px;
    display: block;
}

#page-succes {
    padding: 14px;
    color: #eaf6ff;
}

.entete-succes {
    align-items: center;
    gap: 18px;
}

.entete-succes .pastille-section,
.collection-titres .pastille-section {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.entete-succes .pastille-section .icone-v62,
.collection-titres .pastille-section .icone-v62 {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.resume-succes {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.resume-succes > span {
    min-width: 105px;
    padding: 9px 12px;
    border: 1px solid #28536f;
    border-radius: 9px;
    background: #081a2a;
    color: #91abc0;
    font-size: 12px;
}

.resume-succes strong {
    display: block;
    margin-top: 2px;
    color: #f0bd4e;
    font-size: 18px;
}

.onglets-succes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.onglets-succes button {
    padding: 9px 14px;
    border: 1px solid #28536f;
    border-radius: 9px;
    background: #0b2134;
    color: #b7c9d8;
    cursor: pointer;
}

.onglets-succes button.actif {
    border-color: #d9aa39;
    background: linear-gradient(135deg, #725117, #a97919);
    color: #fff2c7;
}

.liste-succes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.carte-succes {
    padding: 15px;
    border: 1px solid #294d66;
    border-radius: 12px;
    background: linear-gradient(145deg, #0b2134, #081a2a);
    box-shadow: 0 10px 26px rgba(0, 8, 17, .16);
}

.carte-succes > header {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 11px;
}

.icone-succes {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #315b76;
    border-radius: 11px;
    background: #071827;
    font-size: 29px;
}

.icone-succes .icone-v62 {
    width: 39px;
    height: 39px;
    vertical-align: middle;
}

.carte-succes h3 {
    margin: 0 0 3px;
    color: #f2f7fa;
    font-size: 16px;
}

.carte-succes p {
    margin: 0;
    color: #91a9bc;
    font-size: 12px;
    line-height: 1.45;
}

.progression-succes {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
    color: #7f9caf;
    font-size: 11px;
}

.progression-succes strong {
    color: #f0c45a;
}

.barre-succes {
    height: 8px;
    margin: 6px 0 11px;
    overflow: hidden;
    border: 1px solid #294e66;
    border-radius: 99px;
    background: #06131f;
}

.barre-succes i {
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #b7831e, #f0c85b);
}

.paliers-succes {
    display: grid;
    gap: 6px;
    list-style: none;
}

.palier-succes {
    min-height: 43px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 31px 1fr;
    align-items: center;
    gap: 8px;
    border: 1px solid #243f53;
    border-radius: 8px;
    background: #081724;
}

.palier-succes.debloque {
    border-color: rgba(215, 169, 54, .65);
    background: linear-gradient(90deg, rgba(126, 87, 19, .22), #081724 72%);
}

.etat-palier-succes {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.etat-palier-succes .icone-v62 {
    width: 27px;
    height: 27px;
}

.palier-succes strong,
.palier-succes small {
    display: block;
}

.palier-succes strong {
    color: #dbe9f1;
    font-size: 12px;
}

.palier-succes small {
    margin-top: 2px;
    color: #819aac;
    font-size: 10px;
}

.palier-succes.debloque small {
    color: #edc969;
}

.collection-titres {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #294d66;
    border-radius: 12px;
    background: #091c2c;
}

.collection-titres > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
}

.collection-titres > header p {
    color: #829daf;
    font-size: 11px;
}

.collection-titres-succes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.carte-titre-succes {
    min-width: 0;
    padding: 9px 10px;
    text-align: left;
    border: 1px solid #35536a;
    border-radius: 9px;
    background: #0a1e2e;
    color: #c4d5df;
    cursor: pointer;
}

.carte-titre-succes strong,
.carte-titre-succes small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carte-titre-succes strong {
    font-size: 11px;
}

.carte-titre-succes small {
    margin-top: 3px;
    color: #708b9e;
    font-size: 9px;
}

.carte-titre-succes.actif {
    border-color: #dfb44e;
    background: #3b2d13;
    color: #ffe6a0;
}

@media (max-width: 980px) {
    .liste-succes {
        grid-template-columns: 1fr;
    }

    .collection-titres-succes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .entete-succes,
    .collection-titres > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .resume-succes,
    .collection-titres-succes {
        width: 100%;
    }

    .resume-succes > span {
        flex: 1;
        min-width: 0;
    }

    .collection-titres-succes {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   V64 — EXPÉDITIONS DU PREMIER MONDE
========================================= */

.onglets-mondes-expeditions {
    margin: 12px 0 7px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #26475f;
}

.onglets-mondes-expeditions button {
    min-width: 150px;
    padding: 9px 17px;
    border: 1px solid #31566f;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: #091d2d;
    color: #8faabd;
    font-weight: 800;
}

.onglets-mondes-expeditions button.actif {
    border-color: #3bbdce;
    background: linear-gradient(180deg, #0d6680, #0a4057);
    color: #eafcff;
}

.onglets-mondes-expeditions button:disabled {
    padding-right: 34px;
    opacity: .46;
    border-style: dashed;
    color: #738b9b;
    background-color: #081824;
    background-image: url("images/icones-v62/cadenas.png");
    background-position: calc(100% - 12px) center;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.onglets-mondes-expeditions button[data-monde-expeditions="endgame"].actif {
    border-color: #d9ae54;
    background: linear-gradient(180deg, #5e4922, #332511);
    color: #ffe6a6;
}

.chance-parchemin-endgame {
    color: #d9adff;
    font-weight: 800;
}

.chance-parchemin-endgame.legendaire {
    color: #ffd36a;
}

.onglets-iles-expeditions {
    display: grid;
    grid-template-columns: repeat(10, minmax(72px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.onglets-iles-expeditions::-webkit-scrollbar {
    display: none;
}

.onglets-iles-expeditions button {
    min-width: 72px;
    padding: 8px 7px;
    border: 1px solid #294b63;
    border-radius: 8px;
    background: #0a1e2e;
    color: #9cb2c2;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.onglets-iles-expeditions button.actif {
    border-color: #e0b24a;
    background: #463515;
    color: #ffe3a0;
}

.onglets-iles-expeditions button:disabled {
    padding-right: 22px;
    opacity: .42;
    border-style: dashed;
    color: #6e8493;
    background-color: #081824;
    background-image: url("images/icones-v62/cadenas.png");
    background-position: calc(100% - 5px) center;
    background-size: 13px 13px;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.participation-capitaine-expedition {
    width: 100%;
    margin: 10px 0 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    border: 1px solid #31536a;
    border-radius: 10px;
    background: #081b2a;
    color: #c5d6e0;
    cursor: pointer;
}

.participation-capitaine-expedition.actif {
    border-color: #d4a83e;
    background: linear-gradient(90deg, rgba(112, 79, 18, .28), #081b2a 70%);
}

.participation-capitaine-expedition:disabled {
    opacity: .65;
    cursor: default;
}

.participation-capitaine-expedition > span:last-child {
    min-width: 0;
    display: block;
}

.participation-capitaine-expedition strong,
.participation-capitaine-expedition small {
    display: block;
}

.participation-capitaine-expedition strong {
    color: #e4edf2;
    font-size: 12px;
}

.participation-capitaine-expedition strong b {
    color: #78d5df;
}

.participation-capitaine-expedition.actif strong b {
    color: #f0c45c;
}

.participation-capitaine-expedition small {
    margin-top: 3px;
    color: #819bab;
    font-size: 10px;
}

.interrupteur-capitaine {
    position: relative;
    width: 40px;
    height: 22px;
    flex: 0 0 40px;
    border: 1px solid #3a5b70;
    border-radius: 99px;
    background: #102b3c;
}

.interrupteur-capitaine i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8099a9;
    transition: left .18s ease, background .18s ease;
}

.participation-capitaine-expedition.actif .interrupteur-capitaine i {
    left: 21px;
    background: #f0bd4e;
}

.entete-routes-expeditions {
    margin: 13px 0 9px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #294b63;
    border-radius: 9px;
    background: #081b2a;
}

.entete-routes-expeditions small,
.entete-routes-expeditions strong {
    display: block;
}

.entete-routes-expeditions small {
    color: #6fa9b9;
    font-size: 9px;
    letter-spacing: 1px;
}

.entete-routes-expeditions strong {
    margin-top: 2px;
    color: #e7f2f6;
    font-size: 13px;
}

.entete-routes-expeditions > span {
    color: #e7bd57;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .onglets-iles-expeditions {
        grid-template-columns: repeat(10, 76px);
    }

    .entete-routes-expeditions {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   V73 — COMMANDES DE SAUVEGARDE
========================================= */

#ecran-jeu .pied-navigation-jeu button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#ecran-jeu #bouton-exporter-sauvegarde:hover,
#ecran-jeu #bouton-importer-sauvegarde:hover {
    color: #62dce8;
}

@media (max-width: 760px) {
    #ecran-jeu .pied-navigation-jeu {
        margin-top: 8px;
        padding: 8px 0 0;
        display: flex;
        justify-content: flex-end;
        gap: 4px;
    }

    #ecran-jeu .pied-navigation-jeu button,
    #ecran-jeu .pied-navigation-jeu .bouton-recommencer {
        width: 44px;
        min-height: 42px;
        flex: 0 0 44px;
        border-right: 0;
        border-radius: 8px;
    }
}

/* =========================================
   V74 — COMPTE JOUEUR / SAUVEGARDE CLOUD
========================================= */

#ecran-jeu .centre-compte {
    flex: 0 0 auto;
}

#ecran-jeu .bouton-compte {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: #0d2339;
    border: 1px solid #203f59;
    border-radius: 10px;
    cursor: pointer;
}

#ecran-jeu .bouton-compte:hover,
#ecran-jeu .bouton-compte[aria-expanded="true"] {
    background: #12304a;
    border-color: #2ed4e3;
}

#ecran-jeu .bouton-compte .icone-v62 {
    width: 31px;
    height: 31px;
}

.bouton-compte-creation {
    width: 100%;
    margin-top: 14px;
    padding: 10px 14px;
    color: #276078;
    font-weight: 800;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.bouton-compte-creation:hover {
    color: #0785ac;
    text-decoration: underline;
}

.fenetre-compte {
    position: fixed;
    z-index: 260;
    inset: 0;
    padding: 22px;
    display: grid;
    place-items: center;
    background: rgba(2, 11, 20, .82);
    backdrop-filter: blur(7px);
}

.fenetre-compte.cache {
    display: none;
}

.dialogue-compte {
    width: min(480px, calc(100vw - 30px));
    overflow: hidden;
    color: #eaf4f8;
    background: #081a2b;
    border: 1px solid #2b526c;
    border-radius: 15px;
    box-shadow: 0 28px 70px rgba(0, 5, 11, .65);
}

.dialogue-compte > header {
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    background: #0c2338;
    border-bottom: 1px solid #23455d;
}

.dialogue-compte > header small {
    color: #62dce8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.dialogue-compte > header h2 {
    margin-top: 3px;
    color: #f2f8fb;
    font-size: 22px;
}

.dialogue-compte > header p {
    margin-top: 4px;
    color: #8faabd;
    font-size: 12px;
}

#fermer-compte {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: #a9bdc9;
    font-size: 25px;
    line-height: 1;
    background: #0a1c2e;
    border: 1px solid #31516a;
    border-radius: 8px;
    cursor: pointer;
}

.contenu-compte {
    padding: 18px 20px 10px;
}

.contenu-compte label {
    margin: 10px 0 5px;
    display: block;
    color: #9fb5c3;
    font-size: 12px;
    font-weight: 800;
}

.contenu-compte input {
    width: 100%;
    padding: 11px 12px;
    color: #edf7fb;
    background: #061625;
    border: 1px solid #31516a;
    border-radius: 8px;
    outline: none;
}

.contenu-compte input:focus {
    border-color: #2ed4e3;
}

.actions-compte,
.actions-cloud {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.bouton-principal-compte,
.bouton-secondaire-compte,
.bouton-deconnexion-compte {
    min-height: 40px;
    padding: 9px 12px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
}

.bouton-principal-compte {
    color: #04141d;
    background: linear-gradient(135deg, #39d5df, #18a6c1);
    border: 1px solid #63e6eb;
}

.bouton-secondaire-compte {
    color: #c7dce7;
    background: #0d2a40;
    border: 1px solid #31566f;
}

.bouton-deconnexion-compte {
    width: 100%;
    margin-top: 14px;
    color: #d29ba1;
    background: transparent;
    border: 1px solid #5a3541;
}

.note-compte {
    margin-top: 12px;
    color: #718d9e;
    font-size: 10px;
    line-height: 1.45;
}

.identite-compte {
    padding: 11px 12px;
    display: grid;
    gap: 3px;
    background: #0b2438;
    border: 1px solid #28516a;
    border-radius: 9px;
}

.identite-compte span {
    color: #65dda3;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.identite-compte strong {
    overflow-wrap: anywhere;
    color: #eff8fb;
    font-size: 13px;
}

.etat-synchronisation-cloud {
    margin-top: 12px;
    padding: 11px 12px;
    background: #0a1f31;
    border: 1px solid #294c62;
    border-radius: 9px;
}

.etat-synchronisation-cloud.attention {
    background: rgba(101, 74, 25, .25);
    border-color: #8c692c;
}

.etat-synchronisation-cloud strong {
    color: #62dce8;
    font-size: 12px;
}

.etat-synchronisation-cloud.attention strong {
    color: #efc260;
}

.etat-synchronisation-cloud p {
    margin-top: 4px;
    color: #8faabd;
    font-size: 11px;
    line-height: 1.45;
}

.message-compte {
    min-height: 34px;
    margin: 8px 20px 17px;
    padding: 8px 10px;
    color: #90abb9;
    font-size: 11px;
    line-height: 1.45;
    background: #061522;
    border-radius: 7px;
}

.message-compte.erreur {
    color: #ffadb4;
    background: rgba(98, 30, 42, .3);
}

.message-compte.succes {
    color: #8ce4b0;
    background: rgba(23, 91, 61, .25);
}

@media (max-width: 520px) {
    .fenetre-compte {
        padding: 10px;
    }

    .dialogue-compte {
        width: calc(100vw - 20px);
    }

    .actions-compte,
    .actions-cloud {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   V76 — ÉTAT DU SERVICE ONLINE
========================================= */

.etat-reseau-compte {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #78cfa0;
}

.etat-reseau-compte i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #54d58e;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(84, 213, 142, .45);
}

.etat-reseau-compte small {
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

.etat-reseau-compte.hors-ligne {
    color: #e5ae66;
}

.etat-reseau-compte.hors-ligne i {
    background: #e5a85b;
    box-shadow: none;
}

#ecran-jeu .bouton-compte.hors-ligne {
    border-color: #8a6737;
}