/* ==========================================================================
   MA3 — STYLES
   ========================================================================== */

:root {
    --color-tous: #ffffff;
    --color-general: #5D8BFF;
    --color-podcast: #FAC3D7;
    --color-immersion: #D0ADFD;
	--color-edition: #FDCA40;
	--color-noir: #101820;
}
/************************** RESPONSIVE FONT ***********************/
html {
  font-size: 62.5%;
  /* changes a default 16px font size to 10px */
}
@media screen and (max-width: 1380px)
{
	html {
  font-size: 60%;
}
}
@media screen and (max-width: 1280px)
{
	html {
  font-size: 58%;
}
}
@media screen and (max-width: 1180px)
{
	html {
  font-size: 56%;
}
}
@media screen and (max-width: 1080px)
{
	html {
  font-size: 50%;
}
}
@media screen and (max-width: 980px)
{
	html {
  font-size: 47%;
}
}
@media screen and (min-width: 769px) and (max-width: 880px) 
{
	html {
  font-size: 44%;
}
}
/**************** FIN RESPONSIVE FONT ********************/
/************************** BOUTONS ***********************/
/* CSS for buttons - Icon Right */
.noir {
  --btn-background: #1e2222; /* set background color */
}
.blanc {
  --btn-background: #fff; /* set background color */
}
.sansfond {
  --btn-background: none; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right::after {
  position: absolute;
  top: 2px;
  bottom: 0;
  transform: none;           /* Divi 5 centre l'icône avec translateY(-50%) : à annuler, sinon la flèche remonte */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  right: -40px;
  width: 40px;
  background: var(--btn-background);
  margin: 0;
font-size: 12px !important;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right:hover::after {
  right: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right {
  overflow: hidden;
}
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}
/********************** FIN BOUTONS ******************************/
/********************** GENERAL ******************************/
body
{
  background-color:#101820;
}
.grecaptcha-badge{
	display:none !important;
}
#page-container {
   overflow-x: hidden;
}
.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before {
    transform: rotate(45deg);
	transition: all 0.3s ease-in-out;
}
.et_pb_toggle.et_pb_toggle_close .et_pb_toggle_title:before {
    transform: rotate(0deg);
	transition: all 0.3s ease-in-out;
}
.text_inline {
    display: inline-block;
    margin: 0 10px;
}
.icon_inline {
    display: inline-block;
    margin: 0 10px;
}
.monlien a {
    color: #5D8BFF;
	text-decoration:underline;
}
.monlien a:hover {
    text-decoration: none;
}
.cartouche{
	    display: inline-block;
}
.weglot-lang.current_page_item{
	/*display:none !important;*/
}
.weglot-languages .weglot-lang-active {
    display: none !important;
}
.mentions a:link, .mentions a:visited, .mentions a:hover {
    color: white !important;
}
/********************** FIN GENERAL ******************************/
/**************** MENU ********************/
.menu-item .active:before{
	opacity:1 !important;
}
@media only screen and (min-width: 981px) {
    .et_header_style_left #et-top-navigation nav>ul>li>a {
        padding-bottom: 20px;
    }
}
#top-menu li:not(.mega-menu) ul {
    width: 50px;
	 top: 20px;
}
.weglot-flags a:before{
	display:none !important;
}
/**************** FIN MENU ********************/
/**************** GRIDBUILDER ******************/
.wpgb-card-1 .prenom{
	font-family: 'Tomato-Bold', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 2.2rem !important;
}
.wpgb-card-1 .nom{
	font-family: 'Tomato-Regular', Helvetica, Arial, Lucida, sans-serif  !important;
	font-size: 16px !important;
}
/* Bloc « Nom complet (H3) » : même rendu que les anciens blocs prénom / nom séparés */
.wp-grid-builder .wpgb-card-1 .ally-nom-complet {
	margin: 0;
	padding: 0;
	color: #000;
	font-size: inherit;
	font-weight: 400;
	line-height: 23.8px;
}
.wpgb-card-1 .ally-nom-complet .prenom,
.wpgb-card-1 .ally-nom-complet .nom {
	display: block;
	line-height: 23.8px;
}
.wpgb-card-1 .ally-nom-complet .nom {
	margin-top: -3px;
}
.wpgb-next-button:before{
	font-size: 30px;
    right: 0px;
    color: #5D8BFF;
    font-family: ETmodules !important;
    font-weight: 400 !important;
    content: "\24" !important;
}
.wpgb-prev-button:before{
	font-size: 30px;
    right: 0px;
    color: #5D8BFF;
    font-family: ETmodules !important;
    font-weight: 400 !important;
    content: "\23" !important;
}
.wpgb-prev-button svg, .wpgb-next-button svg{
	display:none;
}
.titre-carte{
	font-size:2.3rem !important;
}
.wp-grid-builder .wpgb-card-2:hover .wpgb-block-4 {
    text-decoration: none;
}
.titre-publication{
	font-family: 'Tomato-Regular', Helvetica, Arial, Lucida, sans-serif  !important;
	font-size: 2.3rem !important;
	color:white !important;
	line-height:1.3em !important;
}
.date-publication{
	font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 14px !important;
	color:#5D8BFF !important;
	line-height:1.3em !important;
	font-weight: 500  !important;
}
.categories-articles span{
	font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 13px !important;
	color:white !important;
	line-height:1.3em !important;
	    padding: 6px 13px !important;
    border: 1px solid white !important;
    border-radius: 100px !important;
    margin-right: 7px !important;
	font-weight: 500  !important;
}
.type-articles span{
	font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 13px !important;
	line-height:1.3em !important;
	    padding: 6px 13px !important;
    border-radius: 100px !important;
	font-weight: 500  !important;
}
.wpgb-block-term[data-id="16"] { /* ID 16 correspond au Podcast dans votre HTML */
    border: 1px solid var(--color-podcast) !important;
}
.wpgb-block-term[data-id="32"] { /* ID 16 correspond au Podcast dans votre HTML */
    border: 1px solid var(--color-general) !important;
}
.wpgb-block-term[data-id="31"] { /* ID 16 correspond au Podcast dans votre HTML */
    border: 1px solid var(--color-immersion) !important;
}
.wpgb-block-term[data-id="30"] { /* ID 16 correspond au Podcast dans votre HTML */
    border: 1px solid var(--color-edition) !important;
}
.extrait-blog {
	font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 15px !important;
	color:#ffffff !important;
	line-height:1.5em !important;
	font-weight: 500  !important;
}
.wpgb-card-media-content{
	position:absolute !important;
}
.wpgb-button-label{
	font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 16px !important;	
	font-weight: 500  !important;
}
/* "general" */
.wpgb-inline-list li:has(input[value="general"]) .wpgb-button {
	color:var(--color-general) !important;
	border:1px solid var(--color-general) !important;
	border-radius:100px !important;
	 background-color: var(--color-noir) !important; /* Une nuance plus sombre */
}
.wpgb-inline-list li:has(input[value="general"]) .wpgb-button:hover {
    background-color: var(--color-general) !important; /* Une nuance plus sombre */
    color: black !important;
}
.wpgb-inline-list li:has(input[value="general"]) .wpgb-button[aria-pressed=true] {
	    background-color: var(--color-general) !important; /* Une nuance plus sombre */
      color: black  !important;
}
/* "podcast" */
.wpgb-inline-list li:has(input[value="podcast"]) .wpgb-button {
    color:var(--color-podcast) !important;
	border:1px solid var(--color-podcast) !important;
	border-radius:100px !important;
		 background-color: var(--color-noir) !important; /* Une nuance plus sombre */
}
.wpgb-inline-list li:has(input[value="podcast"]) .wpgb-button:hover {
    background-color: var(--color-podcast) !important; /* Une nuance plus sombre */
      color: black  !important;
}
.wpgb-inline-list li:has(input[value="podcast"]) .wpgb-button[aria-pressed=true] {
	    background-color: var(--color-podcast) !important; /* Une nuance plus sombre */
      color: black  !important;
}

