@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#e8e8e8;
    font-family:'Montserrat', sans-serif;
    color:#1f2442;
}

.page{
    width:790px;
    margin:0 auto;
    background:#fff;
}

.topbar{
    background:#83a86c;
    color:#fff;
    height:37px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 72px;
    font-size:14px;
}

.hero{
    padding:50px 68px 0;
}

.guide{
    font-size:12px;
    letter-spacing:1px;
    color:#bdb3f3;
    margin-bottom:15px;
}

.hero h1{
    font-size:28px;
    font-weight:300;
    line-height:1.18;
    color:#1f2856;
}

.hero h1 span{
    color:#85a86d;
    font-weight:500;
}

.separator{
    height:2px;
    background:#85a86d;
    margin:70px 0 38px;
}

.intro{
    max-width:640px;
    color:#b6aef0;
    font-size:15px;
    line-height:1.9;
    font-style:italic;
}

.meta{
    margin-top:40px;
    color:#8b84d4;
    font-size:13px;
}

.summary{
    padding:30px 68px 0;
}

.summary-content{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:30px;

    background:#f4f2ee;
    border-left:5px solid #84a96e;

    padding:18px 26px;
}

.summary-left{
    flex:1;
    padding-right:15px;
}

.summary-left h3{
    font-size:13px;
    color:#999;
    font-weight:500;
    letter-spacing:1px;
    margin-bottom:16px;
}

.summary-left ol{
    margin-left:18px;
}

.summary-left li{
    color:#7da05e;
    line-height:1.9;
    font-size:13px;
    margin-bottom:4px;
    word-break:break-word;
}

.summary-right{
    width:220px; /* image réduite */
    flex-shrink:0;
}

.summary-right img{
    width:100%;
    height:auto;
    display:block;
}

.content{
    padding:42px 68px 60px;
}

.section-divider{
    height:2px;
    background:#87ab70;
    margin-bottom:35px;
}

.content h2{
    color:#20255d;
    font-size:22px;
    font-weight:600;
    margin-bottom:25px;
}

.content p{
    font-size:15px;
    line-height:2;
    color:#2c2c2c;
    margin-bottom:20px;
}

.cards{
    display:flex;
    gap:12px;
    margin-top:20px;
    margin-bottom:22px;
}

.card{
    flex:1;
    border:1px solid #d8d8d8;
    border-radius:6px;
    background:#f7f7f7;

    padding:18px 16px;
}

.card-title{
    color:#83a86d;
    font-size:14px;
    letter-spacing:1px;
    margin-bottom:10px;
    font-weight:500;
}

.card p{
    margin:0;
    line-height:1.7;
    font-size:15px;
}

.light-divider{
    height:1px;
    background:#dcdcf1;
    margin:22px 0 32px;
}

.price-cards{
    display:flex;
    gap:10px;
    margin:25px 0 10px;
}

.price-card{
    flex:1;
    background:#d6dec9;
    padding:14px 16px;
}

.price{
    font-size:24px;
    color:#5b52ff;
    margin-bottom:5px;
}

.price-card p{
    font-size:12px;
    line-height:1.4;
    margin:0;
}

.info-box{
    background:#e6e4f7;
    padding:18px 24px;
    margin-bottom:20px;
    font-size:14px;
    line-height:1.7;
    color:#2d2d6a;
}

.formula-box{
    background:#e7e4f5;
    border:1px solid #d9d5ef;
    padding:12px 18px;
    margin:20px 0;
    color:#2f2d6e;
    font-size:15px;
}

.tips-list{
    list-style:none;
    margin-top:15px;
}

.tips-list li{
    margin-bottom:8px;
    color:#2d2d2d;
    font-size:14px;
}

.tips-list li::before{
    content:"+";
    color:#5b52ff;
    margin-right:8px;
}

.charges-table{
    width:100%;
    border-collapse:collapse;
    margin:20px 0;
}

.charges-table thead th{
    background:#d6dec9;
    color:#ffffff;
    text-align:left;
    padding:12px;
    font-weight:500;
    font-size:14px;
}

.charges-table td{
    padding:12px;
    border-bottom:1px solid #dcdcf1;
    font-size:14px;
}

.charges-table tbody tr:nth-child(even){
    background:#f6f6f6;
}

