/********************************************************************

Stylesheet: Global Stylesheet

*********************************************************************/

/************************************************************************
COULEURS
************************************************************************/

.txtBlc {color: rgb(255,255,255);}
.txtBlc50 {color: rgba(255,255,255,0.5);}
.txtGris80 {color: rgb(80,80,80);}
.txtIndigo {color: rgb(16,6,159);}
.txtAzur {color: rgb(0,207,191);}
.txtOrange {color: rgb(242,148,0);}

.bckIndigo {background-color: rgb(16,6,159);}
.bckAzur {background-color: rgb(0,207,191);}
.bckOrange {background-color: rgb(242,148,0);}
.bckJaune {background-color: rgb(255,200,0);}
.bckBlc {background-color: rgb(255,255,255);}
.bckBlc30 {background-color: rgba(255,255,255,0.3);}
.bckBlc50 {background-color: rgba(255,255,255,0.5);}
.bckNoir {background-color: rgb(0,0,0);}
.bckGris70 {background-color: rgb(70,70,70);}
.bckGris80 {background-color: rgb(80,80,80);}
.bckGris100 {background-color: rgb(100,100,100);}
.bckGris130 {background-color: rgb(130,130,130);}
.bckGris230 {background-color: rgb(230,230,230);}
.bckGris240 {background-color: rgb(240,240,240);}
.bckGris215 {background-color: rgb(215,215,215);}


/*********************
H1, H2, H3, H4, H5 P STYLES
*********************/

/*Regular 400 - Italic 400 - Bold 700 - Bold Italic 700*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: raleway, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-rendering: auto;
}

h1, .h1 {font-size: 2.2rem; font-weight: 700;}
h2, .h2 {font-size: 2rem; font-weight: 700; line-height: 1.3;}
h3, .h3 {font-size: 1.6rem; line-height: 1.3;}
h4, .h4 {font-size: 1.4rem;}
h5, .h5 {font-size: 0.75rem;}

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
  text-decoration: none;
}

p {
  /*line-height: 1.4rem;*/
}

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.petitTexte {
  font-size: 0.9rem;
}

a {
  text-decoration: none; /* Contre de Bootstrap */
  color: rgb(16,6,159); /* Contre de Bootstrap */
}

a:hover {
  color: rgb(242,148,0); /* Contre de Bootstrap */
}


/****************************************************
GENERAL
****************************************************/

body {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-size: 1.2rem;
  /*overflow-x: hidden;*/
  /*background-color: rgb(92,213,243);*/ /*NON ne marche pas sur Edge*/
  /*border: 10px solid rgb(243,151,16);*/
}

main.main {
  min-height: 800px;
  background-color: rgb(255,255,255);
}

.page404 {
  min-height: 600px;
}

a.btSavoirPlus {
  background-image: url(../images/pattern-nfbd-10.png), url(../images/pattern-nfbd-10.png), url(../images/pattern-nfbd-15.png);
  background-position: 0 0, 60px -30px, 120px -60px;
  background-repeat: repeat, repeat, repeat;
  background-color: rgb(16,6,159);
  font-family: raleway, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 1.4rem;
  color: rgb(255,255,255);
  text-align: center;
  display: block;
  padding: 1rem;
  border-radius: 15px;
  border: 3px solid rgba(255,255,255,0.5);
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
}

a.btSavoirPlus:hover {
  background-color: rgb(0,207,191);
  background-position: 100px 20px, 160px -50px, 220px -80px;
  color: rgb(16,6,159);
}

a.btMail {
  display: block;
  width: 100%;
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: rgb(242,148,0);
}

a.btMail:hover {
  color: rgb(0,0,0);
}

.card {
  /* border-radius: 12px 0px 12px 0px; */
  border: none; /* Contre de Bootstrap */
  /* border: 2px solid red; */
}



/************************************************************************
Titres avec icônes
************************************************************************/

.iconeNews {background-image: url(../images/icone-news.webp);}
.iconeInternational {background-image: url(../images/icone-international.webp);}
.iconeInfosPratiques {background-image: url(../images/icone-infos-pratiques.webp);}
.iconeProgramme {background-image: url(../images/icone-programme.webp);}
.iconeIntervenants {background-image: url(../images/icone-intervenants.webp);}
.iconeInterventions {background-image: url(../images/icone-interventions.webp);}
.iconePartenaires {background-image: url(../images/icone-partenaires.webp);}
.iconeHebergement {background-image: url(../images/icone-hebergement.webp);}
.iconeGeoloc {background-image: url(../images/icone-geoloc.webp);}

.titreAvecIcone {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  color: rgb(16,6,159);
  padding-left: 70px;
  padding-top: 7px;
  min-height: 60px;
}

/* Debug */
.entoureVert { border: 2px solid green; }
.entoureRose { border: 2px solid pink; }
.entoureRouge { border: 2px solid red; }


