/* =====================================================
   LOTUS NOIR — THEME WORLD OF WARCRAFT VANILLA
   Pierre sombre • Or ancien • Emeraude
   ===================================================== */

/* 1. PALETTE */
:root {
    --fond-principal: #100f0c;
    --fond-secondaire: #191811;
    --pierre: #24231d;
    --pierre-claire: #302d23;

    --or: #c8a85b;
    --or-clair: #f0d995;
    --or-sombre: #79602e;

    --emeraude: #247653;
    --emeraude-clair: #4bb584;

    --texte: #e6dfcc;
    --texte-doux: #b9b19c;

    --danger: #d66b5e;
    --succes: #74c69d;

    --bordure: rgba(200, 168, 91, 0.42);
    --ombre: rgba(0, 0, 0, 0.5);

    --fond-carte: linear-gradient(
        145deg,
        rgba(53, 48, 36, 0.7),
        rgba(25, 24, 19, 0.96) 60%
    );
}

/* 2. BASE */
* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;

    color: var(--texte);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.7;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(87, 69, 35, 0.19),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 100% 45%,
            rgba(20, 86, 58, 0.10),
            transparent 42%
        ),
        var(--fond-principal);
}

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

::selection {
    color: #fff7df;
    background: var(--emeraude);
}

/* 3. TITRES ET TEXTES */
h1,
h2,
h3,
h4 {
    color: var(--or-clair);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    line-height: 1.3;
}

h1 {
    margin: 0 0 18px;
    font-size: clamp(2rem, 5vw, 3.2rem);
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
}

h1::after {
    display: block;
    width: 110px;
    height: 2px;
    margin: 18px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--or),
        var(--emeraude),
        transparent
    );
    content: "";
}

h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bordure);
    font-size: 1.65rem;
}

h3 {
    font-size: 1.3rem;
}

p {
    margin-top: 0;
}

a {
    color: var(--or-clair);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--emeraude-clair);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--or-clair);
    outline-offset: 3px;
}

/* 4. EN-TETE ET NAVIGATION */
header {
    position: relative;
    z-index: 2;
    padding: 22px 24px 18px;
    text-align: center;

    background: linear-gradient(
        180deg,
        rgba(43, 39, 28, 0.98),
        rgba(17, 16, 12, 0.98)
    );

    border-bottom: 2px solid var(--or-sombre);
    box-shadow: 0 7px 25px var(--ombre);
}

