/*1.4.1*/


/* ============================================================
   BASE COMMUNE BOUTONS / QUIZ / DECO
   ============================================================ */

.btn-rubrique-thematique, .btn-quiz, .two-trees {
    height: auto;
    display: inline-block;
    position: absolute;
    overflow: visible;
    background-position: center;
    background-size: 95%;
    background-repeat: no-repeat;
}

/* ============================================================
   INTERACTION: SEULE LA HITBOX EST CLIQUABLE (LE BOUTON NON)
   ============================================================ */

.btn-rubrique-thematique {
    pointer-events: none;
    cursor: default;
    isolation: isolate;
}

/* la hitbox est la SEULE zone interactive  */
.btn-rubrique-thematique .btn-hitbox {
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    inset: 0;
    display: block;
    /*background: rgba(216, 78, 56, 0.34);*/
    z-index: 10;
    clip-path: var(--hit-poly);
    -webkit-clip-path: var(--hit-poly);
}

.btn-rubrique-thematique:hover,
.btn-rubrique-thematique:focus {
    filter: brightness(1.2) saturate(0.9);
    transform: scale(1.02);
}

/* effet visuel optionnel via ::before piloté par classe .is-hover */
.btn-hitbox::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: inherit;
    -webkit-clip-path: inherit;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    transform: scale(1);
    pointer-events: none;
    background: rgba(255, 255, 255, .18);
}


/* hover piloté par classe sur le bouton (si ton JS l’ajoute) !!!!!!!!!!!! */
.btn-rubrique-thematique.is-hit-hover {
    filter: brightness(1.2) saturate(0.9);
    transform: scale(1.02);
}

/* Quiz hover */
.btn-quiz:hover, .btn-quiz:focus {
    filter: brightness(1.2) saturate(0.9);
    transform: scale(1.02);
}

/* ============================================================
   ANIMATIONS PICTOS
   ============================================================ */

.btn-quiz .point,
#cet-epargne #chrono{
    animation: picto-bounce 2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.btn-quiz .ombre {
    animation: ombre-zoom 2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes picto-shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(3px, -1px);
    }
    40% {
        transform: translate(2px, -2px);
    }
    60% {
        transform: translate(-2px, -2px);
    }
    80% {
        transform: translate(-3px, -1px);
    }
}

#prevoyance_sante #nuages {
    animation: picto-shake 3s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

/* Animations normales */
@keyframes picto-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes ombre-zoom {
    0%, 100% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.06);
    }
}

/* ============================================================
   POSITIONNEMENTS BOUTONS
   ============================================================ */

#simulateur-epargne {
    width: var(--simulateur-epargne-width);
    aspect-ratio:299 / 235;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/epargne-simulateur-btn.png");
    top: var(--simulateur-epargne-top);
    left: var(--simulateur-epargne-left);
    z-index: 1;
}

#quiz-epargne {
    width: var(--quiz-width);
    top: var(--quiz-epargne-top);
    left: var(--quiz-epargne-left);
    z-index: 4;
}

#cet-epargne {
    width: var(--cet-epargne-width);
    aspect-ratio: 298 / 340;
    top: var(--cet-epargne-top);
    left: var(--cet-epargne-left);
    z-index: 4;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/epargne-cet-btn.png");
}

#mon-profil-epargnant {
    width: var(--profil-epargne-width);
    aspect-ratio: 325 / 404;
    top: var(--profil-epargne-top);
    left: var(--profil-epargne-left);
    z-index: 3;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/epargne-profil-btn.png");
}

#peg-epargne {
    width: var(--peg-epargne-width);
    aspect-ratio: 318 / 227;
    top: var(--peg-epargne-top);
    left: var(--peg-epargne-left);
    z-index: 3;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/epargne-peg-btn.png");
}

html[lang^="en"] #peg-epargne {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/epargne-peg-btn.png");
}
#pero-epargne {
    width: var(--pero-epargne-width);
    aspect-ratio: 323 / 281;
    top: var(--pero-epargne-top);
    left: var(--pero-epargne-left);
    z-index: 6;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/epargne-pero-btn.png");
}