/************************************************************************
HEADER ET LOGO
************************************************************************/

.header {
  background-image: none;
  background-color: #fff;
  width: 100%;
  z-index: 100;
}

a.btLogoNFBD {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 110px;
}


/************************************************************************
MENU PRINCIPAL
************************************************************************/

/* Navbar principale */
#main-navbar {
  background-color: #fff;
  position: relative;
  z-index: 1060; /* au-dessus des filtres */
}

/* Liens principaux */
#main-navbar a.nav-link {
  font-family: prometo, sans-serif;
  font-weight: 400;
  color: #000;
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  line-height: 1.4rem;
  padding: 1rem 1rem;
  text-align: left;
  transition: color 0.3s ease;
}

/* Soulignage animé */
#main-navbar a.nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  height: 4px;
  width: 0;
  background-color: rgb(242,148,0);
  opacity: 1;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: -1;
}

#main-navbar a.nav-link:hover::before,
#main-navbar a.nav-link:focus::before {
  width: 100%;
}

/* Hover sur bouton normal puis sur bouton dropdown */
#main-navbar a.nav-link:hover,
#main-navbar a.nav-link.dropdown-toggle:hover {
  color: #000;
}

/* Sous-menus */
#main-navbar .dropdown-menu {
  font-family: prometo, sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  border-radius: 0 0 15px 15px;
  background-color: #fff;
  z-index: 1100; /* dropdown au-dessus des autres éléments */
  padding: 0.5rem 0;
  margin-top: 6px;
  border: none;
  width: 100%;
}

/* Masquer la flèche */
a.dropdown-toggle::after {
  display: none !important;
}

/* Liens sous-menu */
.menu-item  a.dropdown-item {
  padding-left: 1rem;
  background-color: rgb(255,255,255);
}

.menu-item  a.dropdown-item:hover {
  background-color: rgba(16,6,159,0.15);
}

/* Focus sous-menu */
.menu-item  a.dropdown-item:focus {
  background-color: rgba(16,6,159,0.6);
  color: rgb(255,255,255);
}

/* Élément actif sous-menu */
.menu-item.current-menu-item a.dropdown-item,
.menu-item.current_page_item a.dropdown-item {
  background-color: rgb(16,6,159);
  color: rgb(255,255,255);
}



/************************************************************************
MENU HAMBURGER (MOBILE)
************************************************************************/

.visuallyHidden {
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px;
  padding: 0;
  border: 0; 
}

label[for="monMenuCheckbox"] {
  cursor: pointer;
  display: inline-block;
  position: relative; /* pour les spans absolus */
}

.hamburgerMenu {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  cursor: inherit; /* hérite du label */
  position: relative;
}

.hamburgerMenu .bar {
  position: absolute;
  display: block;
  width: 24px;
  height: 4px;
  background-color: rgb(0,0,0);
  border-radius: 4px;
  transition: all 0.4s ease-in-out;
}

.hamburgerMenu .barHaut {
  top: 0px;
}
.hamburgerMenu .barMilieu {
  top: 10px; /*centrage*/
}
.hamburgerMenu .barBas {
  bottom: 0px;
}

/*La croix est cachée derrière le hamburger)*/
.hamburgerMenu .barVert,
.hamburgerMenu .barHoriz {
  top: 10px; /*centrage*/
  left: 10px;
  width: 1px;
}
.hamburgerMenu .barVert {transform: rotate(90deg);}


/* Au clic, le hamburger se centre en hauteur...  */
.monMenuCheckbox:checked + label > .hamburgerMenu > .barHaut {top: 10px;}
.monMenuCheckbox:checked + label > .hamburgerMenu > .barBas {bottom: 10px;}
/* ...disparaît...  */
.monMenuCheckbox:checked + label > .hamburgerMenu > .barHaut,
.monMenuCheckbox:checked + label > .hamburgerMenu > .barMilieu,
.monMenuCheckbox:checked + label > .hamburgerMenu > .barBas {
  background-color: transparent; 
}
/* ... la croix grandit (et du coup se recentre un peu)... */
.monMenuCheckbox:checked + label > .hamburgerMenu > .barVert,
.monMenuCheckbox:checked + label > .hamburgerMenu > .barHoriz {
  left: -3px;
  width: 30px;
}
/* ... et pivote */
.monMenuCheckbox:checked + label > .hamburgerMenu > .barVert {transform: rotate(45deg);}
.monMenuCheckbox:checked + label > .hamburgerMenu > .barHoriz {transform: rotate(-45deg);}


/****************************************************
INDEX
****************************************************/

.videoEtTitre {
  position: relative; /* pour absolute qui suit */
}

