/* ============================================================
   PosCiv - Feuille de style globale v2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --fond: #16171A;
    --fond-degrade: linear-gradient(160deg, #16171A 0%, #1E2024 100%);
    --fond-carte: #232529;
    --fond-carte-clair: #2C2F34;
    --texte: #EAEAEA;
    --texte-attenue: #9BA0A8;
    --dore: #F4C430;
    --dore-fonce: #C9A227;
    --bleu: #3FA9E0;
    --bleu-fonce: #2B7CB0;
    --bordure: #383B40;
    --rouge-alerte: #D25555;
    --vert-succes: #4CB783;
    --ombre: rgba(0, 0, 0, 0.35);

    /* Systeme coherent de rayons de bordure, en remplacement des
       valeurs disparates (3px a 30px) qui trainaient un peu partout
       et donnaient un rendu incoherent (nav, bouton connexion et
       badge compte-utilisateur qui ne matchaient pas entre eux). */
    --rayon-sm: 6px;    /* petits elements : badges texte, vignettes, pastilles */
    --rayon-md: 8px;    /* composants standards : boutons, champs, cartes, tables */
    --rayon-lg: 12px;   /* grands conteneurs : nav, modales, cartes de regles */
    --rayon-pill: 999px; /* pleinement arrondi : badges ronds, bouton flottant, compte utilisateur */
}

* {
    box-sizing: border-box;
}

/* Filet de securite global : quelle que soit l'image (nouvelle ou
   deja en place), elle ne deborde jamais de son conteneur et ne se
   deforme jamais (les proportions originales sont toujours
   conservees). Les classes specifiques (.banniere-logo, .avatar-discord,
   etc.) peuvent affiner la taille exacte par-dessus cette base. */
img {
    max-width: 100%;
    height: auto;
}

body {
    background: var(--fond-degrade);
    background-attachment: fixed;
    color: var(--texte);
    font-family: 'Inter', 'Segoe UI', Verdana, Arial, sans-serif;
    line-height: 1.65;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 70px;
}

h1, h2, h3 {
    font-family: 'Oswald', 'Segoe UI', sans-serif;
    color: var(--bleu);
    letter-spacing: 0.3px;
}

h1 {
    font-size: 2.1em;
    font-weight: 700;
    margin: 26px 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bleu-fonce);
}
h2 {
    font-size: 1.35em;
    font-weight: 600;
    margin-top: 1.8em;
    color: #6BC4F0;
}
h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--texte);
}

a {
    color: var(--bleu);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: #6BC4F0;
    text-decoration: underline;
}

hr {
    border: none;
    border-top: 1px solid var(--bordure);
    margin: 18px 0 26px;
}

p {
    color: var(--texte);
}

em {
    color: var(--bleu);
    font-style: normal;
    font-weight: 600;
}

/* ============================================================
   Barre du haut : navigation + bloc utilisateur
   ============================================================ */
.entete-haut {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0 30px;
    width: 100%;
    background: var(--fond-carte);
    padding: 14px 20px;
    border-radius: var(--rayon-lg);
    border: 1px solid var(--bordure);
    box-shadow: 0 3px 10px var(--ombre);
}

.barre-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
}
.barre-haut > a:first-child {
    flex-shrink: 0;
}

nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

nav > a {
    color: var(--texte);
    font-weight: 500;
    font-size: 0.95em;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
nav > a:hover, nav > a.actif {
    color: var(--bleu);
    border-bottom-color: var(--bleu);
    text-decoration: none;
}

nav a.nav-staff {
    color: var(--rouge-alerte);
    font-weight: 600;
}
nav a.nav-staff:hover, nav a.nav-staff.actif {
    color: #E88080;
    border-bottom-color: var(--rouge-alerte);
    text-decoration: none;
}

.nav-categorie {
    position: relative;
    color: var(--texte);
    font-weight: 500;
    font-size: 0.95em;
    cursor: pointer;
    padding: 6px 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-categorie:hover, .nav-categorie.actif {
    color: var(--bleu);
    text-decoration: none;
}
.nav-sous-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 6px 16px var(--ombre);
    z-index: 10;
}
.nav-categorie:hover .nav-sous-menu {
    display: block;
}
.nav-sous-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--texte);
    font-size: 0.92em;
    white-space: nowrap;
}
.nav-sous-menu a:hover {
    background: var(--fond-carte);
    color: var(--bleu);
    text-decoration: none;
}