#preparer-retraite-epargne {
    width: var(--preparer-retraite-epargne-width);
    aspect-ratio: 414 / 432;
    top: var(--preparer-retraite-epargne-top);
    left: var(--preparer-retraite-epargne-left);
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/epargne-preparer-retraite-btn.png");
    z-index: 3;
}

html[lang^="en"] #preparer-retraite-epargne {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/epargne-preparer-retraite-btn.png");
}

#parentalite-mes-proches-moi {
    width: var(--parentalite-mes-proches-moi-width);
    aspect-ratio: 258 / 332;
    top: var(--parentalite-mes-proches-moi-top);
    left: var(--parentalite-mes-proches-moi-left);
    z-index: 6;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mes-proches-moi-parentalite-btn.png");
}

#engagement-mes-proches-moi {
    width: var(--engagement-mes-proches-moi-width);
    aspect-ratio: 394 / 529;
    top: var(--engagement-mes-proches-moi-top);
    left: var(--engagement-mes-proches-moi-left);
    z-index: 6;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mes-proches-moi-engagement-btn.png");
}

html[lang^="en"] #engagement-mes-proches-moi {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/mes-proches-moi-engagement-btn.png");
}
#cancer-mes-proches-moi {
    width: var(--cancer-mes-proches-moi-width);
    aspect-ratio: 378 / 292;
    top: var(--cancer-mes-proches-moi-top);
    left: var(--cancer-mes-proches-moi-left);
    z-index: 3;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mes-proches-moi-cancer-btn.png");
}

#violences-conjugales-mes-proches-moi {
    width: var(--violences-mes-proches-moi-width);
    aspect-ratio: 253 / 292;
    top: var(--violences-mes-proches-moi-top);
    left: var(--violences-mes-proches-moi-left);
    z-index: 4;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mes-proches-moi-violence-conjugale-btn.png");
}

#flexibilite-mes-proches-moi {
    width: var(--flexibilite-mes-proches-moi-width);
    aspect-ratio: 257 / 486;
    top: var(--flexibilite-mes-proches-moi-top);
    left: var(--flexibilite-mes-proches-moi-left);
    z-index: 6;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mes-proches-moi-flexibilite-btn.png");
}

#rqth-mes-proches-moi {
    width: var(--rqth-mes-proches-moi-width);
    aspect-ratio: 352 / 349;
    top: var(--rqth-mes-proches-moi-top);
    left: var(--rqth-mes-proches-moi-left);
    z-index: 2;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mes-proches-moi-rqth-btn.png");
}

html[lang^="en"] #rqth-mes-proches-moi {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/mes-proches-moi-rqth-btn.png");
}
#aidants-mes-proches-moi {
    width: var(--aidants-mes-proches-moi-width);
    aspect-ratio: 347 / 216;
    top: var(--aidants-mes-proches-moi-top);
    left: var(--aidants-mes-proches-moi-left);
    z-index: 6;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mes-proches-moi-aidants-btn.png");
}

html[lang^="en"] #aidants-mes-proches-moi {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/mes-proches-moi-aidants-btn.png");
}
#quiz-accompagnement-danone {
    width: var(--quiz-width);
    top: var(--quiz-mes-proches-moi-top);
    left: var(--quiz-mes-proches-moi-left);
    z-index: 2;
}

#classification-ma-remuneration {
    width: var(--classification-remuneration-width);
    aspect-ratio: 389 / 405;
    top: var(--classification-remuneration-top);
    left: var(--classification-remuneration-left);
    z-index: 5;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/remuneration-classification-btn.png");
}

.two-trees {
    width: calc(var(--iles-width) / 12);
    aspect-ratio: 243 / 233;
    top: 24%;
    left: 30%;
    z-index: 4;
    background-image: url("../../../themes/danone-sante/assets/iles/2-arbres.png");
}

#ip-ma-remuneration {
    width: var(--ip-remuneration-width);
    aspect-ratio: 378 / 292;
    top: var(--ip-remuneration-top);
    left: var(--ip-remuneration-left);
    z-index: 3;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/remuneration-i&p-btn.png");
}

#variable-ma-remuneration {
    width: var(--variable-remuneration-width);
    aspect-ratio: 541 / 357;
    top: var(--variable-remuneration-top);
    left: var(--variable-remuneration-left);
    z-index: 2;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/remuneration-variable-btn.png");
}