.videoBox {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

/* Voir aussi mediaqueries */
.videoBox.videoBoxIntro { height: 400px; }
.videoBox.videoBoxLogo { height: 200px; }

.videoBox video.videoIndex {
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplit le conteneur sans déformation */
  object-position: center bottom; /* centre l'image */
}

/* Voir aussi mediaqueries */
.titreFlottant {
  text-align: center;
  background-color:rgb(16,6,159);
  border-radius: 0px;
}

.titreFlottant .titreIndex {
  color: rgb(255,255,255);
}

.titreFlottant .sstitreIndex {
  color: rgb(255,255,255);
  font-size: 1.6rem;
  font-weight: 400;
}

p.txtDateIndex1,
p.txtDateIndex2 {
  font-family: raleway, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(0,207,191);
  font-size: 1.2rem;
  text-align: center;
}

p.txtDateIndex1 {
  font-size: 2.6rem;
}
p.txtDateIndex2 {
  font-size: 1.2rem;
  margin-top: -20px;
}

.txtAmbition {
  font-size: 2rem;
}

a.btVideoIndex {
  background-image: url(../images/icone-video.png);
  background-position: 20px center;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.5);
  display: block;
  width: 100%;
  padding: 20px 20px 20px 110px;
  color: rgb(16,6,159);
}

a.btVideoIndex:hover {
  background-color: rgba(255,255,255,0.6);
}


/*****************************************
TOPBAR FILTRES
*****************************************/

.topbarFiltres {
  border-radius: 6px;
}

.filtrerTexte {
  background-image: url(../images/icone-filtre.png);
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 40px;
  /* margin-right: 1rem;; */
}

