@charset "UTF-8";
/*!
 * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */
body {
  padding-top: 10px; /*  distance entre le menu et le premier titre*/
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .layout main {
    flex: 1;
  }

#panel, #flip {} #panel { display: none; }
#panel2, #flip2 {} #panel2 { display: none; }
#panel3, #flip3 {} #panel3 { display: none; }
#panel4, #flip4 {} #panel4 { display: none; }
#panel5, #flip5 {} #panel5 { display: none; }
#panel6, #flip6 {} #panel6 { display: none; }
#panel7, #flip7 {} #panel7 { display: none; }
#panel8, #flip8 {} #panel8 { display: none; }
#panel9, #flip9 {} #panel9 { display: none; }
#panel10, #flip10 {} #panel10 { display: none; }
#panel11, #flip11 {} #panel11 { display: none; }
#panel12, #flip12 {} #panel12 { display: none; }
#panel13, #flip13 {} #panel13 { display: none; }
#panel14, #flip14 {} #panel14 { display: none; }
#panel15, #flip15 {} #panel15 { display: none; }
#panel16, #flip16 {} #panel16 { display: none; }
#panel17, #flip17 {} #panel17 { display: none; }
#panel18, #flip18 {} #panel18 { display: none; }
#panel19, #flip19 {} #panel19 { display: none; }
#panel20, #flip20 {} #panel20 { display: none; }
#panel21, #flip21 {} #panel21 { display: none; }
#panel22, #flip22 {} #panel22 { display: none; }
#panel23, #flip23 {} #panel23 { display: none; }
#panel24, #flip24 {} #panel24 { display: none; }
#panel25, #flip25 {} #panel25 { display: none; }
#panel26, #flip26 {} #panel26 { display: none; }
#panel27, #flip27 {} #panel27 { display: none; }
#panel28, #flip28 {} #panel28 { display: none; }
#panel29, #flip29 {} #panel29 { display: none; }

#panel30, #flip30 {} #panel30 { display: none; }
#panel31, #flip31 {} #panel31 { display: none; }
#panel32, #flip32 {} #panel32 { display: none; }
#panel33, #flip33 {} #panel33 { display: none; }
#panel34, #flip34 {} #panel34 { display: none; }
#panel35, #flip35 {} #panel35 { display: none; }
#panel36, #flip36 {} #panel36 { display: none; }
#panel37, #flip37 {} #panel37 { display: none; }
#panel38, #flip38 {} #panel38 { display: none; }
#panel39, #flip39 {} #panel39 { display: none; }
#panel40, #flip40 {} #panel40 { display: none; }


/* ================== PAGE RECHERCHE -  CONTAINER ET LOGO ================== */
  .container-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: white;
  }

  .icone-menu {
    font-size: 28px;
    font-weight: bold;
    color: #999;
    line-height: 1;
  }
  /* Zone de 110 px alignée avec le menu de gauche */
  .zone-navbar-toggler {
    flex: 0 0 110px;
    width: 110px;
    min-width: 110px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-right: 1px solid #eee;
    z-index: 1001;
  }

  /* Force l’icône à rester visible sur toutes les dimensions */
  .zone-navbar-toggler .navbar-toggler {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: static;
    float: none;
    margin: 0;
    padding: 8px 10px;
  }

  /* Ligne contenant l’icône et le logo */
  .menu-entete {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 75px;
    border: 0 !important;
    box-shadow: none !important;
  }

  .menu-entete .navbar-toggler {
  border: 0 !important;
  box-shadow: none !important;
}

  /* Logo placé à droite de l’icône */
  .menu-entete .img-top {
    margin-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
  }


  .img-top {
    margin-left: 125px;
    margin-top: 3px;
  }

  .img-size {
    width: 200px;
    height: auto;
  }

  .select-menu {
    padding-top: 0px;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 8px;
  }


  .select-emploi {
  max-width: 150px;
  }


  .nav-emploi {
    width: 100%;
    margin: 0;
  }

  .nav-emploi .navbar {
    width: 100%;
    margin-top: 0;
    padding: 0;
  }