/* "immersion" */
.wpgb-inline-list li:has(input[value="immersion"]) .wpgb-button {
   color:var(--color-immersion) !important;
	border:1px solid var(--color-immersion) !important;
	border-radius:100px !important;
	background-color: var(--color-noir) !important; /* Une nuance plus sombre */
}
.wpgb-inline-list li:has(input[value="immersion"]) .wpgb-button:hover {
    background-color: var(--color-immersion) !important; /* Une nuance plus sombre */
      color: black  !important;
}
.wpgb-inline-list li:has(input[value="immersion"]) .wpgb-button[aria-pressed=true] {
	    background-color: var(--color-immersion) !important; /* Une nuance plus sombre */
      color: black  !important;
}
/* "edition" */
.wpgb-inline-list li:has(input[value="edition"]) .wpgb-button {
   color:var(--color-edition) !important;
	border:1px solid var(--color-edition) !important;
	border-radius:100px !important;
	background-color: var(--color-noir) !important; /* Une nuance plus sombre */
}
.wpgb-inline-list li:has(input[value="edition"]) .wpgb-button:hover {
    background-color: var(--color-edition) !important; /* Une nuance plus sombre */
      color: black  !important;
}
.wpgb-inline-list li:has(input[value="edition"]) .wpgb-button[aria-pressed=true] {
	    background-color: var(--color-edition) !important; /* Une nuance plus sombre */
      color: black  !important;
}
/* "tous" */
.wpgb-inline-list li:has(input[value=""]) .wpgb-button {
   color:var(--color-tous) !important;
	border:1px solid var(--color-tous) !important;
	border-radius:100px !important;
		 background-color: var(--color-noir) !important; /* Une nuance plus sombre */
}
.wpgb-inline-list li:has(input[value=""]) .wpgb-button:hover {
    background-color: var(--color-tous) !important; /* Une nuance plus sombre */
      color: black  !important;
}
.wpgb-inline-list li:has(input[value=""]) .wpgb-button[aria-pressed=true] {
	    background-color: var(--color-tous) !important; /* Une nuance plus sombre */
      color: black  !important;
}
/* Cibler le champ de saisie de WP Grid Builder */
.wpgb-input {
   font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 16px !important; /* Optionnel : ajuster la taille */
    font-weight: 500 !important; /* Optionnel : ajuster l'épaisseur */
}

