:root {
    --text-color: var(--white);
    --text-color-secondary: #000000;

    --odd-color-no-poverty: #E5243B;         /* Objectif 1: Pas de pauvreté */
    --odd-color-zero-hunger: #DDA63A;        /* Objectif 2: Faim "zéro" */
    --odd-color-good-health: #4C9F38;        /* Objectif 3: Bonne santé et bien-être */
    --odd-color-quality-education: #C5192D;  /* Objectif 4: Éducation de qualité */
    --odd-color-gender-equality: #FF3A21;    /* Objectif 5: Égalité entre les sexes */
    --odd-color-clean-water: #26BDE2;        /* Objectif 6: Eau propre et assainissement */
    --odd-color-affordable-energy: #FCC30B;  /* Objectif 7: Énergie propre et d'un coût abordable */
    --odd-color-decent-work: #A21942;        /* Objectif 8: Travail décent et croissance économique */
    --odd-color-industry-innovation: #FD6925;/* Objectif 9: Industrie, innovation et infrastructure */
    --odd-color-reduced-inequality: #DD1367; /* Objectif 10: Inégalités réduites */
    --odd-color-sustainable-cities: #FD9D24; /* Objectif 11: Villes et communautés durables */
    --odd-color-responsible-consumption: #BF8B2E; /* Objectif 12: Consommation et production responsables */
    --odd-color-climate-action: #3F7E44;     /* Objectif 13: Mesures relatives à la lutte contre les changements climatiques */
    --odd-color-life-below-water: #0A97D9;   /* Objectif 14: Vie aquatique */
    --odd-color-life-on-land: #56C02B;       /* Objectif 15: Vie terrestre */
    --odd-color-peace-justice: #00689D;      /* Objectif 16: Paix, justice et institutions efficaces */
    --odd-color-partnerships: #19486A;       /* Objectif 17: Partenariats pour la réalisation des objectifs */

/* Couleurs négatives des ODD */
    --odd-color-no-poverty-negative: #911427;
    --odd-color-zero-hunger-negative: #8a661e;
    --odd-color-good-health-negative: #2b5e20;
    --odd-color-quality-education-negative: #790f1a;
    --odd-color-gender-equality-negative: #a82416;
    --odd-color-clean-water-negative: #19768d;
    --odd-color-affordable-energy-negative: #a88308;
    --odd-color-decent-work-negative: #5c0e24;
    --odd-color-industry-innovation-negative: #aa4618;
    --odd-color-reduced-inequality-negative: #8d0c3b;
    --odd-color-sustainable-cities-negative: #a36519;
    --odd-color-responsible-consumption-negative: #80601b;
    --odd-color-climate-action-negative: #204122;
    --odd-color-life-below-water-negative: #075c86;
    --odd-color-life-on-land-negative: #337218;
    --odd-color-peace-justice-negative: #00354e;
    --odd-color-partnerships-negative: #0b202e;

}

/* =====================================
            BORDER-GLOBAL 
====================================== */

.border-no-poverty,
.border-zero-hunger,
.border-good-health,
.border-quality-education,
.border-gender-equality,
.border-clean-water,
.border-affordable-energy,
.border-decent-work,
.border-industry-innovation,
.border-reduced-inequality,
.border-sustainable-cities,
.border-responsible-consumption,
.border-climate-action,
.border-life-below-water,
.border-life-on-land,
.border-peace-justice,
.border-partnerships {
    border-top: 1px solid;
}

/* NO POVERTY */
.btn-no-poverty {
    background-color: var(--odd-color-no-poverty);
    border-color: var(--odd-color-no-poverty);
    color: var(--text-color);
}

