/* ____________ COMMON ____________ */

:root{
    --dark_blue: #001C4B;
    --light_blue: #009EE0;
    --white: #ffffff;
    --grey: #F5F5F5;
    --cream: #F9F4EB;
    --gold: #C19135;
    --dark_gold: #7E5D21;
}

.dark_blue{color: var(--dark_blue);}
.light_blue{color: var(--light_blue);}
.white{color: var(--white);}
.grey{color: var(--grey);}
.cream{color: var(--cream);}
.gold{color: var(--gold);}
.dark_gold{color: var(--dark_gold);}

.bg_dark_blue{background-color: var(--dark_blue);}
.bg_light_blue{background-color: var(--light_blue);}
.bg_white{background-color: var(--white);}
.bg_grey{background-color: var(--grey);}
.bg_cream{background-color: var(--cream);}
.bg_gold{background-color: var(--gold);}
.bg_dark_gold{background-color: var(--dark_gold);}

body{max-width: 1400px;margin: 0 auto;}
ul, ol{line-height: 20px;}
ul li, ol li{
    left: 20px;
    margin-right: 20px;  
    display: list-item;
}
ol li::marker{font-weight:bold;}

p, span, h4, ul li, ol li, b, strong, .blocInfo{font-size: 14px; color: var(--dark_blue);}
.p_b_gold b, .p_b_gold strong{color: var(--gold);}
b, strong{font-family: "Noto Bold";}

.hide {display: none !important;}

.text_decoration_none{text-decoration: none;}

.btnSouscrire{
    display: flex;
    width: fit-content;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    background:  var(--gold);
    color: var(--white);
    cursor: pointer;
    text-align: center;

    /* nav/bold */
 
    font-size: 14px;
    text-transform: uppercase;    
}

.btnSouscrire {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.btnSouscrire::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark_gold);
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.btnSouscrire:hover::before {
  transform: translateX(0);
}

.contentPrix{
display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    border: 1px solid var(--light_blue);
    flex-direction: column;
    border-radius: 0 0 20px 0;
    margin-bottom: 10px;    
}

.content_prixSouscription_1{
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: var(--color-primary-cyan, #009EE0);
    color: var(--white) !important;    
}

.content_prixSouscription_1_bis strong{
    color: var(--dark_blue);
    font-family: "Noto Bold";
    font-size: 32px;
    text-transform: uppercase;
}

.content_prixSouscription_1_bis_prixinter strong{
    color: var(--dark_blue);
    font-family: "Noto Bold";
    font-size: 22px;
    text-transform: uppercase;
}

.content_prixSouscription_1_bis{
    width: 100%;
    text-align: center;
    color: var(--dark_blue);
    font-family: "Noto Sans";
    font-size: 14px;
    padding: 10px;
}

.content_prixSouscription_2{
    /* Subtitle/bold */
    font-family: "Noto Bold";
    font-size: 20px;
    text-transform: uppercase;    
}
.content_prixSouscription_1{color: var(--dark_blue);}
.content_prixSouscription_2{color: var(--light_blue);}
.content_jeParticipe{
    color: var(--dark_blue);
    font-family: "Noto Sans";
    font-size: var(--font-size-20, 20px); 
    margin-bottom: 10px;
}

.block_globale{
    display: flex;
    padding: 20px 180px;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;    
}

h2{
    margin-bottom: 20px;

    /* title/bold */
    font-family: "Noto Bold";
    font-size: 32px;
    text-transform: uppercase;
}

h3{
    margin-bottom: 20px;

    /* title/bold */
    font-family: "Noto Bold";
    font-size: 20px;
    text-transform: uppercase;
}

.blocAutoEdit{
    margin: 0 15%;
    display: block;
}

.menuAlt_edit{
    display: flex;
    position: fixed;
    top: 120px;
    z-index: 2;
}

a.lien-top {
  display: block;
  width: 37px;
  height: 37px;
  position: fixed;
  right: 1%;
  bottom: 1%;
  z-index: 2000;
  overflow: hidden; /* important pour ne pas dépasser */
}

/* Accessibilité */
a.lien-top .hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Images */
a.lien-top .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 37px;
  height: 37px;
  background-repeat: no-repeat;
  background-position: top left;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* pour éviter les blocages hover */
}

