/*
 * OfficeBreak v3 — Bootstrap 5 Custom Skin
 * DA : pixel art / indie game, palette beige-brun-orange
 * Police : Press Start 2P (titres) + DM Sans (corps)
 * Reproduit fidèlement les maquettes fournies
 */

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:wght@400;500;600;700&display=swap");

/* ══════════════════════════════════════════════════
   1. VARIABLES & OVERRIDE BOOTSTRAP
══════════════════════════════════════════════════ */
:root {
    /* Palette DA */
    --ob-bg: #f2ede4;
    --ob-bg-card: #fdfaf4;
    --ob-bg-inset: #eae4d8;
    --ob-border: #cfc4b0;
    --ob-border-dark: #8b7355;
    --ob-text: #3a2a1e;
    --ob-text-muted: #8b7355;
    --ob-text-light: #b5a080;

    --ob-orange: #e07b2a;
    --ob-orange-dk: #c4631a;
    --ob-orange-lt: #fff0e0;
    --ob-green: #5c8050;
    --ob-green-lt: #e6f5e2;
    --ob-red: #c0392b;
    --ob-red-lt: #faeae8;
    --ob-yellow: #c8960c;
    --ob-purple: #7050b8;
    --ob-purple-lt: #ede8fa;

    --ob-shadow: 3px 3px 0px var(--ob-border-dark);
    --ob-shadow-sm: 2px 2px 0px var(--ob-border);
    --ob-radius: 6px;

    --ob-font-pixel: "Press Start 2P", monospace;
    --ob-font-body: "DM Sans", sans-serif;

    /* Override BS5 */
    --bs-body-font-family: var(--ob-font-body);
    --bs-body-bg: var(--ob-bg);
    --bs-body-color: var(--ob-text);
    --bs-primary: var(--ob-orange);
    --bs-primary-rgb: 224, 123, 42;
    --bs-border-color: var(--ob-border);
    --bs-border-radius: var(--ob-radius);
    --bs-card-bg: var(--ob-bg-card);
    --bs-card-border-color: var(--ob-border);
    --bs-card-cap-bg: var(--ob-bg-inset);
}

/* ══════════════════════════════════════════════════
   2. BASE
══════════════════════════════════════════════════ */
body {
    font-family: var(--ob-font-body);
    background-color: var(--ob-bg);
    color: var(--ob-text);
    font-size: 14px;
    /* Grain papier subtil */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23C8BCA816'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════
   3. NAVBAR — logo + 4 icônes, épurée
══════════════════════════════════════════════════ */
.navbar {
    background: var(--ob-bg-card) !important;
    border-bottom: 2px solid var(--ob-border-dark);
    padding: 0 16px;
    height: 56px;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}
.ob-brand-text {
    font-family: var(--ob-font-pixel);
    font-size: 24px;
    color: var(--ob-text);
    line-height: 1.4;
    letter-spacing: -0.3px;
}
.ob-brand-text span {
    color: var(--ob-orange);
}

/* Streak pill */
.ob-streak {
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    padding: 4px 9px;
    border-radius: 20px;
    border: 2px solid #c4631a;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Nav icon buttons */
.ob-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--ob-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--ob-text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.ob-nav-btn:hover,
.ob-nav-btn.active {
    background: var(--ob-bg-inset);
    color: var(--ob-text);
}
.ob-nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ob-bg-inset);
    border: 2px solid var(--ob-border-dark);
    font-family: var(--ob-font-pixel);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ob-text);
}

/* Dropdown langue */
.ob-lang-dropdown .dropdown-menu {
    border: 2px solid var(--ob-border-dark);
    box-shadow: var(--ob-shadow);
    border-radius: var(--ob-radius);
    background: var(--ob-bg-card);
    min-width: 130px;
    padding: 4px;
}
.ob-lang-dropdown .dropdown-item {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--ob-text);
}
.ob-lang-dropdown .dropdown-item:hover {
    background: var(--ob-bg-inset);
}

/* ══════════════════════════════════════════════════
   4. LAYOUT 3 COLONNES (desktop) / stack (mobile)
      Reproduit exactement l'image desktop maquette
══════════════════════════════════════════════════ */
.ob-layout {
    display: grid;
    grid-template-columns: 220px 1fr 270px;
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
    align-items: start;
}
@media (max-width: 992px) {
    .ob-layout {
        grid-template-columns: 1fr;
    }
    .ob-col-left,
    .ob-col-right {
        display: none;
    }
}
@media (max-width: 576px) {
    .ob-layout {
        padding: 10px 8px;
        gap: 10px;
    }
}