/*.btn-no-poverty:hover {
    background-color: var(--odd-color-no-poverty-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-no-poverty i, .user-icon.btn-full-no-poverty i {
    color: var(--odd-color-no-poverty);
}

.text-no-poverty {
    color: var(--odd-color-no-poverty);
}

.bg-no-poverty {
    background-color: var(--odd-color-no-poverty);
    color: var(--text-color);
}

.tabs__tab--active.tab-no-poverty {
    color: var(--odd-color-no-poverty);
}

.border-no-poverty {
    border-color : var(--odd-color-no-poverty)
}

.tab-pseudo-no-poverty::before {
    background-color: var(--odd-color-no-poverty);
}

/* ZERO HUNGER */
.btn-zero-hunger {
    background-color: var(--odd-color-zero-hunger);
    border-color: var(--odd-color-zero-hunger);
    color: var(--text-color);
}

/*.btn-zero-hunger:hover {
    background-color: var(--odd-color-zero-hunger-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-zero-hunger i, .user-icon.btn-full-zero-hunger i {
    color: var(--odd-color-zero-hunger);
}

.text-zero-hunger {
    color: var(--odd-color-zero-hunger);
}

.bg-zero-hunger {
    background-color: var(--odd-color-zero-hunger);
    color: var(--text-color);
}

.tabs__tab--active.tab-zero-hunger {
    color: var(--odd-color-zero-hunger);
}

.border-zero-hunger {
    border-color : var(--odd-color-zero-hunger)
}

.tab-pseudo-zero-hunger::before {
    background-color: var(--odd-color-zero-hunger);
}

/* GOOD HEALTH */
.btn-good-health {
    background-color: var(--odd-color-good-health);
    border-color: var(--odd-color-good-health);
    color: var(--text-color);
}

/*.btn-good-health:hover {
    background-color: var(--odd-color-good-health-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-good-health i, .user-icon.btn-full-good-health i {
    color: var(--odd-color-good-health);
}

.text-good-health {
    color: var(--odd-color-good-health);
}

.bg-good-health {
    background-color: var(--odd-color-good-health);
    color: var(--text-color);
}

.tabs__tab--active.tab-good-health {
    color: var(--odd-color-good-health);
}

.border-good-health {
    border-color : var(--odd-color-good-health)
}

.tab-pseudo-good-health::before {
    background-color: var(--odd-color-good-health);
}

/* QUALITY EDUCATION */
.btn-quality-education {
    background-color: var(--odd-color-quality-education);
    border-color: var(--odd-color-quality-education);
    color: var(--text-color);
}

/*.btn-quality-education:hover {
    background-color: var(--odd-color-quality-education-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-quality-education i, .user-icon.btn-full-quality-education i {
    color: var(--odd-color-quality-education);
}

.text-quality-education {
    color: var(--odd-color-quality-education);
}

.bg-quality-education {
    background-color: var(--odd-color-quality-education);
    color: var(--text-color);
}

.tabs__tab--active.tab-quality-education {
    color: var(--odd-color-quality-education);
}

.border-quality-education {
    border-color : var(--odd-color-quality-education)
}

.tab-pseudo-quality-education::before {
    background-color: var(--odd-color-quality-education);
}

/* GENDER EQUALITY */
.btn-gender-equality {
    background-color: var(--odd-color-gender-equality);
    border-color: var(--odd-color-gender-equality);
    color: var(--text-color);
}

/*.btn-gender-equality:hover {
    background-color: var(--odd-color-gender-equality-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-gender-equality i, .user-icon.btn-full-gender-equality i {
    color: var(--odd-color-gender-equality);
}

.text-gender-equality {
    color: var(--odd-color-gender-equality);
}

.bg-gender-equality {
    background-color: var(--odd-color-gender-equality);
    color: var(--text-color);
}

.tabs__tab--active.tab-gender-equality {
    color: var(--odd-color-gender-equality);
}

.border-gender-equality {
    border-color : var(--odd-color-gender-equality)
}

.tab-pseudo-gender-equality::before {
    background-color: var(--odd-color-gender-equality);
}

/* CLEAN WATER */
.btn-clean-water {
    background-color: var(--odd-color-clean-water);
    border-color: var(--odd-color-clean-water);
    color: var(--text-color);
}

