/* ============================================================
   jeux-liens.css — Liens vers les jeux depuis les pages pédagogiques
   Ajouter dans /styles/ et référencer dans chapitre.html,
   cours.html, activite.html, exercices.html, index.html
   ============================================================ */

/* --- Bandeau haut (cours-nav) : section Jeux sur la même ligne que Outils --- */
.hero-tools-sep {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: rgba(255,255,255,.35);
    margin: 0 10px;
    vertical-align: middle;
}

.hero-jeu-link {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.15);
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s;
}
.hero-jeu-link:hover { background: rgba(255,255,255,.28); }

/* --- Bloc archipel + jeux sous les cartes de chapitre.html --- */
.chap-game-bloc {
    background: #1e3038;
    border-radius: 14px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.chap-archipel-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: #f5f0e1;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    transition: background .16s;
}
.chap-archipel-link:hover { background: rgba(255,255,255,.07); }
.chap-archipel-icon { font-size: 1.6rem; flex-shrink: 0; }
.chap-archipel-link div { flex: 1; display: flex; flex-direction: column; }
.chap-archipel-link strong { font-size: .95rem; color: #f5f0e1; }
.chap-archipel-link span { font-size: .8rem; opacity: .7; margin-top: 2px; color: #f5f0e1; }
.chap-archipel-arrow { color: #9fc4d0; font-size: 1.2rem; flex-shrink: 0; }

.chap-jeux-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    flex-wrap: wrap;
}

.chap-jeux-label {
    font-size: .82rem;
    font-weight: 700;
    color: #9fc4d0;
    white-space: nowrap;
    margin-right: 4px;
}

.chap-jeu-btn {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    color: #f5f0e1;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.2);
    transition: background .15s;
    white-space: nowrap;
}
.chap-jeu-btn:hover { background: rgba(255,255,255,.24); }

/* --- Index niveau : bouton Jeux par domaine --- */
.theme-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.theme-jeux-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 20px;
    background: #2e6857;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
}
.theme-jeux-btn:hover { background: #235046; }

/* --- Index niveau : bannière Archipel --- */
.archipel-banner { margin-bottom: 18px; }

.archipel-banner-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #1e3038, #2e4750);
    border-radius: 12px;
    color: #f5f0e1;
    text-decoration: none;
    transition: opacity .16s;
}
.archipel-banner-link:hover { opacity: .9; }
.archipel-banner-icon { font-size: 1.8rem; flex-shrink: 0; }
.archipel-banner-link div {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.archipel-banner-link strong { font-size: .97rem; }
.archipel-banner-link span { font-size: .82rem; opacity: .75; margin-top: 2px; }
.archipel-banner-arrow { font-size: 1.3rem; flex-shrink: 0; }

@media (max-width: 600px) {
    .chap-jeux-row { padding: 10px 14px; gap: 6px; }
    .chap-jeu-btn { font-size: .8rem; padding: 5px 9px; }
    .hero-tools-sep { display: none; }
}

/* --- Modale choix de jeu --- */
.jeux-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jeux-modal[hidden] { display: none; }

.jeux-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.jeux-modal-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 22px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    text-align: center;
    animation: jmFadeIn .2s ease;
}
@keyframes jmFadeIn { from { opacity: 0; transform: scale(.95); } }

.jeux-modal-close {
    position: absolute;
    top: 10px; right: 14px;
    background: none; border: none;
    font-size: 24px; color: #999;
    cursor: pointer; line-height: 1;
}
.jeux-modal-close:hover { color: #333; }

.jeux-modal-box h3 {
    font-size: 1.15rem;
    margin: 0 0 6px;
    color: #1e3038;
}

.jeux-modal-scope {
    font-size: .85rem;
    color: #6b8a95;
    margin: 0 0 16px;
}

.jeux-modal-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jeux-modal-btn {
    display: block;
    padding: 12px 18px;
    border-radius: 10px;
    background: #1e3038;
    color: #f5f0e1;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background .15s;
}
.jeux-modal-btn:hover { background: #2e4750; }