.elementor-19288 .elementor-element.elementor-element-1b926a0{--display:flex;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-19288 .elementor-element.elementor-element-1b926a0{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}}/* Start custom CSS for html, class: .elementor-element-b770aab *//* =====================================================
   SECTION INVESTISSEMENT - CSS
   Adaptation fidèle aux captures d'écran
   ===================================================== */

/* ========================================
   VARIABLES DE COULEURS (Ta palette exacte)
   ======================================== */

:root {
    /* Textes */
    --sw-titre: #000000;
    --sw-texte: #333333;
    
    /* Couleurs principales */
    --sw-principal: #A88561;
    --sw-principal-hover: #B8926A;
    
    /* Backgrounds */
    --sw-bg-fonce: #372F26;
    --sw-bg-clair: #A8856133;
    --sw-bg-beige: #FBF9F5;
    --sw-border-beige: #EDE6DB;
    
    /* Tons marron */
    --sw-marron-rouge: #B4846B;
    --sw-marron-taupe: #8C7E71;
    
    /* Tons orange */
    --sw-orange: #EE7B4A;
    --sw-orange-border: #FFE0B1;
    --sw-orange-bg: #FFF2E0;
    
    /* Vert kaki */
    --sw-vert-kaki: #A4A37F;
    
    /* Texte gris pour détails */
    --sw-texte-gris: #6B7280;
    
    /* Box potentiel (vert) */
    --sw-potentiel-text: #166534;
    --sw-potentiel-bg: #f0fdf4;
}

/* ========================================
   CONTAINER PRINCIPAL
   ======================================== */

.sawadee-investment-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Roboto', sans-serif;
    max-width: 900px;
    margin: 0 auto;
}

/* ========================================
   CARTES
   ======================================== */

.investment-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid var(--sw-border-beige);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 500;
    color: var(--sw-titre);
    margin: 0 0 24px 0;
}

.card-title svg {
    stroke: var(--sw-principal);
    flex-shrink: 0;
}

/* ========================================
   SECTION REVENUS - Grille des saisons (2 par ligne)
   ======================================== */

.seasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Responsive: 1 colonne sur mobile */
@media (max-width: 480px) {
    .seasons-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   HAUTE SAISON - ORANGE
   ======================================== */

.season-box.haute-saison {
    background: #ee7b4a0d;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #ee7b4a33;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.season-box.haute-saison .season-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--sw-orange);
}

.season-box.haute-saison .season-header svg {
    stroke: var(--sw-orange);
    flex-shrink: 0;
}

.season-box.haute-saison .season-period {
    font-size: 12px;
    color: var(--sw-texte-gris);
    margin-bottom: 8px;
    font-weight: 400;
}

.season-box.haute-saison .season-price {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--sw-orange);
}

.season-box.haute-saison .season-unit {
    font-size: 12px;
    color: var(--sw-texte-gris);
    font-weight: 400;
}

.season-box.haute-saison .season-occupation {
    font-size: 11px;
    color: var(--sw-texte-gris);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ee7b4a33;
}

/* ========================================
   MOYENNE SAISON - VERT KAKI
   ======================================== */

.season-box.moyenne-saison {
    background: #a4a37f0d;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #a4a37f33;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.season-box.moyenne-saison .season-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--sw-vert-kaki);
}

.season-box.moyenne-saison .season-header svg {
    stroke: var(--sw-vert-kaki);
    flex-shrink: 0;
}

.season-box.moyenne-saison .season-period {
    font-size: 12px;
    color: var(--sw-texte-gris);
    margin-bottom: 8px;
    font-weight: 400;
}

.season-box.moyenne-saison .season-price {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--sw-vert-kaki);
}

.season-box.moyenne-saison .season-unit {
    font-size: 12px;
    color: var(--sw-texte-gris);
    font-weight: 400;
}

.season-box.moyenne-saison .season-occupation {
    font-size: 11px;
    color: var(--sw-texte-gris);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #a4a37f33;
}

/* ========================================
   BASSE SAISON - GRIS/TAUPE
   ======================================== */

.season-box.basse-saison {
    background: #8c7e710d;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #8c7e7133;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.season-box.basse-saison .season-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--sw-marron-taupe);
}

.season-box.basse-saison .season-header svg {
    stroke: var(--sw-marron-taupe);
    flex-shrink: 0;
}