.logo {
    margin-bottom: 18px;
    color: var(--or-clair);
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    font-weight: bold;
    letter-spacing: 5px;
    text-shadow:
        0 0 12px rgba(200, 168, 91, 0.25),
        0 3px 4px #000;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

nav a {
    display: inline-block;
    padding: 9px 15px;
    color: var(--texte);
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: 3px;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

nav a:hover {
    color: var(--or-clair);
    background: rgba(200, 168, 91, 0.08);
    border-color: var(--bordure);
}

/* Formulaire de deconnexion dans la navigation */
nav form {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin: 0;
}

nav button {
    margin-top: 0;
    padding: 9px 15px;
    font-size: 0.95rem;
}

/* 5. CONTENU PRINCIPAL */
main {
    flex: 1;
    width: min(1100px, calc(100% - 36px));
    margin: 0 auto;
    padding: 42px 0 60px;
}

.contenu-page {
    width: min(100%, 1000px);
    margin: 0 auto;
}

main > p:first-of-type {
    max-width: 760px;
    margin: 0 auto 32px;
    color: var(--texte-doux);
    text-align: center;
}

/* 6. CARTES GENERIQUES */
.carte-formulaire,
.carte-personnage,
.liste-annonces article {
    position: relative;
    margin: 24px 0;
    padding: 25px;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 5px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 22px var(--ombre);
}

.carte-formulaire::before,
.carte-personnage::before {
    position: absolute;
    top: -1px;
    left: 22px;
    width: 60px;
    height: 2px;
    background: var(--or);
    content: "";
}

.carte-formulaire h2,
.carte-personnage h3 {
    margin-top: 0;
}

.carte-personnage {
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.carte-personnage:hover {
    border-color: var(--or);
    transform: translateY(-2px);
}

.grille-personnages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.grille-personnages .carte-personnage {
    margin: 0;
}

.liste-annonces article {
    margin: 18px 0;
}

.liste-annonces article p:first-of-type {
    color: var(--texte-doux);
    font-size: 0.9rem;
}

/* 7. FORMULAIRES */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    margin-top: 8px;
    color: var(--or-clair);
    font-weight: bold;
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    padding: 12px 13px;

    color: var(--texte);
    font: inherit;

    background: rgba(8, 8, 6, 0.78);
    border: 1px solid #59503a;
    border-radius: 3px;

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

input::placeholder,
textarea::placeholder {
    color: #8e8777;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--emeraude-clair);
    box-shadow: 0 0 0 3px rgba(36, 118, 83, 0.2);
    outline: none;
}

select {
    cursor: pointer;
}

select option {
    color: var(--texte);
    background: var(--fond-secondaire);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--emeraude);
}

input[type="datetime-local"] {
    color-scheme: dark;
}

/* 8. BOUTONS GENERIQUES */
button,
input[type="submit"] {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-top: 14px;
    padding: 12px 22px;

    color: #fff2cc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: bold;

    background: linear-gradient(180deg, #376b4d, #204b36);
    border: 1px solid #72946b;
    border-radius: 3px;
    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
    color: #fff9e8;
    background: linear-gradient(180deg, #49875f, #286443);
    border-color: var(--or);
    transform: translateY(-1px);
}

button:active {
    transform: translateY(0);
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* 9. MESSAGES DE SUCCES ET D'ERREUR */
.message-succes,
.message-erreur {
    margin: 18px 0;
    padding: 14px 17px;
    border-radius: 4px;
}

.message-succes {
    color: #c9f0d9;
    background: rgba(29, 100, 65, 0.22);
    border: 1px solid rgba(116, 198, 157, 0.55);
}

.message-erreur {
    color: #ffd0c8;
    background: rgba(130, 42, 35, 0.2);
    border: 1px solid rgba(214, 107, 94, 0.6);
}

/* 10. TABLEAUX */
table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(20, 19, 15, 0.85);
}

th,
td {
    padding: 12px 14px;
    text-align: left;
    border: 1px solid var(--bordure);
}

th {
    color: var(--or-clair);
    background: var(--pierre);
}

/* 11. PIED DE PAGE */
footer {
    margin-top: auto;
    padding: 25px 20px;
    color: var(--texte-doux);
    text-align: center;
    background: #0b0b09;
    border-top: 1px solid var(--or-sombre);
}

footer p {
    margin: 0;
}

/* =====================================================
   ACCUEIL
   ===================================================== */

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 470px;
    padding: 65px 24px;
    text-align: center;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(35, 111, 75, 0.25),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(12, 12, 9, 0.4),
            rgba(12, 12, 9, 0.96)
        );

    border-bottom: 1px solid var(--or-sombre);
}

.hero::before,
.hero::after {
    position: absolute;
    top: 50%;
    color: rgba(200, 168, 91, 0.12);
    font-size: clamp(100px, 22vw, 250px);
    content: "❖";
    transform: translateY(-50%);
    pointer-events: none;
}

.hero::before {
    left: 3%;
}

.hero::after {
    right: 3%;
}

.hero-contenu {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
}

.eyebrow,
.hero .eyebrow {
    color: var(--emeraude-clair);
    font-size: 0.83rem;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero h1 {
    margin: 20px 0;
    color: var(--or-clair);
    font-size: clamp(3rem, 10vw, 6rem);
    letter-spacing: clamp(4px, 1.5vw, 12px);
    text-shadow:
        0 0 25px rgba(200, 168, 91, 0.2),
        0 5px 12px #000;
}

.hero h1::after {
    display: none;
}

.separateur-hero {
    margin: 18px 0;
    color: var(--or);
    letter-spacing: 12px;
}

.hero p {
    max-width: 600px;
    margin: 0 auto 28px;
    color: var(--texte);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.9;
}

.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.bouton {
    display: inline-block;
    padding: 12px 22px;
    color: var(--or-clair);
    border: 1px solid var(--or-sombre);
    border-radius: 3px;
    background: rgba(15, 15, 11, 0.85);
    text-align: center;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.bouton:hover {
    color: #fff5d7;
    border-color: var(--or);
    background: var(--pierre-claire);
    transform: translateY(-2px);
}

.bouton.principal {
    color: #f7f0d9;
    border-color: var(--emeraude);
    background: linear-gradient(180deg, #286b49, #173d2b);
}

.bouton.principal:hover {
    border-color: var(--emeraude-clair);
    background: linear-gradient(180deg, #36865c, #205439);
}

.accueil {
    width: min(1050px, calc(100% - 36px));
    padding-top: 48px;
}

.introduction {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.introduction h2 {
    border-bottom: none;
}

.introduction p {
    color: var(--texte-doux);
}

.cartes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 35px 0 60px;
}

.carte {
    padding: 25px;
    background: linear-gradient(145deg, #29271f, #171611);
    border: 1px solid var(--bordure);
    border-radius: 4px;
    box-shadow: 0 8px 20px var(--ombre);
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.carte:hover {
    border-color: var(--or);
    transform: translateY(-3px);
}

.icone-carte {
    margin-bottom: 12px;
    color: var(--or);
    font-size: 2rem;
}

.carte h3 {
    margin: 0 0 12px;
}

.carte p {
    color: var(--texte-doux);
}

.carte a {
    color: var(--emeraude-clair);
    font-weight: bold;
}

.tableau-bord {
    margin: 55px 0;
}

.section-entete {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 20px;
}

.section-entete h2 {
    margin: 8px 0 0;
}

.section-entete > a {
    padding-bottom: 12px;
    white-space: nowrap;
}

.liste-accueil,
.liste-annonces-accueil {
    display: grid;
    gap: 12px;
}

.element-accueil {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: rgba(35, 33, 26, 0.8);
    border: 1px solid var(--bordure);
    border-radius: 4px;
}

.date-raid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 68px;
    min-height: 68px;
    color: var(--or-clair);
    background: #11110d;
    border: 1px solid var(--or-sombre);
}

.date-raid span {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.3;
}

.date-raid small {
    color: var(--texte-doux);
    font-size: 0.75rem;
}

.element-infos {
    flex: 1;
    min-width: 0;
}

.element-infos h3 {
    margin: 0 0 5px;
}

.element-infos p {
    margin: 0;
    color: var(--texte-doux);
    overflow-wrap: anywhere;
}

.lien-element {
    flex-shrink: 0;
}

.annonce-accueil {
    display: flex;
    gap: 16px;
    padding: 22px;
    background: rgba(35, 33, 26, 0.8);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--emeraude);
}

.annonce-symbole {
    color: var(--or);
    font-size: 1.5rem;
}

.annonce-accueil h3 {
    margin: 0 0 5px;
}

.annonce-accueil p {
    overflow-wrap: anywhere;
}

.annonce-meta {
    color: var(--texte-doux);
    font-size: 0.85rem;
}

.panneau-vide {
    padding: 30px 20px;
    text-align: center;
    background: rgba(35, 33, 26, 0.6);
    border: 1px dashed var(--or-sombre);
}

.symbole-vide {
    color: var(--or);
    font-size: 2rem;
}

.panneau-vide h3 {
    margin-bottom: 8px;
}

.panneau-vide p {
    margin-bottom: 0;
    color: var(--texte-doux);
}

.appel-recrutement {
    margin: 65px 0 25px;
    padding: 40px 25px;
    text-align: center;
    background:
        radial-gradient(
            ellipse at center,
            rgba(36, 118, 83, 0.2),
            transparent 75%
        ),
        var(--fond-secondaire);
    border: 1px solid var(--bordure);
}

.appel-recrutement h2 {
    border-bottom: none;
}

.appel-recrutement p {
    max-width: 600px;
    margin: 0 auto 22px;
    color: var(--texte-doux);
}

/* =====================================================
   PANNEAU OFFICIER ET GESTION DES MEMBRES
   ===================================================== */

.tableau-officier {
    margin-top: 28px;
}

.statistique {
    margin: 12px 0;
    color: #d8b568;
    font-family: Georgia, serif;
    font-size: 2.5rem;
    font-weight: bold;
}

.liens-officier {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.liens-officier .bouton {
    text-align: center;
}

.tableau-membres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
    margin-top: 24px;
}

.carte-membre {
    min-width: 0;
}

.carte-membre h2,
.carte-membre p {
    overflow-wrap: anywhere;
}

.formulaire-membre {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(201, 164, 76, 0.25);
}

.formulaire-membre select,
.formulaire-membre button {
    width: 100%;
}

/* =====================================================
   ANNUAIRE DES MEMBRES
   ===================================================== */

.annuaire-page {
    padding-top: 35px;
    padding-bottom: 55px;
}

.annuaire-entete {
    margin-bottom: 30px;
    text-align: center;
}

.annuaire-sur-titre {
    color: var(--or);
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.annuaire-entete h1 {
    margin: 10px 0;
    color: #e3c477;
}

.annuaire-entete > p:last-child {
    color: #d0c5ad;
    line-height: 1.7;
}

.annuaire-statistiques {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 30px 0;
}

.annuaire-stat {
    min-width: 150px;
    padding: 20px 28px;
    text-align: center;
    background: rgba(25, 29, 25, 0.9);
    border: 1px solid #806b3e;
    border-radius: 8px;
}

.annuaire-stat-nombre {
    display: block;
    color: #e3c477;
    font-size: 2rem;
    font-weight: bold;
}

.annuaire-stat-label {
    display: block;
    margin-top: 5px;
    color: #d0c5ad;
}

.annuaire-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 25px 0 35px;
}

.bouton-annuaire {
    display: inline-block;
    padding: 12px 20px;
    color: #fff1c8;
    background: #675027;
    border: 1px solid #c6a45c;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.2s ease;
}

.bouton-annuaire:hover {
    color: #fff8e8;
    background: #846833;
}

.lien-annuaire {
    color: #e3c477;
    text-decoration: underline;
}

.annuaire-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 22px;
}

.annuaire-carte {
    min-width: 0;
    overflow: hidden;
    background: rgba(27, 29, 25, 0.96);
    border: 1px solid #665637;
    border-radius: 9px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

.annuaire-carte-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: rgba(113, 89, 45, 0.18);
    border-bottom: 1px solid #665637;
}

.annuaire-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: #e3c477;
    background: #252a23;
    border: 2px solid #c6a45c;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: bold;
}

.annuaire-identite {
    min-width: 0;
}

.annuaire-identite h2 {
    margin: 0 0 6px;
    color: #f0d38b;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.annuaire-role {
    color: #bcb19b;
    font-size: 0.85rem;
}

.annuaire-personnages {
    padding: 18px 20px;
}

.annuaire-personnages h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    color: #e3c477;
    font-size: 1rem;
}

.annuaire-personnages h3 span {
    padding: 3px 9px;
    color: #e3c477;
    background: #3b3a2d;
    border-radius: 12px;
    font-size: 0.8rem;
}

.annuaire-personnage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(198, 164, 92, 0.2);
}

.annuaire-personnage:last-child {
    border-bottom: none;
}

.annuaire-personnage-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.annuaire-personnage-info strong {
    color: #f0e5cc;
    overflow-wrap: anywhere;
}

.annuaire-personnage-info span {
    color: #bcb19b;
    font-size: 0.88rem;
}

.annuaire-niveau {
    flex-shrink: 0;
    color: #d9bd78;
    font-size: 0.85rem;
    white-space: nowrap;
}

.annuaire-sans-personnage {
    color: #bcb19b;
    font-size: 0.9rem;
    font-style: italic;
}

.annuaire-vide {
    padding: 35px 20px;
    color: #d0c5ad;
    text-align: center;
    border: 1px dashed #806b3e;
    border-radius: 8px;
}

.annuaire-vide h2 {
    color: #e3c477;
}

/* =====================================================
   GESTION DES CANDIDATURES
   ===================================================== */

.gestion-candidatures {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.candidatures-section {
    margin-top: 35px;
}

.candidature-carte {
    margin: 20px 0;
    padding: 24px;
    background: linear-gradient(145deg, #24231d, #17151d);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

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

.candidature-entete h3 {
    margin: 0 0 8px;
    color: var(--or-clair);
    overflow-wrap: anywhere;
}

.candidature-personnage {
    margin: 0;
    color: var(--texte-doux);
    overflow-wrap: anywhere;
}

.statut-candidature {
    display: inline-block;
    padding: 7px 12px;
    color: var(--texte);
    background: #35313b;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

.statut-pending {
    color: #ffdf91;
    background: rgba(125, 91, 25, 0.35);
    border: 1px solid rgba(240, 217, 149, 0.3);
}

.statut-accepted {
    color: #a8f0bd;
    background: rgba(32, 63, 44, 0.8);
    border: 1px solid rgba(116, 198, 157, 0.3);
}

.statut-rejected {
    color: #ffb5bd;
    background: rgba(74, 37, 43, 0.8);
    border: 1px solid rgba(214, 107, 94, 0.3);
}

.candidature-message {
    margin-top: 22px;
    padding: 16px;
    background: rgba(8, 8, 6, 0.35);
    border: 1px solid rgba(200, 168, 91, 0.18);
    border-radius: 6px;
}

.candidature-message h4 {
    margin-top: 0;
    color: var(--or-clair);
}

.candidature-message p {
    margin-bottom: 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: normal;
}

.candidature-date {
    margin: 15px 0 0;
    color: var(--texte-doux);
    font-size: 0.85rem;
}

.candidature-vide {
    padding: 30px;
    text-align: center;
    background: rgba(23, 21, 29, 0.8);
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.candidature-vide h3 {
    margin-top: 0;
}

.candidature-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.form-action-candidature {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin: 0;
}

.bouton-valider,
.bouton-supprimer {
    width: auto;
    margin-top: 0;
    padding: 12px 18px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.bouton-valider {
    background: #286b43;
    border-color: #4b9567;
}

.bouton-valider:hover {
    background: #348653;
    border-color: var(--emeraude-clair);
}

.bouton-supprimer {
    background: #8b2935;
    border-color: #b34b56;
}

.bouton-supprimer:hover {
    background: #b53242;
    border-color: #e06b76;
}

/* =====================================================
   RESPONSIVE — TABLETTES ET TELEPHONES
   ===================================================== */

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

    .hero {
        min-height: 420px;
        padding: 50px 18px;
    }

    .hero::before {
        left: -65px;
    }

    .hero::after {
        right: -65px;
    }

    .section-entete {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .section-entete > a {
        padding-bottom: 0;
    }

    .element-accueil {
        flex-wrap: wrap;
        gap: 12px;
    }

    .element-infos {
        flex-basis: calc(100% - 90px);
    }

    .lien-element {
        margin-left: 80px;
    }

    .liens-officier {
        flex-direction: column;
    }

    .liens-officier .bouton {
        width: 100%;
    }
}

@media (max-width: 650px) {
    header {
        padding: 18px 12px;
    }

    .logo {
        letter-spacing: 3px;
    }

    nav {
        gap: 4px;
    }

    nav a,
    nav button {
        padding: 8px 10px;
        font-size: 0.88rem;
    }

    main {
        width: calc(100% - 24px);
        padding-top: 28px;
    }

    .carte-formulaire,
    .carte-personnage,
    .liste-annonces article {
        padding: 18px;
    }

    h1 {
        letter-spacing: 1px;
    }

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

    button,
    input[type="submit"] {
        max-width: 100%;
    }

    .annuaire-page {
        padding-top: 20px;
    }

    .annuaire-stat {
        flex: 1;
        min-width: 120px;
        padding: 16px 12px;
    }

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

    .gestion-candidatures {
        padding: 20px 0 40px;
    }

    .candidature-carte {
        padding: 18px;
    }

    .candidature-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-action-candidature {
        display: flex;
        width: 100%;
    }

    .bouton-valider,
    .bouton-supprimer {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .bouton {
        width: 100%;
        text-align: center;
    }

    .annonce-accueil {
        padding: 15px;
    }

    .annuaire-personnage {
        align-items: flex-start;
    }

    .statut-candidature {
        font-size: 0.82rem;
    }
}

/* 14. ACCESSIBILITE : LIMITER LES ANIMATIONS */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.bouton-supprimer {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 14px;
    background: #762b32;
    color: #fff;
    border: 1px solid #a94750;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bouton-supprimer:hover {
    background: #a8323d;
    transform: translateY(-1px);
}

.bouton-supprimer:focus-visible {
    outline: 2px solid #f3c969;
    outline-offset: 3px;
}

/* =========================================
   ESPACE MEMBRE - LOTUS NOIR
========================================= */

.espace-membre-page {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 45px 0 70px;
    color: #eee9f4;
}

.espace-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 270px;
    padding: 45px;
    overflow: hidden;
    border: 1px solid rgba(192, 155, 238, 0.25);
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 85% 20%, rgba(117, 65, 159, 0.24), transparent 45%),
        linear-gradient(135deg, #21182d, #14121b 75%);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.espace-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -170px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(211, 179, 248, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(211, 179, 248, 0.025),
        0 0 0 58px rgba(211, 179, 248, 0.025);
    pointer-events: none;
}

.espace-hero-contenu {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.espace-eyebrow,
.espace-surtitre {
    color: #c5a0eb;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.espace-hero h1 {
    margin: 18px 0 14px;
    color: #f4e8d0;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.espace-hero p {
    max-width: 570px;
    margin: 0;
    color: #c9c0d3;
    font-size: 1.02rem;
    line-height: 1.8;
}

.espace-embleme {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 145px;
    height: 175px;
    color: #e0bf84;
    border: 1px solid rgba(224, 191, 132, 0.4);
    border-radius: 70px 70px 24px 24px;
    background: rgba(15, 12, 22, 0.42);
    box-shadow: inset 0 0 35px rgba(159, 103, 208, 0.08);
}

.espace-embleme div {
    font-size: 3.8rem;
    line-height: 1.2;
}

.espace-embleme span {
    font-size: 0.8rem;
}

.espace-profil-section,
.espace-raccourcis-section {
    margin-top: 42px;
}

.espace-section-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.espace-section-titre h2 {
    margin: 8px 0 0;
    color: #f0e7f8;
    font-size: 1.65rem;
}

.espace-profil-carte {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 27px;
    border: 1px solid #393044;
    border-radius: 16px;
    background: linear-gradient(125deg, #1d1925, #17141d);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
}

.espace-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 1px solid #9b75c4;
    border-radius: 18px;
    background: linear-gradient(145deg, #4a3064, #272031);
    color: #f4dfb2;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.035);
}

.espace-profil-infos {
    min-width: 0;
    flex: 1;
}

.espace-profil-infos h3 {
    margin: 0;
    color: #f4e8d0;
    font-size: 1.45rem;
    overflow-wrap: anywhere;
}

.espace-profil-infos > p {
    margin: 7px 0 15px;
    color: #b8adbf;
}

.espace-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.espace-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid #453951;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.espace-role {
    color: #d9b8ff;
    background: rgba(128, 79, 167, 0.14);
}

.espace-actif {
    color: #a7e8bd;
    border-color: rgba(90, 174, 117, 0.3);
    background: rgba(49, 112, 69, 0.15);
}

.espace-inactif {
    color: #f0ce91;
    border-color: rgba(208, 164, 86, 0.3);
    background: rgba(133, 94, 36, 0.15);
}

.espace-point {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.espace-profil-symbole {
    color: #6e587f;
    font-size: 2.6rem;
}

.espace-raccourcis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.espace-raccourci {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #352c40;
    border-radius: 15px;
    background: #1b1722;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.espace-raccourci:hover {
    transform: translateY(-3px);
    border-color: #8865a9;
    background: #231b2d;
}

.espace-raccourci-icone {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #473650;
    border-radius: 13px;
    background: #2a2034;
    color: #d8b7f4;
    font-size: 1.45rem;
}

.espace-raccourci-texte {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.espace-raccourci-texte strong {
    color: #eee4f6;
    font-size: 0.98rem;
}

.espace-raccourci-texte small {
    color: #b5aabd;
    font-size: 0.85rem;
    line-height: 1.5;
}

.espace-fleche {
    flex-shrink: 0;
    color: #c8a1eb;
    font-size: 1.3rem;
    transition: transform 0.2s ease;
}

.espace-raccourci:hover .espace-fleche {
    transform: translateX(4px);
}

.espace-raccourci-officier {
    border-color: rgba(196, 158, 91, 0.3);
}

.espace-raccourci-officier .espace-raccourci-icone {
    color: #e7ca8d;
    border-color: #5a4930;
    background: #302719;
}

.espace-message-final {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 42px;
    padding: 26px;
    border-top: 1px solid #352c40;
    text-align: center;
}

.espace-message-final > span {
    color: #d9b477;
    font-size: 1.5rem;
}

.espace-message-final p {
    margin: 0;
    color: #bdb2c7;
    line-height: 1.8;
}

.espace-message-final strong {
    color: #e8d1a6;
}

/* Adaptation aux téléphones et tablettes */
@media (max-width: 760px) {
    .espace-membre-page {
        width: min(100% - 28px, 560px);
        padding-top: 25px;
    }

    .espace-hero {
        min-height: auto;
        padding: 30px 24px;
    }

    .espace-embleme {
        width: 85px;
        height: 110px;
    }

    .espace-embleme div {
        font-size: 2.5rem;
    }

    .espace-raccourcis {
        grid-template-columns: 1fr;
    }

    .espace-profil-carte {
        padding: 20px;
        gap: 15px;
    }

    .espace-profil-symbole {
        display: none;
    }
}

@media (max-width: 480px) {
    .espace-hero {
        padding: 27px 21px;
    }

    .espace-embleme {
        display: none;
    }

    .espace-hero h1 {
        font-size: 2.1rem;
    }

    .espace-profil-carte {
        align-items: flex-start;
        flex-direction: column;
    }

    .espace-raccourci {
        padding: 17px;
        gap: 12px;
    }

    .espace-raccourci-icone {
        width: 42px;
        height: 42px;
    }
}

/* =========================================
   LOTUS NOIR — REGISTRE DES PERSONNAGES
   ========================================= */

.personnages-page {
    --pers-or: #d6b56d;
    --pers-or-clair: #f1dba0;
    --pers-violet: #8d6acb;
    --pers-fond: #100f17;
    --pers-carte: #191722;
    --pers-bordure: rgba(214, 181, 109, 0.2);
    max-width: 1440px;
    margin: 0 auto;
    padding: 35px 28px 75px;
    color: #eee9f5;
}

/* Bannière principale */

.personnages-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 300px;
    display: flex;
    align-items: center;
    padding: 48px 55px;
    margin-bottom: 30px;
    border: 1px solid var(--pers-bordure);
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(126, 76, 180, 0.24), transparent 42%),
        radial-gradient(ellipse at 10% 100%, rgba(104, 70, 151, 0.16), transparent 45%),
        linear-gradient(120deg, #211b30 0%, #17141f 55%, #121119 100%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.personnages-hero::before,
.personnages-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(214, 181, 109, 0.13);
    border-radius: 50%;
}

.personnages-hero::before {
    width: 360px;
    height: 360px;
    right: -75px;
    top: -125px;
}

.personnages-hero::after {
    width: 250px;
    height: 250px;
    right: -20px;
    top: -70px;
}

.personnages-hero-contenu {
    max-width: 720px;
}

.personnages-surtitre,
.panneau-surtitre {
    display: block;
    margin-bottom: 12px;
    color: var(--pers-or);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.personnages-hero h1 {
    margin: 0 0 15px;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.personnages-hero p {
    max-width: 590px;
    margin: 0;
    color: #c3b9d1;
    font-size: 1.02rem;
    line-height: 1.8;
}

.personnages-hero-ornement {
    position: absolute;
    top: 45px;
    right: 10%;
    display: grid;
    width: 130px;
    height: 130px;
    place-items: center;
    color: rgba(214, 181, 109, 0.65);
    font-size: 6rem;
    text-shadow: 0 0 45px rgba(141, 106, 203, 0.55);
}

.personnages-statistiques {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 30px;
}

.personnage-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-valeur {
    color: var(--pers-or-clair);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: bold;
}

.stat-libelle {
    color: #aaa0ba;
    font-size: 0.77rem;
}

.stat-separateur {
    width: 1px;
    height: 38px;
    background: rgba(214, 181, 109, 0.25);
}

/* Messages */

.personnages-alerte {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 15px 18px;
    border: 1px solid;
    border-radius: 10px;
    line-height: 1.5;
}

.personnages-alerte.succes {
    color: #c5efd1;
    background: rgba(49, 125, 76, 0.12);
    border-color: rgba(104, 196, 130, 0.35);
}

.personnages-alerte.erreur {
    color: #ffc8c8;
    background: rgba(155, 49, 62, 0.13);
    border-color: rgba(235, 103, 116, 0.35);
}

.alerte-icone {
    display: grid;
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.07);
}

/* Mise en page */

.personnages-layout {
    display: grid;
    grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
    align-items: start;
    gap: 25px;
}

.personnages-panneau,
.personnages-vide {
    border: 1px solid var(--pers-bordure);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(37, 31, 49, 0.95), rgba(22, 20, 30, 0.98));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.personnages-panneau {
    padding: 25px;
}

.panneau-entete {
    display: flex;
    align-items: center;
    gap: 14px;
}

.panneau-icone {
    display: grid;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.35);
    border-radius: 12px;
    color: var(--pers-or-clair);
    background: rgba(214, 181, 109, 0.08);
    font-size: 1.5rem;
}

.panneau-entete .panneau-surtitre,
.registre-entete .panneau-surtitre {
    margin-bottom: 5px;
    font-size: 0.65rem;
    letter-spacing: 2px;
}

.panneau-entete h2,
.registre-entete h2 {
    margin: 0;
    color: #f6efff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    line-height: 1.35;
}

.panneau-description {
    margin: 20px 0 25px;
    color: #aaa2b8;
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Formulaire */

.form-personnage {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.champ-personnage {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.champ-personnage label {
    color: #e7dff1;
    font-size: 0.86rem;
    font-weight: 700;
}

.champ-personnage input,
.champ-personnage select {
    box-sizing: border-box;
    width: 100%;
    min-height: 49px;
    padding: 12px 14px;
    border: 1px solid rgba(181, 159, 208, 0.22);
    border-radius: 9px;
    outline: none;
    color: #f6efff;
    background: #121019;
    font: inherit;
    font-size: 0.92rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.champ-personnage input::placeholder {
    color: #71677f;
}

.champ-personnage select option {
    color: #f6efff;
    background: #191622;
}

.champ-personnage input:focus,
.champ-personnage select:focus {
    border-color: var(--pers-violet);
    box-shadow: 0 0 0 3px rgba(141, 106, 203, 0.15);
}

.champ-personnage small {
    color: #8f859e;
    font-size: 0.76rem;
    line-height: 1.5;
}

.niveau-input-wrapper {
    position: relative;
}

.niveau-input-wrapper input {
    padding-right: 55px;
}

.niveau-input-wrapper > span {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #8e829f;
    font-size: 0.85rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.bouton-ajouter-personnage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 18px;
    border: 1px solid #e4c57f;
    border-radius: 9px;
    color: #21182b;
    background: linear-gradient(135deg, #f0d99d, #c49b52);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(196, 155, 82, 0.12);
    transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}

.bouton-ajouter-personnage span {
    font-size: 1.25rem;
}

.bouton-ajouter-personnage:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(196, 155, 82, 0.2);
}

.bouton-ajouter-personnage:focus-visible {
    outline: 3px solid #bda0f3;
    outline-offset: 3px;
}

.formulaire-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(181, 159, 208, 0.12);
    color: #8f859e;
    font-size: 0.78rem;
    line-height: 1.6;
}

.formulaire-note span {
    color: var(--pers-or);
}

/* Registre */

.personnages-registre {
    min-width: 0;
}

.registre-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 4px 0 20px;
}

.registre-compteur {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--pers-bordure);
    border-radius: 30px;
    color: var(--pers-or-clair);
    background: rgba(214, 181, 109, 0.06);
    font-size: 0.78rem;
    font-weight: 700;
}

.grille-personnages-pro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

/* Carte d'un héros */

.carte-personnage-pro {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 21px;
    border: 1px solid rgba(181, 159, 208, 0.18);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(126, 76, 180, 0.13), transparent 55%),
        linear-gradient(145deg, #211d2b, #17151e);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.carte-personnage-pro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #9272c6, var(--pers-or), transparent);
    opacity: 0.75;
}

.carte-personnage-pro:hover {
    transform: translateY(-4px);
    border-color: rgba(214, 181, 109, 0.42);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}

.carte-personnage-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.embleme-classe {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.35);
    border-radius: 15px;
    color: var(--pers-or-clair);
    background: linear-gradient(145deg, rgba(141, 106, 203, 0.2), rgba(214, 181, 109, 0.07));
    font-size: 2rem;
    box-shadow: inset 0 0 20px rgba(141, 106, 203, 0.08);
}

.personnage-niveau {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.personnage-niveau span {
    color: #9588a7;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.personnage-niveau strong {
    color: var(--pers-or-clair);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.1rem;
    line-height: 1.15;
}

.carte-personnage-infos {
    margin: 20px 0 22px;
}

.carte-personnage-infos h3 {
    overflow-wrap: anywhere;
    margin: 0 0 6px;
    color: #fff6e7;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.carte-personnage-infos p {
    margin: 0;
    color: #b4a5ce;
    font-size: 0.88rem;
}

.progression-niveau {
    margin-bottom: 19px;
}

.progression-libelles {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
    color: #a69bb4;
    font-size: 0.72rem;
}

.progression-piste {
    overflow: hidden;
    height: 6px;
    border-radius: 20px;
    background: #0d0c12;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.progression-remplissage {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7652b1, #a88ad9, #e0c47d);
    box-shadow: 0 0 10px rgba(141, 106, 203, 0.35);
}

.carte-personnage-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(181, 159, 208, 0.12);
    color: #9a91a7;
    font-size: 0.68rem;
}

.carte-personnage-bas > span:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
}

.statut-point {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #83c99b;
    box-shadow: 0 0 8px rgba(131, 201, 155, 0.45);
}

.personnage-id {
    color: #786d87;
    font-variant-numeric: tabular-nums;
}

/* État vide */

.personnages-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 310px;
    padding: 35px;
    text-align: center;
    border-style: dashed;
}

.vide-embleme {
    display: grid;
    width: 78px;
    height: 78px;
    margin-bottom: 20px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.3);
    border-radius: 50%;
    color: var(--pers-or);
    background: rgba(214, 181, 109, 0.06);
    font-size: 2.3rem;
}

.personnages-vide h3 {
    margin: 0 0 10px;
    color: #f3e8ff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.personnages-vide p {
    max-width: 390px;
    margin: 0;
    color: #a99fb7;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* Adaptation mobile */

@media (max-width: 1050px) {
    .personnages-layout {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
        gap: 18px;
    }

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

    .personnages-hero {
        padding: 38px;
    }

    .personnages-hero-ornement {
        right: 4%;
        opacity: 0.55;
    }
}

@media (max-width: 760px) {
    .personnages-page {
        padding: 22px 14px 45px;
    }

    .personnages-hero {
        min-height: auto;
        padding: 32px 23px;
        border-radius: 14px;
    }

    .personnages-hero h1 {
        font-size: 2.4rem;
    }

    .personnages-hero p {
        font-size: 0.93rem;
    }

    .personnages-hero-ornement {
        top: 15px;
        right: -20px;
        font-size: 4.5rem;
        opacity: 0.25;
    }

    .personnages-statistiques {
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 25px;
    }

    .stat-valeur {
        font-size: 1.4rem;
    }

    .stat-libelle {
        max-width: 100px;
        line-height: 1.5;
    }

    .personnages-layout {
        grid-template-columns: 1fr;
    }

    .personnages-panneau {
        padding: 21px;
    }

    .grille-personnages-pro {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .carte-personnage-pro {
        padding: 15px;
    }

    .embleme-classe {
        width: 49px;
        height: 49px;
        font-size: 1.6rem;
    }

    .personnage-niveau strong {
        font-size: 1.7rem;
    }

    .carte-personnage-infos h3 {
        font-size: 1.12rem;
    }

    .carte-personnage-bas {
        flex-wrap: wrap;
    }
}

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

    .registre-entete {
        align-items: flex-start;
    }

    .registre-entete h2 {
        font-size: 1.2rem;
    }

    .personnages-statistiques {
        gap: 12px;
    }

    .stat-separateur {
        height: 30px;
    }
}

/* ==========================================
   LOTUS NOIR — ANNUAIRE DES MEMBRES
   ========================================== */

.annuaire-page {
    --ann-or: #d6b56d;
    --ann-or-clair: #f1dba0;
    --ann-violet: #9a78d0;
    --ann-fond: #100f17;
    --ann-carte: #1c1925;
    --ann-texte: #f1ebf8;
    --ann-secondaire: #a99fb7;
    --ann-bordure: rgba(214, 181, 109, 0.2);

    box-sizing: border-box;
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 35px 28px 65px;
    color: var(--ann-texte);
}

/* Bannière */

.annuaire-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 48px 52px;
    margin-bottom: 30px;
    border: 1px solid var(--ann-bordure);
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 90% 15%, rgba(139, 94, 194, 0.23), transparent 38%),
        radial-gradient(ellipse at 0% 100%, rgba(104, 70, 151, 0.15), transparent 42%),
        linear-gradient(125deg, #251d34, #191520 60%, #121119);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.23);
}

.annuaire-hero::before,
.annuaire-hero::after {
    position: absolute;
    z-index: -1;
    content: "";
    border: 1px solid rgba(214, 181, 109, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.annuaire-hero::before {
    top: -155px;
    right: -40px;
    width: 390px;
    height: 390px;
}

.annuaire-hero::after {
    top: -105px;
    right: 10px;
    width: 290px;
    height: 290px;
}

.annuaire-hero-contenu {
    max-width: 800px;
}

.annuaire-sur-titre {
    display: block;
    margin-bottom: 12px;
    color: var(--ann-or);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 3px;
}

.annuaire-hero h1 {
    margin: 0 0 15px;
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1.15;
}

.annuaire-hero-contenu > p {
    max-width: 610px;
    margin: 0;
    color: #c1b6d0;
    font-size: 0.98rem;
    line-height: 1.85;
}

.annuaire-hero-rune {
    position: absolute;
    top: 48px;
    right: 11%;
    color: rgba(214, 181, 109, 0.58);
    font-size: 6.5rem;
    text-shadow: 0 0 40px rgba(154, 120, 208, 0.35);
}

/* Statistiques */

.annuaire-statistiques {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 32px;
}

.annuaire-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.annuaire-stat-icone {
    display: grid;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.28);
    border-radius: 12px;
    color: var(--ann-or-clair);
    background: rgba(214, 181, 109, 0.07);
    font-size: 1.35rem;
}

.annuaire-stat > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.annuaire-stat-nombre {
    color: var(--ann-or-clair);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    line-height: 1.1;
}

.annuaire-stat-label {
    color: #a99fb7;
    font-size: 0.75rem;
}

.annuaire-stat-separateur {
    width: 1px;
    height: 38px;
    background: rgba(214, 181, 109, 0.24);
}

/* Barre d'actions */

.annuaire-barre-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 0 23px;
}

.annuaire-introduction {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e4d9ef;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.annuaire-pastille {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #83c99b;
    box-shadow: 0 0 12px rgba(131, 201, 155, 0.55);
}

.annuaire-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
}

.bouton-annuaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 11px 17px;
    border: 1px solid #dfc27f;
    border-radius: 9px;
    color: #251b2c;
    background: linear-gradient(135deg, #f0d99d, #c49b52);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s, filter 0.2s;
}

.bouton-annuaire:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.bouton-annuaire span {
    font-size: 1.15rem;
}

.lien-annuaire {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c7b5e5;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.lien-annuaire:hover {
    color: var(--ann-or-clair);
}

.lien-annuaire span {
    font-size: 1.15rem;
}

/* Grille */

.annuaire-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

/* Carte membre */

.annuaire-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(181, 159, 208, 0.18);
    border-radius: 15px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(126, 76, 180, 0.1), transparent 48%),
        linear-gradient(145deg, #211d2b, #17151e);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.17);
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.annuaire-carte::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, #9171c2, var(--ann-or), transparent);
    opacity: 0.8;
}

.annuaire-carte:hover {
    transform: translateY(-4px);
    border-color: rgba(214, 181, 109, 0.4);
    box-shadow: 0 17px 35px rgba(0, 0, 0, 0.25);
}

/* Identité */

.annuaire-carte-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 23px 21px 21px;
    border-bottom: 1px solid rgba(181, 159, 208, 0.12);
}

.annuaire-avatar {
    position: relative;
    display: grid;
    flex-shrink: 0;
    width: 61px;
    height: 61px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.43);
    border-radius: 16px;
    color: #f5dfa4;
    background: linear-gradient(145deg, #463453, #211b2b);
    box-shadow: inset 0 0 20px rgba(154, 120, 208, 0.1);
}

.annuaire-avatar > span {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.85rem;
    font-weight: 700;
}

.annuaire-avatar > i {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid #5a4930;
    border-radius: 50%;
    color: #f2d88d;
    background: #211b29;
    font-size: 0.65rem;
    font-style: normal;
}

.role-avatar-officer {
    border-color: rgba(160, 133, 225, 0.55);
    background: linear-gradient(145deg, #47365f, #211b2b);
    color: #d7c1ff;
}

.role-avatar-admin {
    border-color: rgba(231, 190, 104, 0.7);
    background: linear-gradient(145deg, #584126, #211b25);
    color: #ffe2a0;
}

.annuaire-identite {
    flex: 1;
    min-width: 0;
}

.annuaire-membre-label {
    display: block;
    margin-bottom: 5px;
    color: #9689a8;
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.annuaire-identite h2 {
    overflow-wrap: anywhere;
    margin: 0 0 9px;
    color: #fff6e8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.23rem;
    line-height: 1.3;
}

.annuaire-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(181, 159, 208, 0.2);
    border-radius: 6px;
    color: #c9bbdc;
    background: rgba(181, 159, 208, 0.06);
    font-size: 0.69rem;
    font-weight: 700;
}

.role-officer {
    border-color: rgba(154, 120, 208, 0.32);
    color: #cbb5f4;
    background: rgba(154, 120, 208, 0.1);
}

.role-admin {
    border-color: rgba(214, 181, 109, 0.33);
    color: #f0d493;
    background: rgba(214, 181, 109, 0.08);
}

.annuaire-membre-embleme {
    align-self: flex-start;
    margin-left: auto;
    color: rgba(214, 181, 109, 0.45);
    font-size: 1.3rem;
}

/* Liste des personnages */

.annuaire-personnages {
    flex: 1;
    padding: 19px 21px;
}

.annuaire-personnages-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.annuaire-personnages-entete h3 {
    margin: 0;
    color: #e7dff1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
}

.annuaire-personnages-compteur {
    display: grid;
    min-width: 27px;
    height: 27px;
    padding: 0 6px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.24);
    border-radius: 8px;
    color: var(--ann-or-clair);
    background: rgba(214, 181, 109, 0.07);
    font-size: 0.76rem;
    font-weight: 800;
}

.annuaire-liste-personnages {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.annuaire-personnage {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(181, 159, 208, 0.1);
    border-radius: 10px;
    background: rgba(12, 11, 17, 0.38);
    transition: border-color 0.2s, background 0.2s;
}

.annuaire-personnage:hover {
    border-color: rgba(154, 120, 208, 0.3);
    background: rgba(154, 120, 208, 0.05);
}

.annuaire-classe-icone {
    display: grid;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid rgba(154, 120, 208, 0.28);
    border-radius: 9px;
    color: #d5bdf5;
    background: rgba(115, 79, 160, 0.12);
    font-size: 1.25rem;
}

.annuaire-personnage-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.annuaire-personnage-info strong {
    overflow-wrap: anywhere;
    color: #f0e8fa;
    font-size: 0.86rem;
    line-height: 1.35;
}

.annuaire-personnage-info > span {
    color: #9e91b0;
    font-size: 0.73rem;
}

.annuaire-niveau {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 40px;
    padding: 6px 5px;
    border: 1px solid rgba(181, 159, 208, 0.14);
    border-radius: 7px;
    background: rgba(181, 159, 208, 0.04);
}

.annuaire-niveau > span {
    color: #8e829e;
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.annuaire-niveau strong {
    color: #d7c8ee;
    font-size: 0.95rem;
}

.annuaire-niveau.niveau-max {
    border-color: rgba(214, 181, 109, 0.35);
    background: rgba(214, 181, 109, 0.08);
}

.annuaire-niveau.niveau-max strong {
    color: var(--ann-or-clair);
}

/* Aucun personnage */

.annuaire-sans-personnage {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 12px;
    border: 1px dashed rgba(181, 159, 208, 0.2);
    border-radius: 9px;
    background: rgba(12, 11, 17, 0.2);
}

.annuaire-sans-personnage > span {
    color: var(--ann-or);
}

.annuaire-sans-personnage p {
    margin: 0;
    color: #a59aaf;
    font-size: 0.8rem;
    line-height: 1.65;
}

/* Pied des cartes */

.annuaire-carte-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 21px;
    border-top: 1px solid rgba(181, 159, 208, 0.12);
    background: rgba(0, 0, 0, 0.1);
}

.annuaire-carte-pied > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9d92a9;
    font-size: 0.68rem;
}

.annuaire-carte-pied > span:first-child i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #83c99b;
    box-shadow: 0 0 8px rgba(131, 201, 155, 0.35);
}

.annuaire-carte-signature {
    color: #7e718d;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1.4px;
}

/* Message d'erreur */

.annuaire-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border: 1px solid rgba(235, 103, 116, 0.35);
    border-radius: 10px;
    color: #ffc8ce;
    background: rgba(155, 49, 62, 0.12);
}

.annuaire-message > span {
    display: grid;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: rgba(235, 103, 116, 0.12);
    font-weight: 800;
}

/* Annuaire vide */

.annuaire-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 55px 25px;
    border: 1px dashed rgba(214, 181, 109, 0.25);
    border-radius: 15px;
    background:
        radial-gradient(ellipse at center, rgba(126, 76, 180, 0.1), transparent 65%),
        #17141e;
    text-align: center;
}

.annuaire-vide-embleme {
    display: grid;
    width: 82px;
    height: 82px;
    margin-bottom: 23px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.32);
    border-radius: 50%;
    color: var(--ann-or-clair);
    background: rgba(214, 181, 109, 0.06);
    font-size: 2.5rem;
}

.annuaire-vide .annuaire-sur-titre {
    font-size: 0.65rem;
}

.annuaire-vide h2 {
    margin: 0 0 12px;
    color: #f5eafa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
}

.annuaire-vide p {
    max-width: 470px;
    margin: 0;
    color: #a99fb7;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* Signature de guilde */

.annuaire-bas-de-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
    color: #857790;
    text-align: center;
}

.annuaire-bas-de-page p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92rem;
    font-style: italic;
}

.annuaire-bas-de-page > span {
    color: rgba(214, 181, 109, 0.6);
    font-size: 0.8rem;
}

/* Accessibilité clavier */

.annuaire-page a:focus-visible {
    outline: 2px solid #c6a4f4;
    outline-offset: 4px;
}

/* Tablettes */

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

    .annuaire-hero-rune {
        right: 5%;
        opacity: 0.6;
    }
}

/* Mobiles */

@media (max-width: 650px) {
    .annuaire-page {
        padding: 22px 14px 45px;
    }

    .annuaire-hero {
        padding: 32px 23px;
        border-radius: 14px;
    }

    .annuaire-hero h1 {
        font-size: 2.25rem;
    }

    .annuaire-hero-contenu > p {
        font-size: 0.9rem;
    }

    .annuaire-hero-rune {
        top: 15px;
        right: -15px;
        font-size: 4rem;
        opacity: 0.25;
    }

    .annuaire-statistiques {
        gap: 18px;
        margin-top: 25px;
    }

    .annuaire-stat-separateur {
        display: none;
    }

    .annuaire-stat {
        gap: 9px;
    }

    .annuaire-stat-icone {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .annuaire-stat-nombre {
        font-size: 1.3rem;
    }

    .annuaire-stat-label {
        max-width: 90px;
        font-size: 0.68rem;
        line-height: 1.4;
    }

    .annuaire-barre-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .annuaire-actions {
        width: 100%;
        justify-content: space-between;
    }

    .annuaire-grille {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .annuaire-carte-entete {
        padding: 20px;
    }

    .annuaire-personnages {
        padding: 18px 20px;
    }

    .annuaire-carte-pied {
        padding: 13px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .annuaire-carte,
    .annuaire-personnage,
    .bouton-annuaire,
    .lien-annuaire {
        transition: none;
    }
}

/* ==========================================
   LOTUS NOIR — PANNEAU DE GUILDE
   ========================================== */

.annonces-page {
    --anc-or: #d6b56d;
    --anc-or-clair: #f1dba0;
    --anc-violet: #9a78d0;
    --anc-texte: #f1ebf8;
    --anc-secondaire: #aaa0b8;
    --anc-bordure: rgba(214, 181, 109, 0.2);

    box-sizing: border-box;
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 35px 28px 65px;
    color: var(--anc-texte);
}

/* Bannière */

.annonces-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 48px 52px;
    margin-bottom: 25px;
    border: 1px solid var(--anc-bordure);
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 88% 15%, rgba(141, 106, 203, 0.25), transparent 40%),
        radial-gradient(ellipse at 0% 100%, rgba(104, 70, 151, 0.16), transparent 45%),
        linear-gradient(125deg, #251d34, #191520 60%, #121119);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.23);
}

.annonces-hero::before,
.annonces-hero::after {
    position: absolute;
    z-index: -1;
    content: "";
    border: 1px solid rgba(214, 181, 109, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

.annonces-hero::before {
    top: -155px;
    right: -35px;
    width: 390px;
    height: 390px;
}

.annonces-hero::after {
    top: -105px;
    right: 15px;
    width: 290px;
    height: 290px;
}

.annonces-hero-contenu {
    max-width: 800px;
}

.annonces-surtitre,
.annonces-mini-titre {
    display: block;
    margin-bottom: 10px;
    color: var(--anc-or);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.annonces-hero h1 {
    margin: 0 0 15px;
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    letter-spacing: -1px;
    line-height: 1.15;
}

.annonces-hero-contenu > p {
    max-width: 620px;
    margin: 0;
    color: #c1b6d0;
    font-size: 0.98rem;
    line-height: 1.85;
}

.annonces-hero-rune {
    position: absolute;
    top: 45px;
    right: 11%;
    color: rgba(214, 181, 109, 0.6);
    font-size: 6rem;
    text-shadow: 0 0 40px rgba(154, 120, 208, 0.4);
}

.annonces-hero-infos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    color: #b0a4bf;
    font-size: 0.78rem;
}

.annonces-indicateur {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.annonces-indicateur i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #83c99b;
    box-shadow: 0 0 10px rgba(131, 201, 155, 0.45);
}

.annonces-hero-separateur {
    width: 1px;
    height: 20px;
    background: rgba(214, 181, 109, 0.3);
}

/* Alertes */

.annonces-alerte {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px 18px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.annonces-alerte.succes {
    color: #c5efd1;
    border-color: rgba(104, 196, 130, 0.35);
    background: rgba(49, 125, 76, 0.12);
}

.annonces-alerte.erreur {
    color: #ffc8ce;
    border-color: rgba(235, 103, 116, 0.35);
    background: rgba(155, 49, 62, 0.13);
}

.annonces-alerte-icone {
    display: grid;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    font-weight: 800;
}

/* Mise en page */

.annonces-layout {
    display: grid;
    grid-template-columns: minmax(280px, 355px) minmax(0, 1fr);
    align-items: start;
    gap: 25px;
}

.annonces-colonne-formulaire {
    min-width: 0;
}

.annonces-formulaire {
    padding: 25px;
    border: 1px solid var(--anc-bordure);
    border-radius: 15px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(126, 76, 180, 0.12), transparent 48%),
        linear-gradient(145deg, #211d2b, #17151e);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.annonces-formulaire-entete {
    display: flex;
    align-items: center;
    gap: 13px;
}

.annonces-formulaire-embleme {
    display: grid;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.35);
    border-radius: 12px;
    color: var(--anc-or-clair);
    background: rgba(214, 181, 109, 0.08);
    font-size: 1.5rem;
}

.annonces-formulaire-entete .annonces-mini-titre {
    margin-bottom: 5px;
    font-size: 0.62rem;
    letter-spacing: 1.7px;
}

.annonces-formulaire-entete h2 {
    margin: 0;
    color: #f6efff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    line-height: 1.3;
}

.annonces-formulaire-description {
    margin: 20px 0 24px;
    color: var(--anc-secondaire);
    font-size: 0.88rem;
    line-height: 1.75;
}

/* Champs */

.annonces-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.annonces-champ {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.annonces-champ label {
    color: #e7dff1;
    font-size: 0.85rem;
    font-weight: 700;
}

.annonces-champ input,
.annonces-champ textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(181, 159, 208, 0.22);
    border-radius: 9px;
    outline: none;
    color: #f6efff;
    background: #121019;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.65;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.annonces-champ input {
    min-height: 48px;
}

.annonces-champ textarea {
    min-height: 180px;
    resize: vertical;
}

.annonces-champ input::placeholder,
.annonces-champ textarea::placeholder {
    color: #776c85;
}

.annonces-champ input:focus,
.annonces-champ textarea:focus {
    border-color: var(--anc-violet);
    box-shadow: 0 0 0 3px rgba(154, 120, 208, 0.14);
}

.annonces-champ small {
    color: #92869f;
    font-size: 0.73rem;
    line-height: 1.5;
}

.annonces-bouton-publier {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 49px;
    padding: 13px 17px;
    border: 1px solid #e4c57f;
    border-radius: 9px;
    color: #251b2c;
    background: linear-gradient(135deg, #f0d99d, #c49b52);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}

.annonces-bouton-publier span {
    font-size: 1.1rem;
}

.annonces-bouton-publier:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(196, 155, 82, 0.17);
}

.annonces-bouton-publier:focus-visible {
    outline: 3px solid #bda0f3;
    outline-offset: 3px;
}

.annonces-note-privee {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid rgba(181, 159, 208, 0.13);
    color: #9a8eaa;
    font-size: 0.74rem;
    line-height: 1.7;
}

.annonces-note-privee > span {
    color: var(--anc-or);
}

/* Fil d'annonces */

.annonces-fil {
    min-width: 0;
}

.annonces-fil-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 4px 0 20px;
}

.annonces-fil-entete .annonces-mini-titre {
    margin-bottom: 6px;
    font-size: 0.64rem;
    letter-spacing: 2px;
}

.annonces-fil-entete h2 {
    margin: 0;
    color: #f6efff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
}

.annonces-compteur {
    display: grid;
    flex-shrink: 0;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid var(--anc-bordure);
    border-radius: 10px;
    color: var(--anc-or-clair);
    background: rgba(214, 181, 109, 0.07);
    font-size: 0.82rem;
    font-weight: 800;
}

/* Cartes d'annonces */

.annonces-liste {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.annonce-carte {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(181, 159, 208, 0.18);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(126, 76, 180, 0.1), transparent 45%),
        linear-gradient(145deg, #211d2b, #17151e);
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.16);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.annonce-carte::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, #9171c2, var(--anc-or), transparent);
    opacity: 0.75;
}

.annonce-carte:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 181, 109, 0.34);
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.22);
}

.annonce-carte-bandeau {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 23px;
    border-bottom: 1px solid rgba(181, 159, 208, 0.12);
}

.annonce-carte-icone {
    display: grid;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.32);
    border-radius: 12px;
    color: var(--anc-or-clair);
    background: rgba(214, 181, 109, 0.07);
    font-size: 1.35rem;
}

.annonce-carte-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.annonce-categorie {
    color: #c4a9ec;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.annonce-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: #9f93ae;
    font-size: 0.76rem;
}

.annonce-date > span {
    color: var(--anc-or);
    font-size: 1rem;
}

.annonce-badge-recente {
    flex-shrink: 0;
    padding: 6px 9px;
    border: 1px solid rgba(131, 201, 155, 0.24);
    border-radius: 6px;
    color: #a5ddb7;
    background: rgba(131, 201, 155, 0.07);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Texte de l'annonce */

.annonce-carte-corps {
    padding: 24px 25px 26px;
}

.annonce-carte-corps h3 {
    margin: 0 0 17px;
    color: #fff5e5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.annonce-contenu {
    color: #c2b8ce;
    font-size: 0.91rem;
    line-height: 1.95;
    overflow-wrap: anywhere;
    white-space: normal;
}

.annonce-carte-pied {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 23px;
    border-top: 1px solid rgba(181, 159, 208, 0.12);
    background: rgba(0, 0, 0, 0.12);
}

.annonce-auteur-avatar {
    display: grid;
    flex-shrink: 0;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid rgba(154, 120, 208, 0.3);
    border-radius: 10px;
    color: #d9c4f6;
    background: rgba(115, 79, 160, 0.15);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.annonce-auteur-infos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.annonce-auteur-infos > span {
    color: #8f839d;
    font-size: 0.68rem;
}

.annonce-auteur-infos strong {
    overflow-wrap: anywhere;
    color: #e5d8f6;
    font-size: 0.82rem;
}

.annonce-signature {
    margin-left: auto;
    color: #7e718d;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

/* Aucune annonce */

.annonces-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 45px 25px;
    border: 1px dashed rgba(214, 181, 109, 0.25);
    border-radius: 15px;
    background:
        radial-gradient(ellipse at center, rgba(126, 76, 180, 0.1), transparent 65%),
        #17141e;
    text-align: center;
}

.annonces-vide-embleme {
    display: grid;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    place-items: center;
    border: 1px solid rgba(214, 181, 109, 0.32);
    border-radius: 50%;
    color: var(--anc-or-clair);
    background: rgba(214, 181, 109, 0.06);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
}

.annonces-vide .annonces-mini-titre {
    font-size: 0.62rem;
}

.annonces-vide h3 {
    margin: 0 0 12px;
    color: #f5eafa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    line-height: 1.4;
}

.annonces-vide p {
    max-width: 420px;
    margin: 0;
    color: #a99fb7;
    font-size: 0.88rem;
    line-height: 1.85;
}

.annonces-lien-vide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--anc-or-clair);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.annonces-lien-vide:hover {
    color: #fff0c6;
}

/* Signature de guilde */

.annonces-signature-bas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 35px;
    color: #857790;
    text-align: center;
}

.annonces-signature-bas p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.9rem;
    font-style: italic;
}

