/*
 * Identité visuelle reprise de l'original (styles/general.css, forum.css, admin.css) :
 * palette orange/jaune "Lil-life", police Trebuchet MS, fond dynamique selon la météo
 * simulée du site (styles/fond_*.css + images/design/fond-*.png). Mise en page modernisée
 * (flexbox/grid) : plus de tableaux imbriqués, mais mêmes couleurs et même ambiance.
 */

:root {
    --color-bg: #fff6e0;
    --color-text: #2e2a26;
    --color-primary: #dd5131;
    --color-primary-dark: #b83e22;
    --color-accent: #ff9900;
    --color-accent-border: #ffcc33;
    --color-secondary: #ffe6b3;
    --color-success: #1a7917;
    --color-error: #c0392b;
    --color-header-bg: #ffcc00;
    --radius: 10px;
    --radius-lg: 20px;
    /* Trebuchet MS partout par défaut (styles/general.css d'origine, classes .Style8/.Style13
       pour les titres) — Century Gothic n'était utilisé que dans le forum et l'admin
       (styles/forum.css, styles/admin.css), voir la surcharge .theme-forum/.theme-admin
       plus bas. Century Gothic n'est pas un système standard (police Microsoft Office) :
       la chaîne de secours reproduit fidèlement le comportement de l'original pour les
       visiteurs qui ne l'ont pas installée. */
    --font-titre: "Trebuchet MS", Arial, Helvetica, sans-serif;
    --font-texte: "Trebuchet MS", Arial, Helvetica, sans-serif;
    --font-forum: "Century Gothic", Verdana, "Trebuchet MS", Arial, sans-serif;

    /* Échelle d'espacement : à utiliser à la place de valeurs ad hoc (0.6rem, 1.25rem...)
       pour garder une cohérence verticale/horizontale sur tout le site. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Ombres et transitions communes (mouvement sobre : hover/apparition, rien de voyant). */
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.12);
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.08);
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

/* Points de rupture de référence pour tout le site (à répéter dans les media queries,
   CSS ne supporte pas encore les custom media natifs sans PostCSS) :
   - mobile   : jusqu'à 640px
   - tablette : 641px – 960px
   - desktop  : 961px et plus
   Toute nouvelle media query doit s'aligner sur ces 3 paliers plutôt qu'en inventer
   de nouveaux au cas par cas. */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-texte);
    background-color: var(--color-header-bg);
    color: var(--color-text);
    line-height: 1.5;
    /* Filet de sécurité : un seul élément mal contenu (tableau large, grille figée...)
       ne doit jamais forcer toute la page à s'élargir/zoomer sur mobile. Les éléments qui
       ont besoin de défiler horizontalement (ex. .data-table) le font dans leur propre
       boîte via overflow-x:auto, indépendamment de cette règle. */
    overflow-x: hidden;
    /* Idem pour le texte libre saisi par les joueurs (forum, livre d'or, annonces,
       signatures...) : une seule chaîne sans espace ne doit jamais pouvoir élargir sa
       boîte — et donc potentiellement la page — au-delà de la largeur prévue. */
    overflow-wrap: break-word;
}

/* Fond des pages publiques pré-connexion (index, inscription, mentions légales...) :
   le nuage décoratif jaune (images/design/fond-header.png) reproduit sur toute la hauteur
   de page, pas seulement le bandeau du header — fidèle à la capture d'origine où ce fond
   couvre l'intégralité de la page, y compris derrière le panneau blanc et le footer. */