/* ══════════════════════════════════════════════════
   5. CARDS — pixel borders
══════════════════════════════════════════════════ */
.card {
    background: var(--ob-bg-card);
    border: 2px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow-sm);
}
.card-header {
    background: var(--ob-bg-inset);
    border-bottom: 2px solid var(--ob-border);
    padding: 9px 14px;
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    color: var(--ob-text-muted);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.card-body {
    padding: 14px;
}
.card-footer {
    background: var(--ob-bg-inset);
    border-top: 2px solid var(--ob-border);
    padding: 10px 14px;
}

/* ══════════════════════════════════════════════════
   6. BOUTONS — effet 3D pixel
══════════════════════════════════════════════════ */
.btn {
    font-family: var(--ob-font-pixel);
    font-size: 8px;
    padding: 9px 16px;
    border-radius: var(--ob-radius);
    border-width: 2px;
    transition:
        transform 0.08s,
        box-shadow 0.08s;
    line-height: 1;
    letter-spacing: 0.2px;
}
.btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: none !important;
}
.btn-primary {
    background: var(--ob-orange);
    border-color: var(--ob-orange-dk);
    color: #fff;
    box-shadow: 3px 3px 0 var(--ob-orange-dk);
}
.btn-primary:hover {
    background: var(--ob-orange-dk);
    border-color: #a8521a;
    color: #fff;
    box-shadow: 3px 3px 0 #a8521a;
}
.btn-secondary {
    background: var(--ob-bg-card);
    border-color: var(--ob-border-dark);
    color: var(--ob-text);
    box-shadow: 3px 3px 0 var(--ob-border-dark);
}
.btn-secondary:hover {
    background: var(--ob-bg-inset);
    border-color: var(--ob-border-dark);
    color: var(--ob-text);
}
.btn-success {
    background: var(--ob-green);
    border-color: #3d6035;
    color: #fff;
    box-shadow: 3px 3px 0 #3d6035;
}
.btn-danger {
    background: var(--ob-red);
    border-color: #8b2820;
    color: #fff;
    box-shadow: 3px 3px 0 #8b2820;
}
.btn-sm {
    font-size: 7px;
    padding: 6px 10px;
}
.btn-lg {
    font-size: 9px;
    padding: 13px 22px;
}

/* ══════════════════════════════════════════════════
   7. FORMS
══════════════════════════════════════════════════ */
.form-label {
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    color: var(--ob-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
}
.form-control,
.form-select {
    background: var(--ob-bg-card);
    border: 2px solid var(--ob-border-dark);
    border-radius: var(--ob-radius);
    color: var(--ob-text);
    font-family: var(--ob-font-body);
    font-size: 13px;
    padding: 9px 12px;
    box-shadow: inset 1px 1px 0 var(--ob-border);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ob-orange);
    box-shadow:
        inset 1px 1px 0 var(--ob-border),
        0 0 0 3px var(--ob-orange-lt);
    background: var(--ob-bg-card);
    color: var(--ob-text);
    outline: none;
}
.form-control.ob-code-input {
    font-family: var(--ob-font-pixel);
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.5em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════
   8. BADGES / ACHIEVEMENTS
   Reproduit les grilles d'images 1 & 4
══════════════════════════════════════════════════ */
.ob-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 10px;
}
.ob-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    cursor: pointer;
}
.ob-badge-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: 2px solid var(--ob-border);
    background: var(--ob-bg-inset);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ob-shadow-sm);
    transition:
        transform 0.1s,
        box-shadow 0.1s;
    position: relative;
}
.ob-badge:hover .ob-badge-icon {
    transform: translate(-1px, -2px);
    box-shadow: 3px 4px 0 var(--ob-border-dark);
}
.ob-badge.locked .ob-badge-icon {
    filter: grayscale(1) opacity(0.35);
}
.ob-badge.locked .ob-badge-icon::after {
    content: "🔒";
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 15px;
    filter: none;
}
.ob-badge-name {
    font-family: var(--ob-font-pixel);
    font-size: 6px;
    color: var(--ob-text-muted);
    line-height: 1.5;
    max-width: 76px;
}
/* Rarity colors — reproduit les tabs Common/Uncommon/Rare/Legendary */
.ob-badge-icon.rarity-common {
    border-color: var(--ob-border-dark);
    background: #f5f0e8;
}
.ob-badge-icon.rarity-uncommon {
    border-color: var(--ob-green);
    background: var(--ob-green-lt);
    box-shadow: 2px 2px 0 var(--ob-green);
}
.ob-badge-icon.rarity-rare {
    border-color: #4a80d0;
    background: #ebf2ff;
    box-shadow: 2px 2px 0 #4a80d0;
}
.ob-badge-icon.rarity-legendary {
    border-color: var(--ob-purple);
    background: var(--ob-purple-lt);
    box-shadow: 2px 2px 0 var(--ob-purple);
}