.annonces-signature-bas > span {
    color: rgba(214, 181, 109, 0.6);
    font-size: 0.8rem;
}

/* Navigation au clavier */

.annonces-page a:focus-visible {
    outline: 2px solid #c6a4f4;
    outline-offset: 4px;
}

/* Tablettes */

@media (max-width: 1000px) {
    .annonces-layout {
        grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
        gap: 18px;
    }

    .annonces-formulaire {
        padding: 20px;
    }

    .annonce-carte-bandeau {
        padding: 17px;
    }

    .annonce-carte-corps {
        padding: 21px 18px;
    }

    .annonce-carte-pied {
        padding: 14px 17px;
    }

    .annonces-hero-rune {
        right: 4%;
        opacity: 0.55;
    }
}

/* Mobiles */

@media (max-width: 760px) {
    .annonces-page {
        padding: 22px 14px 45px;
    }

    .annonces-hero {
        padding: 32px 23px;
        border-radius: 14px;
    }

    .annonces-hero h1 {
        font-size: 2.25rem;
    }

    .annonces-hero-contenu > p {
        font-size: 0.9rem;
    }

    .annonces-hero-rune {
        top: 15px;
        right: -15px;
        font-size: 4rem;
        opacity: 0.25;
    }

    .annonces-layout {
        grid-template-columns: 1fr;
    }

    .annonces-formulaire {
        padding: 21px;
    }

    .annonces-fil-entete h2 {
        font-size: 1.35rem;
    }

    .annonces-liste {
        gap: 16px;
    }
}