.advice-box{
    background:#e8e6f8;
    border-left:4px solid #83a86c;
    padding:18px 22px;
    margin:20px 0 35px;
    color:#2a2d69;
    line-height:1.8;
    font-size:15px;
}

/* ========================= */
/* PAGE PRINCIPALES CHARGES */
/* ========================= */

.hero2{
    padding:50px 68px 25px;
}

.hero2 h1{
    font-size:28px;
    font-weight:300;
    line-height:1.15;
    color:#1f2856;
}

.hero2 h1 span{
    color:#85a86d;
    font-weight:500;
}

.subtitle{
    margin-top:18px;
    padding-top:12px;
    border-top:2px solid #85a86d;
    color:#8b84d4;
    font-size:13px;
}

.quick-links{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:25px;
}

.quick-links div{
    background:#dbe4cf;
    color:#547239;
    padding:12px;
    font-size:12px;
    border-right:1px solid #c7d0bc;
}

.quick-links div:last-child{
    border-right:none;
}

.intro-grid{
    display:flex;
    gap:30px;
    padding:35px 68px;
}

.intro-text{
    flex:1;
}

.intro-text p{
    font-size:12px;
    line-height:1.9;
    color:#2c2c2c;
    margin-bottom:18px;
}

.intro-image{
    width:260px;
    flex-shrink:0;
}

.intro-image img{
    width:100%;
    display:block;
}

.section-title{
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 68px;
    margin:25px 0;
}

.section-number{
    width:38px;
    height:38px;
    background:#e7efe0;
    color:#85a86d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    border-left:4px solid #85a86d;
}

.section-heading{
    font-size:20px;
    font-weight:600;
    color:#1f2856;
}

.category-grid{
    display:flex;
    gap:35px;
    padding:0 68px 40px;
}

.category-card{
    flex:1;
    background:#edf3ea;
    padding:12px 16px 10px;
}

.category-card.green{
    border-top:4px solid #7fa46b;
}

.category-card.blue{
    border-top:4px solid #a9bfd7;
}

.category-card h3{
    font-size:18px;
    font-weight:600;
    color:#24325c;
    margin-bottom:4px;
}

.category-card p{
    font-size:10px;
    line-height:1.5;
    color:#38445f;
    margin-bottom:8px;
}

.category-card ul{
    margin:12px 0 10px 18px;
    padding-left:12px;
}

.category-card li{
    font-size:10px;
    line-height:1.8;
    color:#38445f;
    margin-bottom:2px;
}

.card-note{
    font-size:12px !important;
    color:#6c7793 !important;
    margin-top:8px;
    margin-bottom:0;
}

.content-block{
    padding:0 68px 40px;
}

.content-block p{
    font-size:14px;
    line-height:1.9;
    margin-bottom:18px;
    color:#2c2c2c;
}

.content-image{
    margin:20px 0 25px;
}

.content-image img{
    width:100%;
    display:block;
}

.tips-list{
    margin-bottom:25px;
    margin-left:20px;
}

.tips-list li{
    margin-bottom:10px;
    line-height:1.8;
    color:#2c2c2c;
}

.conclusion{
    padding:0 68px 60px;
}

.conclusion p{
    font-size:14px;
    line-height:1.9;
    margin-bottom:18px;
    color:#2c2c2c;
}

.charges-repartition{
    padding:20px 68px 40px;
}

.charges-table-wrapper{
    display:flex;
    gap:25px;
    align-items:flex-start;
}

.repartition-table{
    flex:1;
    border-collapse:collapse;
    width:100%;
}

.repartition-table th{
    background:#83a86c;
    color:#fff;
    text-align:left;
    padding:12px;
    font-size:14px;
    font-weight:600;
}

.repartition-table td{
    padding:10px 12px;
    font-size:13px;
    line-height:1.5;
}

.repartition-table tbody tr:nth-child(odd){
    background:#eef4e8;
}

.repartition-table tbody tr:nth-child(even){
    background:#ffffff;
}

.pie-chart-box{
    width:230px;
    flex-shrink:0;
    background:#eef2eb;
    padding:15px;
    border-radius:8px;
}

.pie-chart-box img{
    width:100%;
    display:block;
}

.bottom-images{
    display:flex;
    gap:18px;
    margin-top:40px;
}

.bottom-images img{
    width:50%;
    display:block;
    height:auto;
}

.charges-breakdown{
    display:flex;
    align-items:flex-start;
    padding:0 68px 40px;
    gap:0; /* au lieu d'un espace */
}