/* Rarity tabs header (comme image 1) */
.ob-rarity-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border: 2px solid var(--ob-border-dark);
    border-radius: var(--ob-radius);
    overflow: hidden;
    width: fit-content;
}
.ob-rarity-tab {
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    padding: 7px 14px;
    cursor: pointer;
    border-right: 2px solid var(--ob-border-dark);
    background: var(--ob-bg-card);
    color: var(--ob-text-muted);
}
.ob-rarity-tab:last-child {
    border-right: none;
}
.ob-rarity-tab.common {
}
.ob-rarity-tab.uncommon.active {
    background: var(--ob-green);
    color: #fff;
}
.ob-rarity-tab.rare.active {
    background: #4a80d0;
    color: #fff;
}
.ob-rarity-tab.legendary.active {
    background: var(--ob-purple);
    color: #fff;
}
.ob-rarity-tab.active {
    background: var(--ob-border-dark);
    color: #fff;
}

/* ══════════════════════════════════════════════════
   9. CLASSEMENT — reproduit image 2 / image 5
══════════════════════════════════════════════════ */
.ob-period-tabs {
    display: flex;
    border: 2px solid var(--ob-border-dark);
    border-radius: var(--ob-radius);
    overflow: hidden;
    width: fit-content;
}
.ob-period-tab {
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    padding: 7px 12px;
    color: var(--ob-text-muted);
    text-decoration: none;
    background: var(--ob-bg-card);
    border-right: 2px solid var(--ob-border-dark);
    white-space: nowrap;
    transition: background 0.1s;
}
.ob-period-tab:last-child {
    border-right: none;
}
.ob-period-tab.active,
.ob-period-tab:hover {
    background: var(--ob-orange);
    color: #fff;
}

.ob-scope-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ob-scope-tab {
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    padding: 6px 12px;
    border: 2px solid var(--ob-border-dark);
    border-radius: 20px;
    background: var(--ob-bg-card);
    color: var(--ob-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.1s;
}
.ob-scope-tab.active {
    background: var(--ob-text);
    color: #fff;
    border-color: var(--ob-text);
}

/* Lignes classement */
.ob-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--ob-border);
    transition: background 0.1s;
}
.ob-lb-row:last-child {
    border-bottom: none;
}
.ob-lb-row:hover {
    background: var(--ob-bg-inset);
}
.ob-lb-row.is-me {
    background: var(--ob-orange-lt);
    border-left: 3px solid var(--ob-orange);
}
.ob-lb-rank {
    font-family: var(--ob-font-pixel);
    font-size: 11px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.ob-lb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--ob-border-dark);
    background: var(--ob-bg-inset);
    font-family: var(--ob-font-pixel);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.ob-lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ob-lb-name {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ob-lb-score {
    font-family: var(--ob-font-pixel);
    font-size: 9px;
    color: var(--ob-orange);
    white-space: nowrap;
}
.ob-lb-icon {
    font-size: 14px;
}

/* ══════════════════════════════════════════════════
   10. JEU — Wordle / Pendu (image 2 mobile)
══════════════════════════════════════════════════ */

/* Titre défi */
.ob-game-title {
    font-family: var(--ob-font-pixel);
    font-size: 11px;
    text-align: center;
    margin-bottom: 4px;
    line-height: 1.8;
}
.ob-game-subtitle {
    text-align: center;
    font-size: 12px;
    color: var(--ob-text-muted);
    margin-bottom: 16px;
}

/* Grille Wordle */
.ob-wordle-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    margin: 16px auto;
}
.ob-wordle-row {
    display: flex;
    gap: 6px;
}
.ob-tile {
    width: 52px;
    height: 52px;
    border: 2px solid var(--ob-border-dark);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ob-font-pixel);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--ob-bg-card);
    color: var(--ob-text);
    transition:
        background 0.25s 0.1s,
        border-color 0.25s 0.1s,
        color 0.25s 0.1s;
}
@media (max-width: 400px) {
    .ob-tile {
        width: 42px;
        height: 42px;
        font-size: 12px;
    }
}
.ob-tile.correct {
    background: #5c8050;
    border-color: #3d6035;
    color: #fff;
}
.ob-tile.present {
    background: #c8960c;
    border-color: #9a720a;
    color: #fff;
}
.ob-tile.absent {
    background: #7a6550;
    border-color: #5a4838;
    color: #fff;
}
.ob-tile.active {
    border-color: var(--ob-orange);
}