.titreTri {
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

span.ssTitreTri {
  font-size: 1rem;
  font-style: italic;
  color: rgb(140, 140, 140);
  font-weight: 400;
}

button.buttonCat {
  position: relative ;
  display: inline-block;
  overflow: hidden;
  padding: 0rem;
  margin: 0rem 0.8rem 0.8rem 0.8rem;
  height: 30px;
  background-color: rgba(200,200,200,0.4);
  color: rgb(0, 0, 0);
  text-align: center;
  border-radius: 15px;
}

button.buttonCat.notreSelection {
  margin-left: 0rem;
}

button.buttonCat span.nomFiltre {
  position: relative; /*pour faire fonctionner le z-index*/
  z-index: 2;
  color: rgb(0, 0, 0);
  text-align: center;
  height: 30px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: 0px;
  transition: all 0.4s ease;
}

button.buttonCat span.carreFiltre {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 16px;
  height: 30px;
  background-color: rgb(255, 210, 0);
  color: rgb(0,0,0);
  transition: all 0.4s ease;
}

/* HOVER */
button.buttonCat:hover {cursor: pointer;}
button.buttonCat:hover span.carreFiltre {width: 24px;}
button.buttonCat.toutAfficher:hover {background-color: rgba(37, 139, 155, 0.2);}


/* ACTIVE */
button.buttonCat.active span.carreFiltre {
  width: 100%;
}

button.buttonCat.active span.nomFiltre {
  margin-left: 6px; /*Pour le recentrer*/
  margin-right: 6px; /*Pour le recentrer*/
}


/*****************************************
PAGES (GÉNÉRAL)
*****************************************/

/* Effet parallax HERO et IMPACT
*****************************************/

.blocHero,
.blocImpact {
  position: relative;
  overflow: hidden;
  background-color: rgb(16,6,159);
}

.patternNFBDScroll {
  position: absolute;
  left: 0; right: 0; top: -350px;
  height: 300%; /* plus grand pour éviter les trous lors du translate */
  background-image: url(../images/pattern-nfbd-10.png), url(../images/pattern-nfbd-10.png), url(../images/pattern-nfbd-15.png);
  background-position: 0 0, 60px -30px, 120px -60px;
  background-repeat: repeat, repeat, repeat;
  transform: translateY(0);
  will-change: transform;
  z-index: 0;
  pointer-events: none; /* Permet la sélection de texte par-dessus */
}

.blocHero .grid-container,
.blocImpact .grid-container {
  position: relative;
  z-index: 1;
}


/* Animation du titre bloc IMPACT
*****************************************/

.titreImpact {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  text-align: center;
  color: rgb(255, 255, 255);
  padding-bottom: 2rem;
}

.titreImpact.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Bloc HERO
*****************************************/

.titreHero {
  color: rgb(255, 255, 255);
}

.chapeauHero {
  font-size: 1.8rem;
  color: rgb(0,207,191);
  margin-bottom: 2rem;
}


/****************************************************
ARTICLES (général)
****************************************************/

.imgArticleBox {
  /* border: 4px solid pink */
  
  overflow: hidden;
}

.imgArticleBox img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


/****************************************************
PAGE INSCRIPTIONS
****************************************************/

.labosMarquesGpe,
.industrielsGpe,
.startupsGpe {
  background-image: url(../images/coin-gris-g.png), url(../images/coin-gris-d.png), url(../images/border-gris-30px.png), url(../images/border-gris-30px.png), url(../images/trame-logo.png);
  background-position: left bottom, right bottom, left top, right top, left -10px;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, no-repeat;
  position: relative;
}

.labosMarquesGpe {background-color: rgb(242,148,0);}
.industrielsGpe {background-color: rgb(16,6,159);}
.startupsGpe {background-color: rgb(0,207,191);}

.titreLabosMarques,
.titreIndustriels,
.titreStartups {
  color: rgb(255,255,255);
  text-align: center;
  text-transform: uppercase;
  min-height: 100px;
}

.tarifsBox {
  background-color: rgb(255, 255, 255);
  border-radius: 1rem;
  box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}

.txtOrange {color: rgb(242,148,0);}
.txtIndigo {color: rgb(16,6,159);}
.txtAzur {color: rgb(0,207,191);}

.labosMarquesGpe .titreParticipant1 { background-image: url(../images/participants-orange-1.png);}
.labosMarquesGpe .titreParticipant2 { background-image: url(../images/participants-orange-2.png);}
.labosMarquesGpe .titreParticipant3 { background-image: url(../images/participants-orange-3.png);}
.labosMarquesGpe .titreParticipant1,
.labosMarquesGpe .titreParticipant2,
.labosMarquesGpe .titreParticipant3 {
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 60px;
  padding-top: 10px;
  color: rgb(242,148,0);
  height: 50px;
}


.industrielsGpe .titreParticipant1 { background-image: url(../images/participants-indigo-1.png);}
.industrielsGpe .titreParticipant2 { background-image: url(../images/participants-indigo-2.png);}
.industrielsGpe .titreParticipant3 { background-image: url(../images/participants-indigo-3.png);}
.industrielsGpe .titreParticipant1,
.industrielsGpe .titreParticipant2,
.industrielsGpe .titreParticipant3 {
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 60px;
  padding-top: 10px;
  color: rgb(16,6,159);
  height: 50px;
}

.startupsGpe .titreParticipant1 {
  background-image: url(../images/participants-azur-1.png);
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 60px;
  padding-top: 10px;
  color: rgb(0,207,191);
  height: 50px;
}

.tarifNormal, .tarifEarlyBird, .tarifUnique {
  border-radius: 0.6rem;
  text-align: center;
  padding: 0.4rem;
  position: relative;
}

.labosMarquesGpe .tarifNormal, .labosMarquesGpe  .tarifEarlyBird {border: 1px solid rgb(242,148,0);}
.industrielsGpe .tarifNormal, .industrielsGpe .tarifEarlyBird {border: 1px solid rgb(16,6,159);}

.labosMarquesGpe .tarifBarre::after {background-color: rgba(242,148,0, 0.5);}
.industrielsGpe .tarifBarre::after {background-color: rgba(16,6,159, 0.5);}
.tarifBarre::after {
  content: '';
  display: block;
  height: 60px;
  width: 10px;
  position: absolute;
  left: 50%;
  top: -10px;
  transform: rotate(30deg);
}

.tarifEarlyBird {
  font-size: 1.2rem;
}

.tarifEarlyBird::before {
  content:"Early Bird";
  position: absolute;
  left: 10px;
  top: 8px; /* Voir aussi MQ */
  font-size: 1.2rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.3rem;
  color: rgb(255, 255, 255);
}

.labosMarquesGpe .tarifEarlyBird::before {background-color: rgb(242,148,0);}
.industrielsGpe .tarifEarlyBird::before {background-color: rgb(16,6,159);}

.tarifUnique {
  border: 1px solid rgb(0,207,191);
  font-size: 1.2rem;
}

span.eurosHT {
  margin-left: 0.2rem;
  font-size: 0.9rem;
}

.earlyBird {
  text-align: center;
  font-weight: 700;
  color: rgb(255, 255, 255);
  padding: 1rem 0.4rem 2rem 0.4rem;
}

a.btInscrire {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  display: block;
  width: 95%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  padding: 0.8rem;
  border: 4px solid rgb(255, 255, 255);
  border-radius: 1rem;
  box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}

.labosMarquesGpe a.btInscrire {background-color: rgb(242,148,0);}
.industrielsGpe a.btInscrire {background-color: rgb(16,6,159);}
.startupsGpe a.btInscrire {background-color: rgb(0,207,191);}

.contenuSousGpe {
  background-color: rgb(255, 255, 255);
  padding: 1.2rem;
  margin-top: 30px;
}


/*****************************************
INTERVENTIONS
*****************************************/

.titreRealisation {
  color: rgb(0, 0, 0);
  margin-bottom: 1rem;
}

.miseEnAvantTxt {
  padding: 3rem;
  font-family: prometo, sans-serif; 
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;;
}


/*********************
PAGE CONTACT
*********************/

.logosContactBox {
  text-align: center;
}

.adresseCSM {
  padding-top: 10px;
}

.extraitIntervBox {
  border-radius: 12px 0px 12px 0px;
  border: 2px solid rgb(200,200,200);
  padding: 1rem;
  margin-bottom: 2rem;
}

.card.cardContact {
  border-radius: 12px 0px 12px 0px;
}

.card.cardContact .card-title {
  font-size: 1.6rem;
}

.card.cardContact .card-text {
  font-size: 0.9rem;
}


/*********************
PAGE PARTENAIRES
*********************/

.titreSponsor {
 height: 10px;
}

.titreSponsor .txtTitre {
  padding-left: 6px;
}

.titreTitre {background: linear-gradient(45deg, rgb(242,148,0), rgb(242,175,70));}
.titreTitre .txtTitre {color: rgb(242,148,0);}

.titreDiamond {background: linear-gradient(45deg, rgb(180,163,228), rgb(220,208,240));}
.titreDiamond .txtTitre {color: rgb(180,163,228)}

.titrePlatinium {background: linear-gradient(45deg, rgb(172,202,201), rgb(230,240,240));}
.titrePlatinium .txtTitre {color: rgb(172,202,201);}

.titreGold {background: linear-gradient(45deg, rgb(230,187,45), rgb(245,229,77));}
.titreGold .txtTitre {color: rgb(230,187,45);}

.titreSilver {background: linear-gradient(45deg, rgb(191,194,188), rgb(224,227,224));}
.titreSilver .txtTitre {color: rgb(191,194,188);}

.titreCoktail, .titreAutre {background: linear-gradient(45deg, rgb(189,115,65), rgb(223,176,101));}
.titreCoktail .txtTitre, .titreAutre .txtTitre {color: rgb(189,115,65);}

.marginTop {
  margin-top: 20px;
}

/*Variante soulignéee*/
/*.titreTitre {border-bottom: 4px solid rgb(242,148,0); color: rgb(242,148,0);}
.titrePlatinium {border-bottom: 4px solid rgb(193,189,187); color:rgb(193,189,187); }
.titreGold {border-bottom: 4px solid rgb(255,215,0); color:rgb(255,215,0); }
.titreSilver {border-bottom: 4px solid rgb(176,196,222); color:rgb(176,196,222); }
.titreCoktail {border-bottom: 4px solid rgb(80,80,80); color:rgb(80,80,80); }
.titreTheme {border-bottom: 4px solid rgb(80,80,80); color:rgb(80,80,80); }
.titreAutre {border-bottom: 4px solid rgb(80,80,80); color:rgb(80,80,80); }*/

.imagePartenaireBox img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 300px;
  border-radius: 12px 0px 12px 0px;
}