.table-container{
    width:420px;
    flex-shrink:0;
}

.chart-box{
    width:230px;
    height:200px;
    background:#edf1eb;
    border-radius:0 8px 8px 0;
    padding:10px;
    margin-left:0; /* supprimer les marges */
    flex-shrink:0;
    position:relative;
}

.postes-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.postes-table th{
    background:#83a86c;
    color:#fff;
    text-align:left;
    padding:12px 12px;
    font-size:10px;
    font-weight:500;
}

.postes-table td{
    padding:10px;
    font-size:11px;
    line-height:1.45;
    color:#1f2856;
    vertical-align:top;
}

.postes-table tbody tr:nth-child(odd){
    background:#eef3ea;
}

.postes-table tbody tr:nth-child(even){
    background:#ffffff;
}

.postes-table td:first-child{
    color:#5f8a46;
    width:38%;
}

.postes-table td:nth-child(2){
    width:18%;
    text-align:center;
    color:#4f7a38;
    white-space:nowrap;
}

.postes-table td:nth-child(3){
    width:44%;
}
.table-container{
    width:420px;
}

.chart-box{
    width:220px;
    height:200px;
    background:#edf1eb;
    border-radius:0 8px 8px 8px;
    padding:10px;
    margin-left:-1px;
    position:relative;
}

.legend{
    position:absolute;
    top:8px;
    right:10px;
    width:80px;
    font-size:11px;
    color:#24325c;
}

.legend div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:4px;
}

.legend span{
    width:10px;
    height:10px;
    display:inline-block;
    margin-right:5px;
}

.donut{
    position:absolute;
    left:8px;
    top:52px;

    width:110px;
    height:110px;

    border-radius:50%;

    background:conic-gradient(
        #7fa96b 0 22%,
        #a9c79b 22% 45%,
        #c3d7b9 45% 65%,
        #5c9346 65% 77%,
        #d7e1d1 77% 87%,
        #e7ece2 87% 100%
    );
}

.donut::after{
    content:"";
    position:absolute;
    inset:30px;
    background:white;
    border-radius:50%;
}

.donut-center{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    z-index:2;
    font-size:11px;
    font-weight:600;
    color:#24325c;
}

.chart-caption{
    position:absolute;
    bottom:6px;
    left:0;
    width:100%;
    text-align:center;
    font-size:10px;
    color:#6b7691;
}
.bottom-images{
    display:flex;
    gap:10px; /* espace réduit */
    padding:0 68px 50px;
    align-items:flex-start;
}

.image-box:first-child{
    flex:1.6; /* image de gauche plus grande */
}

.image-box:last-child{
    flex:1;
}

.image-box img{
    width:100%;
    height:auto;
    display:block;
}

.section-content{
    padding:0 68px 40px;
}

.two-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    background:#eef3ea;
    border-top:3px solid #83a86c;
    padding:15px 18px;
}

.two-columns h3{
    color:#83a86c;
    font-size:14px;
    margin-bottom:12px;
}

.two-columns p,
.two-columns li{
    font-size:13px;
    line-height:1.6;
    color:#24325c;
}

.cards-grid{
    padding:0 68px 40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 35px;
}

.tip-card{
    border:1px solid #d8dfd1;
    border-top:3px solid #83a86c;
    padding:14px;
    background:#fafcf9;
}

.tip-card h3{
    color:#83a86c;
    font-size:14px;
    margin-bottom:12px;
}

.tip-card p{
    font-size:13px;
    line-height:1.7;
    color:#24325c;
}

.rights-list{
    padding:0 68px 40px;
}

.right-item{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:6px;
}

