/* ===== Fond commun des pages de contenu ===== */
/* fond commun */
.page-emotion {
    /* position: relative;*/
    min-height: 100vh;
    padding-top: 60px;
    background-color: #f8f4ea;
    background-image: url("/font/Fond_marin.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    background-size: cover;
    background-attachment: fixed;
}
/* conteneur principal */
.emotion-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    font-family: var(--font-sans);
    /*  line-height: 1.6;*/
    color: var(--text);
    /* background-color: var(--background);*/
}
/* en-tête */
.emotion-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0.1rem;
    border-bottom: 1px solid var(--border);
    background: #ffd4a4;
    border: 2px solid #8b4513;
    border-radius: 10px;
}
/* titre */
.emotion-title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
/* sous-titre */
.emotion-subtitle {
    font-size: 1rem;
    color: #555;
    font-style: italic;
}
/* = SELECTEUR (pills) , interprétation, = */
.pills-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.pills-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 2px solid #8b4513;
    background: #e1c7a7; /*    #fff;*/
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    max-width: 260px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

    .pills-pill:hover {
        background: #ffc880; /*#ffe8cc;*/
        transform: translateY(-1px);
    }

.pills-pill-active {
    /*background: var(--secondary);*/
    color: white;
    border-color: var(--secondary);
}

.pills-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pills-pill-active .pills-numero {
    background: rgba(255, 255, 255, 0.25);
}

.pills-titre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* =====  bouton suivant / précédent ===== */
.bas-page-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.btn-nav-mineure {
    background: var(--secondary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

    .btn-nav-mineure:hover:not(:disabled) {
        background: #2980b9;
    }

    .btn-nav-mineure:disabled {
        background: #b0c4de;
        cursor: not-allowed;
    }

.bas-page-compteur {
    font-size: 0.85rem;
    color: wheat;/*#555;*/
}
/* = SELECTEUR bouton rond avec numéro : Actualité, Humour, Questions, Anecdote, Idées reçues = */
.btn-rond-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.btn-rond-pill {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid #8b4513;
    background: #b0c4de; /*   #fff;*/
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

    .btn-rond-pill:hover {
        background: #ffe8cc;
        transform: translateY(-1px);
    }

.btn-rond-pill-active {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}