html[lang^="en"] #variable-ma-remuneration {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/remuneration-variable-btn.png");
}
#total-cash-ma-remuneration {
    width: var(--total-cash-ma-remuneration-width);
    aspect-ratio: 864 / 776;
    top: var(--total-cash-ma-remuneration-top);
    left: var(--total-cash-ma-remuneration-left);
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/total-cash-ma-remuneration.png");
    z-index: 3;
}

#evolution-ma-remuneration {
    width: var(--evolution-remuneration-width);
    aspect-ratio: 366 / 579;
    top: var(--evolution-remuneration-top);
    left: var(--evolution-remuneration-left);
    z-index: 3;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/remuneration-evolution-btn.png");
}

#transparence-ma-remuneration {
    width: var(--transparence-remuneration-width);
    aspect-ratio: 366 / 579;
    top: var(--transparence-remuneration-top);
    left: var(--transparence-remuneration-left);
    z-index: 5;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/remuneration-transparence-btn.png");
}

#quiz-ma-remuneration {
    width: var(--quiz-width);
    top: var(--quiz-ma-remuneration-top);
    left: var(--quiz-ma-remuneration-left);
    z-index: 8;
}

#quiz-ma-sante {
    width: var(--quiz-width);
    top: var(--quiz-ma-sante-top);
    left: var(--quiz-ma-sante-left);
    z-index: 1;
}

/* MUTUELLE SANTE */
#ma-mutuelle-sante {
    width: var(--ma-mutuelle-sante-width);
    aspect-ratio: 737 / 485;
    top: var(--ma-mutuelle-sante-top);
    left: var(--ma-mutuelle-sante-left);
    z-index: 5;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/mutuelle-sante-btn.png");
}

html[lang^="en"] #ma-mutuelle-sante {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/mutuelle-sante-btn.png");
}

#teleconsultation-ma-sante {
    width: var(--teleconsultation-ma-sante-width);
    aspect-ratio: 389 / 382;
    top: var(--teleconsultation-ma-sante-top);
    left: var(--teleconsultation-ma-sante-left);
    z-index: 2;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/teleconsultation-sante-btn.png");
}

#prevention-ma-sante {
    width: var(--prevention-ma-sante-width);
    aspect-ratio: 449 / 563;
    top: var(--prevention-ma-sante-top);
    left: var(--prevention-ma-sante-left);
    z-index: 2;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/prevention-sante-btn.png");
}

html[lang^="en"] #prevention-ma-sante {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/prevention-sante-btn.png");
}
#prevoyance-ma-sante {
    width: var(--prevoyance-ma-sante-width);
    aspect-ratio: 439 / 454;
    top: var(--prevoyance-ma-sante-top);
    left: var(--prevoyance-ma-sante-left);
    z-index: 8;
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/sante-prevoyance-btn.png");
}
html[lang^="en"] #prevoyance-ma-sante {
    background-image: url("../../../themes/danone-sante/assets/iles/boutons/en/sante-prevoyance-btn.png");
}
/* ============================================================
   ANIMS SVG MUTUELLE
   ============================================================ */

#ma-mutuelle-sante #panneau,
#ma-mutuelle-sante #croix {
    animation: couleur-panneau 3s ease-in-out infinite;
}

@keyframes couleur-panneau {
    0% {
        fill: #c1272d;
    }
    50% {
        fill: #2e7d32;
    }
    100% {
        fill: #c1272d;
    }
}

#ma-mutuelle-sante #panneau-2 {
    animation: couleur-panneau-fonce 3s ease-in-out infinite;
}

@keyframes couleur-panneau-fonce {
    0% {
        fill: #931c25;
    }
    50% {
        fill: #1b5e20;
    }
    100% {
        fill: #931c25;
    }
}

#ma-mutuelle-sante #fenetre1,
#ma-mutuelle-sante #fenetre1b {
    animation: fenetre-couleur 6s steps(1, end) infinite;
}

#ma-mutuelle-sante #fenetre2,
#ma-mutuelle-sante #fenetre3 {
    animation: fenetre-couleur 13s steps(1, end) infinite;
}

@keyframes fenetre-couleur {
    0% {
        fill: #89adc6;
    }
    50% {
        fill: #fce55d;
    }
    100% {
        fill: #89adc6;
    }
}