/* Bloc des filtres ouvert et fermé par l’icône */
.nav-emploi .navbar-collapse {
  width: 100%;
  padding: 0px 15px 0px 125px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.nav-emploi .navbar-nav {
  width: 100%;
  margin: 0 !important;
}

.nav-emploi form {
  width: 100%;
}

.nav-emploi input[type=text],
.nav-emploi select {
  font-size: 14px;
  padding: 12px;
  margin: 0;
  border: 0.5px solid #cccccc;
  border-radius: 10px;
  display: inline-block;
  background: #fdfdfd;
  resize: vertical;
  color: #5c5c5c;
}

.select-emploi option[default] {
  display: none;
}

.select-emploi option[autre] {
  background: white;
}

.select-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.select-row-main .select-emploi {
  min-width: 140px;
}

.select-row-advanced .select-emploi {
  min-width: 140px;
  font-size: 14px;
  padding: 12px;
}


/* =================== MENU PAGES ==================== */
 
#tout {
	background-color:#099dce9c;
}

.b-menuonglet{
  background-color: white; 
  font-weight: 500;
  border: none;
  color: #333333;
  padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}
.b-menuonglet:hover, .b-menuonglet:active {
  background-color:#099dce3f;
  color:#333333;
  text-decoration: none;
  border: none;
}
  
.b-menuonglet-actif{
  background-color: white; 
  font-weight: 500;
  border: none;
  color: #333333;
  padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}
.b-menuonglet-actif:hover, .b-menuonglet-actif:active {
  background-color:#099dce3f;
  color:#333333;
  text-decoration: none;
  border: none;
}
 
.align-recherche {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
}

#align-recherche-scroll {
  overflow: hidden;
  white-space: nowrap;
  flex: 0 1 auto; /* 🔥 empêche de prendre toute la largeur */
  text-align: center;
}

.align-emploi{
  text-align: left;
  padding-bottom: 5px;
  list-style:none;
  margin-left: 110px;
}

.align-emploi a {
  position: relative;
  display: inline-block;
  z-index:2;
  padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
 }

.align-emploi a:hover, .align-emploi a:active {
  background-color:#099dce3f;
  color:#333333;
  text-decoration: none;
  border: none;
}

.align-adhesion{
  text-align: left;
  padding-bottom: 5px;
  list-style:none;
  margin-left: 6px;
}

.align-adhesion a {
  position: relative;
  display: inline-block;
  z-index:2;
  padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
 }

.align-adhesion a:hover, .align-adhesion a:active {
  background-color:#099dce3f;
  color:#333333;
  text-decoration: none;
  border: none;
}

/* ============= BARRE GAUCHE FIXE ============ */

.sidebar-gauche {
  position: fixed;
  left: 0;
  width: 110px;
  background-color: #fff;
  border-right: 1px solid #eee;
  z-index: 1001;
  overflow-y: auto;
}

.premier-icon{
  margin-top: 20px;
}

.sidebar-gauche span{
  text-align: center;
}

.sidebar-gauche p{
  text-align: center;
}

.sidebar-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 72px;
  text-decoration: none;
  color: #333;
  font-size: 12px;
  gap: 5px;
  margin-bottom: 20px;
}

.sidebar-link:hover {
  background-color: #f2f2f2;
  color: #fa720a;
  text-decoration: none;
}

.sidebar-icon {
  font-size: 22px;
  line-height: 1;
}

 .img-box {
    width: 25px;
    height: 25px;
    background-image: url('/images/connexion.png');
    background-size: cover;
    background-position: center;
  }

  .img-box:hover {
    background-image: url('/images/b_connexion.png');
  }

/* Décale ton contenu pour ne pas passer sous la colonne gauche */
.main-avec-sidebar {
  margin-left: 10px;
  padding-top: 0;
}

/* =================== SLIDER ==================== */ 

.slider-wrapper {
  position: relative;
  width: 100%;
  padding: 0 50px;
}

.slider-viewport {
  overflow: hidden;
  cursor: pointer;
  touch-action: pan-y;
}

.slider-track {
  display: flex;
  gap: 12px;
  transition: transform 0.4s ease;
  will-change: transform;
  cursor: grab;
}