/* Boutons Catégories dans les vignettes
************************************************************************/

a.btCat {
  background-color: transparent; /* Contre de Foundation */
  display: inline-block;
  position: relative; /* Pour absolute et z-index */
  z-index: 1;
  left: 0;
  bottom: 0;
  margin-left: 1rem;
  margin-right: 1rem;
  font-family: prometo, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  font-style: normal;
  color: rgba(0,0,0,0.7);
}

a.btCat::before {
  content:'';
  position: absolute;
  z-index: -1;
  left: -10px;
  bottom: 4px;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background-color: rgba(255, 210, 0, 0.6);
  transition: all 0.2s ease;
}

a.btCat:hover,
a.btCat:focus {
  color: rgb(0,0,0);
}

a.btCat:hover::before,
a.btCat:focus::before {
  width: 100%;
  color: rgb(0,0,0);
  background-color: rgb(255, 210, 0);
}


/*****************************************
SINGLE REALISATION
*****************************************/

/*****************************************
SINGLE REAL > Navigation Préc/Suiv
*****************************************/

.btPrecSuiv {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  width: 100%;
  padding: 0.4rem 1rem;
  position: relative; /* Pour absolute */
  overflow: hidden;
}

.btPrecSuiv.btPrec {
  text-align: left;
  padding-left: 50px;
}

.btPrecSuiv.btSuiv {
  text-align: right;
  padding-right: 50px;
}

.btPrecSuiv.btCategory {
  text-align: center;
}

.btPrecSuiv:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}

a.btPrecSuiv span.decoBtPrecSuiv {
  content: '';
  display: block;
  width: 4rem;
  height: 4rem;
  border-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  top: -14px;
  transform: rotate(45deg);
  border-style: solid;
  transition: all 0.2s ease;
}

a.btPrecSuiv span.decoG1 {
  left: 20px;
  border-width: 0px 0px 4px 4px;
}