body.page-publique {
    background-color: #ffcc00;
    background-image: url(/assets/images/design/fond-header.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/* Fond dynamique selon la météo simulée du site (uniquement en jeu, une fois connecté —
   tick quotidien, src/game_tick.php). */
body.meteo-soleil { background-image: url(/assets/images/design/fond-soleil.png); background-color: #ffcc00; }
body.meteo-pluie   { background-image: url(/assets/images/design/fond-pluie.png);  background-color: #ffd300; }
body.meteo-neige   { background-image: url(/assets/images/design/fond-neige.png);  background-color: #ffd300; }
body.meteo-nuages  { background-image: url(/assets/images/design/fond-nuages.png); background-color: #ffd300; }
body.meteo-lune    { background-image: url(/assets/images/design/fond-lune.png);   background-color: #15284d; color: #f0f0f0; }

a {
    color: var(--color-primary-dark);
}

a:hover {
    color: var(--color-primary);
}

h1, h2, h3 {
    font-family: var(--font-titre);
    color: var(--color-primary-dark);
}

/* Bannières graphiques d'origine (images/boutons/*.png, texte inclus dans l'image) */
.page-banner {
    margin: 0 0 1rem;
}

.page-banner img {
    height: 54px;
    width: auto;
    display: block;
}

.site-header {
    padding: 1rem 0 1.5rem;
}

/* Grille à 3 colonnes fidèle à l'original (logo/bulle en rowspan sur toute la hauteur,
   colonne du milieu = stats en haut + boutons visiteurs en bas). Même largeur maximale et
   même padding horizontal que <main> pour que les boutons visiteurs restent alignés avec
   le bloc central (carte blanche) en dessous, quelle que soit la largeur de la fenêtre. */
.site-header-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 1.5rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-header-logo {
    align-self: center;
}

.site-header-logo img {
    height: 165px;
    width: auto;
    display: block;
}

.site-header-milieu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    gap: 1rem;
    padding: 0.5rem 0;
}

.site-header-visiteurs {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.site-header-visiteurs img {
    height: 55px;
    display: block;
    transition: transform 0.1s;
}

.site-header-visiteurs a:hover img {
    transform: translateY(-2px);
}

.site-header-droite {
    align-self: center;
}

.site-header nav a,
.site-header nav span {
    margin-left: 1rem;
    text-decoration: none;
    color: var(--color-text);
    white-space: nowrap;
}

.site-header nav a:hover {
    color: var(--color-primary-dark);
}

.meteo-icone {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Barre de stats du header public (includes/header-connectes.php) : habitants / en ligne / météo */
.stats-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
}

.stats-pill-en-ligne {
    background: #fff;
    color: var(--color-text);
    border: 2px solid var(--color-primary);
}

.stats-pill img {
    width: 18px;
    height: 18px;
}

.stats-meteo {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-text);
}

.stats-meteo .meteo-icone {
    margin-right: 0.3rem;
}

/* Bulle de connexion du header public (includes/bulle-connexion.php), reconstruite à
   partir des 5 vraies images empilées en position absolue — dimensions natives exactes :
   haut 220x19, gauche 29x135, centre 164x135, droite 27x135, bas 220x28. */
.bulle-connexion {
    position: relative;
    width: 220px;
    height: 182px;
    flex-shrink: 0;
}

.bc-piece {
    position: absolute;
    left: 0;
    display: block;
    pointer-events: none;
}

.bc-haut { top: 0; width: 220px; height: 19px; }
.bc-gauche { top: 19px; width: 29px; height: 135px; }
.bc-centre { top: 19px; left: 29px; width: 164px; height: 135px; }
.bc-droite { top: 19px; left: 193px; width: 27px; height: 135px; }
.bc-bas { top: 154px; width: 220px; height: 28px; }

/* Grille 2 colonnes (étiquette | champ) pour un alignement propre, comme l'original
   (tableau à 2 colonnes dans includes/bulle-connexion.php). */
.bc-form {
    position: absolute;
    top: 30px;
    left: 33px;
    width: 154px;
    height: 108px;
    margin: 0;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    gap: 5px 6px;
    z-index: 1;
}

.bc-label {
    font-size: 11px;
    color: #2e2a26;
    text-align: right;
    white-space: nowrap;
}

.bc-form input[type="text"],
.bc-form input[type="password"] {
    padding: 1px 3px;
    font-size: 10px;
    width: 78px;
    border: 1px dashed #ff7d26;
    border-radius: 3px;
    background: #fff;
}

.bc-ligne {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 10px;
    margin-top: 2px;
}

.bc-ligne label.checkbox {
    font-size: 10px;
    gap: 0.2rem;
    margin: 0;
}

.bc-ligne input[type="checkbox"] {
    width: 11px;
    height: 11px;
    margin: 0;
}

.bc-form button {
    font-size: 10px;
    padding: 1px 10px;
    border: 1px solid #ff7d26;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.bc-form a {
    grid-column: 1 / 3;
    display: block;
    text-align: center;
    font-size: 9px;
    margin-top: 4px;
    color: #2e2a26;
}

main {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

main.main-large {
    max-width: 1150px;
    margin-bottom: 0;
}

.hero {
    text-align: center;
}

/* Page d'accueil (index.php), reprise de la disposition d'origine : dans le vrai code
   source (index.php + fond-gauche-orange.gif/fond-droite.gif), la colonne de gauche
   (231px) est remplie d'orange plein sur toute sa hauteur et la colonne de droite (741px)
   est remplie de blanc plein sur toute sa hauteur — les deux colonnes se touchent
   directement, sans espace de fond de page (jaune) entre elles ni arrondi extérieur :
   c'est un seul bloc continu, pas 2 cartes séparées. */
.accueil-hero {
    flex: 1;
    min-width: 0;
    background: #fff;
    padding: 1.25rem;
}

/* max-width identique à l'image : le texte et la bulle de citation (positionnés en absolu
   en % à l'intérieur de ce conteneur) doivent s'aligner sur les bords réels de l'image,
   pas sur ceux d'une colonne flex plus large sur grand écran. */
.accueil-hero-image {
    position: relative;
    max-width: 700px;
}

/* Pas de centrage (margin:auto) : l'image doit rester calée à gauche de son conteneur,
   sinon elle se décale vers la droite sur un écran large tandis que .accueil-hero-texte
   (positionné en absolu, calé sur le bord gauche du même conteneur) reste sur place — les
   deux doivent partager le même point de référence gauche pour que le texte tombe
   toujours dans le rectangle translucide incrusté dans l'image, quelle que soit la largeur
   de la fenêtre. */
.accueil-hero-image > img {
    width: 100%;
    max-width: 700px;
    display: block;
    margin: 0;
    border: 6px solid var(--color-accent-border);
    border-radius: 16px;
    box-sizing: border-box;
}

/* Carte réelle, découplée du décor : contrairement à l'ancienne version qui calait le
   texte en % sur un rectangle translucide incrusté "en dur" dans le JPG (fragile — cassait
   dès que la colonne n'avait plus exactement le même ratio, ex. en tablette), l'illustration
   de la ville reste ici purement décorative et ce cadre est un vrai composant HTML/CSS,
   à taille confortable fixe (pas un %), qui fonctionne à n'importe quelle largeur. */
.accueil-hero-texte {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    width: min(260px, calc(100% - 2 * var(--space-4)));
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    text-align: left;
    box-sizing: border-box;
    font-size: 0.8rem;
}

/* Petit badge ovale "Lil Life", recréé en CSS plutôt qu'incrusté dans l'image — même
   esprit graphique que le logo d'origine (ovale jaune, texte blanc gras) mais indépendant
   de la résolution/du recadrage de l'illustration en dessous. */
.accueil-hero-badge {
    display: inline-block;
    background: radial-gradient(ellipse at center, #ffe066 0%, #ffcc00 70%, #ffb300 100%);
    color: #fff;
    font-family: var(--font-titre);
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    width: 4.2rem;
    height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin-bottom: var(--space-3);
}

.accueil-hero-texte p {
    font-weight: bold;
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}

/* Lien simple, gras et souligné — fidèle à l'original (.Style8, juste un <a> coloré en
   gras), posé sur la même carte opaque que le paragraphe. */
.accueil-hero-lien {
    display: inline-block;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: underline;
    color: var(--color-primary-dark);
    transition: color var(--transition-fast);
}

.accueil-citation {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    width: 225px;
    height: 165px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 2rem;
    font-size: 0.8rem;
}

/* Carte blanche unique confirmée par capture d'écran réelle de l'archive (2014-11-03) :
   les 2 photos de la colonne latérale sont sur fond BLANC (comme la colonne illustration),
   pas orange — l'orange n'apparaît qu'à partir du pavé "les news". Coins arrondis sur
   toute la carte, clip via overflow:hidden. */
.accueil-carte {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.accueil-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
}

/* Colonne latérale : les 2 photos sont posées à plat sur le blanc de la carte (pas de
   fond propre), seul le pavé "les news" en dessous est orange. */
.accueil-sidebar {
    width: 231px;
    flex-shrink: 0;
}

.accueil-sidebar img {
    width: 100%;
    display: block;
}

.accueil-news {
    background: var(--color-accent);
    text-align: center;
    padding: 1rem;
}

.accueil-news img {
    width: auto;
    height: 68px;
    margin-bottom: 0.75rem;
}

.accueil-news ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0.85rem;
    color: #2e2a26;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.accueil-news-date {
    display: inline-block;
    background: #fff;
    color: var(--color-primary-dark);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    margin-right: 0.2rem;
}

/* Première visite (tutoriel en 6 étapes) */
.premiere-visite-slides {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.premiere-visite-slide {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.premiere-visite-slide img {
    width: 260px;
    flex-shrink: 0;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.premiere-visite-slide h2 {
    margin-top: 0;
}

.cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.form-page {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-secondary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

label.checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

fieldset {
    display: flex;
    gap: 0.5rem;
    border: none;
    padding: 0;
}

fieldset legend {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    padding: 0.6rem;
    border: 1px solid #e0c48a;
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: var(--font-texte);
}

.btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 1rem;
    font-family: var(--font-texte);
    cursor: pointer;
    text-align: center;
}

.btn:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text);
}

.btn-secondary:hover {
    color: var(--color-text);
    background: #ffdb8a;
}

.alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Pastilles yes.png/no.png reprises de l'original (images/divers/), affichées devant
   chaque message de succès/erreur comme dans toutes les pages du jeu original. */
.alert::before {
    content: "";
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
}

.alert-error {
    background: #fdecea;
    color: var(--color-error);
    border: 1px solid #f5c6c0;
}

.alert-error::before {
    background-image: url(/assets/images/divers/no.png);
}

.alert-success {
    background: #eaf7e9;
    color: var(--color-success);
    border: 1px solid #c3e6c1;
}

.alert-success::before {
    background-image: url(/assets/images/divers/yes.png);
}

.creation-form {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
}

.creation-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.skin-choice {
    display: flex;
    gap: 0.6rem;
    border: none;
    padding: 0;
}

.skin-choice legend {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    width: 100%;
}

.skin-option input {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
}

.skin-option:nth-of-type(1) input { accent-color: rgb(249, 240, 177); }
.skin-option:nth-of-type(2) input { accent-color: rgb(242, 200, 158); }
.skin-option:nth-of-type(3) input { accent-color: rgb(212, 157, 100); }
.skin-option:nth-of-type(4) input { accent-color: rgb(148, 90, 30); }

.creation-preview {
    width: 150px;
    text-align: center;
}

.creation-preview img {
    max-width: 100%;
}

/* Hauteur alignée sur fond-header.png (972x201 natif) : dans l'original, le bandeau du
   haut faisait réellement 201px, en 3 rangées empilées à droite du logo (date/compteur,
   pub, boutons de menu) alors que le logo (165h) s'étendait sur toute la hauteur. On
   n'a pas de pub, donc 2 rangées : logo+horloge/météo en haut, les 6 boutons en dessous —
   mais toujours aux tailles natives (logo, boutons), pas réduites arbitrairement comme
   avant, sinon le fond se retrouve étiré/déformé et tout paraît miniaturisé par rapport à
   l'original. */
.game-top-nav {
    position: relative;
    min-height: 201px;
    background-color: var(--color-header-bg);
    background-image: url(/assets/images/design/fond-header.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100%;
    border-bottom: 3px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.game-top-nav-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.game-top-nav-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.game-top-nav-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bulle "petites annonces" du header, reprise pixel pour pixel de includes/bulle-membre.php :
   les 5 vraies images (haut 220x50, gauche/droite 20x82, centre 180x82, bas 220x49 avec la
   pointe de la bulle) sont empilées en position absolue à leurs coordonnées natives EXACTES
   — vérifié par composition GD hors-ligne : à ces coordonnées précises, les 5 morceaux se
   raccordent sans le moindre interstice et forment une seule bulle ovale continue, comme la
   bulle de connexion. Toute la logique par blocs CSS séparés (bordures/ombres/fonds propres
   à chaque section) a été abandonnée : elle introduisait des raccords visibles qui ne
   correspondent à aucune ligne réelle du dessin. */
.bulle-annonces {
    position: absolute;
    top: 100%;
    right: 1rem;
    z-index: 20;
    width: 220px;
    height: 181px;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

.ba-piece {
    position: absolute;
    left: 0;
    display: block;
    pointer-events: none;
}

.ba-haut { top: 0; width: 220px; height: 50px; }
.ba-gauche { top: 50px; width: 20px; height: 82px; }
.ba-centre { top: 50px; left: 20px; width: 180px; height: 82px; }
.ba-droite { top: 50px; left: 200px; width: 20px; height: 82px; }
.ba-bas { top: 132px; width: 220px; height: 49px; }

.ba-titre-lien {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 50px;
}

.ba-texte {
    position: absolute;
    top: 56px;
    left: 20px;
    width: 180px;
    height: 68px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 0.6rem;
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
}

.ba-texte p {
    margin: 0;
    color: #2e2a26;
    /* Texte libre saisi par un joueur : une seule chaîne sans espace ne doit jamais
       pouvoir élargir la bulle (et donc la page) au-delà de sa largeur prévue. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.ba-texte a {
    color: #2e2a26;
}

.ba-actions {
    position: absolute;
    top: 126px;
    left: 0;
    width: 220px;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* Spécificité (.bulle-annonces .ba-actions img) volontairement plus élevée que
   .game-top-nav a img (60px) : sans ça, les icônes minuscules (19x14 natif) héritent de la
   taille des gros boutons du menu et sont affichées floues/pixelisées. */
.bulle-annonces .ba-actions img {
    height: 15px;
    width: auto;
}

.ba-badges {
    position: absolute;
    top: 148px;
    left: 0;
    width: 220px;
    display: flex;
    gap: 0.4rem;
    justify-content: center;
}

.bulle-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.7rem;
}

.bulle-annonces .bulle-badge img {
    height: 13px;
    width: auto;
}

/* Logo à sa taille native (242x165, images/logos/logo-lil-life.png dans l'original) —
   auparavant réduit à 90px de haut, ce qui le faisait paraître écrasé par rapport aux
   boutons de menu alors qu'il les domine largement dans l'original. Spécificité
   .game-top-nav .game-top-nav-logo img (2 classes) volontairement plus élevée que
   .game-top-nav a img (1 classe + 2 types) plus bas : sinon la règle générique des
   boutons (60px) s'applique aussi à ce lien (c'est un <a> dans .game-top-nav) et écrase
   la taille native du logo — même piège de spécificité que .ba-actions img plus haut. */
.game-top-nav .game-top-nav-logo img {
    height: 165px;
    width: auto;
    display: block;
}

/* Horloge + "en ville" du header en jeu (render_horloge_ville) : repris de
   includes/header-heure.php, absent auparavant des pages en jeu (seule la météo
   persistait). flex-shrink:0 pour ne jamais céder de place aux boutons du menu qui,
   contrairement à ces pastilles, doivent rester sur une seule ligne. */
.game-horloge {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Même piège de spécificité que .bulle-annonces .ba-actions img plus haut :
   .game-top-nav a img (60px) matche aussi le <img> à l'intérieur du lien
   .stats-pill-en-ligne (c'est un <a> dans .game-top-nav) et l'agrandirait sinon. */
.game-top-nav .stats-pill img {
    height: 18px;
    width: 18px;
}

.game-top-nav .stats-meteo {
    flex-shrink: 0;
}

.game-top-nav a,
.game-top-nav .nav-disabled {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-text);
    font-weight: bold;
}

.game-top-nav a:hover {
    color: var(--color-primary-dark);
}

/* Boutons d'origine (images/menu/*.png, 72x60 natif, icône + texte inclus dans l'image) */
.game-top-nav a img {
    height: 60px;
    width: auto;
    display: block;
    transition: transform 0.1s;
}

.game-top-nav a:hover img {
    transform: translateY(-2px);
}

.game-nav a img,
.nav-disabled img {
    height: 30px;
    width: auto;
    display: block;
}

.icone-desactivee {
    filter: grayscale(1);
    opacity: 0.6;
}

/* Largeur totale alignée sur le tableau d'origine (972px : 231 sidebar + 741 contenu,
   cf. jeu/lil-city.php et fond-header.png natif 972px) — 960px auparavant, assez proche
   mais pas exact. */
.game-layout {
    display: flex;
    align-items: flex-start;
    max-width: 972px;
    margin: 2rem auto;
    gap: 2rem;
    padding: 0 1rem;
}

/* 231px natif (largeur de la colonne de gauche dans jeu/lil-city.php) — 200px auparavant
   rendait l'avatar (150px de large à l'origine) trop à l'étroit. */
.game-sidebar {
    width: 231px;
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--radius);
    border-top: 4px solid var(--color-accent);
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.game-avatar {
    max-width: 100%;
}

.game-identite {
    font-size: 0.85rem;
    color: #777;
    margin: 0.5rem 0 0;
}

.game-argent {
    font-weight: bold;
    margin: 0.2rem 0 1rem;
}

/* Lien vers l'historique bancaire, repris de menu-gauche-membres.php (icône argent.png +
   lien vers jeu/historique.php, absent auparavant de la refonte où ce n'était qu'un
   texte statique non cliquable). */
.game-argent a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.game-argent a:hover {
    text-decoration: underline;
}

.game-argent img {
    width: 16px;
    height: 16px;
}

/* Sélecteur de personnage actif (compte multi-personnages) : discret, s'intègre dans la
   colonne latérale, soumission automatique au changement pour rester fluide. */
.personnage-switcher {
    margin: 0 0 1rem;
    text-align: left;
}

.personnage-switcher-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #999;
    margin-bottom: 0.2rem;
}

.personnage-switcher select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: var(--font-texte);
    font-size: 0.85rem;
    color: var(--color-text);
}

.game-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.game-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.game-nav a:hover {
    color: var(--color-primary-dark);
}

.nav-disabled {
    font-size: 0.9rem;
    color: #bbb;
}

.nav-disabled em {
    font-style: normal;
    font-size: 0.7rem;
    background: var(--color-secondary);
    color: #888;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    margin-left: 0.3rem;
}

/* Pilule de secours pour les entrées du menu membre absentes de l'original (Petites
   annonces, Modération, Administration — voir game_nav_links()) : même dégradé/gabarit
   que les vrais boutons-images (images/menu/*.png, 135x34) pour rester cohérent visuellement
   au lieu d'un texte brut sans style. */
.game-nav-pill {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 34px;
    background: linear-gradient(to bottom, #ffcc33, #ff6633);
    border: 1px solid #fff;
    border-radius: 17px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    color: #fff !important;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.game-nav-pill:hover {
    background: linear-gradient(to bottom, #ffd966, #ff8533);
}

.game-main {
    flex: 1;
    background: #fff;
    border-radius: var(--radius);
    border-top: 4px solid var(--color-accent);
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.game-main .stats {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.game-main .stats li {
    background: var(--color-bg);
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.upcoming-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    list-style: none;
    padding: 0;
}

.upcoming-list li {
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    text-align: center;
    color: #888;
}

/* Plan de ville cliquable (jeu.php), repris de jeu/lil-city.php dans l'original : la
   carte isométrique (jeu/lieux/lil-city-2.png, Flash + <map> HTML à l'origine) est ici un
   simple <img> avec des liens positionnés en % par-dessus — donc responsive contrairement
   à l'original figé en pixels, tout en gardant les mêmes zones cliquables (voir
   ville_lieux() dans game_layout.php pour les coordonnées, calculées à partir du <map>
   d'origine puis vérifiées visuellement pixel par pixel). */
.ville-carte {
    position: relative;
    max-width: 731px;
    margin: 0 auto;
    line-height: 0;
}

.ville-carte-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.ville-pin {
    position: absolute;
    width: 9%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.ville-pin:hover,
.ville-pin:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55);
    transform: translate(-50%, -50%) scale(1.08);
}

.ville-pin-label {
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(46, 42, 38, 0.9);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.ville-pin:hover .ville-pin-label,
.ville-pin:focus-visible .ville-pin-label {
    opacity: 1;
}

.ville-gauges-card {
    max-width: 731px;
    margin-left: auto;
    margin-right: auto;
}

.account-card {
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.account-card h2 {
    margin-top: 0;
}

.titre-icone {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.account-hint {
    font-size: 0.85rem;
    color: #888;
}

.signature-preview {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-secondary);
}

.signature-content img.smiley {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary-dark);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    font-family: var(--font-texte);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-link-icone {
    width: 14px;
    height: 14px;
}

/* Mise en valeur du texte d'un modérateur/administrateur, fidèle à l'original :
   - .Style7 (styles/general.css) : bleu #336699 gras, utilisé pour le texte d'une petite
     annonce postée par un modérateur (forum/action.php).
   - le rouge #CC0000 gras était utilisé pour l'étiquette de rôle ("Modérateur"/
     "Administrateur") affichée sous le pseudo de l'auteur d'un message de forum
     (forum/lire-message.php). Les deux traitements sont distincts et repris tels quels. */
.texte-moderateur,
.texte-moderateur a {
    font-weight: bold;
    color: #336699;
}

.role-badge {
    font-weight: bold;
    color: #cc0000;
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

/* Badge "Né(e) sur Lil" (personnage-fiche.php) : recréé en CSS (couleur #448abb reprise
   de l'image d'origine images/divers/nesurlil.png) plutôt que réutiliser l'image aplatie,
   pour rester dans l'esprit "texte réel" du reste du site — et accorder le genre. */
.badge-ne-sur-lil {
    display: inline-block;
    background: #448abb;
    color: #fff;
    font-weight: bold;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.sub-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sub-nav a {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: bold;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.data-table th {
    background: var(--color-secondary);
    padding: 0.5rem;
    font-size: 0.85rem;
    text-align: center;
}

.data-table td {
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--color-secondary);
    font-size: 0.9rem;
}

.data-table form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.house-switcher {
    margin-bottom: 1.5rem;
}

.house-switcher select {
    margin-left: 0.5rem;
    padding: 0.3rem;
    border-radius: var(--radius);
    border: 1px solid #e0c48a;
}

.sub-nav a.active {
    text-decoration: underline;
    color: var(--color-primary);
}

.texte-alerte {
    color: var(--color-error);
    font-weight: bold;
}

.identite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.fiche-table {
    width: 100%;
    border-collapse: collapse;
}

.fiche-table td {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    border-bottom: 1px dashed var(--color-secondary);
}

.fiche-table td:first-child {
    color: #888;
    width: 40%;
}

.fiche-icone {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.gauges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.gauge-item span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.lien-info {
    line-height: 0;
}

.lien-info img {
    width: 13px;
    height: 13px;
    opacity: 0.7;
}

.lien-info:hover img {
    opacity: 1;
}

.gauge {
    background: var(--color-secondary);
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
}

.gauge-bon { background: var(--color-success); }
.gauge-moyen { background: #e0a800; }
.gauge-mauvais { background: var(--color-error); }

.gauge-label {
    font-size: 0.75rem;
    color: #888;
}

.texte-positif {
    color: var(--color-success);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.pagination a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.nouveautes-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.nouveautes-liste {
    flex: 1;
}

.nouveautes-forum {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.aide-form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

.aide-form label {
    flex: 1;
}

.texte-gauche {
    text-align: left;
}

/* Carte de post générique, réutilisée par messages-lire, support-lire, moderation,
   mariage, administration-news, amis (PAS le fil d'un sujet de forum — voir .forum-message
   plus bas pour la vue dédiée d'un sujet, fidèle à lire-message.php de l'original). */
.forum-post {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-secondary);
}

.forum-post-auteur {
    width: 140px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.85rem;
}

.forum-post-auteur img {
    max-width: 100%;
    border-radius: var(--radius);
}

.forum-post-contenu {
    flex: 1;
}

.forum-post-meta {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.5rem;
}

.forum-signaler {
    margin-top: 0.5rem;
}

/* Une réponse = une carte : bande verte "Le DD/MM/YYYY à HH:MM" + actions (modifier/
   signaler) en blanc à droite, puis un corps à 2 colonnes : bloc identité fixe à gauche
   (150px, avatar + nom + rôle + Identité/Vip ?) et le texte du message à droite — repris
   à l'identique de lire-message.php dans l'original (colonne #EEDCB2, lignes Identité/Vip
   alternées #F6EACB/blanc, rôle Modérateur/Administrateur en rouge gras sous le nom). */
.forum-message {
    margin-bottom: 2px;
    background: #e3c680;
    padding: 1px;
    border-radius: 4px;
    font-family: var(--font-forum);
}

.forum-message-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.75rem;
    background-image: url(/assets/images/forum/design/fond-titres.png);
    background-repeat: repeat-x;
    background-color: #b0c134;
    color: #fff;
    font-size: 0.85rem;
}

.forum-message-entete .fme-date {
    font-weight: bold;
}

.forum-message-entete .fme-actions {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.forum-message-entete .fme-actions a {
    color: #fff;
}

.fme-signaler-form {
    display: contents;
}

.fme-signaler-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
}

.forum-message-corps {
    display: flex;
    align-items: stretch;
}

.forum-message-auteur {
    width: 150px;
    flex-shrink: 0;
    background: #eedcb2;
    text-align: center;
}

.fma-avatar {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: contain;
    object-position: bottom;
    background: #eedcb2;
}

.fma-nom {
    background: #fff;
    color: #ea663a;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.3rem;
}

.fma-role {
    background: #fff;
    color: #cc0000;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0 0.3rem 0.3rem;
}

.fma-info {
    display: flex;
    justify-content: space-between;
    background: #f6eacb;
    font-size: 0.65rem;
    padding: 0.25rem 0.4rem;
}

.fma-info.fma-info-alt {
    background: #fff;
}

.forum-message-texte {
    flex: 1;
    background: #fff;
    padding: 1rem;
}

.fma-lien {
    font-size: 0.65rem;
    padding: 0.4rem;
}

.fma-lien a {
    color: #655232;
}

/* Footer à 3 colonnes fidèle à includes/footer.php : gauche/droite en crème (231/280px
   dans l'original), centre en orange plein et plus large (460-595px) — proportions reprises
   à l'identique en pourcentages fluides. Les 3 colonnes se touchent directement (comme les
   <td> de la table d'origine, pas d'espace de fond de page entre elles), et le footer suit
   immédiatement le bloc sidebar/hero de la page d'accueil sans marge (voir main.main-large). */
.site-footer {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1150px;
    margin: 2rem auto 0;
    padding: 0 1rem 1.5rem;
    font-size: 0.8rem;
}

main.main-large + .site-footer {
    margin-top: 0;
}

.site-footer-col {
    text-align: center;
    padding: 1.25rem 1.5rem;
}

.site-footer-liens,
.site-footer-vide {
    flex: 0 0 22%;
    background: #ffe9a0;
}

.site-footer-marque {
    flex: 1;
    background: #f5921e;
}

.site-footer-liens {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    color: #2e2a26;
}

.site-footer-liens a {
    color: #2e2a26;
    text-decoration: none;
}

.site-footer-liens a:hover {
    text-decoration: underline;
}

.site-footer-marque img {
    height: 55px;
    display: block;
    margin: 0 auto 0.75rem;
}

.site-footer-marque p {
    margin: 0;
    line-height: 1.5;
    color: #2e2a26;
}

/*
 * Thèmes de section, repris de styles/forum.css et styles/admin.css : dans l'original,
 * ces deux espaces avaient un fond plat jaune (#FFCC08) au lieu du fond météo dynamique du
 * reste du site, et une palette de liens légèrement différente (orange #EA663A). Posé via
 * le paramètre $theme de render_game() (body.theme-forum / body.theme-admin), qui l'emporte
 * sur la classe météo pour le fond uniquement.
 */
body.theme-forum,
body.theme-admin {
    background-image: none !important;
    background-color: #ffcc08;
    font-family: var(--font-forum);
}

.theme-forum h1, .theme-forum h2, .theme-forum h3, .theme-forum .btn,
.theme-admin h1, .theme-admin h2, .theme-admin h3, .theme-admin .btn {
    font-family: var(--font-forum);
}

.theme-forum .game-top-nav,
.theme-admin .game-top-nav {
    border-bottom-color: #ea663a;
}

.theme-forum .game-sidebar,
.theme-forum .game-main,
.theme-admin .game-sidebar,
.theme-admin .game-main {
    border-top-color: #ea663a;
}

.theme-forum h1, .theme-forum h2, .theme-forum h3,
.theme-admin h1, .theme-admin h2, .theme-admin h3 {
    color: #ea663a;
}

.theme-forum a, .theme-forum .sub-nav a, .theme-forum .btn-link,
.theme-admin a, .theme-admin .sub-nav a, .theme-admin .btn-link {
    color: #ea663a;
}

.theme-forum .btn,
.theme-admin .btn {
    background: #ea663a;
}

.theme-forum .btn:hover,
.theme-admin .btn:hover {
    background: #c94f28;
}

.theme-forum .data-table th,
.theme-admin .data-table th {
    background: #ffe4b0;
}

.theme-admin .texte-alerte {
    color: #cc0000;
}

.theme-admin .alert-success {
    color: #669933;
}

/* Responsive mobile — l'original était figé en 1140/972px de large (tableaux imbriqués),
   incompatible avec un petit écran. La mise en page flexbox/grid ci-dessus est refluée ici
   en colonne unique sous ~760px. */
@media (max-width: 760px) {
    .site-header-grid {
        grid-template-columns: 1fr;
        /* justify-items:stretch (pas center) : les enfants doivent occuper toute la
           largeur de la colonne pour que flex-wrap puisse effectivement replier les
           pastilles/boutons au lieu de déborder hors du viewport. */
        justify-items: stretch;
        text-align: center;
        gap: 0.75rem;
    }

    /* min-width:0 partout dans cette chaîne : par défaut un enfant flex/grid refuse de
       rétrécir sous la largeur intrinsèque de son contenu ("min-width:auto"), ce qui
       forçait toute la grille — et donc la page entière — à s'élargir au-delà du
       viewport au lieu de laisser flex-wrap replier les boutons. */
    .site-header-grid > * {
        min-width: 0;
    }

    .site-header-milieu {
        /* stretch (pas center) : sinon stats-bar/visiteurs redeviennent shrink-to-content
           et perdent la largeur nécessaire pour que leur propre flex-wrap s'active. */
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .stats-bar,
    .site-header-visiteurs {
        justify-content: center;
        width: 100%;
        min-width: 0;
    }

    .site-header-logo img {
        height: 64px;
    }

    .bulle-connexion {
        margin: 0 auto;
    }

    .bulle-annonces {
        /* position:relative (pas static) : les 5 morceaux à l'intérieur sont en
           position:absolute et ont besoin de ce conteneur comme référence. En position
           static, ils chercheraient le prochain ancêtre positionné (.game-top-nav) et se
           retrouveraient collés en haut à gauche du header, hors de la bulle.
           flex-basis:100% : force sa propre ligne dans le nav replié, sinon elle se
           retrouve coincée à côté de la petite icône météo et les deux se chevauchent.
           min-width:0 : sinon son contenu interne refuse de rétrécir sous sa largeur
           intrinsèque et fait déborder toute la page. Les pièces (haut/gauche/centre/
           droite/bas) restent à leur taille native fixe (220px) : ça tient sans
           adaptation particulière dans la largeur d'un mobile. */
        position: relative;
        top: auto;
        right: auto;
        flex-basis: 100%;
        width: 220px;
        min-width: 0;
        margin: 0.5rem auto 1rem;
    }

    main {
        padding: 0 0.75rem;
    }

    .cta-group {
        flex-direction: column;
    }

    .game-top-nav {
        min-height: 0;
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .game-top-nav .game-top-nav-logo img {
        height: 56px;
    }

    .game-top-nav a img {
        height: 44px;
    }

    .accueil-hero-texte {
        position: static;
        width: auto;
        margin-bottom: 1rem;
    }

    .accueil-citation {
        position: static;
        width: auto;
        height: auto;
        background: var(--color-bg);
        margin-top: 1rem;
    }

    .accueil-layout {
        flex-direction: column;
    }

    .accueil-sidebar {
        width: 100%;
    }

    .premiere-visite-slide {
        flex-direction: column;
    }

    .premiere-visite-slide img {
        width: 100%;
        max-width: 320px;
    }

    .site-footer {
        flex-direction: column;
    }

    .site-footer-liens,
    .site-footer-vide {
        flex: 1;
    }

    .site-footer-liens {
        text-align: center;
    }

    .game-top-nav-boutons {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        margin: 0;
    }

    .game-top-nav a,
    .game-top-nav .nav-disabled {
        padding: 0.4rem 0;
    }

    .game-layout {
        flex-direction: column;
        margin: 1rem auto;
        padding: 0 0.75rem;
        gap: 1rem;
    }

    .game-sidebar,
    .game-main {
        width: 100%;
        /* min-width:0 : un enfant flex refuse par défaut de rétrécir sous la largeur
           intrinsèque de son contenu (ex. la grille .upcoming-list qui veut plusieurs
           colonnes de 160px), ce qui forçait toute la page à déborder sur mobile. */
        min-width: 0;
    }

    .game-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
        justify-content: center;
    }

    .game-main {
        padding: 1.25rem;
    }

    .identite-grid,
    .gauges-grid {
        grid-template-columns: 1fr;
    }

    .creation-form {
        flex-direction: column;
    }

    .nouveautes-layout {
        flex-direction: column;
    }

    .nouveautes-forum {
        width: 100%;
    }

    .aide-form {
        flex-direction: column;
        align-items: stretch;
    }

    .forum-post {
        flex-direction: column;
    }

    .forum-post-auteur {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
    }

    .forum-post-auteur img {
        max-width: 60px;
    }

    .forum-message-corps {
        flex-direction: column;
    }

    .forum-message-auteur {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
        padding: 0.5rem;
    }

    .fma-avatar {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }

    .fma-nom, .fma-role {
        text-align: left;
    }

    .fma-info, .fma-lien {
        display: none;
    }

    .forum-sujets-titre .fs-col-derniers,
    .forum-sujet-ligne .fsl-derniers {
        display: none;
    }

    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }

    .upcoming-list {
        grid-template-columns: 1fr;
    }

    .account-card {
        min-width: 0;
        box-sizing: border-box;
    }

    .ville-pin {
        width: 12%;
    }

    .ville-pin-label {
        display: none;
    }
}

/* ==========================================================================
   Forum — page autonome, reprise fidèlement de forum/includes/header.php et
   footer.php dans l'original (illustration + titre + badge date + recherche,
   catégories en bandes vertes, lignes de forum alternées crème/beige).
   ========================================================================== */
body.forum-page {
    background-color: #ffcc08;
    font-family: var(--font-forum);
    margin: 0;
}

.forum-page h1, .forum-page h2, .forum-page h3 {
    font-family: var(--font-forum);
    color: #ea663a;
}

.forum-page a {
    color: #ea663a;
}

.forum-page .data-table th {
    background: #ffe4b0;
    font-family: var(--font-forum);
}

/* .btn garde son propre contraste (fond plein + texte blanc) — ne doit pas hériter de
   la couleur de lien orange de .forum-page a, sinon le texte devient invisible sur un
   fond de la même couleur. */
.forum-page .btn {
    color: #fff;
}

.forum-header {
    background-image: url(/assets/images/forum/design/fond-header.png);
    background-repeat: repeat-x;
    background-color: #cfe9f7;
    padding-top: 0.5rem;
}

.forum-header-inner {
    max-width: 983px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.forum-header-personnages {
    display: block;
    width: 250px;
    height: 142px;
    flex-shrink: 0;
}

.forum-header-titre {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 560px;
    height: 142px;
    flex-shrink: 0;
}

.forum-header-titre img {
    display: block;
    width: 560px;
    height: 87px;
}

/* Badge date : 4 vraies images empilées en position absolue (gauche/droite pleine
   hauteur, fond-date tuilé en haut + bas-date en dessous), comme la bulle de connexion. */
.forum-header-date {
    position: relative;
    width: 173px;
    height: 142px;
    flex-shrink: 0;
    background-image: url(/assets/images/forum/design/header-gauche-date.png), url(/assets/images/forum/design/header-droite-date.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
}

.forum-header-date-corps {
    position: absolute;
    left: 82px;
    top: 0;
    width: 59px;
    height: 142px;
    background-image: url(/assets/images/forum/design/header-fond-date.png), url(/assets/images/forum/design/header-bas-date.png);
    background-repeat: repeat-y, no-repeat;
    background-position: top, bottom;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-forum);
    text-align: center;
    line-height: 1.1;
}

.forum-date-mois {
    font-size: 16px;
}

.forum-date-jour {
    font-size: 24px;
    font-weight: bold;
}

.forum-date-annee {
    font-size: 13px;
}

.forum-header-bas {
    max-width: 983px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background-image: url(/assets/images/forum/design/header-fond-menu.png);
    background-repeat: repeat-x;
    height: 55px;
}

.forum-header-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: 1rem;
}

.forum-header-nav img {
    display: block;
    height: 44px;
    width: auto;
    transition: transform var(--transition-fast);
}

.forum-header-nav a:hover img {
    transform: translateY(-2px);
}

.forum-header-recherche {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background-image: url(/assets/images/forum/design/header-recherche.png);
    background-repeat: no-repeat;
    width: 245px;
    height: 55px;
    box-sizing: border-box;
    padding: 0 1rem;
    margin-left: auto;
}

.forum-header-recherche input {
    background: #fff;
    border: none;
    border-radius: 3px;
    padding: 0.4rem 0.6rem;
    font-family: var(--font-texte);
    font-size: 0.85rem;
    width: 160px;
}

.forum-header-recherche button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.forum-header-recherche img {
    display: block;
    height: 24px;
}

.forum-identite-bar {
    max-width: 983px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    text-align: center;
    font-family: var(--font-forum);
    color: #ea663a;
    font-weight: bold;
}

.forum-identite-bar a {
    color: #ea663a;
}

.forum-main {
    max-width: 990px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* Une catégorie = une table : bande verte pour le titre + les 3 colonnes d'en-tête,
   fond doré pour le corps, lignes de forum alternées crème/beige — fidèle à l'original. */
.forum-categorie {
    margin-bottom: 1.5rem;
    background: #e3c680;
    padding: 1px;
    border-radius: 4px;
}

.forum-categorie-titre {
    display: flex;
    background-image: url(/assets/images/forum/design/fond-titres.png);
    background-repeat: repeat-x;
    background-color: #b0c134;
    color: #fff;
    font-family: var(--font-forum);
    font-size: 0.9rem;
}

.forum-categorie-titre > div {
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
}

.forum-categorie-titre .fc-nom {
    flex: 1;
    font-weight: bold;
}

.forum-categorie-titre .fc-col {
    width: 15%;
    text-align: center;
}

.forum-categorie-titre .fc-col-derniers {
    width: 22%;
    text-align: center;
}

.forum-categorie-corps {
    background: #ffcc08;
    padding: 0.5rem;
}

.forum-ligne {
    display: flex;
    align-items: stretch;
    margin-bottom: 2px;
    font-family: var(--font-forum);
}

.forum-ligne:nth-child(odd) .fl-nom { background: #f6eacb; }
.forum-ligne:nth-child(even) .fl-nom { background: #eedcb2; }
.forum-ligne:nth-child(odd) .fl-col { background: #eedcb2; }
.forum-ligne:nth-child(even) .fl-col { background: #f6eacb; }

.forum-ligne .fl-nom {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
}

.forum-ligne .fl-nom img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.forum-ligne .fl-titre {
    font-weight: bold;
    color: #886f44;
    text-decoration: underline;
    font-size: 0.95rem;
}

.forum-ligne .fl-desc {
    display: block;
    color: #886f44;
    font-size: 0.8rem;
    font-weight: normal;
    text-decoration: none;
}

.forum-ligne .fl-col {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: #2e2a26;
}

.forum-ligne .fl-derniers {
    width: 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
    color: #886f44;
}

.forum-ligne .fl-derniers a {
    color: #886f44;
    text-decoration: underline;
}

/* Barre "Pages : ... | Accueil forum » Forum | Ouvrir une nouvelle discussion", reprise
   telle quelle de lire-forum.php/lire-message.php dans l'original (3 colonnes : pages à
   gauche, fil d'ariane au centre, action à droite), affichée en haut ET en bas de la
   liste des sujets / de la discussion. */
.forum-fil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    font-family: var(--font-forum);
    color: #2e2a26;
    flex-wrap: wrap;
}

.forum-fil a {
    color: #2e2a26;
    text-decoration: underline;
}

.forum-fil a:hover {
    text-decoration: none;
}

.forum-fil-chemin {
    font-weight: bold;
    text-align: center;
}

.forum-fil-action {
    text-align: right;
    font-weight: bold;
}

/* Liste des sujets à l'intérieur d'un forum (lire-forum.php) : même bande verte que
   .forum-categorie mais avec les colonnes Réponses/Vues/Dernier message, et des lignes
   crème/beige alternées par sujet. */
.forum-sujets {
    margin-bottom: 1.5rem;
    background: #e3c680;
    padding: 1px;
    border-radius: 4px;
}

.forum-sujets-titre {
    display: flex;
    background-image: url(/assets/images/forum/design/fond-titres.png);
    background-repeat: repeat-x;
    background-color: #b0c134;
    color: #fff;
    font-family: var(--font-forum);
    font-size: 0.9rem;
}

.forum-sujets-titre > div {
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
}

.forum-sujets-titre .fs-nom {
    flex: 1;
    font-weight: bold;
}

.forum-sujets-titre .fs-col {
    width: 10%;
    text-align: center;
}

.forum-sujets-titre .fs-col-derniers {
    width: 25%;
    text-align: center;
}

.forum-sujets-corps {
    background: #ffcc08;
    padding: 0.5rem;
}

.forum-sujets-vide {
    background: #f6eacb;
    text-align: center;
    color: #ea663a;
    padding: 1.5rem;
    font-family: var(--font-forum);
    border-radius: 4px;
}

.forum-sujet-ligne {
    display: flex;
    align-items: stretch;
    margin-bottom: 2px;
    font-family: var(--font-forum);
}

.forum-sujet-ligne:nth-child(odd) .fsl-nom { background: #f6eacb; }
.forum-sujet-ligne:nth-child(even) .fsl-nom { background: #eedcb2; }
.forum-sujet-ligne:nth-child(odd) .fsl-col,
.forum-sujet-ligne:nth-child(odd) .fsl-derniers { background: #eedcb2; }
.forum-sujet-ligne:nth-child(even) .fsl-col,
.forum-sujet-ligne:nth-child(even) .fsl-derniers { background: #f6eacb; }

.forum-sujet-ligne .fsl-nom {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
}

.forum-sujet-ligne .fsl-titre {
    font-weight: bold;
    color: #886f44;
    text-decoration: underline;
}

.forum-sujet-ligne .fsl-auteur {
    display: block;
    color: #886f44;
    font-size: 0.75rem;
    font-weight: normal;
}

.forum-sujet-ligne .fsl-col {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: #2e2a26;
}

.forum-sujet-ligne .fsl-derniers {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
    color: #886f44;
    gap: 0.15rem;
}

.forum-sujet-ligne .fsl-derniers a {
    color: #886f44;
    text-decoration: underline;
}

.forum-footer {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.forum-footer-carte {
    background: #f6eacb;
    border-radius: 10px;
    padding: 1rem 2rem;
    text-align: center;
    font-family: var(--font-forum);
    font-size: 0.9rem;
    color: #2e2a26;
}

.forum-footer-carte hr {
    border: none;
    border-top: 1px solid #d9c48f;
    margin: 0.5rem 0;
}

@media (max-width: 760px) {
    .forum-header-inner {
        flex-wrap: wrap;
        justify-content: center;
    }

    .forum-header-titre {
        width: 100%;
        height: auto;
        order: 3;
        padding: 0.5rem 0;
    }

    .forum-header-titre img {
        width: 90%;
        max-width: 400px;
        height: auto;
    }

    .forum-header-bas {
        flex-direction: column;
        height: auto;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }

    .forum-header-recherche {
        margin-left: 0;
    }

    .forum-categorie-titre {
        flex-wrap: wrap;
    }

    .forum-categorie-titre .fc-col,
    .forum-categorie-titre .fc-col-derniers {
        display: none;
    }

    .forum-ligne {
        flex-wrap: wrap;
    }

    .forum-ligne .fl-col,
    .forum-ligne .fl-derniers {
        width: 50%;
    }
}

/* Fiche d'identité publique (personnage-fiche.php) : page autonome fidèle à l'original
   (sans le bandeau/la colonne du jeu), fond dégradé ville orange->jaune (fond-new.png,
   repeat-x, la couleur de secours #FFCC00 prend le relai sous l'image), carte blanche
   arrondie centrée avec l'avatar à gauche et le tableau Identité/Age/Sexe/... à droite,
   lignes jaunes/blanches alternées comme dans personnage-fiche.php d'origine. */
body.fiche-page {
    margin: 0;
    min-height: 100vh;
    background-image: url(/assets/images/design/fond-new.png);
    background-repeat: repeat-x;
    background-color: #ffcc08;
    font-family: var(--font-texte);
}

.fiche-page-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
}

.fiche-carte {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    padding: 2rem;
    max-width: 680px;
    width: 100%;
    box-sizing: border-box;
}

.fiche-corps {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.fiche-avatar {
    flex-shrink: 0;
    width: 150px;
}

.fiche-avatar img {
    display: block;
    width: 150px;
    height: auto;
}

.fiche-info {
    flex: 1;
    min-width: 0;
}

.fiche-titre {
    font-weight: bold;
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: #2e2a26;
}

.fiche-carte-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: #2e2a26;
}

.fiche-carte-table td {
    padding: 0.4rem 0.6rem;
}

.fiche-carte-table td:first-child {
    width: 42%;
}

.fiche-carte-table tr.fl-jaune td {
    background: #ffcc00;
}

.fiche-statut-icone {
    width: 59px;
    height: 22px;
}

.fiche-feedback {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    margin: 0.75rem 0;
}

.fiche-feedback img {
    width: 15px;
    height: 15px;
}

.fiche-feedback-non {
    color: #cc0000;
}

.fiche-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1rem 0 0.5rem;
}

.fiche-actions button,
.fiche-actions a {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    cursor: pointer;
}

.fiche-actions img {
    width: 26px;
    height: auto;
}

.fiche-vote {
    margin-top: 0.5rem;
}

.fiche-cta {
    border: 2px solid #ffcc00;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: #2e2a26;
}

.fiche-cta-titre {
    font-weight: bold;
    margin: 0 0 0.5rem;
}

.fiche-cta a {
    color: #2e2a26;
}

.fiche-retour {
    margin-top: 1.5rem;
    text-align: center;
}

.fiche-retour a {
    color: #2e2a26;
}

.fiche-vide {
    text-align: center;
    padding: 2rem 1rem;
}

.fiche-vide-logo {
    max-width: 220px;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .fiche-corps {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .fiche-carte-table td:first-child {
        width: 50%;
    }
}