/* Cibler aussi le texte d'exemple (placeholder) */
.wpgb-input::placeholder {
  font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
    opacity: 0.7;
	font-weight: 500  !important;
}
/* Cibler le sélecteur et les options à l'intérieur */
.wpgb-select, 
.wpgb-select option {
    font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 16px !important; /* Optionnel : ajuster la taille */
	font-weight: 500  !important;
}


#wpgb-select-0::placeholder {
    color: #b2b2b2 !important; /* Ajustez le 0.4 pour plus ou moins de gris */
}

/**************** FIN GRIDBUILDER ******************/
iframe{
    width: 100%;
}
/* Le conteneur pour tout mettre côte à côte */
.ally-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Votre style de base pour les pills */
.cat-pill {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #000;
    border-radius: 100px;
    color: #000;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

/* Couleurs spécifiques (utilisant vos variables) */
.pill-article {
    background-color: var(--color-article) !important;
    border: none;
    padding: 8px 15px;
}

.pill-podcast {
    background-color: var(--color-podcast) !important;
    border: none;
    padding: 8px 15px;
}

.pill-video {
    background-color: var(--color-video) !important;
    border: none;
    padding: 8px 15px;
}
.ariane{
	 font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important; /* Optionnel : ajuster la taille */
	font-weight: 500  !important;
	color:black;
	opacity:0.7;
}
.ariane a:link, .arience a:visited{
	 text-decoration:underline;
}
.ally-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 12px; /* Pour coller à ton design de pills */
    margin: 20px 0;
}

.ally-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/**************** ACCORDEON ******************/
.et_pb_accordion .et_pb_toggle_title:before {
	transition: all 0.2s ease-in-out !important;

}
/* État ouvert : même icône, même taille et même position qu'à l'état fermé (le préréglage ne règle que l'état fermé),
   avec une rotation de 45° */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
    display: block!important;
	content: '\4c' !important;
	font-size: 30px;
	line-height: 30px;
	right: -7px;
	color: #fff;
	transform: rotate(45deg);
}
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:hover:before {
	color: #5d8bff;
}
/**************** FIN ACCORDEON ******************/
/*********** MOBILE ****************/
@media all and (max-width: 980px) {
.dtb_mobile #main-header.et-fixed-header {
     background: rgba(16,24,32,1) !important;
     box-shadow: none !important;
  }
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: block !important;
	width: 100%  !important;
}
.pa-inline-buttons .et_pb_button_module_wrapper{
    text-align: center !important;
}
.et_pb_button_module_wrapper .et_pb_module{
	width:100% !important;
}
.et_pb_button_module_wrapper>a {
    display: block;
}
.titre-carte{
	font-size:19px !important;
}
.weglot-parent-menu-item{
    margin-top: 35px;
	display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;

}
.weglot-flags a:before{
	display:inherit !important;
}
.weglot-flags.flag-3 a:before {
    float: left;
}
.wp-grid-builder .wpgb-card-5 .wpgb-card-content {
    padding: 25px  !important;
}
.titre-publication {
    font-size: 19px !important;
}
	.wpgb-facet>fieldset:last-child {
    margin-bottom: 0px !important;
}
	.wpgb-search-facet{
		margin-bottom:10px !important;
	}
	
}
/*********** FIN MOBILE ****************/



/* ==========================================================================
   SPHÈRE DES SECTEURS (home, remplace TagCanvas)
   ========================================================================== */