.compte-utilisateur {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    color: var(--texte-attenue);
    flex-shrink: 0;
    white-space: nowrap;
}
.avatar-discord {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--dore-fonce);
}
.compte-utilisateur strong {
    color: var(--texte);
}
.bouton-deco {
    background: var(--fond-carte-clair);
    color: var(--texte);
    padding: 5px 12px;
    border-radius: var(--rayon-md);
    font-size: 0.88em;
    border: 1px solid var(--bordure);
}
.bouton-deco:hover {
    background: var(--rouge-alerte);
    color: #fff;
    text-decoration: none;
}
.bouton-connexion {
    background: var(--dore);
    color: #16171A;
    padding: 7px 16px;
    border-radius: var(--rayon-md);
    font-weight: 600;
    font-size: 0.9em;
}
.bouton-connexion:hover {
    background: var(--dore-fonce);
    text-decoration: none;
}

label {
    font-weight: 600;
    color: var(--texte);
    display: inline-block;
    margin-top: 14px;
    margin-bottom: 4px;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="file"],
select,
textarea {
    background: var(--fond-carte-clair);
    color: var(--texte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 1em;
    width: 100%;
    max-width: 520px;
    transition: border-color 0.15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--bleu);
}

textarea {
    resize: vertical;
}

button, input[type="submit"] {
    background: var(--dore);
    color: #16171A;
    border: none;
    border-radius: var(--rayon-md);
    padding: 10px 22px;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    margin-top: 14px;
    transition: background 0.15s ease, transform 0.1s ease;
}
button:hover, input[type="submit"]:hover {
    background: var(--dore-fonce);
}
button:active, input[type="submit"]:active {
    transform: scale(0.98);
}

button.danger {
    background: var(--rouge-alerte);
    color: #fff;
}
button.danger:hover {
    background: #B84545;
}

.carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    padding: 20px 22px;
    margin-bottom: 20px;
    overflow: auto;
    box-shadow: 0 2px 8px var(--ombre);
    transition: border-color 0.15s ease;
}
.carte:hover {
    border-color: var(--bleu-fonce);
}
.carte h2 {
    margin-top: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    background: var(--fond-carte);
    border-radius: var(--rayon-md);
    overflow: hidden;
}
th, td {
    border: 1px solid var(--bordure);
    padding: 12px 14px;
    text-align: left;
}
th {
    background: var(--fond-carte-clair);
    color: var(--bleu);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.3px;
}

.encadre-info {
    background: rgba(63, 169, 224, 0.1);
    border: 1px solid var(--bleu-fonce);
    border-radius: var(--rayon-md);
    padding: 14px 18px;
    margin: 16px 0;
}
.encadre-succes {
    color: var(--vert-succes);
}
.encadre-erreur {
    color: var(--rouge-alerte);
}

canvas {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    background: var(--fond-carte-clair);
}

/* ============================================================
   Responsive - petits ecrans
   ============================================================ */
@media (max-width: 700px) {
    body {
        padding: 0 14px 50px;
    }

    .entete-haut {
        padding: 14px 16px;
    }

    .barre-haut {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    nav {
        gap: 12px;
        flex-wrap: wrap;
    }

    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="file"],
    select,
    textarea {
        max-width: 100%;
    }

    table {
        font-size: 0.85em;
    }
}


/* ============================================================
   Mise en page 2 colonnes pour la page Personnage RP
   ============================================================ */