.slider-track:active {
  cursor: grabbing;
}

/* Carte complète : image + titre */
.slide {
  flex: 0 0 calc(14.285% - 10px);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
  align-items: center;
}

/* Zone image/vidéo seulement en 16:9 */
.video-wrapper,
.slide-image {
  width: 80%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  margin: 0 auto; /* 🔥 centre le bloc */
}

/* LOGO → jamais coupé */
.video-wrapper img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
  display: block;
  background: black;
}

/* VIDÉO → doit remplir */
.video-wrapper iframe,
.corpo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

/* Titre sous l'image */
.titre-slide {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14px;
  color: #8d8d8d;
  text-align: center;
  line-height: 1.3;
  width: 80%;
}

/* boutons */
.slider-btn {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  background: transparent;
  color: #333;
  border: none;
  font-size: 26px;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
}

.slider-btn.left {
  left: 0;
}

.slider-btn.right {
  right: 0;
}

.slider-btn:hover {
  color: #fa720a;
}


/* ================== PAGE HOME - MAIN et CENTRAL - IMAGES VIDÉOS ================== */

.column-image {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding-top: 50px;
  padding-bottom: 50px;
}

/* carte */
.image-card {
  width: 100%;
}

/* image / vidéo 16:9 */
.image-16-9 {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #eee;
  outline: none;
  border: none;
  box-shadow: none;
}

/* image et iframe */
.image-16-9 img,
.image-16-9 iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  outline: none;
  border: none;
  box-shadow: none;
}

/* hover seulement sur image */
.image-16-9:hover img {
  transform: scale(1.04);
  filter: brightness(0.9);
}

/* transition image */
.image-16-9 img {
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

/* texte */
.info-image {
  padding-top: 10px;
}

.titreimg {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color:#333;
}

.nompub,
.visitepub {
  font-size: 14px;
  color: #4b4b4b;
  margin-bottom: 2px;
}

/* ============ ICONS sur IMAGES =========== */

.image-16-9 {
  position: relative;
}
.side-icons {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn:hover, .icon-btn:active {
  text-decoration: none;
}


  .flip-card {
    perspective: 1000px;
    position: relative;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }

  .flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front,
  .flip-card-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
  }

  .flip-card-front {
    position: relative;
    z-index: 1;
  }

  .flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: white;
    transform: rotateY(180deg);
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
  }

  .flip-card.flipped .flip-card-front {
    pointer-events: none;
  }

  .flip-card.flipped .flip-card-back {
    pointer-events: auto;
  }

  .back-content {
    width: 100%;
    height: 100%;
    padding: 18px 60px 18px 18px;
    box-sizing: border-box;

    position: relative;
    overflow-y: auto;
  }

  .back-content p {
    margin: 0;
    text-align: left;
  }

  .btn-flip {
    cursor: pointer;
    z-index: 9999;
    position: relative;
    border: none;
  }

  .btn-return {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    cursor: pointer;
    z-index: 9999;
    border: none;
  }

  .media-content {
    width: 100%;
    height: 100%;
  }

  .media-content img,
  .media-content iframe {
    width: 100%;
    height: 100%;
    display: block;
  }





/*=============== AUTRES =============================================== */



  .img-centre{
    padding-bottom: 15px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .img-size-centre{
    width: 325px;
  }

  .img-size-infos{
    width: 45px;
    margin-top: -25px;
  }

  .text-logo{
    padding-bottom: 0px;
    text-align: center;
    font-size: 18px;
    font-style: italic;
    letter-spacing : 1px;
    color:rgb(124, 124, 124)
  }

  .text-logo2{
    text-align: center;
    margin-top: -10px;
  }

  .text-intelligent{
    color:rgb(78, 78, 78)
  }

  .text-intelligent:hover, .text-intelligent:active {
    font-style: italic;
    letter-spacing : 1px;
    color:#fa720a;
    text-decoration: none;
  }

  .text-matching{
    font-size: 14px;
    font-style: italic;
    letter-spacing : 1px;
    color:rgb(224, 221, 221)
  }

  
 .recherche-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
  }

 .titrepays{
    font-size: 22px;
    color: #8f8e8e;
    letter-spacing : 2px;
  }

  .recherche-left {
    padding-top: 10px;
    text-align: left;
  }