.ally-sphere {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	margin: 0 auto;
	touch-action: pan-y;
}
.ally-sphere .ally-secteurs {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ally-sphere .ally-secteurs li {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	padding: 9px 16px;
	border-radius: 100px;
	background: #5d8bff;
	color: #fff;
	font-family: "Tomato-Regular", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	will-change: transform, opacity;
}
.ally-sphere .ally-secteurs li::before { display: none; }

/* Sans JS : liste lisible en pastilles */
.ally-sphere:not(.is-ready) { aspect-ratio: auto; }
.ally-sphere:not(.is-ready) .ally-secteurs { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
.ally-sphere:not(.is-ready) .ally-secteurs li { position: static; }

.ally-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.ally-sphere .ally-secteurs li { font-size: 13px; padding: 8px 13px; }
}


/* ==========================================================================
   FOND ANIMÉ DU HERO — code d'origine, injecté par le JS dans la section « ally-hero »
   ========================================================================== */
.ally-hero {
  position: relative;
  overflow: hidden;
  min-height: max(100vh, 800px);
}
.ally-hero > .gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 800px;
  z-index: 0;
  pointer-events: none;
}

.gradient-bg {
  --color-bg1: rgb(16, 24, 32);
  --color-bg2: rgb(16, 24, 32);
  --color1: 16, 24, 32;
  --color2: 93, 139, 255;
  --color3: 16, 24, 32;
  --color4: 16, 24, 32;
  --color5: 93, 139, 255;
  --color-interactive: 93, 139, 255;
  --circle-size: 66%;
  width: 100vw;
  height: 100vh;
  min-height: 800px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  top: 0;
  left: 0;
}
.gradient-bg .svgBlur {
  display: none;
}
.gradient-bg .noiseBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: soft-light;
  opacity: 0.3;
}
.gradient-bg .gradients-container {
  filter: url(#goo) blur(40px);
  width: 100%;
  height: 100%;
}
.gradient-bg .g1 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color1), 1) 0, rgba(var(--color1), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: center center;
  animation: moveVertical 30s ease infinite;
  opacity: 1;
}
.gradient-bg .g2 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: calc(50% - 400px);
  animation: moveInCircle 20s reverse infinite;
  opacity: 1;
}
.gradient-bg .g3 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2 + 200px);
  left: calc(50% - var(--circle-size) / 2 - 500px);
  transform-origin: calc(50% + 400px);
  animation: moveInCircle 40s linear infinite;
  opacity: 1;
}
.gradient-bg .g4 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 40s ease infinite;
  opacity: 0.7;
}
.gradient-bg .g5 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: calc(var(--circle-size) * 2);
  height: calc(var(--circle-size) * 2);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: moveInCircle 20s ease infinite;
  opacity: 1;
}
.gradient-bg .interactive {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: 0.7;
}

@keyframes moveInCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
@keyframes moveVertical {
  0% { transform: translateY(-50%); }
  50% { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}
@keyframes moveHorizontal {
  0% { transform: translateX(-50%) translateY(-10%); }
  50% { transform: translateX(50%) translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}

/* Mobile : comme avant, pas de fond animé mais un dégradé fixe */
@media (max-width: 767px) {
  .ally-hero > .gradient-bg { display: none; }
  .ally-hero { background-image: radial-gradient(circle at top right, #5d8bff 0%, #101820 44% 100%) !important; }
}


/* ==========================================================================
   H1 DU HERO : chaque mot monte depuis un masque, titre après titre (GSAP)
   ========================================================================== */
.ally-hero .et_pb_text .et_pb_text_inner h1 {
  line-height: 1em;          /* passe devant le 0.9em réglé dans le module Divi */
}
.js-reveal .ally-hero h1 {
  opacity: 0;                /* le JS découpe le titre puis le réaffiche */
}
/* L'animation Divi des modules de ces titres est neutralisée : c'est le JS qui anime */
.js-reveal .ally-hero .et_pb_text:has(h1) {
  opacity: 1 !important;
  animation: none !important;
}
.rw-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0;         /* évite de couper les accents et les jambages */
  margin: -0.12em 0;
}
.rw-word {
  display: inline-block;
  will-change: transform;
}


/* ==========================================================================
   HEADER : logo puis items du menu un par un (GSAP, comme MA3)
   ========================================================================== */
.js-reveal #logo,
.js-reveal #top-menu > li,
.js-reveal #et_mobile_nav_menu .mobile_menu_bar { opacity: 0; }


/* ==========================================================================
   ACCORDÉONS : les items apparaissent l'un après l'autre à l'entrée dans l'écran (GSAP)
   ========================================================================== */
.js-reveal .et_pb_accordion .et_pb_accordion_item { opacity: 0; }
/* L'animation Divi du module est neutralisée : c'est le JS qui anime les items */
.js-reveal .et_pb_accordion.et_animated {
  opacity: 1 !important;
  animation: none !important;
}



/* ==========================================================================
   FOOTER : adresse en <address> (SEO) avec le style du texte d'origine
   ========================================================================== */
address {
  font-style: normal;
}
address a {
  color: inherit;
}