@media (max-width: 420px) {
    .annonces-hero-infos {
        gap: 10px;
    }

    .annonces-hero-separateur {
        display: none;
    }

    .annonce-carte-bandeau {
        flex-wrap: wrap;
        gap: 10px;
    }

    .annonce-badge-recente {
        margin-left: auto;
    }

    .annonce-carte-corps {
        padding: 20px 17px;
    }

    .annonce-carte-pied {
        padding: 13px 16px;
    }

    .annonce-signature {
        font-size: 0.5rem;
        letter-spacing: 1px;
    }
}

/* Respect des préférences d'animation */

@media (prefers-reduced-motion: reduce) {
    .annonce-carte,
    .annonces-bouton-publier,
    .annonces-lien-vide {
        transition: none;
    }
}

/* ===== PAGE ANNONCES LOTUS NOIR ===== */

.annonces-page {
    width: min(1100px, 92%);
    margin: 40px auto;
    color: #eee8f5;
}

.annonces-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 38px;
    margin-bottom: 30px;
    border: 1px solid #59436e;
    border-radius: 18px;
    background: linear-gradient(135deg, #282033, #17151e);
    box-shadow: 0 12px 35px #0004;
}

.annonces-surtitle {
    color: #d8b66b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.annonces-hero h1 {
    margin: 12px 0;
    color: #f1d89b;
    font-size: clamp(30px, 5vw, 44px);
}