a.lien-top .normal {
  background-image: url('https://butterfly-media.s3.gra.io.cloud.ovh.net/amundi/xnet/2025/images/btn_haut.svg');
  opacity: 1;
  z-index: 1;
}

a.lien-top .hover {
  background-image: url('https://butterfly-media.s3.gra.io.cloud.ovh.net/amundi/xnet/2025/images/btn_haut_hover.svg');
  opacity: 0;
  z-index: 2;
}

/* Hover effect */
a.lien-top:hover .normal {
  opacity: 0;
}

a.lien-top:hover .hover {
  opacity: 1;
}

.bdpNote p{
    font-size: 11px;
    font-style: italic;
}

.menu-burger{display: none;}

/* .hide {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
*/

.show {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease;
} 

/* ____________ FOOTER ____________ */

footer {
    display: flex;
    padding: 30px 180px;
    justify-content: space-between;
    align-items: center;
    gap: var(--item-spacing-10, 10px);
    align-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
}

footer .linksFooterRes{display: none;}

footer img{
    display: flex;
    width: auto;
    height: auto;
    align-items: flex-start;
    gap: 10px;    
    width: 80px;
}
footer div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--item-spacing-10, 10px);
    align-self: stretch;
}
footer div a{
    color: var(--white);      
}
footer span{
    display: flex;
    padding: 10px 30px;
    justify-content: center;
    align-items: flex-start;
    border-radius: 30px;
    border: 1px solid var(--white);
    color: var(--white);    
}

footer a:hover{
    color: var(--light_blue);        
}

footer span:hover{
    border: 1px solid var(--light_blue);
    color: var(--light_blue);        
}
/* ____________ INDEX ____________ */

