/* Import Poppins (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================
   TABLEAU COMPARATIF CSE FINANCE
   ============================================ */

.cse-comparatif {
    --cse-violet: #6708FF;
    --cse-violet-clair: #9F79FC;
    --cse-violet-pale: #EEEBFF; /* Fond de la colonne CSE Finance */
    --cse-bleu-pale: #E8EFFF;
    --cse-gris-categorie: #F9F9F9;
    --cse-gris-header: #E0E0E0; /* Gris de la première colonne et des headers */
    --cse-bordure: #D4D4D4; /* Couleur du quadrillage */
    --cse-texte: #363636;
    --cse-texte-clair: #666;

    font-family: 'Poppins', sans-serif;
    color: var(--cse-texte) !important;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

.cse-comparatif *,
.cse-comparatif *::before,
.cse-comparatif *::after {
    box-sizing: border-box;
}

/* --- TITRE --- */
.cse-comparatif__titre {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.cse-comparatif__titre h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: var(--cse-texte);
}

.cse-comparatif__puce {
    display: none !important;
}

/* --- TABLEAU --- */
.cse-comparatif__wrapper {
    position: relative;
    overflow: hidden;
}

/* OVERLAY FONDU */
.cse-comparatif__wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.cse-comparatif--complet .cse-comparatif__wrapper::after {
    opacity: 0;
}

.cse-comparatif__table {
    width: 100%;
    border-collapse: collapse !important; /* Indispensable pour l'effet quadrillage */
    border-spacing: 0;
    background: #fff;
    table-layout: fixed;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

/* Quadrillage forcé contre les styles Elementor */
.cse-comparatif__table th,
.cse-comparatif__table td {
    border: 1px solid var(--cse-bordure) !important;
}

.cse-comparatif__table th:nth-child(1),
.cse-comparatif__table td:nth-child(1) { width: 22%; }
.cse-comparatif__table th:nth-child(2),
.cse-comparatif__table td:nth-child(2) { width: 26%; }
.cse-comparatif__table th:nth-child(3),
.cse-comparatif__table td:nth-child(3) { width: 26%; }
.cse-comparatif__table th:nth-child(4),
.cse-comparatif__table td:nth-child(4) { width: 26%; }

/* --- HEADER --- */
.cse-comparatif__th {
    background: var(--cse-gris-header) !important;
    padding: 24px 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    color: var(--cse-texte) !important;
}

.cse-comparatif__th--cse {
    color: var(--cse-violet) !important;
    background: var(--cse-violet-pale) !important;
    font-weight: 600;
    font-size: 17px;
}

/* --- LIGNES CATÉGORIE --- */
.cse-comparatif__categorie {
    background: var(--cse-gris-categorie) !important;
    padding: 16px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--cse-texte) !important;
}

/* --- LIGNES DE DONNÉES --- */
.cse-comparatif__td {
    padding: 24px 16px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: middle;
    color: var(--cse-texte) !important;
    background: #FFFFFF !important;
}

.cse-comparatif__td--critere {
    font-weight: 600;
    background: var(--cse-gris-header) !important;
}

.cse-comparatif__td--cse {
    background: var(--cse-violet-pale) !important;
}

/* --- LIGNES MASQUÉES PAR DÉFAUT --- */
.cse-comparatif__row--cachee,
.cse-comparatif__categorie-row--cachee {
    display: none;
}

.cse-comparatif--complet .cse-comparatif__row--cachee,
.cse-comparatif--complet .cse-comparatif__categorie-row--cachee {
    display: table-row;
    animation: cse-fadein 0.5s ease both;
}

@keyframes cse-fadein {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- NOTE --- */
.cse-comparatif__note {
    margin-top: 24px;
    padding: 0 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--cse-texte) !important;
}

/* --- FOOTER (séparateur + bouton) --- */
.cse-comparatif__footer {
    margin-top: 32px;
    text-align: center;
}

.cse-comparatif__separateur {
    border: none;
    border-top: 1px solid var(--cse-violet) !important;
    margin: 0 0 24px 0;
}

/* Bouton outline */
.cse-comparatif .cse-comparatif__replier,
.cse-comparatif button.cse-comparatif__replier {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid var(--cse-violet) !important;
    border-radius: 5px !important;
    cursor: pointer;
    padding: 12px 28px !important;
    margin-top: 12px;
    font-family: 'Poppins', sans-serif !important;
    color: var(--cse-violet) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: none !important;
    transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}

.cse-comparatif .cse-comparatif__replier:hover,
.cse-comparatif button.cse-comparatif__replier:hover {
    background: var(--cse-violet) !important;
    background-color: var(--cse-violet) !important;
    color: #FFFFFF !important;
    gap: 14px;
    box-shadow: 0 4px 12px rgba(103, 8, 255, 0.25) !important;
}

.cse-comparatif .cse-comparatif__replier:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(103, 8, 255, 0.2) !important;
}