@keyframes ob-flip {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
.ob-tile.flip {
    animation: ob-flip 0.35s ease;
}

@keyframes ob-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}
.ob-tile.pop {
    animation: ob-pop 0.12s ease;
}

/* Clavier AZERTY */
.ob-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    margin-top: 16px;
}
.ob-kb-row {
    display: flex;
    gap: 5px;
}
.ob-key {
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    min-width: 32px;
    height: 42px;
    padding: 0 5px;
    border: 2px solid var(--ob-border-dark);
    border-radius: 4px;
    background: var(--ob-bg-card);
    color: var(--ob-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 var(--ob-border-dark);
    transition:
        transform 0.08s,
        box-shadow 0.08s;
    user-select: none;
}
.ob-key:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.ob-key.wide {
    min-width: 52px;
    font-size: 6px;
}
.ob-key.correct {
    background: #5c8050;
    border-color: #3d6035;
    color: #fff;
    box-shadow: 2px 2px 0 #3d6035;
}
.ob-key.present {
    background: #c8960c;
    border-color: #9a720a;
    color: #fff;
    box-shadow: 2px 2px 0 #9a720a;
}
.ob-key.absent {
    background: #7a6550;
    border-color: #5a4838;
    color: #fff;
    box-shadow: 2px 2px 0 #5a4838;
}
@media (max-width: 380px) {
    .ob-key {
        min-width: 26px;
        height: 36px;
        font-size: 6px;
    }
    .ob-key.wide {
        min-width: 42px;
    }
}

/* Bouton valider */
.ob-validate-btn {
    width: 100%;
    margin-top: 12px;
    background: var(--ob-border-dark);
    color: #fff;
    font-family: var(--ob-font-pixel);
    font-size: 9px;
    padding: 12px;
    border: 2px solid #5a3a28;
    border-radius: var(--ob-radius);
    box-shadow: 3px 3px 0 #5a3a28;
    cursor: pointer;
    transition:
        transform 0.08s,
        box-shadow 0.08s;
    letter-spacing: 0.5px;
}
.ob-validate-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.ob-validate-btn:hover {
    background: #5a3a28;
}

/* ══════════════════════════════════════════════════
   11. PENDU — cœurs + SVG
══════════════════════════════════════════════════ */
.ob-hearts {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 22px;
}
.ob-heart-lost {
    filter: grayscale(1) opacity(0.3);
}
.ob-hangman-svg {
    display: block;
    margin: 0 auto;
}

/* Mot masqué */
.ob-word-display {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 14px 0;
}
.ob-word-slot {
    width: 38px;
    height: 46px;
    border-bottom: 3px solid var(--ob-border-dark);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    font-family: var(--ob-font-pixel);
    font-size: 18px;
    color: var(--ob-text);
}
.ob-word-slot.space {
    border-bottom-color: transparent;
    width: 16px;
}

/* ══════════════════════════════════════════════════
   12. BLOC RÉSULTAT + PARTAGE (image 2)
══════════════════════════════════════════════════ */
.ob-result-block {
    background: var(--ob-bg-inset);
    border: 2px solid var(--ob-border-dark);
    border-radius: var(--ob-radius);
    padding: 14px;
    margin-top: 14px;
}
.ob-result-title {
    font-family: var(--ob-font-pixel);
    font-size: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ob-result-emojis {
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 1.6;
    margin-bottom: 10px;
    font-family: monospace;
}
.ob-result-meta {
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    color: var(--ob-text-muted);
    margin-bottom: 12px;
}

/* Boutons réseaux sociaux (image 2) */
.ob-social-btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.ob-btn-facebook {
    background: #1877f2;
    color: #fff;
    border: 2px solid #1060c8;
    box-shadow: 3px 3px 0 #1060c8;
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    padding: 8px 14px;
    border-radius: var(--ob-radius);
    cursor: pointer;
    transition: transform 0.08s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ob-btn-twitter {
    background: #1da1f2;
    color: #fff;
    border: 2px solid #1081c2;
    box-shadow: 3px 3px 0 #1081c2;
    font-family: var(--ob-font-pixel);
    font-size: 7px;
    padding: 8px 14px;
    border-radius: var(--ob-radius);
    cursor: pointer;
    transition: transform 0.08s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ob-btn-facebook:active,
.ob-btn-twitter:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* ══════════════════════════════════════════════════
   13. CÉMENTIX — barre similarité
══════════════════════════════════════════════════ */
.ob-cem-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--ob-border);
    font-size: 12px;
}
.ob-cem-row:last-child {
    border-bottom: none;
}
.ob-cem-word {
    font-family: var(--ob-font-pixel);
    font-size: 8px;
    width: 90px;
    flex-shrink: 0;
    color: var(--ob-text);
}
.ob-cem-bar-wrap {
    flex: 1;
    height: 10px;
    background: var(--ob-bg-inset);
    border: 1px solid var(--ob-border);
    border-radius: 3px;
    overflow: hidden;
}
.ob-cem-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.ob-cem-bar.hot {
    background: var(--ob-green);
}
.ob-cem-bar.warm {
    background: var(--ob-yellow);
}
.ob-cem-bar.cold {
    background: var(--ob-red);
}
.ob-cem-pct {
    font-family: var(--ob-font-pixel);
    font-size: 8px;
    width: 34px;
    text-align: right;
    flex-shrink: 0;
    color: var(--ob-text-muted);
}

/* ══════════════════════════════════════════════════
   14. PROFIL
══════════════════════════════════════════════════ */
.ob-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--ob-border-dark);
    background: var(--ob-bg-inset);
    font-family: var(--ob-font-pixel);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ob-text);
    overflow: hidden;
}
.ob-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ob-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ob-border);
    font-size: 13px;
}
.ob-stat-row:last-child {
    border-bottom: none;
}
.ob-stat-val {
    font-family: var(--ob-font-pixel);
    font-size: 10px;
    color: var(--ob-orange);
}
.ob-history-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--ob-border);
    font-size: 12px;
}
.ob-history-row:last-child {
    border-bottom: none;
}