/* ================== PAGE ADHÉSION ================== */

  .img-adhesion {
    padding-top: 40px;
    padding-left: 10px;
    padding-bottom: 30px;
  }

  .img-size-adhesion {
    width: 200px;
    height: auto;
  }

  .container-adhesion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: white;
  }

  .container-adhesion .row {
    width: 91%;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

   .container-page-adhesion {
    width: 88%;
    margin: auto;
    padding-bottom: 100px;
    margin-top: 190px;
  }

  /* ================ AUTRES ======================== */ 
.li-tarif {
    padding-top: 10px;
  }

  .point{
    color: black;
    font-size: 20px;
    padding-right: 10px;
  }

.img-top2{
  padding-top:40px;
  text-align: center;
 }

.img-size2{
  width: 98%;
}

.nav-text{
  padding-top:60px;
  padding-bottom: 10px;
}

.recherche-right {
    padding-top:29px;
    text-align: right;
  }

  .recherche-inner a {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    letter-spacing : 1px;
    text-align: center;
  }

  .recherche-inner span {
    color: #c4c2c2;
      font-size: 15px;
      padding-left: 10px;
      padding-right: 10px;    
   }
  
   .recherche-inner a:hover, .recherche-inner a:active {
    color:#fa720a;
    text-decoration: none;
  }

 .dropdown {
  display: inline-block;
}

  .dropdown-menu {
  width: max-content;
  min-width: 0;
}

.espace-menu{
  padding-right: 10px;
}

/*.xxx a:focus, .xxx a:active, .xxx a.active {  faire en sort que le bouton reste en bleu lorsqu'il est cliquer 
  background-color:#099dce9c;
  color:#333333;
  text-decoration: none;
  outline-width: 0px; retire le tour noir du bouton lorsqu'il est cliquer 
}*/
  
  .font-ajouter:hover, .font-ajouter:active {
  color: rgb(194, 194, 194);
  text-decoration: none;
  }

  

  /*------------- CAROUSEL  ---------------*/

mark {
  background-color: rgba(255, 255, 0, 0.205);
  padding-left: 15px;
  padding-right: 15px;
  color:red;
}

.check{
  color:red;
  font-size: 18px;
  padding-right: 10px;
  
}

 
  
.forfait-text{
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 55px;
  font-weight: 200;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

.forfait-small{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 15px;
  font-weight: 200;
}

.font-ajouter:hover, .font-ajouter:active {
color: rgb(194, 194, 194);
text-decoration: none;
}
  
  .container-connection h2 {
    padding-bottom: 20px;
  }

  .container-connection {
    width: 60%;
    margin: auto;
    margin-top: 50px;
    padding-bottom: 120px;
    padding-top: 5px;
  }
  .container-connection input[type=email], .container-connection input[type=password], .container-connection input[type=text] {
    width: 100%;
    font-size: 20px;
    max-width: 500px;
    padding: 12px;
    margin: 0px 0 0px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    background: #ffffff;
    resize: vertical;
  } 
  

    
  .container-home {
    width: 95%;
    margin: auto;
  }

  .container-emploi {
    width: 90%;
    margin: auto;
    padding-top: 10px;
  }

 
  
  .soumission {
    padding-left:147px;
    padding-top:5px;
    height: 40px;
    background: #0a9dcf;
    font: italic 18px/30px Georgia, serif;
  }

.adresse {
  color: rgb(156, 156, 156);
  text-align: right;
  font-size: 14px;
}


.titre-page {
  font-size: 32px;
  font-weight: 500;
  padding-top: 50px;
}

.titre2-page {
  font-size: 32px;
  font-weight: 500;
  padding-top: 25px;
}

.info-form {
 padding-top: 0px; 
 padding-left: 613px;
 padding-bottom: 20px;
}

.nav-barre {
       padding-top: 44px;
    color: #d4d3d3;
   }

.nava {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nava-li {
  float: right;
}

.nava-li a {
  display: block;
  padding: 8px;
  background-color: white;
}


.b-formulaire {
  background-color: #fb567c; /* Green #4CAF50 */
  width: 100%;
  border: none;
  color: white;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}
.b-formulaire:hover, .b-formulaire:active {
  background-color:#f82052; /* Green rgb(54, 126, 56) */
  text-decoration: none;
}

.b-formulaire2 {
  background-color: #0390bef5; /* Green #0390bef5 */
  width: 100%;
  border: none;
  color: white;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}
.b-formulaire2:hover, .b-formulaire2:active {
  background-color:#035774f5; /* Green rgb(54, 126, 56) */
  text-decoration: none;
}

.pourquoinovijob{
  color:#fa720a;
  cursor: pointer;
}

.pourquoinovijob:hover, .pourquoinovijob:active {
  color:#333333; /* Green rgb(54, 126, 56) */
  text-decoration: none;
  
}
.form-button {
  margin-top:30px;
}

.contour{ 
  padding-left:20px;
  padding-bottom: 20px;
  border:0.5px solid #e2e2e2;
}

/* ----------------------------------- SECTION ANNUAIRE -------------------------- */

.form-territoire-centre {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}

.bloc-select-emploi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
  .banniere{
    padding-top:10px;
  }
  .titre-emploi{
    color:white; 
    margin-top:7px;
  }
  .promo-employeur{
    font-size: 20px;
    margin-top: 0px;
  }
  .promo-employeur select {
    width: 100%;
    font-size: 20px;
    padding: 15px;
    margin: 0px 0 0px 0;
    border: 0.5px solid #cccccc;
    border-radius: 10px;
    display: inline-block;
    background:white;
    resize: vertical;
    color:#555555;
  }
  .promo-employeur select option[autre] {
    background: white;   
  }
  .promo-employeur select option[default] {
    display: none;
  }

.coordonnees{
  text-align: center;
  height: 65px;
  padding: 10px 15px 5px 15px;
  color: #444343;
}

.b-contact {
  background-color: #0a9dcf; /* Green #4CAF50 */
  width: 300px;
  border: none;
  color: white;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 21px;
  margin: 2px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}
.b-contact:hover, .b-contact:active {
  background-color:#016f94; 
  text-decoration: none;
}

.contacts {
  margin: 15px 0px;
  box-sizing: border-box;
}

.contacts input[type=email], .contacts input[type=password], .contacts input[type=text] {
  width: 100%;
  font-size: 20px;
  max-width: 725px;
  padding: 12px;
  margin: 0px 0 0px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  background: #ffffff;
  resize: vertical;
}

.contacts textarea {
  width: 100%;
  max-width: 725px;
  height: 150px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
  background-color: #ffffff;
  font-size: 20px;
  resize: none;
}
.title-contact{
  padding-top:40px;
  font-size: 38px;
  font-weight: 500;
}
.sous-contact{
  margin-top:-15px;
  padding-bottom:10px;
}

.promo-logo{
  padding-left:0px;
  padding-bottom: 50px;
  font-size: 14px;
  color:#333; 
}
.promo-logo-recherche{
  padding-left:0px;
  font-size: 14px;
  color:#333; 
}
.promo-titre{
  font-size: 26px;
  font-weight: 500;
  padding-top:20px;
  padding-bottom: 15px;
  padding-left:35px;
  background: #0A9DCF;
  border-radius: 10px;
}

.promo-produit{
  font-size: 14px;
  color:#333; 
}
.promo-produit:hover {
  color:#fa720a;
  text-decoration: none;
}

.promo-bar{
  padding-left:5px;
  padding-right:5px;
}

.entete{
  text-align: center;
}
.separator{
  border: 0.5px solid #efefef;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 0px;
}
.separator2{
  border: 0.5px solid #c0c0c0;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 0px;
}

.title-button{
  font-size: 36px;
  font-weight: 500;
  padding-bottom: 15px;
}
.connect {
  margin: 15px 0px;
  box-sizing: border-box;
}

.connect input[type=email], .connect input[type=password], .connect input[type=text] {
  width: 100%;
  font-size: 20px;
  max-width: 500px;
  padding: 12px;
  margin: 0px 0 0px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  background: #ffffff;
  resize: vertical;
} 
.form-chekbox {
  margin-top: -31px;
  margin-left: 165px;
}
.oublie {
  margin-top: -23.5px;
  margin-left: 340px;
}

.titre{
  padding-left: 10px;  
  font-size: 28px;
  font-weight: 500;
  color:#fa720a;
  padding-top:25px; 
  padding-left:0px;
}

.texte-validation{
  font-size: 26px;
  font-weight: 500;
}

.form9 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #0a9dcf;;
}

.form9 select {
  width: 100%;
  padding:12.5px;  
  color: #5f5f5f; 
  font-size: 20px; 
  border-radius: 4px;
}

.form9 input[type=email], .form9 input[type=text], .form9 input[type=date], .form9 input[type=time] {
  width: 100%;
  padding: 12.5px;
  font-size: 20px;
  border-radius: 5px;
  color: #5f5f5f; 
  border-color: white;
  background: #ffffff;
}
.souslabel{
  font-size: 13px;
  color: white;
  padding-left:10px;
}
.b-gratuit {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}

.b-gratuit:hover, .b-gratuit:active {
  background-color: rgb(54, 126, 56);
  text-decoration: none;
}

.titrepub {
  font-size: 18px;
  color:#e9540f;
  font-weight: 500;
}
.divpub{
  text-align: center;
  margin-top:20px;
  margin-bottom:30px;
}
.enter {
  display: none;
}
.cacher {
  display: initial;
}

/* ------------------------------- INCRIPTION EMPLOYEUR -------------------- */

.form-employeur input[type=text], .form-employeur input[type=email], .form-employeur input[type=submit], .form-employeur input[type=password] {
  width: 100%;
  font-size: 20px;
  max-width: 500px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
  background: #ffffff;
  resize: vertical;
}
.form-employeur button{
  max-width: 500px;
}

.text-inscrition{
  padding-top:50px;
  font-size: 20px;
  font-weight: 500; 
}
.titre-inscrit{
  padding-top:0px;
  font-size: 40px;
}
.text-inscrit{
  font-size: 20px;
  margin-top:-20px;
}

.titre-inscription{
  font-size: 26px;
  font-weight: bold;
  padding-top:15px;
  padding-bottom: 10px;
  text-align: center;
  background: rgb(1, 143, 238);
  color:white; 
}
.titre-inscription2{
  font-size: 26px;
  font-weight: bold;
  padding-top:15px;
  padding-bottom: 10px;
  text-align: center;
  background: rgb(224, 224, 224);
}

.menu-choix{
  font-size: 18px;
  font-weight: 500;
  padding-top:15px;
  padding-left: 20px;
  padding-bottom: 10px;
  color:#333333; 
  letter-spacing: 1px;
}
.menu-question{
  font-size: 18px;
  font-weight: 500;
  padding-top:20px;
  padding-left: 20px;
  padding-bottom: 20px;
  color:#333333; 
  letter-spacing: 1px;
  cursor: pointer;
}
.menu-question:hover, .menu-question:active {
  background-color:#d3d3d3f5; 
  text-decoration: none;
}

.ligne-reponse{
  width: 100%;
  margin-top: -23px;
  border: .5px solid #ccc;
}
.menu-reponse{
  font-size: 16px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  color:#333333; 
  letter-spacing: 1px;
  background-color:white;
  display: none;
}

.outline-question{
  border: .5px solid #b9b9b9;
  border-radius: 5px;
  background-color: rgba(233, 232, 232, 0.63);
}

.text-pourquoi{
  font-size: 20px;
  padding-top:5px;
  padding-bottom: 10px;
}
.cadre-populaire{
  background: #c0bfbf;
  color:#333333;
  text-align: center;
  max-width: 300px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -20px;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: relative;
}
.prix-inscrit{
  padding-top:30px;
  padding-bottom: 20px;
  text-align: center;
}
.prix{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 55px;
  font-weight: lighter;
  padding-bottom: 20px;
}

.prix-novijob{
  padding-top:20px;
  padding-bottom: 20px;
  text-align: center;
}
.prix-novijob a{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 35px;
  font-weight: lighter;
  padding-bottom: 20px;
}

.small{
  font-size: 16px;
}

  .zone40{
    margin-top:15px; 
    color:#5c5c5c; 
    padding-left:40px; 
    padding-right:40px; 
    line-height: 27px;
  }

.prix-inscrit p{
  font-size: 16px;
  font-style: italic;
}
.outline{
  border: .5px solid #ccc;
}
.outline-ligne li{
  padding:15px;
  text-align: center;
  border: .05px solid rgb(235, 235, 235) ;
}
.text-employeur-bas{
  font-size: 20px;
}

.b-infolettre {
  background-color: #facb66; /* Green #4CAF50 */
  width: 350px;
  height: 30px;
  border: 0.5px solid #f0a80e;
  font-weight: bold;
  font-style: italic;
  color:  #333333;
  padding: 0.5px 5px;
  margin: 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  background-image: linear-gradient(bottom,#faa41b 0%,#faedd1 70%);
  background-image: -o-linear-gradient(bottom, #faa41b 0%,#faedd1 70%);
  background-image: -moz-linear-gradient(bottom, #faa41b 0%,#faedd1 70%);
  background-image: -webkit-linear-gradient(bottom,#faa41b 0%,#faedd1 70%);
  background-image: -ms-linear-gradient(bottom,#faa41b 0%,#faedd1 70%); 
  box-shadow: inset 2px 2px 3px ,#faedd1,
                inset -2px -2px 3px #faa41b; 
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 15px;
}
.b-infolettre:hover, .b-infolettre:active {
  background-image: linear-gradient(bottom #facb66 0%,#faedd1 70%);
  background-image: -o-linear-gradient(bottom,  #facb66 0%,#faedd1 70%);
  background-image: -moz-linear-gradient(bottom, #facb66 0%,#faedd1 70%);
  background-image: -webkit-linear-gradient(bottom, #facb66 0%,#faedd1 70%);
  background-image: -ms-linear-gradient(bottom,  #facb66 0%,#faedd1 70%);  
  text-decoration: none;
}

.novijob {
cursor: pointer;
}

.entrevue:after{
content: "Les candidats ont 15 jours après la date de l'entrevue pour s'enregistrer sur la plateforme de novijob.com. Après ce délais aucun frais ne peut être facturé à l'employeur.";
padding: 2px;
display:none;
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
.entrevue:hover:after{
display: block;
}
.embauche:after{
content: "Les candidats ont 45 jours après la date d'embauche pour s'enregistrer sur la plateforme de novijob.com. Après ce délais aucun frais ne peut être facturé à l'employeur.";
padding: 2px;
display:none;
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
.embauche:hover:after{
display: block;
}
.cooptation:after{
content: "Utilisez notre système unique de cooptation. (Recommander une personne de son réseau pour une offre d'emploi moyennant un avantage)";
padding: 2px;
display:none;
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
.cooptation:hover:after{
display: block;
}

.alert-emploi:after{
content: "Informer le candidat d'un poste disponible intéressant pour lui et mettre en lien les critères recherchés par un candidat avec ceux recherchés d'un employeur.";
padding: 2px;
display:none;
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
.alert-emploi:hover:after{
display: block;
}

.chasse:after{
content: "Un chasseur de têtes est engagé par un employeur dans le but de combler un poste en particulier. Souvent, les postes pour lesquels ils sont mandatés sont difficiles à combler ou exigent un candidat doté de compétences et de qualifications très spécifiques.";
padding: 2px;
display:none;
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
.chasse:hover:after{
display: block;
}

.preselect:after{
content: "ATS - Enquête de crédit - Analyse des informations recueillis - Évaluation des incohérences - Questionnaire - Test psychométrique - Rencontre - Intégration à la culture de l'entreprise.";
padding: 2px;
display:none;
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
.preselect:hover:after{
display: block;
}

/* ------------------------------- RECHERCHE EMPLOI -------------------- */


.img-size-recherche{
  width: 55%;
  padding-top: 0px;
}
.promo-titre2{
  font-size: 26px;
  font-weight: 500;
  padding-top:15px;
  padding-bottom: 1px;
  padding-left:35px;
  background: #0A9DCF;
  border-radius: 10px;
}
.h-recherche{
  padding-top: 20px;
}

.t-emploi{
color:#075c79;
font-weight: bold;
margin-left:0px;
}
.s-emploi {
margin-top:-15px;
margin-left:0px;
}
.vt-emploi{
  color:#075c79;
  font-weight: bold;
  padding-top: 5px;
  }
  .vs-emploi {
  margin-top:-20px;
  margin-left:0px;
  }
.t-emploi2{
  color: #9e9d9d;
  font-size: 14px;
  font-weight: bold;
  }
.s-emploi2 {
  margin-top:-15px;
  font-size: 14px;
  color: #9e9d9d;
  }
  
  .separator3 {
    background: none repeat scroll 0% 0% #dddddd; height: 1px;
    width: 97%;
    margin-right: auto;
    margin-left:auto;
    margin-bottom: 20px;
    margin-top: 0px;
  }
  .separatorV {
    background: none repeat scroll 0% 0% #dddddd; height: 1px;
    width: 325px;
    margin-right: auto;
    margin-left:auto;
    margin-bottom: 0px;
    margin-top: -10px;
  }
  .titre-recherche{
    font-size: 24px;
    color:#8b8a89; 
    font-weight:500;
    text-align: center;
  }
  .titre-recherche2{
    padding-top:20px;
    font-size: 24px;
    color:#8b8a89; 
    font-weight:500;
  }

/* ------------------------------- COMMENT CA FONTIONNE -------------------- */
.titre-fonctionne{
font-size: 34px;
font-weight: 500;
padding-bottom:10px;
color:#0a9dcf;
padding-left: 0px;
}
.text-fonctionne{
font-size: 24px;
font-weight: 500;
padding-bottom:10px;
}
.text-fonctionne2{
  font-size: 20px;
  font-weight: 700;
  margin-top:-30px;
  color:red;
  }
  .text-slogan-home{
    padding-top:120px;
    font-size: 34px;
    color:#fa720a; 
    font-weight:500;
    text-align: center;
  }
  .text-slogan{
    padding-top:20px;
    font-size: 34px;
    color:#fa720a; 
    font-weight:500;
    text-align: center;
  }
  .text-slogan2{
    font-size: 18px;
    color:#fa720a; 
    font-weight:500;
    text-align: center;
    padding-bottom:100px;
  }
 
  /* The container */
  .container-condition {
    display: block;
    position: relative;
    padding-right: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container-condition input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox - tout le carre*/
  .checkmark-condition {
    position: absolute;
    top: 0px;
    padding-right: 20px;
    height: 37px;
    width: 37px;
    background-color: #eee;
    border: solid 1px #a7a7a7;
  }
  
  /* On mouse-over, add a grey background color */
  .container-condition:hover input ~ .checkmark-condition {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container-condition input:checked ~ .checkmark-condition {
    background-color: #4971f5;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark-condition::before {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container-condition input:checked ~ .checkmark-condition::before {
    display: block;
  }
  
  /* Style the checkmark/indicator - crochet interieur */
  .container-condition .checkmark-condition::before {
    left: 12px;
    top: 1px;
    width: 11px;
    height: 28px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
.checkcondition{
  width: 100%; margin-right: auto; margin-left:auto;
}

/* ------------------ SECTION VIDEO --------------------------------*/

.corpo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 15px;
  cursor: pointer;
}

/* option : gérer les colonnes */
.column {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  padding-top: 40px;
}

/* =================== FOOTER ==================== */ 

  .footer {
    padding-bottom: 20px;
  }

  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
  }

  .footer-left {
    text-align: left;
    margin-left: 60px;
  }

  .footer-right {
    text-align: right;
    padding-top: 40px;
  }

  .footer a {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    letter-spacing : 1px;
    text-align: center;
  }

  footer a:hover, .footer a:active {
    color:#fa720a;
    text-decoration: none;
  }
  
  .footer span {
    color: #8f8e8e;
      font-size: 15px;
      padding-left: 10px;
      padding-right: 10px;    
   }

  .message {
    white-space: pre-line;
  }