/*.btn-clean-water:hover {
    background-color: var(--odd-color-clean-water-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-clean-water i, .user-icon.btn-full-clean-water i {
    color: var(--odd-color-clean-water);
}

.text-clean-water {
    color: var(--odd-color-clean-water);
}

.bg-clean-water {
    background-color: var(--odd-color-clean-water);
    color: var(--text-color);
}

.tabs__tab--active.tab-clean-water {
    color: var(--odd-color-clean-water);
}

.border-clean-water {
    border-color : var(--odd-color-clean-water)
}

.tab-pseudo-clean-water::before {
    background-color: var(--odd-color-clean-water);
}

/* AFFORDABLE ENERGY */
.btn-affordable-energy {
    background-color: var(--odd-color-affordable-energy);
    border-color: var(--odd-color-affordable-energy);
    color: var(--text-color);
}

/*.btn-affordable-energy:hover {
    background-color: var(--odd-color-affordable-energy);
    color: var(--text-color);
}*/

.cart-btn.btn-full-affordable-energy i, .user-icon.btn-full-affordable-energy i {
    color: var(--odd-color-affordable-energy);
}

.text-affordable-energy {
    color: var(--odd-color-affordable-energy);
}

.bg-affordable-energy {
    background-color: var(--odd-color-affordable-energy);
    color: var(--text-color);
}

.tabs__tab--active.tab-affordable-energy {
    color: var(--odd-color-affordable-energy);
}

.border-affordable-energy {
    border-color : var(--odd-color-affordable-energy)
}

.tab-pseudo-affordable-energy::before {
    background-color: var(--odd-color-affordable-energy);
}

/* DECENT WORK */
.btn-decent-work {
    background-color: var(--odd-color-decent-work);
    border-color: var(--odd-color-decent-work);
    color: var(--text-color);
}

/*.btn-decent-work:hover {
    background-color: var(--odd-color-decent-work-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-decent-work i, .user-icon.btn-full-decent-work i {
    color: var(--odd-color-decent-work);
}

.text-decent-work {
    color: var(--odd-color-decent-work);
}

.bg-decent-work {
    background-color: var(--odd-color-decent-work);
    color: var(--text-color);
}

.tabs__tab--active.tab-decent-work {
    color: var(--odd-color-decent-work);
}

.border-decent-work {
    border-color : var(--odd-color-decent-work)
}

.tab-pseudo-decent-work::before {
    background-color: var(--odd-color-decent-work);
}

/* INDUSTRY INNOVATION */
.btn-industry-innovation {
    background-color: var(--odd-color-industry-innovation);
    border-color: var(--odd-color-industry-innovation);
    color: var(--text-color);
}

/*.btn-industry-innovation:hover {
    background-color: var(--odd-color-industry-innovation-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-industry-innovation i, .user-icon.btn-full-industry-innovation i {
    color: var(--odd-color-industry-innovation);
}

.text-industry-innovation {
    color: var(--odd-color-industry-innovation);
}

.bg-industry-innovation {
    background-color: var(--odd-color-industry-innovation);
    color: var(--text-color);
}

.tabs__tab--active.tab-industry-innovation {
    color: var(--odd-color-industry-innovation);
}

.border-industry-innovation {
    border-color : var(--odd-color-industry-innovation)
}

.tab-pseudo-industry-innovation::before {
    background-color: var(--odd-color-industry-innovation);
}

/* REDUCED INEQUALITY */
.btn-reduced-inequality {
    background-color: var(--odd-color-reduced-inequality);
    border-color: var(--odd-color-reduced-inequality);
    color: var(--text-color);
}

/*.btn-reduced-inequality:hover {
    background-color: var(--odd-color-reduced-inequality-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-reduced-inequality i, .user-icon.btn-full-reduced-inequality i {
    color: var(--odd-color-reduced-inequality);
}

.text-reduced-inequality {
    color: var(--odd-color-reduced-inequality);
}

.bg-reduced-inequality {
    background-color: var(--odd-color-reduced-inequality);
    color: var(--text-color);
}

.tabs__tab--active.tab-reduced-inequality {
    color: var(--odd-color-reduced-inequality);
}

.border-reduced-inequality {
    border-color : var(--odd-color-reduced-inequality)
}

.tab-pseudo-reduced-inequality::before {
    background-color: var(--odd-color-reduced-inequality);
}

/* SUSTAINABLE CITIES */
.btn-sustainable-cities {
    background-color: var(--odd-color-sustainable-cities);
    border-color: var(--odd-color-sustainable-cities);
    color: var(--text-color);
}