/* ══════════════════════════════════════════════════
   15. ALERTS & TOASTS
══════════════════════════════════════════════════ */
.alert {
    border: 2px solid;
    border-radius: var(--ob-radius);
    font-size: 13px;
    padding: 10px 14px;
}
.alert-success {
    background: var(--ob-green-lt);
    border-color: var(--ob-green);
    color: #2a5020;
}
.alert-danger {
    background: var(--ob-red-lt);
    border-color: var(--ob-red);
    color: #6b1e18;
}
.alert-info {
    background: #ebf2ff;
    border-color: #4a80d0;
    color: #1a3860;
}
.alert-warning {
    background: #fff8e0;
    border-color: var(--ob-yellow);
    color: #5a3e00;
}

.ob-toast {
    background: var(--ob-text);
    color: #fff;
    font-family: var(--ob-font-pixel);
    font-size: 8px;
    padding: 10px 16px;
    border-radius: var(--ob-radius);
    border: 2px solid var(--ob-border-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.ob-toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* ══════════════════════════════════════════════════
   16. MODAL RÉSULTAT (image 2)
══════════════════════════════════════════════════ */
.ob-modal .modal-content {
    background: var(--ob-bg-card);
    border: 3px solid var(--ob-border-dark);
    border-radius: var(--ob-radius);
    box-shadow: 6px 6px 0 var(--ob-border-dark);
}
.ob-modal .modal-header {
    border-bottom: 2px solid var(--ob-border);
    background: var(--ob-bg-inset);
}
.ob-modal-emoji {
    font-size: 60px;
    display: block;
    text-align: center;
    margin: 8px 0 4px;
}
.ob-modal-title-pixel {
    font-family: var(--ob-font-pixel);
    font-size: 12px;
    text-align: center;
    line-height: 1.8;
}
.ob-modal-score {
    font-family: var(--ob-font-pixel);
    font-size: 10px;
    color: var(--ob-orange);
    text-align: center;
    margin: 4px 0 12px;
}

/* ══════════════════════════════════════════════════
   17. GROUPE — code invitation
══════════════════════════════════════════════════ */
.ob-invite-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ob-bg-inset);
    border: 2px solid var(--ob-border-dark);
    border-radius: var(--ob-radius);
    padding: 6px 14px;
    font-family: var(--ob-font-pixel);
    font-size: 16px;
    letter-spacing: 0.4em;
    color: var(--ob-text);
}