.personnage-layout {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.colonne-info {
    flex: 1 1 380px;
    min-width: 280px;
}
.colonne-skin {
    flex: 0 0 220px;
    text-align: center;
}
.colonne-skin canvas {
    width: 100%;
    max-width: 220px;
    height: 280px;
}
.colonne-skin p {
    font-size: 0.85em;
    color: var(--texte-attenue);
    margin-top: 8px;
}

/* ============================================================
   Verification du pseudo Minecraft (page candidature)
   ============================================================ */
#verif-pseudo-resultat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}
.tete-mc {
    width: 24px;
    height: 24px;
    border-radius: var(--rayon-sm);
    vertical-align: middle;
}
.pseudo-ok {
    color: var(--vert-succes);
    font-weight: 600;
}
.pseudo-erreur {
    color: var(--rouge-alerte);
    font-weight: 600;
}


/* ============================================================
   Onglets de statut (page Staff) + boite de confirmation modale
   ============================================================ */
.onglets-statut {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.onglets-statut a {
    background: var(--fond-carte);
    color: var(--texte);
    padding: 8px 16px;
    border-radius: var(--rayon-md);
    border: 1px solid var(--bordure);
    font-size: 0.9em;
    text-decoration: none;
}
.onglets-statut a.actif {
    background: var(--bleu);
    color: #16171A;
    border-color: var(--bleu);
    font-weight: 600;
}
.onglets-statut a:hover {
    border-color: var(--bleu);
    text-decoration: none;
}

.modale-fond {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
}
.modale-fond.ouverte {
    display: flex;
}
.modale-boite {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    padding: 24px;
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px var(--ombre);
}
.modale-boite p {
    margin-top: 0;
}
.modale-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ============================================================
   Pied de page
   ============================================================ */
.pied-de-page {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid var(--bordure);
    text-align: center;
    color: var(--texte-attenue);
    font-size: 0.85em;
}

/* ============================================================
   Chat de groupe
   ============================================================ */
.zone-chat {
    max-height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--fond);
    border-radius: var(--rayon-md);
    border: 1px solid var(--bordure);
}
.bulle-chat {
    max-width: 75%;
    background: var(--fond-carte-clair);
    border-radius: 10px;
    padding: 8px 12px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bulle-chat.bulle-mine {
    align-self: flex-end;
    background: var(--bleu-fonce);
}
.bulle-auteur {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--bleu);
}
.bulle-mine .bulle-auteur {
    color: #cfeaff;
}
.bulle-texte {
    font-size: 0.95em;
    word-break: break-word;
}
.bulle-heure {
    font-size: 0.7em;
    color: var(--texte-attenue);
    align-self: flex-end;
}

/* ============================================================
   Grilles de regles et glossaire (page reglement)
   ============================================================ */
.grille-regles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 14px 0 26px;
}
.grille-glossaire {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 14px 0 26px;
}
.carte-regle {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    padding: 16px 18px;
}
.carte-regle h3 {
    margin: 0 0 8px;
    color: var(--bleu);
    font-size: 1em;
}
.carte-regle p {
    margin: 0;
    font-size: 0.9em;
    color: var(--texte-attenue);
}
@media (max-width: 700px) {
    .grille-glossaire {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Page Dons
   ============================================================ */
.grille-montants {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 20px;
}
.bouton-montant {
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    color: var(--texte);
    padding: 14px 22px;
    border-radius: var(--rayon-md);
    font-weight: 600;
    cursor: pointer;
}
.bouton-montant:hover {
    border-color: var(--dore);
    color: var(--dore);
}
.bouton-paypal {
    display: inline-block;
    background: var(--dore);
    color: #16171A;
    padding: 12px 28px;
    border-radius: var(--rayon-md);
    font-weight: 700;
    margin-top: 10px;
}
.bouton-paypal:hover {
    background: var(--dore-fonce);
    text-decoration: none;
}

.lecteur-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 14px 0;
    border-radius: var(--rayon-md);
    overflow: hidden;
}
.lecteur-video iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ============================================================
   Calendrier hebdomadaire (disponibilites / entretiens)
   ============================================================ */
.cal-grille {
    display: flex;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    overflow-x: auto;
    padding: 30px 10px 10px 50px;
    position: relative;
}
.cal-colonne-heures {
    position: absolute;
    left: 0;
    top: 30px;
    width: 45px;
}
.cal-label-heure {
    position: absolute;
    font-size: 0.75em;
    color: var(--texte-attenue);
    transform: translateY(-50%);
}
.cal-colonne-jour {
    position: relative;
    flex: 1 1 0;
    min-width: 110px;
    border-left: 1px solid var(--bordure);
}
.cal-entete-jour {
    position: absolute;
    top: -26px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--texte);
    text-transform: capitalize;
}
.cal-ligne-heure {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--bordure);
    opacity: 0.4;
}
.cal-bande {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: var(--rayon-sm);
    opacity: 0.85;
    font-size: 0.7em;
    color: #16171A;
    padding: 2px 4px;
    overflow: hidden;
    cursor: pointer;
}
.cal-bande.cal-occupe {
    background: repeating-linear-gradient(45deg, rgba(210,85,85,0.5), rgba(210,85,85,0.5) 6px, rgba(210,85,85,0.7) 6px, rgba(210,85,85,0.7) 12px) !important;
    color: #fff;
    cursor: not-allowed;
}
.cal-bande.cal-selection {
    background: #6BC4F0 !important;
    border: 2px solid #fff;
    z-index: 5;
}
.cal-navigation-semaine {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.nav-categorie.categorie-staff {
    color: var(--rouge-alerte);
    font-weight: 600;
}
.nav-categorie.categorie-staff:hover, .nav-categorie.categorie-staff.actif {
    color: #E88080;
}

.cal-legende {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 0.85em;
}
.cal-legende-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cal-legende-pastille {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--rayon-sm);
}

