/* telrose-trans.com : styles du dispositif « Le duo privé » (21/10/2026), chargés après style.css. */

/* 100% et non 100vw : sous Windows, 100vw compte la barre de défilement et crée un scroll horizontal. */
body {
    width: 100%;
}

/* Popup « Appeler » centrée quelle que soit la hauteur de l'image (js/site.js pose top: 50%). */
.TELROSE__popup {
    transform: translateY(-50%);
}

.TELROSE__popup .TELROSE__img {
    max-height: 45vh;
}


/* --- Cartes des grilles : prénom, âge, puis le titre de la fiche (plus de boutons) --------- */

ul.TELROSE__post_loop li .TELROSE__card_name {
    margin: 8px 0 2px 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

ul.TELROSE__post_loop li h3 {
    display: block;
    height: auto;
    max-height: none !important;
    margin: 0;
    padding: 0;
    background: none;
    text-transform: none;
    text-align: left;
    font-size: 14px;
    line-height: 19px;
}

ul.TELROSE__post_loop li h3 a {
    color: var(--text_color);
    text-decoration: none;
}

ul.TELROSE__post_loop li h3 a:hover {
    color: #ffffff;
}


/* --- Signature des fiches ----------------------------------------------------------------- */

.TELROSE__single_body .TELROSE__signature {
    margin: 4px 0 18px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--main_color);
    background-color: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    line-height: 20px;
}

.TELROSE__single_body .TELROSE__signature a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: var(--legal_color);
}

.TELROSE__single_body .TELROSE__signature span {
    opacity: 0.8;
}


/* --- Encadré de l'accueil et listes des fiches mises à jour ------------------------------- */

.TELROSE__encadre_maj {
    width: 800px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 10px auto 30px auto;
    padding: 20px 24px;
    background-color: var(--header_color);
    border: 1px solid var(--secondary_color);
    border-top: 3px solid var(--main_color);
    border-radius: 8px;
    font-size: 14px;
    line-height: 21px;
}

section.TELROSE__main .TELROSE__encadre_maj h2 {
    margin: 0 0 8px 0;
    font-size: 19px;
    color: #ffffff;
}

.TELROSE__encadre_maj ol {
    margin: 12px 0;
    padding-left: 22px;
}

.TELROSE__encadre_maj li,
.TELROSE__maj_liste li {
    margin: 0 0 6px 0;
}

.TELROSE__encadre_maj a,
.TELROSE__maj_liste a {
    color: #ffffff;
}

.TELROSE__encadre_lien a {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--main_color);
    border-radius: 6px;
    text-decoration: none;
}

/* Replié après 2 fiches ; le bouton (js/site.js) retire TELROSE__replie. */
.TELROSE__encadre_maj.TELROSE__replie ol li:nth-child(n+3) {
    display: none;
}

.TELROSE__encadre_maj .TELROSE__deployer {
    display: block;
    margin: 0 0 12px 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--legal_color);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.TELROSE__maj_liste {
    padding-left: 18px;
}

.TELROSE__maj_liste li span {
    display: block;
    font-size: 12px;
    opacity: 0.75;
}


/* --- Pages du dispositif : sections repliées ---------------------------------------------- */

details.TELROSE__section {
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--secondary_color);
}

details.TELROSE__section summary {
    cursor: pointer;
    list-style: none;
}

details.TELROSE__section summary::-webkit-details-marker {
    display: none;
}

details.TELROSE__section summary h2 {
    display: inline;
}

/* Le trait décoratif du thème sous les H2 se décalait sous les titres repliés : on le retire ici. */
details.TELROSE__section summary h2::after,
details.TELROSE__section summary h2::before {
    display: none !important;
}

details.TELROSE__section summary::after {
    content: ' +';
    color: var(--legal_color);
    font-weight: bold;
}

details.TELROSE__section[open] summary::after {
    content: ' −';
}

@media (max-width: 700px) {
    .TELROSE__encadre_maj {
        padding: 16px;
    }
}