.annonces-hero p,
.annonce-form-description {
    color: #c5bacf;
    line-height: 1.7;
}

.annonces-compteur {
    min-width: 100px;
    padding: 18px;
    text-align: center;
    border: 1px solid #715b85;
    border-radius: 14px;
    background: #211b2b;
}

.annonces-compteur strong,
.annonces-compteur span {
    display: block;
}

.annonces-compteur strong {
    color: #e6c477;
    font-size: 32px;
}

.annonces-compteur span {
    color: #c8bdcf;
    font-size: 13px;
}

.annonce-formulaire {
    padding: 28px;
    margin-bottom: 32px;
    border: 1px solid #51405f;
    border-radius: 15px;
    background: #211c29;
}

.annonce-formulaire h2,
.annonces-section-titre h2 {
    margin-top: 0;
    color: #ecd59d;
}

.annonce-formulaire label {
    display: block;
    margin: 18px 0 8px;
    color: #ded1e8;
    font-weight: 700;
}

.annonce-formulaire input,
.annonce-formulaire textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #554664;
    border-radius: 8px;
    background: #15131b;
    color: #f3edf8;
    font: inherit;
}

.annonce-formulaire input:focus,
.annonce-formulaire textarea:focus {
    outline: 2px solid #8b6aab;
    border-color: transparent;
}