/* ============================================================
   Assistance (tickets) - bouton flottant
   ============================================================ */
.bouton-flottant-assistance {
    position: fixed;
    right: 22px;
    bottom: 22px;
    background: var(--dore);
    color: #16171A;
    padding: 12px 20px;
    border-radius: var(--rayon-pill);
    font-weight: 700;
    font-size: 0.9em;
    box-shadow: 0 4px 14px var(--ombre);
    z-index: 50;
}
.bouton-flottant-assistance:hover {
    background: var(--dore-fonce);
    text-decoration: none;
}
@media (max-width: 700px) {
    .bouton-flottant-assistance {
        right: 14px;
        bottom: 14px;
        padding: 10px 16px;
        font-size: 0.85em;
    }
}

/* ============================================================
   Assistance (tickets) - badges de statut et compteur
   ============================================================ */
.badge-statut-ticket {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--rayon-pill);
    font-size: 0.8em;
    font-weight: 600;
}
.badge-statut-ticket.badge-ouvert {
    background: rgba(76, 183, 131, 0.15);
    color: var(--vert-succes);
}
.badge-statut-ticket.badge-ferme {
    background: rgba(210, 85, 85, 0.15);
    color: var(--rouge-alerte);
}
.badge-compteur {
    display: inline-block;
    background: var(--rouge-alerte);
    color: #fff;
    border-radius: var(--rayon-pill);
    padding: 1px 7px;
    font-size: 0.78em;
    font-weight: 700;
    margin-left: 4px;
}

/* ============================================================
   Assistance (tickets) - formulaire dynamique
   ============================================================ */