/*.btn-sustainable-cities:hover {
    background-color: var(--odd-color-sustainable-cities-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-sustainable-cities i, .user-icon.btn-full-sustainable-cities i {
    color: var(--odd-color-sustainable-cities);
}

.text-sustainable-cities {
    color: var(--odd-color-sustainable-cities);
}

.bg-sustainable-cities {
    background-color: var(--odd-color-sustainable-cities);
    color: var(--text-color);
}

.tabs__tab--active.tab-sustainable-cities {
    color: var(--odd-color-sustainable-cities);
}

.border-sustainable-cities {
    border-color : var(--odd-color-sustainable-cities)
}

.tab-pseudo-sustainable-cities::before {
    background-color: var(--odd-color-sustainable-cities);
}

/* RESPONSIBLE CONSUMPTION */
.btn-responsible-consumption {
    background-color: var(--odd-color-responsible-consumption);
    border-color: var(--odd-color-responsible-consumption);
    color: var(--text-color);
}

/*.btn-responsible-consumption:hover {
    background-color: var(--odd-color-responsible-consumption);
    color: var(--text-color);
}*/

.cart-btn.btn-full-responsible-consumption i, .user-icon.btn-full-responsible-consumption i {
    color: var(--odd-color-responsible-consumption);
}

.text-responsible-consumption {
    color: var(--odd-color-responsible-consumption);
}

.bg-responsible-consumption {
    background-color: var(--odd-color-responsible-consumption);
    color: var(--text-color);
}

.tabs__tab--active.tab-responsible-consumption {
    color: var(--odd-color-responsible-consumption);
}

.border-responsible-consumption {
    border-color : var(--odd-color-responsible-consumption)
}

.tab-pseudo-responsible-consumption::before {
    background-color: var(--odd-color-responsible-consumption);
}

/* CLIMATE ACTION */
.btn-climate-action {
    background-color: var(--odd-color-climate-action);
    border-color: var(--odd-color-climate-action);
    color: var(--text-color);
}

/*.btn-climate-action:hover {
    background-color: var(--odd-color-climate-action-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-climate-action i, .user-icon.btn-full-climate-action i {
    color: var(--odd-color-climate-action);
}

.text-climate-action {
    color: var(--odd-color-climate-action);
}

.bg-climate-action {
    background-color: var(--odd-color-climate-action);
    color: var(--text-color);
}

.tabs__tab--active.tab-climate-action {
    color: var(--odd-color-climate-action);
}

.border-climate-action {
    border-color : var(--odd-color-climate-action)
}

.tab-pseudo-climate-action::before {
    background-color: var(--odd-color-climate-action);
}

/* LIFE BELOW WATER */
.btn-life-below-water {
    background-color: var(--odd-color-life-below-water);
    border-color: var(--odd-color-life-below-water);
    color: var(--text-color);
}

/*.btn-life-below-water:hover {
    background-color: var(--odd-color-life-below-water-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-life-below-water i, .user-icon.btn-full-life-below-water i {
    color: var(--odd-color-life-below-water);
}

.text-life-below-water {
    color: var(--odd-color-life-below-water);
}

.bg-life-below-water {
    background-color: var(--odd-color-life-below-water);
    color: var(--text-color);
}

.tabs__tab--active.tab-life-below-water {
    color: var(--odd-color-life-below-water);
}

.border-life-below-water {
    border-color : var(--odd-color-life-below-water)
}

.tab-pseudo-life-below-water::before {
    background-color: var(--odd-color-life-below-water);
}

/* LIFE ON LAND */
.btn-life-on-land {
    background-color: var(--odd-color-life-on-land);
    border-color: var(--odd-color-life-on-land);
    color: var(--text-color);
}