.annonce-formulaire textarea {
    resize: vertical;
}

.annonces-section-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 36px 0 20px;
}

.annonces-section-titre span {
    color: #aaa0b5;
    font-size: 13px;
}

.annonces-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.annonce-carte {
    min-width: 0;
    padding: 24px;
    border: 1px solid #40364d;
    border-radius: 14px;
    background: linear-gradient(145deg, #24202d, #19171f);
    box-shadow: 0 8px 22px #0003;
    transition: border-color .2s, transform .2s;
}

.annonce-carte:hover {
    border-color: #8b6aab;
    transform: translateY(-2px);
}

.annonce-carte-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.annonce-badge {
    padding: 6px 9px;
    border: 1px solid #806638;
    border-radius: 5px;
    background: #3a3021;
    color: #e7c87f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.annonce-carte time {
    color: #aaa0b5;
    font-size: 12px;
}

.annonce-carte h3 {
    margin: 20px 0 12px;
    color: #f0dcae;
    font-size: 22px;
    overflow-wrap: anywhere;
}

.annonce-contenu {
    color: #d5cddd;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.annonce-signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #3d3448;
    color: #aaa0b5;
    font-size: 13px;
}

.annonce-signature strong {
    color: #d9c4eb;
}

.annonce-signature-icone {
    color: #d8b66b;
}

.annonce-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.annonce-actions form {
    margin: 0;
}

.annonce-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 11px 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.annonce-btn:hover {
    transform: translateY(-1px);
}

.annonce-btn-publish {
    margin-top: 18px;
    background: #70538b;
    border-color: #a78ac2;
    color: #fff;
}

.annonce-btn-publish:hover {
    background: #8465a1;
}

.annonce-btn-edit {
    background: #423453;
    border-color: #8d72a8;
    color: #f1e3ff;
}

.annonce-btn-edit:hover {
    background: #59436f;
}

.annonce-btn-delete {
    background: #512b32;
    border-color: #98505b;
    color: #ffe4e6;
}

.annonce-btn-delete:hover {
    background: #733540;
}

.annonce-btn-cancel {
    background: #302b38;
    border-color: #655a73;
    color: #eee4f5;
}

.annonce-message,
.annonce-erreur {
    padding: 14px 17px;
    margin-bottom: 20px;
    border-radius: 9px;
}

.annonce-message {
    border: 1px solid #477d5d;
    background: #203c30;
    color: #d9f6df;
}

.annonce-erreur {
    border: 1px solid #8d454e;
    background: #47252b;
    color: #ffe0e0;
}

.annonces-vide {
    padding: 45px 20px;
    text-align: center;
    border: 1px dashed #554664;
    border-radius: 14px;
    background: #201b28;
}

.annonces-vide-icone {
    font-size: 34px;
}

.annonces-vide h3 {
    color: #ecd59d;
}

.annonces-vide p {
    color: #bcb0c8;
}

@media (max-width: 700px) {
    .annonces-hero {
        align-items: flex-start;
        padding: 25px;
    }

    .annonces-compteur {
        min-width: 70px;
        padding: 12px;
    }

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

    .annonce-formulaire {
        padding: 20px;
    }

    .annonce-actions {
        align-items: stretch;
    }

    .annonce-actions form,
    .annonce-actions form .annonce-btn {
        flex: 1;
    }
}
/* Bannière sous le titre LOTUS NOIR */
.lotus-banniere {
    width: min(700px, 90%);
    margin: 22px auto;
    overflow: hidden;
    border: 1px solid var(--bordure);
    box-shadow: 0 0 28px rgba(213, 177, 106, 0.12);
}

.lotus-banniere img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
}