/* ══════════════════════════════════════════════════
   18. FOOTER
══════════════════════════════════════════════════ */
.ob-footer {
    text-align: center;
    padding: 24px 16px;
    font-family: var(--ob-font-body);
    font-size: 13px;
    color: var(--ob-text-muted);
    border-top: 2px solid var(--ob-border);
    margin-top: 24px;
    line-height: 2;
}
.ob-footer a {
    color: var(--ob-text-muted);
    text-decoration: none;
    font-weight: 500;
}
.ob-footer a:hover {
    color: var(--ob-orange);
}
.ob-footer small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.55;
}

/* ══════════════════════════════════════════════════
   19. UTILITAIRES
══════════════════════════════════════════════════ */
.text-pixel {
    font-family: var(--ob-font-pixel) !important;
}
.text-orange {
    color: var(--ob-orange) !important;
}
.text-muted {
    color: var(--ob-text-muted) !important;
}
.bg-inset {
    background: var(--ob-bg-inset) !important;
}
.ob-divider {
    border: none;
    border-top: 2px solid var(--ob-border);
    margin: 12px 0;
}
/* ═══════════════════════════════════════════════════════════════
   BREKIZ — Mode Sombre
   À ajouter à la fin de officebreak.css
   Activé par [data-theme="dark"] sur <html>
═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    /* Palette sombre — conserve l'esprit pixel art */
    --ob-bg: #1c1610;
    --ob-bg-card: #251e14;
    --ob-bg-inset: #1a140b;
    --ob-border: #3a2e1e;
    --ob-border-dark: #4d3f29;
    --ob-text: #e8dcc8;
    --ob-text-muted: #9a8a72;

    --ob-orange: #e07b2a;
    --ob-orange-dk: #c4621a;
    --ob-orange-lt: #3d2510;

    --ob-green: #4ade80;
    --ob-red: #f87171;
    --ob-red-lt: #3d1010;
    --ob-yellow: #fbbf24;

    /* Ombres portées plus douces */
    --ob-shadow: 2px 2px 0px #0a0806;
    --ob-shadow-sm: 1px 1px 0px #0a0806;

    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: var(--ob-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23ffffff08'/%3E%3C/svg%3E");
    color: var(--ob-text);
}

/* Navbar en mode sombre */
[data-theme="dark"] .navbar {
    background: rgba(28, 22, 16, 0.96);
    border-bottom-color: var(--ob-border-dark);
}

/* Cards */
[data-theme="dark"] .card {
    background: var(--ob-bg-card);
    border-color: var(--ob-border-dark);
}
[data-theme="dark"] .card-header {
    background: var(--ob-bg-inset);
    border-bottom-color: var(--ob-border-dark);
}

/* Inputs */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--ob-bg-inset);
    border-color: var(--ob-border-dark);
    color: var(--ob-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--ob-bg-inset);
    color: var(--ob-text);
    border-color: var(--ob-orange);
    box-shadow: 0 0 0 2px rgba(224, 123, 42, 0.25);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--ob-text-muted);
}

/* Boutons */
[data-theme="dark"] .btn-secondary {
    background: var(--ob-bg-inset);
    border-color: var(--ob-border-dark);
    color: var(--ob-text);
}
[data-theme="dark"] .btn-outline-primary {
    border-color: var(--ob-orange);
    color: var(--ob-orange);
}
[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--ob-border-dark);
    color: var(--ob-text-muted);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background: var(--ob-bg-card);
    border-color: var(--ob-border-dark);
}
[data-theme="dark"] .dropdown-item {
    color: var(--ob-text);
}
[data-theme="dark"] .dropdown-item:hover {
    background: var(--ob-bg-inset);
}