a.btPrecSuiv span.decoG2 {
  left: 31px;
  border-width: 0px 0px 2px 2px;
}

a.btPrecSuiv span.decoD1 {
  right: 20px;
  border-width: 4px 4px 0px 0px;
}

a.btPrecSuiv span.decoD2 {
  right: 31px;
  border-width: 2px 2px 0px 0px;
}

/* Hover */

a.btPrecSuiv:hover {
  color: rgb(255, 255, 255);
}

a.btPrecSuiv:hover span.decoBtPrecSuiv {
  border-color: rgb(255, 255, 255);
}

a.btPrecSuiv:hover span.decoG1 {
  left: 30px;
  border-width: 0px 0px 6px 6px;
}

a.btPrecSuiv:hover span.decoG2 {
  left: 22px;
}

a.btPrecSuiv:hover span.decoD1 {
  right: 30px;
  border-width: 6px 6px 0px 0px;
}

a.btPrecSuiv:hover span.decoD2 {
  right: 22px;
}

/*****************************************
LE PROGRAMME > Toggle switches
*****************************************/

/* État normal */
label.btn-outline-primary .jourDate {
  font-size: 2rem;
  font-weight: 700;
  color: rgb(16,6,159);
  
}
label.btn-outline-primary .jourPrecisDate {
  font-size: 1rem;
  color: rgb(16,6,159);
}
label.btn-outline-primary {
  border-color: rgb(16,6,159);
}

/* État hover */
.btn-check:hover + .btn .jourDate {
  color: rgb(0,207,191);
}
.btn-check:hover + .btn .jourPrecisDate {
  color: rgb(16,6,159);
}
.btn-check:hover + .btn {
  background-color: rgb(255,255,255);
  border-color: rgb(16,6,159);
}

/* État checked */
.btn-check:checked + .btn .jourDate {
  color: rgb(255,255,255);
}
.btn-check:checked + .btn .jourPrecisDate {
  color: rgb(0,207,191);
}
.btn-check:checked + .btn {
  background-color: rgb(16,6,159);
}


/*****************************************
LE PROGRAMME > En-têtes des Thématiques
*****************************************/

.themaBox {
  background-color: rgb(255,255,255);
  border-radius: 8px;
  position: relative;
}

.themaHeader {
  background-color: rgb(16,6,159);
  color: rgb(0,207,191);
  border-radius: 12px 12px 0px 0px;
  overflow: hidden;
  font-family: raleway, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 400;
}

.badgeHoraire {
  background-image: url(../images/format-heure.webp);
  background-position: 8px center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  padding: 8px 10px 8px 70px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
}

.badgeDuree {
  color: rgb(40, 167, 69);
}

.noIntervention {
  text-align: center;
  font-style: italic;
  color: rgb(130,130,130);
  padding: 1rem 0;
}

/*****************************************
FORMATS - Variables et styles communs
*****************************************/

/* Images pour les formats */
.table-rondeCat { --format-icon: url(../images/format-table-ronde.webp); }
.pitch-innovationCat { --format-icon: url(../images/format-pitch-innovation.webp); }
.conferenceCat { --format-icon: url(../images/format-conference.webp); }
.discoursCat { --format-icon: url(../images/format-discours.webp); }
.pauseCat { --format-icon: url(../images/format-pause.webp); }
.repasCat { --format-icon: url(../images/format-repas.webp); }
.cocktailCat { --format-icon: url(../images/format-cocktail.webp); }
.remise-de-prixCat { --format-icon: url(../images/format-remise-prix.webp); }
.networkingCat { --format-icon: url(../images/format-networking.webp); }
.workshopCat { --format-icon: url(../images/format-workshop.webp); }

/* Couleurs pour les formats */
:root {
  --format-gpe1-color: rgb(110, 89, 182);
  --format-gpe2-color: rgb(242, 148, 0);
  --format-gpe3-color: rgb(0, 207, 191);
}

.table-rondeCat,
.pitch-innovationCat,
.conferenceCat,
.discoursCat { 
  --format-color: var(--format-gpe1-color);
}

.pauseCat,
.repasCat,
.cocktailCat,
.remise-de-prixCat { 
  --format-color: var(--format-gpe2-color);
}

.networkingCat,
.workshopCat {
  --format-color: var(--format-gpe3-color);
}

.badgeFormat {
  background-image: var(--format-icon);
  background-color: var(--format-color);
  background-position: 8px center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  position: absolute;
  right: 0px;
  top: 0px;
  border-radius: 0px 12px 0px 0px;
  padding: 8px 20px 8px 70px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  color: #fff;
}
  
  

/* Format générique (sans catégorie spécifique) */
.badgeFormat:not([class*="Cat"]) {
  --format-color: #95a5a6;
  --format-icon: url(../images/format-generique.png);
}