#indexHeaderContent{
    display: flex;
    padding: 20px 180px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-bottom: 1px solid var(--color-grey-grey-3, #9E9FA2);
    background: var(--color-primary-white, #FFF);
}

#indexHeaderContent img{width: 220px;}

#indexContainer{
    display: flex;
    padding: 40px 300px;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
    align-self: stretch;
    background: rgba(0, 158, 224, 0.10);
    background-image: url(https://butterfly-media.s3.gra.io.cloud.ovh.net/amundi/xnet/2025/images/index_worldmap.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: 40px;
    min-height: 920px; 
}

.indexContainer_inner{
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;    
    background: rgba(255, 255, 255, 0.50);
    margin: 40px 0;
}

.indexContainer_inner_catchphrase{
    color: var(--color-primary-midnightblue, #001C4B);
    font-family: "Noto Bold";
    font-size: 14px; 
}

.indexContainer_inner_chooseCountry{
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;  
    background: var(--color-primary-cyan, #009EE0);
    color: var(--color-primary-white, #FFF);

    /* btn/maj bold */
    font-family: "Noto Bold";
    font-size: 16px;
    text-transform: uppercase;
}

.indexContainer_listCountry{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
}

.list-ct{
    display: flex;
    width: 17%;
    padding: 1% 0;
    justify-content: space-between;
    text-align: center;    
    background: var(--color-primary-white, #FFF);
}

.list-ct a{
    color: var(--color-primary-midnightblue, #001C4B);
    text-align: center;

    /* nav/regular */
    font-family: "Noto Sans";
    font-size: 14px;
    text-transform: uppercase;      
    width: -webkit-fill-available;  
    width: -moz-available;
    text-decoration: none;
}


.has-submenu{
    flex-direction: column;
}

.has-submenu .sub{
    width: 100%;    
}

/* ____________ MENU ____________ */

.bannieres_site{
    width: 100%;
}

.imgBanMid{display: none;}
.contentPrixRes{display: none;padding: 10px 20px;background: #fff;}

#lgSelect{
    display: flex;
    width: 100%;
    padding: 0px 30px;
    flex-direction: row-reverse;
    align-items: center;
    border-bottom: 1px solid var(--color-grey-grey-4, #C7C8CA);
    background: var(--color-grey-grey-6, #F5F5F5);
}

#lgSelect form{
    border-right: 1px solid var(--color-grey-grey-4, #C7C8CA);
    border-left: 1px solid var(--color-grey-grey-4, #C7C8CA);        
}

#lgSelect .lgSelector:hover{background-color: var(--light_blue);color: var(--white);}

.lgSelector{
    display: flex;
    height: 27px;
    padding: 0px 10px;
    align-items: center;
    gap: 10px;
    background: var(--color-primary-cyan, #F5F5F5);
    
    border: 0;
}

.btn_logout{
    display: flex;
    padding: 4px 10px;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    border-right: 1px solid var(--color-grey-grey-4, #C7C8CA);
    border-left: 1px solid var(--color-grey-grey-4, #C7C8CA);    
}

.btn_logout:hover, .btn_logout:hover a{
    background: var(--light_blue);
    color: var(--white);
}

.btn_logout a{
    color: var(--color-grey-grey-1, #4D4D4F);

    /* nav/bold */
    font-family: "Noto Bold";
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.btn_logout a:hover{
    text-decoration: underline;
}


#headerNavigation{
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--color-grey-grey-4, #C7C8CA);
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    flex-direction: column;
    align-items:center;
}

#headerNavigation nav{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    background: #FFF;
    max-width: 1400px;
    padding: 10px 180px;
}

#headerNavigation nav img{
    display: flex;
    padding-right: 80px;
    align-items: flex-start;
    width: 220px;
}

.navLinksMenu {
    display: flex;
    padding-top: 20px;
    justify-content: flex-end;
    align-items: baseline;
    gap: 20px;
    width: 100%;
    flex-direction: row;
    align-content: stretch;
    flex-wrap: nowrap;
}

.menuContentWord{
    color: var(--color-primary-midnightblue, #001C4B);
    text-align: center;
    
    /* nav/regular */
    font-family: "Noto Sans";
    font-size: 14px;
    text-transform: uppercase;
}

#menuBan{
    display: flex;
    padding: 0px 180px;
    justify-content: space-between;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
        margin-top: 105px;
}

#menuBanRes{display: none;}

#menuBan div:nth-child(2){
    width: 100%;
}

.menuBan_info{
    display: flex;
    padding: 30px 30px 30px 0px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;    
    background: var(--white);
    width: auto;
    min-width: 400px;
}

.bannieres_site_weshare{
    width: 200px;    
}

.menuBan_info div:nth-child(2){
    gap: 40px;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.menu-site::after {
    content: "";
    position: absolute;
    bottom: -5px; /* en bas du texte */
    left: 0;
    width: 0;
    height: 1px; /* hauteur du trait */
    background-color: var(--light_blue);
    transition: width 0.3s ease;
    top: auto;
    margin-top: 10px;  
}

.menu-site:hover::after {
  width: 100%;
}

.navLinksMenu .menu-site.active::after {
    content: "";
    position: absolute;
    bottom: -5px; /* en bas du texte */
    left: 0;
    width: 100%;
    height: 1px; /* hauteur du trait */
    background-color: var(--light_blue);
    transition: width 0.3s ease;
    top: auto;
    margin-top: 10px;  
}

.navLinksMenu .menu-site.active a {
    font-family: 'Noto Bold';    
}

.ss_menu{
    display: none;
    flex-direction: column;
    position: absolute;
    background: var(--color-grey-grey-6, #F5F5F5);
    left: 0;
    top: 40px;
    z-index: 2;
    width: 360px;
    padding: 10px;
    gap: 10px;
}

.ss_menu::before {
	content: "";
	position: absolute;
	top: -40px;
	left: 0;
	height: 40px;
	width: 100%;
}    

.ss_menu a{
    font-family: "Noto Sans" !important;
    width: inherit;
    margin: 0 auto;    
}

.ss_menu a:hover{
    font-family: "Noto Bold" !important;
}

#menu-site-ssmenu:hover .ss_menu{display: flex;}
#menu-site-ssmenu .ss_menu .menuContentWord{text-transform: unset;text-align: left;}

.bannieres_site_photo{
    width: 100%;
    height: auto;
    /* max-width: fit-content; */
}


/* ____________ HOME ____________ */

.bloc_homeVideo{
    padding: 20px 40px;
    background: var(--color-grey-grey-6, #F5F5F5);
    width: 100%;
}
.bloc_homeVideo .bloc_homeVideo_flexContainer{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-self: stretch;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.min_video{
    display: block;
    width: 100%;    
}

.transcription{
    width: 50%;
}

.transcription_txt{
    padding: 20px;  
}

.transcription_txt {
    height: 300px;
    overflow: auto; /* "overlay" n'est pas standard et peu pris en charge */
    scrollbar-width: thin; /* pour Firefox */
    scrollbar-color: #009EE0 #ececec; /* pour Firefox */
}

/* Pour Chrome, Edge, Safari */
.transcription_txt::-webkit-scrollbar {
    width: 8px; /* largeur de la barre de scroll */
}

.transcription_txt::-webkit-scrollbar-thumb {
    background-color: #009EE0; /* la barre en elle-même */
    border-radius: 4px;
}

.transcription_txt::-webkit-scrollbar-track {
    background-color: #ececec; /* le fond de la barre */
    border-radius: 4px;
}

.transcription_txt b, .transcription_txt strong{color: var(--light_blue);}

.transcription_title{
    display: flex;
    height: 38px;
    padding: 10px;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
}

/* .transcription_title::after{
    content: '+';
    color: var(--color-primary-white, #FFF);
    font-family: var(--font-family-arial, Arial);
    font-size: var(--font-size-32, 32px);
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: var(--line-height-18, 18px); /* 56.25%     
} */

.bloc_homeKeyDates{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 40px 20px;
    width: 100%;
}

.content_keyDates{
    display: flex;
    flex-direction: column;
    flex: 1;    
    background: var(--color-grey-grey-6, #F5F5F5);
    padding: 20px 40px;
}

.content_keyDates .container_keyDates{
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.content_keyDates .container_keyDates strong{
color: var(--color-primary-cyan, #009EE0);
display: block;
margin-bottom: 4px;

/* Subtitle/bold */
font-family: "Noto Bold";
font-size: 20px;
text-transform: uppercase;
}

.content_keyDates .container_keyDates{
    gap: 30px;
    flex: 1;
}

.keyDates_content {
    padding-bottom: 20px;
    width: 100%;
}

.content_keyDates .container_keyDates .keyDates_count{
    display: flex;
    padding: 2px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* btn/bold */
    font-family: "Noto Bold";
    font-size: 16px;
}

.keyDates_count::after{
    display: block;
    height: 100%;
    content: '';
    background-color: #000;
}

.content_keyDates .container_keyDates div .none{
    display: none !important;
}

.content_keyDates .container_keyDates div{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    align-content: stretch;
    flex: 1;
    height: 100%;
}

.content_keyDates .container_keyDates div span {
    width: 2px;
    background-color: var(--dark_blue);
    display: block;
    flex: 1; /* permet au <span> de s’étendre verticalement */
    min-height: 40px;
    max-height: 100%;
}

/* .content_keyDates .container_keyDates .btnSouscrire {
    width: 300px;
} */

/* ____________ WE SAHRE ____________ */

.weshare_whatIsWeshare{
    display: flex;
    align-items: center;
    gap: 30px;
    align-self: stretch;    
}

.weshare_whatIsWeshare .bg_grey{
    display: flex;
    width: 286px;
    padding: 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;    
}

.weshare_whatIsWeshare .bg_grey img{
    height: 56.249px; 
}

.weshare_avantage_container {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne */
    gap: 30px; /* Conserve l'espacement */
}

.weshare_avantage_container_ad_fcpe{
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    flex-direction: row;    
}

.weshare_avantage_content {
    flex: 1 1 calc(50% - 15px); /* 50% moins la moitié du gap pour 2 colonnes */
    box-sizing: border-box; /* Pour inclure le padding dans la largeur */
    padding: 20px;
}

.bloc_weshareNote {
    display: flex;
    align-items: stretch; /* Les enfants ont la même hauteur */
    gap: 30px;
    margin-top: 10px;
}

.bloc_weshareNote img{
    height: max-content;
}

.content_weshareNote::before{
    content: '';
    height: 28px;
    width: 28px;
    background-image: url(https://butterfly-media.s3.gra.io.cloud.ovh.net/amundi/xnet/2025/images/picto_info.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -15px;
}
.content_weshareNote {
    flex: 1; /* Remplit toute la hauteur du parent */
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 10px;
    background: rgba(0, 158, 224, 0.10);
}

.content_weshareNote h3{
    margin-bottom: 0px;    
}

.content_weshareNote{
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}

.content_weshareNote em{
    font-size: 10px;
}

/* ____________ COMMENT SOUSCRIRE ____________ */

.commentSouscrire_quiPeutSouscrire{
    display: flex;
    align-items: flex-start;
    gap: 30px;
    align-self: stretch;    
}

.quiPeutSouscrire_innerBloc{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    flex: 1 0 0;
}

.quiPeutSouscrire_innerBloc ul li{
    padding-bottom: 10px;
}

.quiPeutSouscrire_innerBloc span em{
        font-size: 10px;
}

.blocInfo{
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    align-self: stretch;
    background: rgba(0, 158, 224, 0.10);
    flex-direction: column;
}

.blocInfo::before{
    content: '';
    height: 28px;
    width: 28px;
    background-image: url(https://butterfly-media.s3.gra.io.cloud.ovh.net/amundi/xnet/2025/images/picto_info.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -15px;
}

.quiPeutSouscrire_innerBloc h2 {
    margin-bottom: 0px;
}

.list-style-arrow li{
    left: 20px;
    margin-right: 20px;
    list-style: none;
    display: inline-block;
}

.list-style-arrow li::before{
    content: '';
    height: 15px;
    width: 22px;
    background-image: url(https://butterfly-media.s3.gra.io.cloud.ovh.net/amundi/xnet/2025/images/arrow.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0px 10px 0 5px;
    display: inline-block;
}

.commentSouscrire_innerBloc{
    margin: 10px 0;
}

.commentSouscrire_innerBloc p{
    color: var(--light_blue);
}

.paiement_innerBloc{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    align-self: stretch;    
}

.paiement_content1{
    display: flex;
    padding: 10px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex: 1 0 0;
    align-self: stretch;
}
.paiement_content2{
    display: flex;
    padding: 20px;
    align-items: center;
    gap: 30px;
    flex: 1 0 0;    
}

.paiement_content2 div{color: var(--dark_blue);font-size: 16px;}

.paiement_interBloc{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;   
    justify-content: center; 
}

.commentSouscrire_arbitrage{
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    align-self: stretch;    
    background: #0073A3;
}

.commentSouscrire_arbitrage p{
    /* btn/maj bold */
    font-family: "Noto Bold";
    font-size: 16px;
    text-transform: uppercase;
    color: #FFF;
}

.commentSouscrire_global{
    width: 100%;
    display: block;    
}

.arbitrage_title{
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;    
}

.arbitrage_innerBloc{
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    align-self: stretch;    
}

.arbitrage_content{
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;   
    background-color: var(--white); 
}

.arbitrage_content_bloc1{
    display: flex;
    gap: 20px;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;    
}
.arbitrage_content_bloc1 div{
    width: 50%;    
}

.max_innerContent{
    display: flex;
    align-items: flex-start;
    gap: 30px;
    align-self: stretch;
}

.max_content_1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    flex: 1 0 0;
}
.max_content_1 h3{margin-bottom: 0px;}
.max_content_2{
    display: flex;
    width: 507px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}
.max_content_2 ul p, .max_content_2 ul b, .max_content_2 ul strong, .max_content_2 ul li, .max_content_2 h3{color: var(--dark_gold);}
.max_content_2 img{width: 100%;}

.max_content_2 div{
background-color: var(--white);
padding: 20px;
}

.arbitrage_innerBloc{
    display: none;
}

.pictoOpenWild{display: none;}
.pictoCloseWild{display: none;}
.pictoOpenWild.active{display: block;}
.pictoCloseWild.active{display: block;}

.ancre {scroll-margin-top: 110px;}

/* ____________ DOCUMENTATION ____________ */

.documentation_innerContent{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;    
}

.blockDoc {
    display: flex;
    width: 100%; /* ou flex: 1; selon le contexte */
    height: auto;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-direction: row;
    border: 1px solid var(--light_blue);
}

.blockDoc:hover {
    background-color: #009ee02b;
}

.docBegin{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;    
}

.docBegin div{
    display: flex;
    flex-direction: column;
    margin-left: 20px;    
}

.docBegin b{
    /* text/bold */
    font-family: "Noto Bold";
    font-size: 16px;
}

.docBegin span{
    /* nav/regular */
    font-family: "Noto Sans";
    font-size: 14px;
    text-transform: uppercase;
}

.docEnd{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;    
    gap: 20px;
}

.docDownload{background: #0073A3;}
.docPreview, .docDownload{
    display: flex;
    padding: 5px 10px;
    align-items: stretch;
    gap: 10px;
    flex-direction: row;
    height: 30px;
    flex-wrap: wrap;
    align-content: stretch;
}
a .docPreview, a .docDownload{
    color: var(--white);   
    font-size: 16px;
    text-decoration: none;
}
.docEnd a {
    color: var(--white);   
    font-size: 16px;
    text-decoration: none;
}


.docPreview, .docDownload {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.docPreview::before, .docDownload::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark_blue);
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.docPreview:hover::before, .docDownload:hover::before {
  transform: translateX(0);
}

/* ____________ FAQ ____________ */

.faq_innerContent {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    align-self: stretch;    
}

.faqNonRes { display: block; }
.faqRes { display: none; }

.faq_answer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-grey-grey-6, #F5F5F5);
    flex: 3;
}

.faq_categories {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-direction: column;
}

.faq_categories a {
    display: flex;
    width: 250px;
    padding: 0;
    text-decoration: none;
    color: inherit;
    font-weight: bold;
    cursor: pointer;
}

.faq_categories a div {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background: var(--primary-cyan20, #CCECF9);
    position: relative;
    transition: transform 0.3s ease;
    overflow: visible; /* Important pour que l'effet dépasse */
}

.faq_categories a div::after {
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    width: 30px;
    height: 100%;
    background: #009EE0;
    opacity: 0;
    transition: width 0.3s ease;
    background-size: auto;
    background-repeat: no-repeat;
    background-position-y: 50%;
}

/* Hover uniquement si PAS actif */
.faq_categories a:hover div:not(.active) {
    background: #009EE0;
}

.faq_categories a:hover div:not(.active)::after {
    opacity: 1;
}

.faq_categories a:hover div:not(.active) p {
    color: var(--white) !important;
}

/* Style quand actif */
.faq_categories a div.active {
    background: #009EE0;
}

.faq_categories a div.active p {
    width: 230px;
    color: var(--white) !important;
}

.faq_categories a.active{width: 280px;}

.faq_item {
    display: flex;
    margin: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    background: var(--blanc, #FFF);
    padding: 20px;
}

/* .faq_question {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    align-content: stretch;
} */

.faq_categories li {
    margin-bottom: 8px;
}

.faq_question p strong:first-child {
    display: block;
    padding-bottom: 10px;
}

.faq_question p:nth-child(2) {
    display: block;
}

.menuFaq {
    width: 280px;
}

#search {
    color: var(--color-grey-grey-3, #9E9FA2);
    font-family: "Noto Sans";
    font-size: 16px;
    border: none;
}

.faq_innerContent div form input {
    height: 25px;    
}

.faq_innerContent div form button {
    height: 25px;
    border: none;
    background-color: #FFF;
}

.faq_innerContent div form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    align-self: stretch;
    padding: 8px 10px;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid var(--color-grey-grey-3, #9E9FA2);    
    margin-bottom: 10px;
}

.faq_question_recherche {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-grey-grey-6, #F5F5F5);
    margin-top: 30px;
    gap: 10px;
    padding: 20px 0;
}

.faq_question_recherche h3 {
    margin-bottom: 0px;
    padding: 0px 0 10px 30px;
}

.faq_question_recherche_answer {
    display: flex;
    margin: 0px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    background: var(--blanc, #FFF);
    padding: 10px;
}

.faq_question_recherche_answer p strong:first-child {
    display: block;
    padding-bottom: 10px;
}

.highlighted {
    background-color: #CCECF9;
    font-weight: bold;
}

.faq_toggle_icon {
    float: right;
    font-weight: bold;
    transition: transform 0.3s;
}

.faq_mobile_category.active .faq_toggle_icon {
    content: "-";
}