/* Footer */
[data-theme="dark"] .ob-footer {
    background: var(--ob-bg-card);
    border-top-color: var(--ob-border-dark);
    color: var(--ob-text-muted);
}
[data-theme="dark"] .ob-footer a {
    color: var(--ob-text-muted);
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background: rgba(74, 222, 128, 0.1);
    border-color: #16a34a;
    color: #4ade80;
}
[data-theme="dark"] .alert-danger {
    background: rgba(248, 113, 113, 0.1);
    border-color: #b91c1c;
    color: #f87171;
}
[data-theme="dark"] .alert-info {
    background: rgba(56, 189, 248, 0.1);
    border-color: #0284c7;
    color: #38bdf8;
}

/* Jeu — tuiles lettres */
[data-theme="dark"] .lt-letter-tile,
[data-theme="dark"] .wd-tile {
    background: var(--ob-bg-card);
    border-color: var(--ob-border-dark);
    color: var(--ob-text);
}

/* Cémentix — barres température */
[data-theme="dark"] .cem-thermo-bar {
    background: var(--ob-bg-inset);
}

/* Toast */
[data-theme="dark"] .ob-toast {
    background: var(--ob-bg-card);
    border-color: var(--ob-border-dark);
    color: var(--ob-text);
}

/* Transition douce */
body,
.navbar,
.card,
.card-header,
.form-control,
.form-select,
.dropdown-menu,
.ob-footer,
.btn {
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s;
}

/* ══════════════════════════════════════════════════
   20. PIXEL ICONS
══════════════════════════════════════════════════ */
.ob-icon {
    display: inline-block !important;
    vertical-align: middle;
    flex-shrink: 0;
    object-fit: contain;
    max-width: none !important;
    pointer-events: none;
    /* Rendu lissé pour le downscale (les PNG font ~100px) */
    image-rendering: auto;
    width: 20px !important;
    height: 20px !important;
}
.ob-icon-xs {
    width: 14px !important;
    height: 14px !important;
}
.ob-icon-sm {
    width: 16px !important;
    height: 16px !important;
}
.ob-icon-md {
    width: 20px !important;
    height: 20px !important;
}
.ob-icon-lg {
    width: 28px !important;
    height: 28px !important;
}
.ob-icon-xl {
    width: 36px !important;
    height: 36px !important;
}
.ob-icon-xxl {
    width: 52px !important;
    height: 52px !important;
}

/* Légère adaptation en mode sombre pour icônes sombres */
[data-theme="dark"] .ob-icon-dim {
    filter: brightness(0.85);
}

/* ══════════════════════════════════════════════════
   21. NAVBAR MOBILE — items secondaires collapsibles
══════════════════════════════════════════════════ */

/* Force la navbar à rester sur UNE seule ligne */
.navbar > .container-fluid {
    flex-wrap: nowrap !important;
    min-width: 0;
}
.ob-nav-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
    min-width: 0;
}

/* Desktop ≥ 576px : items secondaires visibles, bouton ⋮ caché */
@media (min-width: 576px) {
    .ob-nav-more-btn {
        display: none !important;
    }
    .ob-nav-secondary {
        display: contents !important;
    }
    .ob-lang-dropdown {
        display: block !important;
    }
}

/* Mobile < 576px : items secondaires + langue masqués, bouton ⋮ visible */
@media (max-width: 575px) {
    .ob-nav-secondary {
        display: none !important;
    }
    .ob-lang-dropdown {
        display: none !important;
    }
    .ob-nav-more-btn {
        display: flex !important;
    }
    .ob-nav-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .ob-streak {
        font-size: 6px;
        padding: 2px 6px;
    }
    .ob-brand-text {
        display: none;
    }
}

/* Dropdown "plus" mobile */
.ob-nav-more-btn {
    position: relative;
}
.ob-nav-more-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--ob-bg-card);
    border: 2px solid var(--ob-border-dark);
    border-radius: var(--ob-radius);
    box-shadow: 4px 4px 0 var(--ob-border-dark);
    z-index: 1050;
    min-width: 190px;
    padding: 4px;
    display: none;
}
.ob-nav-more-dropdown.open {
    display: block;
}
.ob-nav-more-dropdown a,
.ob-nav-more-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 4px;
    color: var(--ob-text);
    text-decoration: none;
    font-size: 12px;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: var(--ob-font-body);
}
.ob-nav-more-dropdown a:hover,
.ob-nav-more-dropdown button:hover {
    background: var(--ob-bg-inset);
    color: var(--ob-text);
}
[data-theme="dark"] .ob-nav-more-dropdown {
    background: var(--ob-bg-card);
    border-color: var(--ob-border-dark);
}