.season-box.basse-saison .season-period {
    font-size: 12px;
    color: var(--sw-texte-gris);
    margin-bottom: 8px;
    font-weight: 400;
}

.season-box.basse-saison .season-price {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--sw-marron-taupe);
}

.season-box.basse-saison .season-unit {
    font-size: 12px;
    color: var(--sw-texte-gris);
    font-weight: 400;
}

.season-box.basse-saison .season-occupation {
    font-size: 11px;
    color: var(--sw-texte-gris);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #8c7e7133;
}

/* ========================================
   REVENU ANNUEL - BACKGROUND FONCÉ
   ======================================== */

.season-box.annual-box {
    background: var(--sw-bg-fonce);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #4a4038;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.season-box.annual-box .season-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #fff;
}

.season-box.annual-box .season-header svg {
    stroke: #fff;
    flex-shrink: 0;
}

.season-box.annual-box .season-period {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-weight: 400;
}

.season-box.annual-box .season-price {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #fff;
}

/* ========================================
   BARRE TAUX D'OCCUPATION
   ======================================== */

.occupation-section {
    background: var(--sw-bg-beige);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--sw-border-beige);
}

.occupation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.occupation-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--sw-texte);
    font-weight: 500;
}

.occupation-label svg {
    stroke: var(--sw-principal);
    flex-shrink: 0;
}

.occupation-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--sw-principal);
}

.occupation-bar {
    height: 8px;
    background: var(--sw-border-beige);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.occupation-fill {
    height: 100%;
    background: var(--sw-principal);
    border-radius: 4px;
    transition: width 0.8s ease;
}

.occupation-note {
    font-size: 12px;
    color: var(--sw-marron-taupe);
    font-weight: 400;
}

/* ========================================
   SECTION CHARGES
   ======================================== */

.charges-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.charge-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sw-bg-beige);
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid var(--sw-border-beige);
    flex-wrap: wrap;
    gap: 10px;
}

.charge-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.charge-info svg {
    flex-shrink: 0;
    stroke: var(--sw-principal);
    width: 20px;
    height: 20px;
}

.charge-info > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.charge-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--sw-titre);
}

.charge-detail {
    font-size: 12px;
    color: var(--sw-marron-taupe);
    font-weight: 400;
}

.charge-amount {
    font-size: 15px;
    font-weight: 500;
    color: var(--sw-texte);
}

/* Total des charges */
.charge-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sw-bg-beige);
    border-radius: 12px;
    padding: 18px 20px;
    font-weight: 500;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid var(--sw-border-beige);
    margin-top: 4px;
}

.charge-total > span:first-child {
    color: var(--sw-titre);
    font-size: 15px;
    font-weight: 500;
}

.total-amount {
    color: var(--sw-principal);
    font-size: 18px;
    font-weight: 700;
}

/* ========================================
   SECTION RENDEMENT - Cercles
   ======================================== */

.rendement-circles {
    display: flex;
    justify-content: center;
    gap: 250px;
    margin: 30px 0;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .rendement-circles {
        gap: 60px;
    }
}

.rendement-item {
    text-align: center;
}

.circle-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 16px auto;
}

.progress-ring {
    display: block;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    stroke: var(--sw-border-beige);
}

.progress-ring-fill {
    stroke: var(--sw-principal);
    transition: stroke-dashoffset 1s ease;
    stroke-linecap: round;
}

.circle-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 700;
    color: var(--sw-principal);
}

.rendement-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--sw-titre);
    margin-bottom: 4px;
}

.rendement-sublabel {
    font-size: 13px;
    color: var(--sw-marron-taupe);
    font-weight: 400;
}

/* ========================================
   BOX POTENTIEL LOCATIF - VERT
   ======================================== */

.potentiel-box {
    display: flex;
    gap: 14px;
    background: var(--sw-potentiel-bg);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    align-items: flex-start;
}

.potentiel-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.potentiel-icon svg {
    stroke: var(--sw-potentiel-text);
    width: 18px;
    height: 18px;
}

.potentiel-content {
    flex: 1;
}

.potentiel-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--sw-potentiel-text);
    margin-bottom: 6px;
}

.potentiel-desc {
    font-size: 14px;
    color: #15803d;
    line-height: 1.5;
    font-weight: 400;
}/* End custom CSS */