.right-number{
    width:20px;
    height:20px;
    background:#83a86c;
    color:#fff;
    font-size:16px;
    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.right-item:nth-child(even) .right-content{
    background:#ffffff;
}

.right-item:nth-child(odd) .right-content{
    background:#edf3ea;
}

.right-content{
    flex:1;
    padding:10px 14px;
}

.right-content h4{
    margin:0 0 4px;
    font-size:15px;
    font-weight:600;
    color:#1f2856;
}

.right-content p{
    margin:0;
    font-size:13px;
    line-height:1.4;
    color:#2c2c2c;
}


.two-columns p{
    margin-bottom:6px;
}

.two-columns ul{
    margin:0 0 10px 18px;
    padding:0;
}

.page-footer{
    margin-top:40px;
    padding:18px 68px 25px;
    border-top:2px solid #d9dfd4;
    text-align:center;
}

.footer-title{
    font-size:11px;
    color:#6c7793;
    font-weight:600;
    margin-bottom:8px;
    line-height:1.5;
}

.footer-sources{
    font-size:10px;
    color:#8a8a8a;
    line-height:1.6;
}

.score-chart{
    width:240px;
    background:#eef3ea;
    border-radius:8px;
    padding:6px 12px 10px;
    font-family:'Montserrat', sans-serif;
}

.chart-title{
    text-align:center;
    font-size:12px;
    color:#1f2856;
    margin-bottom:8px;
    font-weight:500;
}

.score-row{
    display:flex;
    align-items:center;
    margin-bottom:8px;
}

.score-row span{
    width:95px;
    text-align:right;
    font-size:11px;
    color:#24325c;
    margin-right:6px;
}

.badge{
    height:18px;
    border-radius:4px;
    margin-right:8px;
}

.gc{
    width:58px;
    background:#7fa26a;
}

.ts{
    width:24px;
    background:#a7c593;
}

.ag{
    width:18px;
    background:#c0d8b1;
}

.co{
    width:16px;
    background:#d5e6cb;
}

.di{
    width:10px;
    background:#dce8d6; 
}

.score-row strong{
    font-size:12px;
    font-weight:600;
    color:#24325c;
}

.aligned-images {
    display: flex;
    gap: 0;
    padding: 0 68px 50px;
}

.aligned-image-box {
    flex: 1;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* important : on peut laisser ou enlever, mais ça ne coupe plus */
    overflow: visible;
}

.img-1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
	transform: scale(1.15);
}

.img-2 img {
    max-width: 75%;   /* 👈 taille (tu changes ici) */
    max-height: 75%;
    object-fit: contain;

    transform: translateX(-17px); /* 👈 décalage gauche */
}

.img-3 img {
    width: 100%;
    height:100%;
    object-fit: contain;
    transform: scale(1.45); /* ajustable indépendamment */
}

body {
    font-family: Arial, sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
}

/* TITRES */
.syndic h2 {
    margin-top: 40px;
    font-size: 22px;
    color: #2e7d32;
}

/* PRICES */
.prices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.price-box {
    border: 2px solid #2e7d32;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border-radius: 6px;
    background: #eef3ea; /* nouveau fond */
}

/* la somme (première ligne) en vert foncé */
.price-box {
    color: #1b5e20;
}

/* le texte en dessous reste normal */
.price-box span {
    display: block;
    font-weight: normal;
    font-size: 13px;
    margin-top: 8px;
    color: #2e7d32; /* optionnel : sous-texte en vert plus doux */
}

/* GRID INFO */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.card {
    border: 1px solid #2e7d32;
    padding: 15px;
    border-radius: 6px;
}

.card h3 {
    margin-top: 0;
    color: #2e7d32;
}

.note {
    color: #777;      /* gris */
    font-style: italic;
    margin-top: 20px;
    font-size: 14px;
}

.steps-table {
    width: 80%;
    border-collapse: collapse;
    font-size: 13px;
    color: #24325c;
    margin-top: 15px;
	table-layout: fixed;
	margin: 0 auto;
}

/* cellules */
.steps-table td {
    padding: 12px;
    border-bottom: 1px solid #dcdcf1;
    vertical-align: top;
    line-height: 1.5;
}

/* colonne gauche */
.steps-table td:first-child {
    width: 30%;
    color: #1f2856;
}

/* 🟩 lignes vertes */
.steps-table tr.green {
    background: #eef4e8;
}

/* cellule blanche dans une ligne verte */
.steps-table tr.special-white td:last-child {
    background: #ffffff;
}

.arrow-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.arrow-item {
    padding-left: 28px;
    position: relative;
}

/* flèche verte */
.arrow-item::before {
    content: "➜";
    position: absolute;
    left: 0;
    top: 2px;
    color: #83a86c;
    font-weight: bold;
}

/* titre */
.arrow-title {
    font-weight: 600;
    color: #1f2856;
    font-size: 14px;
    margin-bottom: 4px;
}

/* texte */
.arrow-text {
    font-size: 13px;
    line-height: 1.6;
    color: #24325c;
}