/*****************************************
BOUTONS FILTRES FORMAT (navigation)
*****************************************/

/* Boutons format - styles de base avec icônes */
button.buttonCat[class*="Cat"] span.carreFiltre {
  background-color: var(--format-color) !important;
  background-image: var(--format-icon);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 20px;
}

/* États actifs pour les boutons format */
button.buttonCat.active[class*="Cat"] {
  background-color: color-mix(in srgb, var(--format-color) 10%, transparent);
  color: var(--format-color);
}

button.buttonCat.active[class*="Cat"] span.nomFiltre {
  color: var(--format-color);
}


/*****************************************
Titre Thématique
*****************************************/

.titreThema {
  font-size: 1.6rem;
  font-weight: 700;
}


/*****************************************
FORMULAIRES
*****************************************/
/*https://wpmonks.com/blog/how-to-style-checkbox-inputs-in-gravity-forms/*/
/*https://www.w3schools.com/howto/howto_css_custom_checkbox.asp*/

/*Conforme au nouveau balisage sur Gravity Forms*/
/*https://docs.gravityforms.com/form-settings/#h-form-options*/

.gform-theme--foundation .gform_fields {
  grid-row-gap: 20px !important;
}

.gfield_checkbox .gchoice input.gfield-choice-input,
.gfield_radio .gchoice input.gfield-choice-input {
  opacity: 0;
  position: absolute;
}

/* Ensemble avec texte (bouton) */
.ginput_container_checkbox .gfield_checkbox .gchoice label,
.ginput_container_radio .gfield_radio .gchoice label {
  position: relative;
  overflow: hidden;
  padding: 0px 10px 0px 35px;
  margin-top: 10px;
  cursor: pointer;
  display: inline-block;
  line-height: 1.4rem;
}

/* Ensemble Récepteur + indicateur */
.ginput_container_checkbox .gfield_checkbox .gchoice label:before,
.ginput_container_checkbox .gfield_checkbox .gchoice label:after,
.ginput_container_radio .gfield_radio .gchoice label:before,
.ginput_container_radio .gfield_radio .gchoice label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: .2s;
  transition: .2s;
}

/* Les Récepteurs (les cases) -> + label:after */

/* COCHE et RADIO >>> Récepteurs éteints */
.gfield_checkbox .gchoice input.gfield-choice-input:not(:checked) + label:after,
.gfield_radio .gchoice input.gfield-choice-input:not(:checked) + label:after {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(35,35,35,0.5);
}

/* COCHE et RADIO >>> Hover sur récepteurs éteints */
.gfield_checkbox li:hover input[type=checkbox]:not(:checked) + label:after,
.gfield_radio li:hover input[type=radio]:not(:checked) + label:after {
  border: 2px solid rgb(255,210,0);
}

/* RADIO >>> Récepteurs éteint : on arrondi en plus */
.gfield_radio .gchoice input.gfield-choice-input:not(:checked) + label:after {border-radius: 50%}

/* COCHE et RADIO >>> Récepteurs allumés */
.gfield_checkbox .gchoice input.gfield-choice-input:checked + label:after,
.gfield_radio .gchoice input.gfield-choice-input:checked + label:after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(255,210,0);
  background-color: rgb(255,210,0);
  z-index: 0;
  border-radius: 2px
}

/* COCHE >>> Recepteur allumé : on arrondi un peu */
.gfield_checkbox .gchoice input.gfield-choice-input:checked + label:after {border-radius: 2px}

/* RADIO >>> Recepteur allumé  on reste arrondi */
.gfield_radio .gchoice input.gfield-choice-input:checked + label:after {border-radius: 50%}


/* Les Indicateurs -> + label:before */