/*.btn-life-on-land:hover {
    background-color: var(--odd-color-life-on-land-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-life-on-land i, .user-icon.btn-full-life-on-land i {
    color: var(--odd-color-life-on-land);
}

.text-life-on-land {
    color: var(--odd-color-life-on-land);
}

.bg-life-on-land {
    background-color: var(--odd-color-life-on-land);
    color: var(--text-color);
}

.tabs__tab--active.tab-life-on-land {
    color: var(--odd-color-life-on-land);
}

.border-life-on-land {
    border-color : var(--odd-color-life-on-land)
}

.tab-pseudo-life-on-land::before {
    background-color: var(--odd-color-life-on-land);
}

/* PEACE JUSTICE */
.btn-peace-justice {
    background-color: var(--odd-color-peace-justice);
    border-color: var(--odd-color-peace-justice);
    color: var(--text-color);
}

/*.btn-peace-justice:hover {
    background-color: var(--odd-color-peace-justice-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-peace-justice i, .user-icon.btn-full-peace-justice i {
    color: var(--odd-color-peace-justice);
}

.text-peace-justice {
    color: var(--odd-color-peace-justice);
}

.bg-peace-justice {
    background-color: var(--odd-color-peace-justice);
    color: var(--text-color);
}

.tabs__tab--active.tab-peace-justice {
    color: var(--odd-color-peace-justice);
}

.border-peace-justice {
    border-color : var(--odd-color-peace-justice)
}

.tab-pseudo-peace-justice::before {
    background-color: var(--odd-color-peace-justice);
}

/* PARTNERSHIP */
.btn-partnerships {
    background-color: var(--odd-color-partnerships);
    border-color: var(--odd-color-partnerships);
    color: var(--text-color);
}

/*.btn-partnerships:hover {
    background-color: var(--odd-color-partnerships-negative);
    color: var(--text-color);
}*/

.cart-btn.btn-full-partnerships i, .user-icon.btn-full-partnerships i {
    color: var(--odd-color-partnerships);
}

.text-partnerships {
    color: var(--odd-color-partnerships);
}

.bg-partnerships {
    background-color: var(--odd-color-partnerships);
    color: var(--text-color);
}

.tabs__tab--active.tab-partnerships {
    color: var(var(--odd-color-partnerships));
}

.border-partnerships {
    border-color : var(--odd-color-partnerships)
}

.tab-pseudo-partnerships::before {
    background-color: var(--odd-color-partnerships);
}


/* ======================================
   ODD SHAPES
   ====================================== */

   .shape-base {
    position: relative;
   }

   .shape-base::before {
    content: '';
    position: absolute;
    height: 120%;
    z-index: -1;
   }

   .shape-full-width::before {
    width: 100%;
   }

   .shape-fixed-width::before {
    width: 130px;
    height: calc(var(--text-xl)*1.15);
    left: var(--space-xs);
    bottom: 0;
   }

   .shape-right::before {
    clip-path: polygon(3% 3%, 94% 14%, 95% 96%, 0 100%);
   }

   .shape-left::before {
    clip-path: polygon(0 13%, 92% 0, 91% 100%, 3% 93%);
   }

   /* Color */

   .shape-primary::before {
    background-color: var(--primary-color);
   }

   .shape-highlight::before {
    background-color: var(--highlight-color);
   }

   .shape-no-poverty::before {
    background-color: var(--odd-color-no-poverty);
   }

   .shape-zero-hunger::before {
    background-color: var(--odd-color-zero-hunger);
   }

   .shape-good-health::before {
    background-color: var(--odd-color-good-health);
   }

   .shape-quality-education::before {
    background-color: var(--odd-color-quality-education);
   }

   .shape-gender-equality::before {
    background-color: var(--odd-color-gender-equality);
   }

   .shape-clean-water::before {
    background-color: var(--odd-color-clean-water);
   }

   .shape-affordable-energy::before {
    background-color: var(--odd-color-affordable-energy);
   }

   .shape-decent-work::before {
    background-color: var(--odd-color-decent-work);
   }

   .shape-industry-innovation::before {
    background-color: var(--odd-color-industry-innovation);
   }

   .shape-reduced-inequality::before {
    background-color: var(--odd-color-reduced-inequality);
   }

   .shape-sustainable-cities::before {
    background-color: var(--odd-color-sustainable-cities);
   }

   .shape-responsible-consumption::before {
    background-color: var(--odd-color-responsible-consumption);
   }

   .shape-climate-action::before {
    background-color: var(--odd-color-climate-action);
   }

   .shape-life-below-water::before {
    background-color: var(--odd-color-life-below-water);
   }

   .shape-life-on-land::before {
    background-color: var(--odd-color-life-on-land);
   }

   .shape-peace-justice::before {
    background-color: var(--odd-color-peace-justice);
   }

   .shape-partnerships::before {
    background-color: var(--odd-color-partnerships);
   }

   @media screen and (max-width: 767px) {
    .shape-fixed-width::before {
        bottom: initial;
        top: var(--space-s);
        left: 50%;
        transform: translateX(-50%);
    }
   }

   /* ======================================
   ODD BG NEGATIVE
   ====================================== */