/* ============================================================
   POLYGONS PAR BOUTON
   ============================================================ */

#preparer-retraite-epargne.btn-rubrique-thematique {
    --hit-poly: polygon(0 55%, 15% 7%, 91% 75%, 55% 90%);
}

#cet-epargne.btn-rubrique-thematique {
    --hit-poly: polygon(10% 10%, 56% 1%, 90% 88%, 8% 91%);
}

#mon-profil-epargnant.btn-rubrique-thematique {
    --hit-poly: polygon(21% 5%, 80% 5%, 68% 82%, 11% 90%);
}

#simulateur-epargne.btn-rubrique-thematique {
    --hit-poly: polygon(11% 23%, 48% 0%, 85% 49%, 11% 92%)
}

#peg-epargne.btn-rubrique-thematique {
    --hit-poly: polygon(0 50%, 35% 7%, 81% 45%, 45% 80%);
}

#pero-epargne.btn-rubrique-thematique {
    --hit-poly: polygon(11% 50%, 30% 17%, 97% 55%, 60% 78%);
}

#classification-ma-remuneration.btn-rubrique-thematique {
    --hit-poly: polygon(48% 16%, 75% 26%, 86% 82%, 77% 90%, 32% 58%, 12% 32%, 23% 10%);
}

#ip-ma-remuneration.btn-rubrique-thematique {
    --hit-poly: polygon(1% 50%, 13% -23%, 78% 56%, 40% 78%);
}

#variable-ma-remuneration.btn-rubrique-thematique {
    --hit-poly: polygon(48% 16%, 75% 26%, 86% 82%, 77% 90%, 32% 58%, 12% 32%, 23% 10%);
}

#evolution-ma-remuneration.btn-rubrique-thematique {
    --hit-poly: polygon(70% 15%, 73% 23%, 80% 70%, 46% 80%, 8% 90%, 12% 61%, 58% 9%);
}

#transparence-ma-remuneration.btn-rubrique-thematique {
    --hit-poly: polygon(39% 21%, 65% 38%, 89% 62%, 62% 72%, 5% 50%, 11% 50%, 3% 38%);
}

#total-cash-ma-remuneration.btn-rubrique-thematique {
    --hit-poly: polygon(36% 7%, 60% 21%, 62% 58%, 32% 77%, 12% 61%, 14% 62%, 10% 30%);
}

#ma-mutuelle-sante.btn-rubrique-thematique {
    --hit-poly: polygon(25% 0%, 81% 29%, 70% 87%, 23% 62%);
}

#prevention-ma-sante.btn-rubrique-thematique {
    --hit-poly: polygon(23% 5%, 78% 14%, 88% 80%, 1% 62%);
}

#prevoyance-ma-sante.btn-rubrique-thematique {
    --hit-poly: polygon(23% 5%, 88% 9%, 88% 82%, 1% 82%);
}

#teleconsultation-ma-sante.btn-rubrique-thematique {
    --hit-poly: polygon(23% 5%, 71% 9%, 80% 77%, 1% 62%);
}

#parentalite-mes-proches-moi.btn-rubrique-thematique {
    --hit-poly: polygon(12% 75%, 25% 7%, 91% 5%, 75% 77%);
}

#engagement-mes-proches-moi.btn-rubrique-thematique {
    --hit-poly: polygon(5% 78%, 16% 7%, 82% 19%, 60% 82%);
}

#flexibilite-mes-proches-moi.btn-rubrique-thematique {
    --hit-poly: polygon(0% 85%, 18% 7%, 81% 7%, 55% 90%);
}

#violences-conjugales-mes-proches-moi.btn-rubrique-thematique {
    --hit-poly: polygon(0 60%, 15% 7%, 71% 25%, 55% 90%)
}

#rqth-mes-proches-moi.btn-rubrique-thematique {
    --hit-poly: polygon(1% 45%, 25% 7%, 81% 45%, 46% 80%);
}

#cancer-mes-proches-moi.btn-rubrique-thematique {
    --hit-poly: polygon(-22% 44%, 35% 5%, 70% 27%, 57% 80%);
}

#aidants-mes-proches-moi.btn-rubrique-thematique {
    --hit-poly: polygon(0% 55%, 29% 3%, 71% 15%, 75% 90%);
}