/**
 * Styles — Module DIVI Accordion Problématiques Repère
 * @author  abalone Studio — https://abalone.studio
 * @version 1.0.0
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ─── Variables ──────────────────────────────────────────── */
.rp-accordion-wrap {
    --rp-primary : #1f839b;
    --rp-accent  : #e8b119;
    --rp-dark    : #0f2b34;
    --rp-border  : #d0e8ee;
    --rp-light   : #f5f9fa;
    --rp-text    : #1a2e35;
    --rp-muted   : #5a7a85;
    --rp-white   : #ffffff;
    font-family  : 'DM Sans', sans-serif;
    color        : var(--rp-text);
    max-width    : 960px;
    margin       : 0 auto;
    padding      : 0 1.5rem;
}

/* ─── En-tête de section ─────────────────────────────────── */
.rp-acc-section-header {
    margin-bottom: 2.5rem;
}

.rp-acc-section-label {
    display        : block;
    font-size      : 0.7rem;
    font-weight    : 500;
    letter-spacing : 0.15em;
    text-transform : uppercase;
    color          : var(--rp-accent);
    margin-bottom  : 0.75rem;
}

.rp-acc-section-titre {
    font-family  : 'Playfair Display', serif;
    font-size    : clamp(1.8rem, 3vw, 2.4rem);
    font-weight  : 700;
    color        : var(--rp-dark);
    margin       : 0 0 0.75rem;
    line-height  : 1.2;
}

.rp-acc-section-intro {
    font-size    : 1rem;
    line-height  : 1.75;
    color        : var(--rp-muted);
    max-width    : 680px;
    margin       : 0;
}

/* ─── Liste accordion ────────────────────────────────────── */
.rp-acc-list {
    display       : flex;
    flex-direction: column;
    gap           : 0;
}

/* ─── Item ───────────────────────────────────────────────── */
.rp-acc-item {
    border        : 1px solid var(--rp-border);
    border-radius : 14px;
    overflow      : hidden;
    margin-bottom : 0.75rem;
    transition    : box-shadow 0.25s ease;
    background    : var(--rp-white);
}

.rp-acc-item--open {
    box-shadow: 0 8px 32px rgba(31, 131, 155, 0.1);
    border-color: rgba(31, 131, 155, 0.35);
}

/* ─── En-tête cliquable ──────────────────────────────────── */
.rp-acc-header {
    width          : 100%;
    display        : flex;
    align-items    : center;
    gap            : 1.25rem;
    padding        : 1.4rem 1.75rem;
    background     : none;
    border         : none;
    cursor         : pointer;
    text-align     : left;
    transition     : background 0.2s;
}

.rp-acc-header:hover {
    background: var(--rp-light);
}

.rp-acc-item--open .rp-acc-header {
    background   : var(--rp-light);
    border-bottom: 1px solid var(--rp-border);
}

.rp-acc-num {
    flex-shrink    : 0;
    width          : 32px;
    height         : 32px;
    border-radius  : 50%;
    background     : var(--rp-primary);
    color          : var(--rp-white);
    font-family    : 'Playfair Display', serif;
    font-size      : 0.9rem;
    font-weight    : 700;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.rp-acc-item--open .rp-acc-num {
    background: var(--rp-accent);
    color     : var(--rp-dark);
}

.rp-acc-titre {
    flex         : 1;
    font-family  : 'Playfair Display', serif;
    font-size    : clamp(1rem, 2vw, 1.15rem);
    font-weight  : 600;
    font-style   : italic;
    color        : var(--rp-dark);
    line-height  : 1.3;
}

.rp-acc-chevron {
    flex-shrink: 0;
    color      : var(--rp-muted);
    transition : transform 0.3s ease;
}

.rp-acc-item--open .rp-acc-chevron {
    transform: rotate(180deg);
    color    : var(--rp-primary);
}

/* ─── Corps accordion ────────────────────────────────────── */
.rp-acc-body {
    padding: 2rem 1.75rem;
}

/* ─── Ligne principale — 2 colonnes ─────────────────────── */
.rp-acc-row--main {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 2rem;
    align-items          : start;
}

/* ─── Label de colonne ───────────────────────────────────── */
.rp-acc-col-label {
    font-size      : 0.68rem;
    font-weight    : 600;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--rp-primary);
    margin-bottom  : 1rem;
}

/* ─── Texte colonne gauche ───────────────────────────────── */
.rp-acc-col-content {
    font-size  : 0.92rem;
    line-height: 1.75;
    color      : var(--rp-muted);
}

.rp-acc-col-content p { margin: 0 0 0.75rem; }
.rp-acc-col-content p:last-child { margin-bottom: 0; }

/* ─── Carte "Ce que Repère apporte" ─────────────────────── */
.rp-acc-apporte-card {
    background   : var(--rp-light);
    border       : 1px solid var(--rp-border);
    border-radius: 12px;
    padding      : 1.5rem;
}

.rp-acc-apporte-titre {
    font-family  : 'Playfair Display', serif;
    font-size    : 1.15rem;
    font-weight  : 700;
    color        : var(--rp-dark);
    margin-bottom: 0.3rem;
}

.rp-acc-apporte-duree {
    font-size    : 0.78rem;
    color        : var(--rp-accent);
    font-style   : italic;
    margin-bottom: 1rem;
}

.rp-acc-apporte-citation {
    margin       : 0 0 1.25rem;
    padding      : 0.75rem 1rem;
    border-left  : 3px solid var(--rp-accent);
    background   : rgba(232, 177, 25, 0.06);
    border-radius: 0 6px 6px 0;
    font-size    : 0.88rem;
    font-style   : italic;
    color        : var(--rp-dark);
    line-height  : 1.65;
}

/* ─── Bouton "Comment ça se passe ?" ─────────────────────── */
.rp-acc-btn-detail {
    display      : inline-flex;
    align-items  : center;
    gap          : 0.4rem;
    padding      : 0.5rem 1rem;
    border       : 1.5px solid var(--rp-primary);
    border-radius: 999px;
    background   : none;
    color        : var(--rp-primary);
    font-size    : 0.82rem;
    font-weight  : 500;
    cursor       : pointer;
    transition   : background 0.2s, color 0.2s;
}

.rp-acc-btn-detail:hover,
.rp-acc-btn-detail--open {
    background: var(--rp-primary);
    color     : var(--rp-white);
}

/* ─── Ligne détail "Comment ça se passe" ─────────────────── */
.rp-acc-row--detail {
    margin-top   : 1.5rem;
    padding-top  : 1.5rem;
    border-top   : 1px solid var(--rp-border);
}

.rp-acc-detail-inner {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 2rem;
    align-items          : start;
}

/* Colonne unique pleine largeur */
.rp-acc-detail-inner--full {
    grid-template-columns: 1fr !important;
}

/* Listes dans les colonnes détail */
.rp-acc-col-content ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.rp-acc-col-content li {
    font-size    : 0.88rem;
    color        : var(--rp-muted);
    line-height  : 1.65;
    padding      : 0.35rem 0 0.35rem 1.4rem;
    position     : relative;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    list-style   : none;
}

.rp-acc-col-content li:last-child {
    border-bottom: none;
}

.rp-acc-col-content li::before {
    content  : '→';
    position : absolute;
    left     : 0;
    color    : var(--rp-accent);
    font-size: 0.8rem;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .rp-acc-row--main,
    .rp-acc-detail-inner {
        grid-template-columns: 1fr;
    }

    .rp-acc-header {
        padding: 1.1rem 1.25rem;
    }

    .rp-acc-body {
        padding: 1.5rem 1.25rem;
    }
}