/* No Poverty */
.bg-no-poverty-negative {
    background-color: var(--odd-color-no-poverty-negative);
    color: var(--text-color);
}

/* Zero Hunger */
.bg-zero-hunger-negative {
    background-color: var(--odd-color-zero-hunger-negative);
    color: var(--text-color);
}

/* Good Health and Well-being */
.bg-good-health-negative {
    background-color: var(--odd-color-good-health-negative);
    color: var(--text-color);
}

/* Quality Education */
.bg-quality-education-negative {
    background-color: var(--odd-color-quality-education-negative);
    color: var(--text-color);
}

/* Gender Equality */
.bg-gender-equality-negative {
    background-color: var(--odd-color-gender-equality-negative);
    color: var(--text-color);
}

/* Clean Water and Sanitation */
.bg-clean-water-negative {
    background-color: var(--odd-color-clean-water-negative);
    color: var(--text-color);
}

/* Affordable and Clean Energy */
.bg-affordable-energy-negative {
    background-color: var(--odd-color-affordable-energy-negative);
    color: var(--text-color);
}

/* Decent Work and Economic Growth */
.bg-decent-work-negative {
    background-color: var(--odd-color-decent-work-negative);
    color: var(--text-color);
}

/* Industry, Innovation and Infrastructure */
.bg-industry-innovation-negative {
    background-color: var(--odd-color-industry-innovation-negative);
    color: var(--text-color);
}

/* Reduced Inequality */
.bg-reduced-inequality-negative {
    background-color: var(--odd-color-reduced-inequality-negative);
    color: var(--text-color);
}

/* Sustainable Cities and Communities */
.bg-sustainable-cities-negative {
    background-color: var(--odd-color-sustainable-cities-negative);
    color: var(--text-color);
}

/* Responsible Consumption and Production */
.bg-responsible-consumption-negative {
    background-color: var(--odd-color-responsible-consumption-negative);
    color: var(--text-color);
}

/* Climate Action */
.bg-climate-action-negative {
    background-color: var(--odd-color-climate-action-negative);
    color: var(--text-color);
}

/* Life Below Water */
.bg-life-below-water-negative {
    background-color: var(--odd-color-life-below-water-negative);
    color: var(--text-color);
}

/* Life on Land */
.bg-life-on-land-negative {
    background-color: var(--odd-color-life-on-land-negative);
    color: var(--text-color);
}

/* Peace, Justice and Strong Institutions */
.bg-peace-justice-negative {
    background-color: var(--odd-color-peace-justice-negative);
    color: var(--text-color);
}

/* Partnerships for the Goals */
.bg-partnerships-negative {
    background-color: var(--odd-color-partnerships-negative);
    color: var(--text-color);
}