.cse-comparatif__replier-icone {
    display: inline-flex;
    font-size: 18px;
    line-height: 1;
}

/* ============================================
   TABLEAU COMPARATIF CSE FINANCE (FLUIDE)
   ============================================ */

.cse-comparatif {
    --cse-violet: #6708FF;
    --cse-violet-clair: #9F79FC;
    --cse-violet-pale: #EEEBFF; 
    --cse-bleu-pale: #E8EFFF;
    --cse-gris-categorie: #F9F9F9;
    --cse-gris-header: #E0E0E0; 
    --cse-bordure: #D4D4D4; 
    --cse-texte: #363636;
    --cse-texte-clair: #666;

    font-family: 'Poppins', sans-serif;
    color: var(--cse-texte) !important;
    max-width: 1300px; margin: 0 auto;
    /* Padding fluide */
    padding: clamp(20px, 4vw, 40px) clamp(10px, 2vw, 20px);
    box-sizing: border-box;
}

.cse-comparatif *, .cse-comparatif *::before, .cse-comparatif *::after { box-sizing: border-box; }

.cse-comparatif__titre { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); margin-bottom: clamp(24px, 4vw, 40px); }
.cse-comparatif__puce { flex-shrink: 0; width: clamp(28px, 3vw, 36px); height: clamp(28px, 3vw, 36px); border-radius: 50%; background: linear-gradient(135deg, #E8E4F8 0%, #C9C0EE 100%); }
.cse-comparatif__titre h2 { font-family: 'Poppins', sans-serif; font-size: clamp(22px, 3vw, 32px); font-weight: 600; line-height: 1.25; margin: 0; color: var(--cse-texte); }

.cse-comparatif__wrapper { position: relative; overflow: hidden; }
.cse-comparatif__wrapper::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);
    pointer-events: none; z-index: 2; transition: opacity 0.4s ease;
}
.cse-comparatif--complet .cse-comparatif__wrapper::after { opacity: 0; }