.section-champs-motif {
    border-top: 1px solid var(--bordure);
    margin-top: 20px;
    padding-top: 10px;
}
.bloc-champ {
    margin-bottom: 6px;
}
.conteneur-personnes {
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    padding: 12px;
    margin-top: 6px;
}
.ligne-personne {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ligne-personne .input-personne {
    width: auto;
    flex: 1 1 220px;
    margin: 0;
}
.ligne-personne button {
    margin: 0;
    padding: 8px 14px;
    font-size: 0.85em;
}
.statut-personne {
    font-size: 0.85em;
    white-space: nowrap;
}

/* ============================================================
   Theme sombre "The Dead Island" (candidature, personnage, groupe,
   fiches) : variante rouge de l'accent bleu. La quasi-totalite des
   composants utilisent deja var(--bleu)/var(--bleu-fonce), donc
   surcharger ces deux variables sur le <body> suffit a repeindre
   toute la page. Seuls les rares hex codes en dur ci-dessous ont
   besoin d'une regle dediee.
   ============================================================ */
body.theme-dead-island {
    --bleu: #C23B3B;
    --bleu-fonce: #7A1F1F;
    --dore: #C23B3B;
    --dore-fonce: #7A1F1F;
    --fond-degrade: radial-gradient(circle at 100% 100%, rgba(122,31,31,0.35) 0%, rgba(122,31,31,0) 45%), linear-gradient(160deg, #0B0C0E 0%, #17100F 60%, #1F1010 100%);
}
body.theme-dead-island h2 {
    color: #E07A7A;
}
body.theme-dead-island a:hover {
    color: #E07A7A;
}
body.theme-dead-island .bulle-mine .bulle-auteur {
    color: #F4CFCF;
}
/* button/input[submit] utilisent color:#16171A en dur pour le texte,
   ce qui reste lisible sur le rouge choisi ci-dessus : aucune regle
   supplementaire necessaire pour le texte des boutons. */

/* Banniere logo en haut des pages "The Dead Island" */
.banniere-page {
    text-align: center;
    margin: 10px 0 0;
}
.banniere-logo {
    max-width: 420px;
    width: 100%;
    height: auto;
}

/* Petit logo cliquable dans la barre de navigation */
.logo-nav {
    height: 34px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* ============================================================
   Transitions de page
   ============================================================
   Systeme unique base sur JS + CSS (voir le script en bas de
   footer.php), qui fonctionne IDENTIQUEMENT sur tous les
   navigateurs -- contrairement a l'API native "View Transitions"
   utilisee avant, qui n'est pour l'instant supportee que par les
   navigateurs Chromium (Chrome/Edge/Opera) et ne fait strictement
   rien sur Firefox.
   - Fondu + leger glissement a l'arrivee sur une page (CSS pur,
     fonctionne meme si JS est desactive : degradation silencieuse).
   - Fondu de sortie avant de quitter la page, uniquement pour les
     clics sur des liens internes (JS ajoute la classe .page-sortie,
     attend la fin du fondu, puis navigue).
   ============================================================ */
body {
    animation: entree-page 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes entree-page {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
body.page-sortie {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* ============================================================
   Badges de points de competence (Endurance / Precision / Courage)
   ============================================================ */
.stats-competence {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 10px;
}
.badge-stat {
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-pill);
    padding: 3px 12px;
    font-size: 0.85em;
    font-weight: 600;
}

/* Note : le bouton flottant Assistance (.bouton-flottant-assistance)
   utilise var(--dore)/var(--dore-fonce) dans ses regles de base, qui
   sont maintenant rouges dans ce scope : aucune regle dediee necessaire.
   L'anneau avatar recoit par contre une teinte plus claire que
   --dore-fonce, pour rester lisible sur fond sombre. */
body.theme-dead-island .avatar-discord {
    border-color: #E07A7A;
}

/* ============================================================
   Badges d'etat des builds (rouge/jaune/vert)
   ============================================================ */
.badge-etat-build {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--rayon-pill);
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}
.badge-etat-build.etat-rouge {
    background: rgba(210, 85, 85, 0.15);
    color: var(--rouge-alerte);
}
.badge-etat-build.etat-jaune {
    background: rgba(244, 196, 48, 0.15);
    color: var(--dore);
}
.badge-etat-build.etat-vert {
    background: rgba(76, 183, 131, 0.15);
    color: var(--vert-succes);
}

/* ============================================================
   Editeur de texte des redactions (barre d'outils + grande zone)
   ============================================================ */
.barre-outils-texte {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    border-bottom: none;
    border-radius: var(--rayon-md) var(--rayon-md) 0 0;
    padding: 8px;
    margin-top: 6px;
}
.barre-outils-texte button {
    padding: 6px 12px;
    font-size: 0.9em;
    min-width: 34px;
}
.aide-formatage {
    color: var(--texte-attenue);
    font-size: 0.8em;
    margin-left: auto;
}
.editeur-texte-large {
    width: 100%;
    max-width: none;
    min-height: 500px;
    border-radius: 0 0 var(--rayon-md) var(--rayon-md);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    resize: vertical;
}

/* ============================================================
   Carte des builds (zoom/pan + zones colorees superposees)
   ============================================================ */
.conteneur-carte {
    width: 100%;
    height: 75vh;
    overflow: hidden;
    border-radius: var(--rayon-lg);
    border: 1px solid var(--bordure);
    background: #0a0a0c;
    cursor: grab;
    position: relative;
}
.conteneur-carte.carte-en-glissement,
.conteneur-carte-mini.carte-en-glissement {
    cursor: grabbing;
}
.calque-carte {
    position: relative;
    transform-origin: 0 0;
    width: fit-content;
    will-change: transform;
}
.calque-carte img {
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}
.zone-carte {
    position: absolute;
    border: 2px solid;
    box-sizing: border-box;
    display: block;
}
.zone-carte:hover {
    filter: brightness(1.3);
}
.etiquette-zone-carte {
    position: absolute;
    top: -22px;
    left: -2px;
    color: #16171A;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.zone-carte:hover .etiquette-zone-carte {
    opacity: 1;
}

/* ============================================================
   Outil de definition de zone sur la fiche d'un build
   ============================================================ */
.conteneur-carte-mini {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    border-radius: var(--rayon-md);
    border: 1px solid var(--bordure);
    position: relative;
    background: #0a0a0c;
}
.calque-carte-mini {
    position: relative;
    transform-origin: 0 0;
    width: fit-content;
    will-change: transform;
}
.calque-carte-mini img {
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    cursor: crosshair;
}
.selection-zone-en-cours {
    position: absolute;
    border: 2px dashed #fff;
    background: rgba(255,255,255,0.2);
    pointer-events: none;
}

/* ============================================================
   Barre de chargement (upload modpack / fond de carte)
   ============================================================ */
.conteneur-barre-chargement {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.barre-chargement {
    flex: 1 1 auto;
    height: 10px;
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-pill);
    overflow: hidden;
}
.barre-chargement-remplissage {
    height: 100%;
    width: 0%;
    background: var(--dore);
    transition: width 0.2s ease-out;
}
#conteneur-barre-modpack span,
#conteneur-barre-fond-carte span {
    font-size: 0.85em;
    color: var(--texte-attenue);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

/* ============================================================
   Recherche de build sur la carte
   ============================================================ */
.recherche-build-carte {
    position: relative;
    margin-top: 14px;
}
.liste-recherche-carte {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 400px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    margin-top: 4px;
    z-index: 20;
    box-shadow: 0 4px 14px var(--ombre);
}
.resultat-recherche-carte {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.95em;
}
.resultat-recherche-carte:hover {
    background: var(--fond-carte-clair);
}
.resultat-recherche-carte.resultat-recherche-vide {
    color: var(--texte-attenue);
    cursor: default;
}
.resultat-recherche-carte.resultat-recherche-vide:hover {
    background: transparent;
}

/* Halo dore temporaire sur la zone mise en avant via la recherche */
.zone-carte.zone-mise-en-avant {
    outline: 3px solid #FFD700;
    outline-offset: 4px;
    z-index: 15;
    animation: pulseZoneDoree 1.4s ease-in-out infinite;
}
@keyframes pulseZoneDoree {
    0%, 100% { outline-color: #FFD700; }
    50% { outline-color: #FFF3B0; }
}

/* ============================================================
   Badges de logs (role / categorie), code couleur
   ============================================================ */
.badge-log {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--rayon-pill);
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}
.badge-log.log-bleu {
    background: rgba(63, 169, 224, 0.15);
    color: var(--bleu);
}
.badge-log.log-orange {
    background: rgba(230, 150, 50, 0.15);
    color: #E69632;
}
.badge-log.log-violet {
    background: rgba(160, 100, 220, 0.15);
    color: #A064DC;
}
.badge-log.log-rouge {
    background: rgba(210, 85, 85, 0.15);
    color: var(--rouge-alerte);
}
.badge-log.log-gris {
    background: rgba(150, 150, 150, 0.15);
    color: var(--texte-attenue);
}

/* ============================================================
   Infobulle (info-bulle au survol/focus)
   ============================================================ */
.info-bulle {
    position: relative;
    display: inline-block;
    cursor: help;
    color: var(--bleu);
    font-weight: 700;
}
.info-bulle-texte {
    display: none;
    position: absolute;
    bottom: 130%;
    left: 0;
    width: 280px;
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    padding: 10px 12px;
    font-size: 0.85em;
    font-weight: 400;
    color: var(--texte);
    box-shadow: 0 4px 14px var(--ombre);
    z-index: 30;
}
.info-bulle:hover .info-bulle-texte,
.info-bulle:focus .info-bulle-texte {
    display: block;
}

/* ============================================================
   Calendrier du tableau de bord Staff
   ============================================================ */
.grille-calendrier {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendrier-entete-jour {
    text-align: center;
    font-size: 0.8em;
    font-weight: 700;
    color: var(--texte-attenue);
    padding: 4px 0;
}
.calendrier-jour {
    min-height: 70px;
    background: var(--fond-carte-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-sm);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.calendrier-jour-vide {
    background: transparent;
    border: none;
}
.calendrier-jour-actuel {
    border-color: var(--bleu);
    box-shadow: inset 0 0 0 1px var(--bleu);
}
.calendrier-numero-jour {
    font-size: 0.8em;
    color: var(--texte-attenue);
    font-weight: 600;
}
.calendrier-badge-absence {
    display: block;
    font-size: 0.7em;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #16171A;
    font-weight: 600;
}
.calendrier-badge-absence.absence-rouge {
    background: #E67373;
}
.calendrier-badge-absence.absence-verte {
    background: #7BC97B;
}
.calendrier-badge-plus {
    font-size: 0.7em;
    color: var(--texte-attenue);
}
@media (max-width: 700px) {
    .calendrier-jour {
        min-height: 46px;
    }
    .calendrier-badge-absence {
        font-size: 0.6em;
    }
}

/* ============================================================
   Legende simple (calendrier Staff), independante des contraintes
   de taille des cases du calendrier
   ============================================================ */
.legende-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--rayon-pill);
    font-size: 0.9em;
    font-weight: 600;
    color: #16171A;
}
.legende-badge.legende-rouge {
    background: #E67373;
}
.legende-badge.legende-verte {
    background: #7BC97B;
}

/* ============================================================
   Notes : modale large (tableur) + conteneur Jspreadsheet
   ============================================================ */
.modale-boite-large {
    max-width: 900px;
}
.editeur-tableur-jss {
    overflow-x: auto;
    margin-top: 8px;
    border-radius: var(--rayon-md);
    min-height: 200px;
}

/* ============================================================
   Jspreadsheet (tableur des notes) : mise en forme du conteneur.
   Les couleurs elles-memes sont definies dans un <style> charge
   APRES le CSS de Jspreadsheet, directement dans mes_notes.php et
   notes_staff.php -- sinon le CSS de Jspreadsheet (charge apres ce
   fichier) ecrase nos valeurs a specificite egale.
   ============================================================ */
.editeur-tableur-jss,
.tableur-lecture-seule {
    border-radius: var(--rayon-md);
    overflow: auto;
    max-height: 70vh;
}