/* __________ COMMUN ___________ */

div{
    font-size:16px;
}

.ligne{
    display: flex;
    padding: 10px 0px;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    flex-wrap: nowrap;
    justify-content: space-between; 
}

.champ_out{
    border: none;
}

.titre_cat_bloc_reglement, .titre_cat_bloc_offre, .titre_cat_bloc_investissement{
display: flex;
    height: auto;
    padding: 10px;
    font-family: 'LubalinGraphStd-Bold';
    font-size: 20px;
    margin-top: 20px;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.titre_cat_bloc_reglement em, .titre_cat_bloc_offre em, .titre_cat_bloc_investissement em{
    font-family: 'LubalinGraphStd-Bold';
    font-size: 20px;   
}

.bloc_offre, .bloc_reglement, .bloc_investissement{
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 0px 0px 20px 20px;
}

.purple_border {
    border: 2px solid  #645F9B;
}
.lightblue_border {
    border: 2px solid  #50C3E1;
}
.darkblue_border {
    border: 2px solid  #003264;
}

em.smaller{
    font-size: 10px;
}

.style_em_input{
        font-family: 'robotoregular'!important;
            font-size: 1em !important;
            font-style: italic !important;    
}

.dual_content{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dual_content input{
width: 160px;    
}

.noBg{
    background: none !important;    
}

/*_________ PART 1 _________*/

.titre_cat_bloc_offre{
    background: var(--secondary-colors-50-c-3-e-1, #50C3E1);
    color: var(--white);
}

.bloc_offre{
    border-right: 5px solid var(--secondary-colors-50-c-3-e-1, #50C3E1);
    border-bottom: 5px solid var(--secondary-colors-50-c-3-e-1, #50C3E1);
    border-left: 5px solid var(--secondary-colors-50-c-3-e-1, #50C3E1);        
}

.ligne_entetes{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-self: stretch;
    justify-content: space-around;
    gap: 20px;
}

.ligne_entetes_content {
    display: flex;
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    background: var(--secondary-colors-ebebeb, #EBEBEB);
    align-items: center;
    font-size: 20px;
    width: -webkit-fill-available; /* Safari/Chrome */
    width: -moz-available;         /* Firefox */
    width: fill-available;         /* Spécification (non encore standardisée partout) */
}

.ligne_entetes .ligne_entetes_content:nth-child(2){
    background-color: var(--light_blue);
    color: var(--white);
}

.ligne_entetes_content input{
    color: var(--secondary-colors-003264, #003264);
    font-family: 'robotobold', 'Arial', sans-serif;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    text-transform: uppercase !important;
}

.ligne_entetes_content_2 {
    display: flex;
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    background: var(--secondary-colors-ebebeb, #EBEBEB);
    font-size: 18px;
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    align-items: flex-start;
}

.ligne_entetes_content_2 span{
    text-align: left;    
}

.ligne_entetes_content_2 table td {
  padding: 8px 10px;
  text-align: left;
  border: 0.5px solid var(--secondary-colors-00349-b, #00349B);
}

.font-size-20{
font-size: 20px !important;
}

/*_____________ TABLEAU ____________*/

/* Première cellule (colonne 1) */
.ligne_entetes_content_2 table td:first-child{
  border-left: none;
  border-right: none;
}

.ligne_entetes_content_2 table tr:first-child td{
  font-family: "LubalinGraphStd-Demi" !important;
  font-size: 16px !important;
}

/* Deuxième cellule (colonne 2, à masquer mais à styler quand même) */
.ligne_entetes_content_2 table td:nth-child(2) {
    border-right: none;
    border-left: none;
    background-color: #50C3E133;
}
.ligne_entetes_content_2 table td{
    color: var(--dark_blue);  
}

.ligne_entetes_content_2 table td p{
  font-family: 'robotobold';
  font-size: 14px;
}

.ss_title{
  font-family: 'robotobold';
  font-size: 20px;
  text-transform: uppercase;
}

/*_________ PART 2 _________*/

.titre_cat_bloc_investissement{
    background:  #645F9B;
    color: var(--white);
}

.bloc_investissement{
    border-right: 5px solid var(--secondary-colors-50-c-3-e-1, #645F9B);
    border-bottom: 5px solid var(--secondary-colors-50-c-3-e-1, #645F9B);
    border-left: 5px solid var(--secondary-colors-50-c-3-e-1, #645F9B);        
}

.cell{
    font-family: 'robotoregular';
    font-size: 14px;    
    font-style: italic;
}
.cell strong{
    font-family: 'robotobold';
    font-size: 18px;    
}

.ligne_purple, .ligne_lightblue, .ligne_white {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    padding: 0px 0px 0px 10px;
}

.ligne_purple{
    padding: 10px 0px 10px 10px;
    border-radius: 10px;
    background: rgba(100, 95, 155, 0.20);
}

.ligne_lightblue{
    padding: 10px 20px;
    border-radius: 10px;
}
/* 
.ligne_white{
    padding: 0 20px;
} */

.ligne_white .cell input, .ligne_white div .cell input {
    display: flex;
    padding: 10px;
    text-align: right;
    justify-content: center;
    align-items: center;
    gap: 10px;    
    border-radius: 4px;
    font-family: 'robotobold';
    font-size: 20px;
    text-align: right;    
    height: 30px;
    width: 170px; /*Idée de merde mais c'est des experts, alors tkt*/
}

.ligne_purple .cell input, .ligne_purple div .cell input, .ligne_lightblue .cell input, .ligne_lightblue div .cell input {
    display: flex;
    padding: 10px;
    text-align: right;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: #dfdeea;
    font-family: 'robotobold';
    font-size: 20px;
    text-align: right;
}
.ligne_purple .cell input, .ligne_purple div .cell input{
    color:  #645F9B;
}



.spacer{
    padding: 0;
    width: 100%;
    height: 1px;
    background:  #645F9B;
    gap: unset;
    display: block;    
}

.ligne_double{
    flex-direction: column;
    gap: 0;    
    padding: 0px 0px 0px 10px;
}

.ligne_double .ligne_double_content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;    
}

.ligne_double .ligne_double_content .cell input{
    display: flex;
    padding: 10px;
    text-align: right;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    font-family: 'robotobold';
    font-size: 20px;
    text-align: right;
    height: 30px;
}

/* em{
    font-family: 'robotoregular';
} */


.ligne_bg_purple{
    border-radius: 10px;
    background: var(--colorssecondaires-645-f-9-b, #645F9B);
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
}

.ligne_bg_purple .cell input {
    display: flex;
    border: none;
    background-color: #645F9B;
    font-family: 'robotobold';
    font-size: 20px;
    text-align: right;
}

.encart_light_purple, .encart_light_blue{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-radius: 10px;
}
.encart_light_purple .cell, .encart_light_blue .cell{
    padding: 0px 10px 0px 10px;
}
.encart_light_purple{
    background: rgba(100, 95, 155, 0.20);    
}
.encart_light_blue{
    background: #50c3e13d;
}

.encart_light_purple .cell input {
    display: flex;
    border: none;
    background: rgb(100 95 155 / 0%); 
    font-family: 'robotobold';
    font-size: 20px;
    text-align: right;
}

.encart_light_purple .spacer{
    margin: 0 10px;
    width: auto;
}

.bg_light_blue_sim{
    background-color: #50C3E133;
}

/*_________ PART 3 _________*/

.bloc_reglement{
    border-right: 5px solid var(--secondary-colors-50-c-3-e-1, #50C3E1);
    border-bottom: 5px solid var(--secondary-colors-50-c-3-e-1, #50C3E1);
    border-left: 5px solid var(--secondary-colors-50-c-3-e-1, #50C3E1);
}

.titre_cat_bloc_reglement{
    background: var(--secondary-colors-50-c-3-e-1, #50C3E1);
    color: var(--white);    
}

.ligne_radio{
    border-radius: 10px;
    background: var(--secondary-colors-ebebeb, #EBEBEB);    
    padding: 10px;
}

.ligne_radio label{
display: flex;
align-items: center;    
font-family: 'robotobold';
font-size: 20px;
}

#mode_paiement_1, #mode_paiement_2{
    width: 100%;
    gap: 20px;
    display: flex;
    flex-direction: column;
    display: none;
}

#mode_paiement_1 .spacer, #mode_paiement_2 .spacer{
background: #003264;    
}

/* STYLE BOUTON RADIO */
    
.ligne_radio input.radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    box-sizing: border-box;    
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    margin-right: 8px;
}

/* Cercle intérieur (encoche) parfaitement centré */
.ligne_radio input.radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease;
}

/* Quand coché, sphère intérieure colorée */
.ligne_radio input.radio:checked::after {
  background-color: var(--secondary-colors-50-c-3-e-1, #50C3E1);
}

.ligne_radio label strong{width: 100%;}

/* NOTE DE BAS DE PAGE */

.ligne_entetes_content_2 sup, .cell sup{font-size: 12px;}

.sim__text_comp_title{
    background: #645F9B;
    color: var(--white);
    display: flex;
    height: auto;
    width: auto;
    padding: 10px 20px;
    
}
.sim__text_comp_title p{
    font-family: 'LubalinGraphStd-Bold';
    font-size: 20px; 
    color: #FFF;    
}

.sim__text_comp{
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 0px 0px 20px 20px;
    border-right: 5px solid var(--secondary-colors-50-c-3-e-1, #645F9B);
    border-bottom: 5px solid var(--secondary-colors-50-c-3-e-1, #645F9B);
    border-left: 5px solid var(--secondary-colors-50-c-3-e-1, #645F9B);    
}

.sim__text_comp div {
    display: flex;
    padding: 20px;
    gap: 10px;
    flex-direction: row;
    align-self: stretch;
    border-radius: 10px;
    background: var(--secondary-colors-ebebeb, #EBEBEB);
    align-items: center;    
}

.sim__text_comp div b, .sim__text_comp div p{
color: #645F9B;
}
.sim__text_comp div p strong, .sim__text_comp div p b{
    font-size: 30px;
    font-family: 'LubalinGraphStd-Bold';
}
.sim__text_comp div p{
    font-size: 16px;
    font-family: 'robotobold';
}

.sim__text_comp_2{
    font-family: 'robotoregular';
    font-size: 16px;    
    margin-bottom: 20px;
}
.sim__text_comp_2 p{
    color: #645F9B;
}
.sim__text_comp_2 p:first-child{
    margin: 40px 0px 20px 0px;
}    
.sim__text_comp_2 p:first-child b, .sim__text_comp_2 p:first-child strong{
background: var(--colorssecondaires-645-f-9-b, #645F9B);
    font-family: 'robotobold';
    font-size: 20px;
    color: #FFF;
    padding: 10px 10px;
}

.cell input{float: right;}


/* CONCERNANT LES SIMS AVEC DEUX TYPES DE MONNAIE : */

.monnaie_bg_gris{background-color: #ebebeb !important; font-family: 'robotoregular' !important;font-size: 18px !important;}
.monnaie_bg_bleu{background-color: #50c3e1 !important; font-family: 'robotoregular' !important;font-size: 18px !important;}
.champ_monnaie{font-family: 'robotoregular' !important;font-size: 18px !important;font-weight: normal !important;}

.content_bi_monnaie{
    display: flex;
    flex-direction: row;
    align-content: stretch;
    flex-wrap: nowrap;
    align-items: center;    
}

.cell_content_bi_monnaie{
    display: flex;
    flex-direction: column;
    justify-content: space-around;    
}

.content_bi_monnaie .cell_content_bi_monnaie input{
    padding:0 10px 0 0;
}

.strong{font-family: 'robotobold' !important;}
.none{display: none !important;}

@media (max-width: 990px) { /* PETIT ECRAN */
    .ligne_radio input.radio{
        appearance: auto;
        -webkit-appearance: auto;
        -moz-appearance: auto;   
        width: 10px; 
        height: 10px; 
    }
}

@media (max-width: 800px) { /* PETIT ECRAN */ 
    .sim__text_comp_2 p:first-child b, .sim__text_comp_2 p:first-child strong {
        background: unset;
        padding: unset;
        color: #FFF;
    }
    .sim__text_comp_2 p:first-child {
        margin: 40px 0px 20px 0px;
        background: #645F9B;
        padding: 10px;
    }    
}

@media (max-width: 700px) { /* PETIT ECRAN */
    .ligne_entetes {
        flex-direction: column;
    } 
    
    .ligne_white .cell input, .ligne_white div .cell input, .ligne_double .ligne_double_content .cell input, .ligne_bg_purple .cell input, .content_bi_monnaie .cell_content_bi_monnaie input, .encart_light_purple .cell input, .ligne_purple .cell input{width: 160px ;}
    .radio{width: auto !important;}
    
    .bloc_offre, .bloc_reglement, .bloc_investissement{padding: 20px 10px;}
    .ligne_entetes_content input{width: 170px;font-size: 16px;}
    .champ_monnaie{font-size: 16px !important;}

    .ligne_white .cell input, .ligne_white div .cell input, .ligne_double .ligne_double_content .cell input, .ligne_bg_purple .cell input, .content_bi_monnaie .cell_content_bi_monnaie input, .encart_light_purple .cell input, .ligne_purple .cell input{width: 120px ;}  
    .cell{width: 100%;}

    .ligne_purple, .ligne_lightblue, .ligne_white, .content_bi_monnaie, .ligne, .ligne_double_content{flex-direction: column !important;}


    .ligne_white .cell input, .ligne_white div .cell input, .ligne_double .ligne_double_content .cell input, .ligne_bg_purple .cell input, .content_bi_monnaie .cell_content_bi_monnaie input, .encart_light_purple .cell input{width: 100% ;}
    .ligne_white .cell , .ligne_white div .cell , .ligne_double .ligne_double_content .cell , .ligne_bg_purple .cell , .content_bi_monnaie .cell_content_bi_monnaie , .encart_light_purple .cell {width: 100% ;}        

}