.cse-comparatif__table { width: 100%; border-collapse: collapse !important; border-spacing: 0; background: #fff; table-layout: fixed; border-radius: 16px; overflow: hidden; font-family: 'Poppins', sans-serif; }
.cse-comparatif__table th, .cse-comparatif__table td { border: 1px solid var(--cse-bordure) !important; }

.cse-comparatif__table th:nth-child(1), .cse-comparatif__table td:nth-child(1) { width: 22%; }
.cse-comparatif__table th:nth-child(2), .cse-comparatif__table td:nth-child(2) { width: 26%; }
.cse-comparatif__table th:nth-child(3), .cse-comparatif__table td:nth-child(3) { width: 26%; }
.cse-comparatif__table th:nth-child(4), .cse-comparatif__table td:nth-child(4) { width: 26%; }

.cse-comparatif__th {
    background: var(--cse-gris-header) !important;
    padding: clamp(14px, 2vw, 24px) clamp(8px, 1vw, 16px);
    font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: clamp(13px, 1.5vw, 16px);
    text-align: center; color: var(--cse-texte) !important;
}
.cse-comparatif__th--cse {
    color: var(--cse-violet) !important; background: var(--cse-violet-pale) !important; font-weight: 600;
    font-size: clamp(14px, 1.6vw, 17px);
}

.cse-comparatif__categorie {
    background: var(--cse-gris-categorie) !important;
    padding: clamp(12px, 1.5vw, 16px); text-align: center; font-weight: 600;
    font-size: clamp(13px, 1.5vw, 15px); color: var(--cse-texte) !important;
}

.cse-comparatif__td {
    padding: clamp(14px, 2vw, 24px) clamp(8px, 1vw, 16px);
    text-align: center; font-family: 'Poppins', sans-serif;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 400; line-height: 1.5; vertical-align: middle;
    color: var(--cse-texte) !important; background: #FFFFFF !important;
}
.cse-comparatif__td--critere { font-weight: 600; background: var(--cse-gris-header) !important; }
.cse-comparatif__td--cse { background: var(--cse-violet-pale) !important; }

.cse-comparatif__row--cachee, .cse-comparatif__categorie-row--cachee { display: none; }
.cse-comparatif--complet .cse-comparatif__row--cachee, .cse-comparatif--complet .cse-comparatif__categorie-row--cachee { display: table-row; animation: cse-fadein 0.5s ease both; }
@keyframes cse-fadein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.cse-comparatif__footer { margin-top: 32px; text-align: center; }
.cse-comparatif__separateur { border: none; border-top: 1px solid var(--cse-violet) !important; margin: 0 0 24px 0; }

.cse-comparatif .cse-comparatif__replier {
    background: #FFFFFF !important; border: 1px solid var(--cse-violet) !important; border-radius: 5px !important; cursor: pointer; padding: 12px 28px !important; font-family: 'Poppins', sans-serif !important; color: var(--cse-violet) !important; font-weight: 600 !important; font-size: 15px !important; display: inline-flex; align-items: center; gap: 10px; transition: all 0.25s ease;
}
.cse-comparatif .cse-comparatif__replier:hover { background: var(--cse-violet) !important; color: #FFFFFF !important; gap: 14px; box-shadow: 0 4px 12px rgba(103, 8, 255, 0.25) !important; }
.cse-comparatif__replier-icone { display: inline-flex; font-size: 18px; line-height: 1; }

/* --- BASCULE TABLETTE & MOBILE (CARTES DÈS 992px) --- */
@media (max-width: 992px) {
    .cse-comparatif__titre { flex-direction: column; text-align: center; }
    .cse-comparatif__wrapper::after { height: 120px; }
    
    .cse-comparatif__table, .cse-comparatif__table tbody, .cse-comparatif__table tr, .cse-comparatif__table td, .cse-comparatif__table th { display: block; width: 100% !important; }
    .cse-comparatif__table thead { display: none; }
    
    .cse-comparatif__table tbody tr {
        margin-bottom: 20px; border: 1px solid var(--cse-bordure) !important;
        border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); background: #fff;
    }
    .cse-comparatif__table tbody tr:has(.cse-comparatif__categorie), .cse-comparatif__table td.cse-comparatif__categorie {
        border: none !important; box-shadow: none !important; background: transparent !important; padding: 10px 0 !important; margin-bottom: 0; display: block !important;
    }
    .cse-comparatif__categorie { background: var(--cse-gris-categorie) !important; border-radius: 8px; }
    
    .cse-comparatif__table td {
        padding: 14px 16px !important; text-align: right !important; display: flex !important; justify-content: space-between; align-items: center; gap: 10px; border: none !important; border-bottom: 1px solid var(--cse-bordure) !important;
    }
    .cse-comparatif__table td:last-child { border-bottom: none !important; }
    
    .cse-comparatif__td--critere, .cse-comparatif__table td:nth-child(1) {
        background: var(--cse-gris-header) !important; text-align: center !important; justify-content: center; font-weight: 600; font-size: 15px; display: block !important;
    }
    
    .cse-comparatif__table td:nth-child(2)::before { content: "CSE Finance"; font-weight: 600; color: var(--cse-violet); text-align: left; }
    .cse-comparatif__table td:nth-child(3)::before { content: "Banque pro standard"; font-weight: 600; color: var(--cse-texte-clair); text-align: left; }
    .cse-comparatif__table td:nth-child(4)::before { content: "Néo Banque Pro"; font-weight: 600; color: var(--cse-texte-clair); text-align: left; }
    
    .cse-comparatif__row--cachee, .cse-comparatif__categorie-row--cachee { display: none !important; }
    .cse-comparatif--complet .cse-comparatif__row--cachee, .cse-comparatif--complet .cse-comparatif__categorie-row--cachee { display: block !important; }
}