/* COCHE >>> Indicateur éteint */
.gfield_checkbox .gchoice input.gfield-choice-input:not(:checked) + label:before {
  width: 0;
  height: 0;
  border: 3px solid transparent;
  left: 6px;
  top: 10px;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

/* COCHE >>> Indicateur allumé */
.gfield_checkbox .gchoice input.gfield-choice-input:checked + label:before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  margin-top:3px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

/* RADIO >>> Indicateur éteint */
.gfield_radio .gchoice input.gfield-choice-input:not(:checked) + label:before {
  top: 10px;
  left: 10px;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background-color: transparent;
}

/* RADIO >>> Indicateur allumé */
.gfield_radio .gchoice input.gfield-choice-input:checked + label:before {
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}


/*****************************************
FOOTER
*****************************************/

.footer {
  background-color: rgb(16,6,159);
}

.contenuFooter {
  position: relative;
  background-image: url(../images/pattern-footer.webp);
  background-position: left top;
  background-repeat: no-repeat;
}

.contenuFooter::before {
  content:'';
  position: absolute;
  left: 0px;
  top: -7px;
  display: block;
  width: 100%;
  height: 14px;
  background-image: url(../images/barre-orange-incrust.webp);
  background-position: center center;
  background-repeat: no-repeat;
}

.footer .footer-menu a.btMenuFooter {
  display: block;
  width: 100%;
  text-align: center;
  background-color: rgb(16,6,159);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 15px;
  padding: 0.25rem 0;
  color: rgba(255,255,255,0.7);
}

.footer .footer-menu a.btMenuFooter:hover {
  color: rgb(255,255,255);
  border: 2px solid rgba(255,255,255,0.8);
}

footer a.lienLinkedIn  {background-image: url(../images/logo-linkedin-footer.png);}
footer a.lienTwitter  {background-image: url(../images/logo-twitter-footer.png);}
footer a.lienYoutube  {background-image: url(../images/logo-youtube-footer.png);}

footer a.lienReseau {
  background-position: center top;
  background-repeat: no-repeat;
  display: block;
  height: 44px;
}

footer a.lienReseau:hover {
  background-position: center bottom;
}

p.texteFooter {
  color: rgba(255,255,255,0.7);
  text-align: center;
}

a.btMail {
  display: block;
  width: 100%;
  color: rgb(255,255,255);
}
a.btMail:hover {color: rgb(255,210,0);}


/*****************************************
FOOTER POP UP
> Boutons Conditions & Mentions
*****************************************/

a.btPopUpFooter {
  background-color: rgba(0,207,191,0.6);
  position: relative;
  display: block;
  height: 40px;
  overflow: hidden;
  font-family: prometo, sans-serif; 
  font-weight: 400;
  font-style: normal;
  padding-top: 7px;
  font-size: 1.1rem;
  color: rgb(16,6,159);
  border: none;
  transition: all 0.2s ease;
}

/*Voir aussi MQ*/
.colGFooter a.btPopUpFooter {
  border-radius: 15px;
  text-align: center;
  padding-right: 0rem;
  border: none;
}

/*Voir aussi MQ*/
.colDFooter a.btPopUpFooter {
  border-radius: 15px;
  text-align: center;
  padding-left: 0rem;
  border: none;
}

a.btPopUpFooter:hover {
  background-color: rgb(0,207,191);
  cursor: pointer;
}


/*****************************************
FOOTER POP UP
> Contenu
*****************************************/

/* Modales Bootstrap - Z-index supérieur au menu */
.modal {
  z-index: 1200 !important; /* Au-dessus du menu (1100) */
}

.modal-backdrop {
  z-index: 1190 !important; /* Juste en dessous de la modale */
}

.modal-body {
  padding: 2rem 3rem 3rem 3rem;
}

.contenuML {
  padding: 8px 20px 10px 20px;
}

.titrePopUpFooter {
  color: rgb(0,0,0);
  border-bottom: 4px solid rgb(0,207,191);
  margin-top: 40px;
}



/*****************************************
Media Queries
Grille Bootstrap
*****************************************/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}

/* Small devices [ sm ] and up (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* .title-bar { display: block; } Important : on affiche le loader qui est masqué au chargement de la page */
}

/* Medium [ md ] devices and up (tablets, 768px and up) */
@media (min-width: 768px) {

  #main-navbar {
    background-color: transparent;
  }

  #main-navbar a.nav-link {
    font-size: 1.4rem;
    text-align: center;
    margin: 0 0.6rem;
  }

  .videoBox.videoBoxIntro { height: 700px; }
  .videoBox.videoBoxLogo { height: 400px; }

  .titreFlottant {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color:rgba(16,6,159, 0.8);
    border-radius: 15px;
  }

  /* Surlignage largeur full */
  #main-navbar li.current-menu-item > a.nav-link::before,
  #main-navbar li.current-menu-parent > a.nav-link::before,
  #main-navbar li a.nav-link:hover::before,
  #main-navbar li a.nav-link:focus::before {
    width: 100%;
  }

  .colGFooter.colCoord {
    text-align: right;
  }
  
  .colDFooter.colCoord {
    text-align: left;
  }

  .colGFooter a.btPopUpFooter {
    border-radius: 15px 0px 0px 15px;
    text-align: right;
    padding-right: 2rem;
  }

  .colDFooter a.btPopUpFooter {
    border-radius: 0px 15px 15px 0px;
    text-align: left;
    padding-left: 2rem;
  }

}

/* Large [ lg ] devices and up (desktops, 992px and up) */
@media (min-width: 992px) {

  .tarifEarlyBird::before {
    top: -20px;
  }

  .titreHero {
    font-size: 4rem;
    margin-top: 20px;
  }

}

/* Large devices ONLY */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* Extra large [ xl ] devices and up (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* Extra extra large [ xxl ] devices and up (large desktops, 1400px and up) */
@media (min-width: 1400px) {}