/* ═══════════════════════════════════════════════════
   Rock Sound — Module Actualités v3
   Layout : Dernières nouvelles (brèves) + Articles les plus lus
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap');

:root {
    --rs-bg:        #111111;
    --rs-bg-card:   #1a1a1a;
    --rs-bg-hover:  #1e1e1e;
    --rs-red:       #c0392b;
    --rs-red-dark:  #a93226;
    --rs-white:     #f0f0f0;
    --rs-grey:      #888888;
    --rs-grey-dim:  #555555;
    --rs-border:    #252525;
    --rs-font-head: 'Oswald', sans-serif;
    --rs-font-body: 'Roboto Condensed', sans-serif;
    --rs-radius:    2px;
    --rs-ease:      0.2s ease;
}

/* ── Wrapper ────────────────────────────────── */
.rs-module-wrap {
    background: var(--rs-bg);
    font-family: var(--rs-font-body);
    color: var(--rs-white);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    overflow: hidden;
    max-width: 100%;
}

/* ── Header du module ───────────────────────── */
.rs-module-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--rs-border);
    height: 44px;
}
.rs-module-title {
    font-family: var(--rs-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--rs-white);
    background: var(--rs-red);
    padding: 5px 14px;
    display: inline-block;
}

/* ── Blocs ──────────────────────────────────── */
.rs-block {
    padding: 18px 20px;
    border-bottom: 1px solid var(--rs-border);
}
.rs-block-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--rs-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rs-grey);
    margin-bottom: 14px;
}
.rs-block-label-sub {
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--rs-grey-dim);
    text-transform: none;
    font-size: 10px;
}

/* ── Métadonnées ────────────────────────────── */
.rs-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin-bottom: 4px;
}
.rs-cat  { color: var(--rs-red); font-family: var(--rs-font-head); }
.rs-sep  { color: var(--rs-border); }
.rs-date { color: var(--rs-grey); font-family: var(--rs-font-head); }
.rs-views {
    font-family: var(--rs-font-head);
    font-size: 10px;
    color: var(--rs-grey-dim);
    margin-left: auto;
}

/* ═══════════════════════════════════
   BLOC 1 — DERNIÈRES NOUVELLES (brèves)
═══════════════════════════════════ */
.rs-block--breves { padding-bottom: 0; }

#rs-breves-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rs-border); /* les gaps deviennent les bordures */
    margin: 0 -20px;
}

/* Message "aucune info" — pleine largeur */
#rs-breves-list .rs-empty {
    grid-column: 1 / -1;
    background: var(--rs-bg);
    padding: 14px 20px;
}

.rs-breve-item {
    position: relative;
    padding: 13px 14px;
    background: var(--rs-bg);
    transition: background var(--rs-ease);
}
.rs-breve-item:hover { background: var(--rs-bg-hover); }

/* Item qui vient d'être créé */
.rs-breve-item.rs-breve-new {
    animation: rs-slide-in 0.3s ease forwards;
    border-left: 3px solid var(--rs-red);
    padding-left: 17px;
}
@keyframes rs-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Item en cours de suppression */
.rs-breve-item.rs-deleting {
    animation: rs-fade-out 0.35s ease forwards;
    pointer-events: none;
}
@keyframes rs-fade-out {
    to { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; overflow: hidden; }
}

/* Bouton supprimer ✕ */
.rs-breve-delete {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rs-radius);
    color: var(--rs-grey-dim);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--rs-ease), background var(--rs-ease), color var(--rs-ease), border-color var(--rs-ease);
}
.rs-breve-item:hover .rs-breve-delete { opacity: 1; }
.rs-breve-delete:hover {
    background: rgba(192,57,43,0.15);
    border-color: var(--rs-red);
    color: var(--rs-red);
}

/* Confirmation de suppression */
.rs-breve-item.rs-confirm-delete .rs-breve-delete {
    opacity: 1;
    background: var(--rs-red);
    border-color: var(--rs-red);
    color: #fff;
    width: auto;
    padding: 0 8px;
    font-size: 10px;
    font-family: var(--rs-font-head);
    letter-spacing: 0.06em;
}

.rs-breve-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.rs-breve-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--rs-red);
    border-radius: 50%;
    flex-shrink: 0;
}
.rs-breve-cat {
    font-family: var(--rs-font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--rs-red);
}
.rs-breve-date {
    font-family: var(--rs-font-head);
    font-size: 10px;
    color: var(--rs-grey-dim);
    letter-spacing: 0.06em;
}
.rs-breve-title {
    font-family: var(--rs-font-head);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0 0 5px;
    padding-right: 28px; /* espace pour bouton ✕ */
}
.rs-breve-title a { color: var(--rs-white); text-decoration: none; transition: color var(--rs-ease); }
.rs-breve-title a:hover { color: var(--rs-red); }
.rs-breve-title span { color: var(--rs-white); }

.rs-breve-content {
    font-size: 12.5px;
    line-height: 1.55;
    color: #999;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rs-breve-author {
    font-size: 11px;
    color: var(--rs-grey-dim);
    font-style: italic;
}

/* ── Bouton + Ajouter ───────────────────────── */
.rs-btn-add-breve {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--rs-border);
    color: var(--rs-grey);
    font-family: var(--rs-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--rs-ease), background var(--rs-ease);
}
.rs-btn-add-breve:hover { color: var(--rs-white); background: var(--rs-bg-hover); }
.rs-btn-add-breve__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--rs-red);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    border-radius: var(--rs-radius);
    transition: transform var(--rs-ease);
    flex-shrink: 0;
}
.rs-btn-add-breve[aria-expanded="true"] .rs-btn-add-breve__icon { transform: rotate(45deg); }