/* Adaptation mobile */
@media (max-width: 760px) {
    .lotus-banniere {
        width: 95%;
        margin: 18px auto;
    }

    .lotus-banniere img {
        max-height: 150px;
    }
}

.gestion-inscriptions {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.entete-gestion {
    margin-bottom: 2rem;
}

.entete-gestion h1 {
    margin-bottom: 0.5rem;
}

.liste-inscriptions {
    display: grid;
    gap: 1rem;
}

.card-inscription {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 4%);
}

.informations-inscription {
    min-width: 0;
    overflow-wrap: anywhere;
}

.informations-inscription h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.informations-inscription p {
    margin: 0.5rem 0;
}

.libelle {
    font-weight: 600;
}

.actions-inscription {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-shrink: 0;
}

.actions-inscription button {
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 7px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.actions-inscription button:hover {
    opacity: 0.85;
}

.actions-inscription button:focus-visible {
    outline: 3px solid #64748b;
    outline-offset: 3px;
}

.btn-approuver {
    background: #15803d;
    color: #fff;
}

.btn-refuser {
    background: #b91c1c;
    color: #fff;
}

.message-succes,
.message-erreur {
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
}

.message-succes {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.message-erreur {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.statut-attente {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.875rem;
}

.etat-vide {
    padding: 2rem;
    text-align: center;
    background: #f8fafc;
    border-radius: 12px;
}

.nombre-inscriptions {
    color: #475569;
    margin-bottom: 1rem;
}

@media (max-width: 650px) {
    .card-inscription {
        align-items: stretch;
        flex-direction: column;
        padding: 1.25rem;
    }

    .actions-inscription {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .actions-inscription button {
        width: 100%;
    }
}

/* PAGE DISCORD */

.discord-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px;
}

.discord-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 28px;
    text-align: center;
    color: #f5f0ff;
    background:
        radial-gradient(
            circle at top,
            rgb(110 77 160 / 25%),
            transparent 55%
        ),
        #17151f;
    border: 1px solid #373044;
    border-radius: 22px;
}

.discord-symbole {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    color: #c8adff;
    font-size: 42px;
    border: 1px solid #76618f;
    border-radius: 50%;
}

.discord-surtitre {
    color: #c8adff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
}

.discord-hero h1 {
    margin: 18px 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.discord-description {
    max-width: 650px;
    margin: 0 auto 30px;
    color: #cbc5d7;
    line-height: 1.8;
}

.discord-bouton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 15px 24px;
    color: #fff;
    background: #5865f2;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease,
                transform 0.2s ease;
}

.discord-bouton:hover {
    color: #fff;
    background: #4752c4;
    transform: translateY(-2px);
}

.discord-bouton:focus-visible {
    outline: 3px solid #c8adff;
    outline-offset: 4px;
}

.discord-note {
    margin-top: 20px;
    color: #aaa2b9;
    font-size: 0.9rem;
}

.discord-avantages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.discord-carte {
    padding: 26px;
    color: #eee8f7;
    background: #201d29;
    border: 1px solid #373044;
    border-radius: 15px;
}

.discord-icone {
    color: #c8adff;
    font-size: 30px;
}

.discord-carte h2 {
    margin-top: 15px;
    font-size: 1.2rem;
}

.discord-carte p {
    color: #c0b9cc;
    line-height: 1.7;
}

@media (max-width: 700px) {
    .discord-page {
        padding: 30px 16px;
    }

    .discord-hero {
        padding: 45px 20px;
    }

    .discord-avantages {
        grid-template-columns: 1fr;
    }

    .discord-bouton {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===================================
   HEADER - LOGO LOTUS NOIR
=================================== */

.logo-lotus-lien {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    text-decoration: none;
    color: #f5d58a;
}

/* Image du lotus */
.logo-lotus-image {
    width: 110px;
    height: 110px;
    object-fit: contain;

    filter: drop-shadow(
        0 0 12px rgba(218, 174, 80, 0.35)
    );

    transition: transform 0.3s ease,
                filter 0.3s ease;
}

/* Titre */
.logo-lotus-texte {
    font-family: Georgia, serif;
    font-size: clamp(36px, 5vw, 80px);
    font-weight: bold;
    letter-spacing: 5px;
    color: #f5d58a;

    text-shadow:
        2px 3px 4px rgba(0, 0, 0, 0.8);
}

/* Effet au survol */
.logo-lotus-lien:hover .logo-lotus-image {
    transform: scale(1.06);

    filter: drop-shadow(
        0 0 20px rgba(218, 174, 80, 0.6)
    );
}

/* Version mobile */
@media (max-width: 768px) {

    .logo-lotus-lien {
        gap: 12px;
    }

    .logo-lotus-image {
        width: 65px;
        height: 65px;
    }

    .logo-lotus-texte {
        font-size: clamp(24px, 6vw, 38px);
        letter-spacing: 2px;
    }
}