/* ── Formulaire ─────────────────────────────── */
.rs-breve-form {
    padding: 16px 20px 20px;
    background: var(--rs-bg-card);
    border-top: 2px solid var(--rs-red);
    display: none;
    margin: 0 -20px;
    margin-bottom: -18px;
}
.rs-breve-form.rs-form-open { display: block; }

.rs-form-row {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 12px;
}
.rs-form-group { margin-bottom: 12px; }
.rs-form-group label {
    display: block;
    font-family: var(--rs-font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rs-grey);
    margin-bottom: 5px;
}
.rs-form-group label small {
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    color: #444;
    margin-left: 4px;
}
.rs-required { color: var(--rs-red); }

.rs-breve-form input[type="text"],
.rs-breve-form textarea,
.rs-breve-form select {
    width: 100%;
    background: #0e0e0e;
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    color: var(--rs-white);
    font-family: var(--rs-font-body);
    font-size: 13px;
    padding: 9px 11px;
    outline: none;
    transition: border-color var(--rs-ease);
    box-sizing: border-box;
    -webkit-appearance: none;
}
.rs-breve-form input:focus,
.rs-breve-form textarea:focus,
.rs-breve-form select:focus { border-color: var(--rs-red); }
.rs-breve-form textarea { resize: vertical; min-height: 75px; max-height: 160px; }
.rs-breve-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}
.rs-char-count { text-align: right; font-size: 10px; color: #444; margin-top: 4px; }

.rs-form-feedback { font-size: 12px; min-height: 0; transition: all var(--rs-ease); }
.rs-form-feedback.rs-error {
    color: #e74c3c; padding: 8px 10px;
    background: rgba(231,76,60,0.08);
    border: 1px solid rgba(231,76,60,0.25);
    margin-bottom: 10px; border-radius: var(--rs-radius);
}
.rs-form-feedback.rs-success {
    color: #2ecc71; padding: 8px 10px;
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.25);
    margin-bottom: 10px; border-radius: var(--rs-radius);
}

.rs-form-actions { display: flex; gap: 10px; margin-top: 14px; }
.rs-btn-submit {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; background: var(--rs-red); border: none; color: #fff;
    font-family: var(--rs-font-head); font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
    border-radius: var(--rs-radius); transition: background var(--rs-ease);
}
.rs-btn-submit:hover { background: var(--rs-red-dark); }
.rs-btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.rs-btn-loader {
    display: none; width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: rs-spin 0.6s linear infinite;
}
.rs-btn-submit.rs-loading .rs-btn-label { opacity: 0.4; }
.rs-btn-submit.rs-loading .rs-btn-loader { display: inline-block; }
@keyframes rs-spin { to { transform: rotate(360deg); } }

.rs-btn-cancel {
    padding: 10px 14px; background: transparent; border: 1px solid var(--rs-border);
    color: var(--rs-grey); font-family: var(--rs-font-head); font-size: 12px;
    font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; border-radius: var(--rs-radius);
    transition: border-color var(--rs-ease), color var(--rs-ease);
}
.rs-btn-cancel:hover { border-color: #555; color: var(--rs-white); }

.rs-login-prompt {
    padding: 13px 20px; font-size: 12px; color: var(--rs-grey);
    border-top: 1px solid var(--rs-border); text-align: center;
}
.rs-login-prompt a { color: var(--rs-red); text-decoration: none; }
.rs-login-prompt a:hover { text-decoration: underline; }

/* ═══════════════════════════════════
   BLOC 2 — ARTICLES LES PLUS LUS
═══════════════════════════════════ */
.rs-block--toplus { border-bottom: none; }

.rs-toplus-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.rs-toplus-item {
    display: grid;
    grid-template-columns: 36px 72px 1fr;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--rs-border);
    transition: background var(--rs-ease);
}
.rs-toplus-item:last-child { border-bottom: none; }
.rs-toplus-item:hover { background: var(--rs-bg-hover); }

.rs-toplus-rank {
    font-family: var(--rs-font-head);
    font-size: 26px;
    font-weight: 700;
    color: var(--rs-border);
    line-height: 1;
    text-align: center;
    letter-spacing: -1px;
}
.rs-toplus-item:first-child .rs-toplus-rank { color: var(--rs-red); }

.rs-toplus-thumb {
    width: 72px;
    height: 50px;
    background-size: cover;
    background-position: center;
    background-color: var(--rs-border);
    border-radius: var(--rs-radius);
    flex-shrink: 0;
}
.rs-toplus-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 18px;
}
.rs-toplus-thumb--empty::after { content: '▪'; }

.rs-toplus-body { min-width: 0; }

.rs-toplus-title {
    font-family: var(--rs-font-head);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0;
}
.rs-toplus-title a { color: var(--rs-white); text-decoration: none; transition: color var(--rs-ease); }
.rs-toplus-title a:hover { color: var(--rs-red); }

/* Bouton voir tout */
.rs-btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: var(--rs-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rs-grey);
    background: var(--rs-bg-card);
    border-top: 1px solid var(--rs-border);
    text-decoration: none;
    transition: color var(--rs-ease), background var(--rs-ease);
}
.rs-btn-more:hover { background: var(--rs-red); color: var(--rs-white); }

/* Vide */
.rs-empty {
    padding: 10px 0;
    font-size: 12px;
    color: var(--rs-grey-dim);
    font-style: italic;
}

/* ── Responsive ─────────────────────────────── */
@media ( max-width: 600px ) {
    .rs-toplus-item { grid-template-columns: 28px 58px 1fr; gap: 8px; }
    .rs-toplus-rank { font-size: 20px; }
    .rs-form-row { grid-template-columns: 1fr; }
}
@media ( max-width: 900px ) {
    #rs-breves-list { grid-template-columns: repeat(2, 1fr); }
}