/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/home.css ***!
  \*********************************************************************************************************************/
/*home page---------------------------------------------------------------------*/
body.homepage {
  background-image: url(/build/images/fondjobs.dad4f532.dad4f532.jpg);
  background-attachment: fixed; 
  background-repeat: no-repeat;
  background-size:cover;
}

/*mot du directeur*/
.text-blk {
    margin: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    line-height: 1rem;
  }
  
  .responsive-container-block {
    min-height: 75px;
    height: fit-content;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    justify-content: flex-start;
  }
  .responsive-container-block.bg {
    flex-direction: column;
    align-items: center;
    height: auto;
    max-width: 1200px;
  }
  .container-block {
    min-height: 75px;
    height: fit-content;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display: block;
  }

  .responsive-container-block.content {
    flex-direction: column;
    align-items: flex-start;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 7px;
    position: relative;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    border-bottom-left-radius: 35px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: var(--orange1);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 80px;
    background-color: var(--bleufonce);
    overflow: visible !important;
  }
  
  .text-blk.name {
    font-size: 20px;
    line-height: 27.28px;
    font-weight: 900;
    color: var(--orange1);
    text-align: left;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    margin-top: 80px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  
  .text-blk.desig {
    font-size: 16px;
    line-height: 21.82px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: left;
    color: var(--orange1);
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
  }
  
  .text-blk.info {
    font-size: var(--pgrand);
    line-height: 30px;
    text-align: justify;
    /* color: rgb(153, 153, 153); */
    color: var(--bleuclair);
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 25px;
    margin-left: 0px;
  }
  
  .text-blk.quotes {
    position: absolute;
    left: auto;
    font-size: 288px;
    line-height: 392.83px;
    top: -140px;
    font-weight: 900;
    color: rgb(153, 153, 153);
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    right: 20px;
  }
  .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12.info {
    min-height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 15px;
  }
  
  .profile-image {
    color: black;
    position: absolute;
    top: 60px;
    left: -50px;
    z-index: 2;
    width: 110px; /* Remplacez cette valeur par la largeur souhaitée */
    height: 110px; /* Remplacez cette valeur par la hauteur souhaitée */
    object-fit: cover; /* Ajuste l'image sans la déformer */
    border-radius: 50%;
    border: 3px solid var(--orange1);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .responsive-container-block {
      margin-left: 15px!important; /* Ajoute une marge à gauche */
      margin-right: 10px!important; /* Ajoute une marge à droite */
      max-width: fit-content;
    }

    .text-blk.info {
        font-size: var(--pmobile);
    }

    .bannerItem-home {
        width: 100%;
    }
}
/*fin mot du directeur*/



/*banner home en haut*/
.bannerItem-home{
    padding-top:10px; /* padding above the header */
    width: 95%;
    margin:auto;
    margin-top:30px; /* white above banner - delete it */
    max-height:180px !important;
}

.banner-header{
    margin: 0;     
    color: #fff;
    padding-top:0px;
    font-size: 2.5em;  
    padding-left: 10px;
    padding-right: 10px;
    padding-top:-160px;
    font-weight:100;
}

.bannerItem-home{
    background: #333;    
    text-align: center;
    height: 100% !important;
    border-radius: 6px; /* rounded corners */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(255,255,255,0.4) 100%) ;
    background-width: 100%;
    background-attachment: fixed; 
    image-repeat: none;
    max-height: 0%;
    background-size:100%;
}
/*fin banner home en haut*/
/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/roma2s.css ***!
  \***********************************************************************************************************************/
body.roma2s {
    background-image: url(/build/images/fondroma2s.01f651ee.01f651ee.jpg);
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-size:cover;
}

.roma2s-main {
    display: flex;
    flex-direction: row; /* Modifiez cette ligne */
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.roma2s-card {
    width: 24rem;
    height: 400px;
    border-radius: 10px;
    border: 3px solid var(--orange1);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    color: var(--bleuclair);
    box-shadow: 0 10px 30px 5px rgba(255, 255, 255, 0.2);
    margin-right: 20px; 
}

.roma2s-card:last-child {
    margin-right: 0; /* Supprimez la marge pour la dernière card */
}

.roma2s-card img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease-out;
}
.roma2s-card h2 {
    position: absolute;
    inset: auto auto 30px 30px;
    margin: 0;
    transition: inset 0.3s ease-out;
    font-weight: normal;
    text-transform: uppercase;
}
.roma2s-card p, .roma2s-card a {
    position: absolute;
    opacity: 0;
    max-width: 80%;
    transition: opacity 0.3s ease-out;
    font-size: 14px;
}
.roma2s-card p {
    inset: auto auto 80px 30px;
}
.roma2s-card a {
    inset: auto auto 40px 30px;
    color: inherit;
    text-decoration: none;
}

.roma2s-card:hover {
    background-color: var(--bleuclair);
}
.roma2s-card:hover h2 {
    inset: auto auto 300px 30px;
    transition: inset 0.3s ease-out;
    color: var(--bleufonce);
}
.roma2s-card:hover p, .roma2s-card:hover a {
    opacity: 1;
    transition: opacity 0.5s 0.1s ease-in;
    color: var(--bleufonce);
}

.roma2s-card:hover p {
    padding: 2px;
    border-radius: 5px;
}

.roma2s-card:hover a .icon2 {
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    transform: translateX(var(--link-icon-translate));
    opacity: var(--link-icon-opacity);
    transition: all 0.3s;
}

.roma2s-card:hover img {
    transition: opacity 0.3s ease-in;
    opacity: 0.1;
}
.material-symbols-outlined {
    vertical-align: right;
}

.majuscule {
    font-size: 20px;
    font-weight: bold;
    color: var(--bleufonce);
}

/* Déplacer la visibilité du bouton "Découvrir" au survol */
.roma2s-card:hover .roma2s-button {
    opacity: 1;
}

/* Nouvelles règles pour le bouton "Découvrir" */
.roma2s-button {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 30px;
    left: 30px;
    background-color: var(--orange1);
    color: var(--bleufonce);
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0; /* Masquer le bouton par défaut */
}

.roma2s-button strong {
    margin-right: 10px;
    font-weight: bold;
    color: var(--bleufonce);
}

/* Ajuster la taille de la flèche */
.roma2s-button .icon2 {
    width: 20px;
    height: 20px;
}
/* Ajustements pour les ordinateurs grand écran */
@media only screen and (min-width: 1200px) {
    .roma2s-card p {
        inset: 130px 5px 5px 20px;
    }
}

/* Ajustements pour les ordinateurs écran large */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .roma2s-card {
        width: 80%;
        margin-bottom: 20px; 
        margin-right: 3px;
    }

    .roma2s-card:last-child {
        margin-right: 0; /* Supprimez la marge à droite pour la dernière card */
    }

    .roma2s-card h2 {
        font-size: 23px;
    }

    .roma2s-card:hover h2 {
        font-size: 20px;
        inset: 20px 5px 5px 20px;
    }

    .roma2s-card p, .roma2s-card a {
        font-size: 13px;
    }

    .roma2s-card p {
        inset: 80px 5px 5px 20px;
    }

    .roma2s-card:hover a .icon2 {
        min-width: 18px;
        width: 18px;
        height: 18px;
        margin-left: 5px;
    }
}
/* Ajustements pour les tablettes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .roma2s-main {
        flex-direction: column; /* Assurez-vous que les cartes sont en colonne pour les grands écrans */
    }

    .roma2s-card {
        width: 50%;
        margin-bottom: 20px; 
        margin-right: 0;
    }

    .roma2s-card p {
        inset: 140px 5px 5px 20px;
    }
}

/* Ajustements pour les téléphones mobiles */
@media screen and (max-width: 767px) {
    .roma2s-main {
        flex-direction: column; /* Assurez-vous que les cartes sont en colonne pour les grands écrans */
    }

    .roma2s-card {
        width: 80%;
        margin-bottom: 20px; 
        margin-right: 0;
    }

    .metiers-presentation.p {
      font-size: 14px;
    }
}

.bannerItem-roma2s{
    padding-top:10px; /* padding above the header */
    width: 95%;
    margin:auto;
    margin-top:20px; /* white above banner - delete it */
    max-height:180px !important;
}

.bannerItem-roma2s{
    background: #333;    
    text-align: center;
    height: 100% !important;
    border-radius: 6px; /* rounded corners */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(255,255,255,0.4) 100%), url("https://source.unsplash.com/1500x500/?offshore");
    background-width: 100%;
    background-attachment: fixed; 
    image-repeat: none;
    max-height: 0%;
    background-size:100%;
}

/************************************************************************************/
.enbref-div {
    margin-top: 20px!important;
    margin: 0 auto;
    text-align: center;
    font-size: 1.5rem;
    color: var(--bleufonce);
    background-color: rgba(255,255,255,0.2);
    padding: 10px;
    width: 65%;
    border-radius: 10px;
}

.enbref-div h3 {
  text-transform: uppercase;
  font-size: 1.5rem;
}
.page-contain {
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-card {
  display: flex;
  flex-direction: column;
  width: 20em;
  height: 12em;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
  background: var(--bleuclair);
  margin: 1em;
  padding: 2em 2.5em;
  box-shadow: 0 1.5em 2.5em -0.5em rgba(0, 0, 0, 0.1);
  transition: transform 0.45s ease, background 0.45s ease;
}
.data-card h3 {
    color: var(--bleufonce);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 0.5em;
    margin: 0 0 0.1em;
    border-bottom: 2px solid var(--orange1);
    transition: color 0.45s ease, border 0.45s ease;
}
.data-card h4 {
    color: var(--bleufonce);  
    text-transform: uppercase;
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    margin: 0 0 1.777777778em;
    transition: color 0.45s ease;
}

.data-card:hover {
  background: var(--degradebleu);
  transform: scale(1.02);
}
.data-card:hover h3 {
  color: var(--bleuclair);
  border-bottom-color: var(--orange1);
}
.data-card:hover h4 {
  color: #FFFFFF;
}

@-webkit-keyframes point {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0.125em);
  }
}

@keyframes point {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0.125em);
  }
}

/* Pour les écrans de taille moyenne (tablettes) */
@media (max-width: 992px) {
    .page-contain {
      flex-wrap: wrap; /* Permettre aux cards de s'enrouler sur la ligne suivante */
    }
    .data-card {
      width: calc(50% - 2em); /* Pour diviser en 2 colonnes */
    }
  }
  
  /* Pour les petits écrans (mobiles) */
  @media (max-width: 768px) {
    .data-card {
        width: calc(100% - 2em); /* Pour diviser en 2 colonnes */
        height: fit-content;
    }

    .data-card h3 {
        font-size: 2rem;
    }
    .data-card h4 {
        font-size: 1rem;
    }
    .enbref-div {
        width: 95%;
    }
  }
  
  /************************************************************************/
  :root{
    /* --background-dark: #2d3548; */
    --text-light: rgba(255,255,255,0.6);
    --text-lighter: rgba(255,255,255,0.9);
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 64px;
    --width-container: 70%;
  }
   
  .hero-section{
    align-items: flex-start;
    /* background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%); */
    display: flex;
    min-height: 100%;
    justify-content: center;
    padding: var(--spacing-l);
    margin-bottom: 15px;
  }
  
  .card-grid{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: var(--spacing-l);
    grid-row-gap: var(--spacing-l);
    max-width: var(--width-container);
    width: 100%;
    padding-top: 20px;
  }
  
  @media(min-width: 540px){
    .card-grid{
      grid-template-columns: repeat(2, 1fr); 
    }
  }
  
  @media(min-width: 960px){
    .card-grid{
      grid-template-columns: repeat(4, 1fr); 
    }
  }
  
  .card{
    list-style: none;
    position: relative;
    border: 3px solid var(--bleufonce);
    border-radius: 15px;
    display: inline-block;
  }
  
  .card:before{
    content: '';
    display: block;
    padding-bottom: 150%;
    width: 100%;
  }
  
  .card__background{
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    bottom: 0;
    /* filter: brightness(0.75) saturate(1.2) contrast(0.85); */
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.3s ease-in-out;
  }

.card:nth-child(1) .card__background {
    background-image: url(/build/images/fabrication2.0ba4b1da.0ba4b1da.jpg);
}
.card:nth-child(2) .card__background {
    background-image: url(/build/images/act7.f3c7cb24.f3c7cb24.jpg);
}
.card:nth-child(3) .card__background {
    background-image: url(/build/images/maintenance2.96b419b6.96b419b6.jpg);
}
.card:nth-child(4) .card__background {
    background-image: url(/build/images/charpente.e280314d.e280314d.png);
}

  .card__content{
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  
  .card__heading{
    color: var(--bleufonce);
    font-size: 1.2rem;
    text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 10px 10px;
    border-top: 3px solid var(--bleufonce);
    text-align: center;
    text-transform: uppercase;
    bottom: 0;
    left: 0;
    padding: 8px;
    margin: 0; /* Supprimer les marges par défaut */
    transition: font-size 0.3s ease-in-out, font-weight 0.3s ease-in-out;
  }

  /* Effet hover sur le texte de la card */
  .card:hover .card__heading {
    color: white; /* Change la couleur en bleu pour mieux voir l'effet */
    background-color: var(--bleufonce);
  }

  .slider  {
    margin-top: 20px!important;
  }

  .identite-map {
    margin-top: 20px!important;
  }

/*valeurs***************************************************************************************/

.valeurs {
  /* background: rgba(255,255,255,0.5); */
  background: var(--degradebleu);
  padding: 20px;
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
}

.valeurs-title {
  font-size: 1.5rem;
  text-transform: uppercase;
  position: relative; 
  color: white;
}

.valeurs-title::before,
.valeurs-title::after {
  content: ''; /* Ajoute un contenu vide aux pseudo-éléments */
  position: absolute; /* Positionnement absolu par rapport au titre */
  top: 50%; /* Place les lignes au milieu du titre */
  width: 20%; /* Largeur des lignes à 20% de la largeur du titre */
  height: 3px; /* Hauteur des lignes */
  background-color: var(--orange1); /* Couleur orange */
}

.valeurs-title::before {
  left: 0; /* Place la ligne à gauche du titre */
  transform: translateY(-30%); /* Déplace la ligne verticalement de moitié vers le haut pour la centrer */
}

.valeurs-title::after {
  right: 0; /* Place la ligne à droite du titre */
  transform: translateY(-50%); /* Déplace la ligne verticalement de moitié vers le haut pour la centrer */
}

  /* Pour aligner les images à gauche des h4 */
.valeur {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* Ajoute de l'espace entre chaque div "valeur" */
  color: white;
  margin: 0 auto;
}

.valeur h4 {
  font-size: 1.2rem;
}

.valeur h4::first-letter {
  font-size: 1.5rem;
  color: var(--bleuclair);
  /* letter-spacing: 1px; */
  text-shadow: 2px 2px 2px rgba(0, 32, 57, 0.5); /* Ajoutez une légère ombre pour plus de contraste */
}
.valeur img {
  margin-right: 10px; /* Ajoute un espacement entre l'image et le texte */
}
/* Pour afficher les div "valeur" sur deux lignes en grand écran et sur quatre lignes en version mobile */
@media only screen and (min-width: 768px) {
  .valeurs-desc {
      display: flex;
      flex-wrap: wrap;
  }

  .valeur {
      width: fit-content; 
  }
}

@media only screen and (max-width: 767px) {
  .valeur {
    margin: 0 auto;
  }
  .valeurs-desc {
    flex-direction: column;
  }

  .valeur img {
    display: none;
  }

  .identite1p {
    font-size: var(--pmobile);
  }

  .cardR__content h4 {
    font-size: var(--pgrand) !important;
  }

  .cardR__image h4 {
    font-size: var(--pgrand) !important;
  }

  .card__heading {
    font-size: var(--pgrand) !important;
  }

  .enbref-div h3 {
    font-size: var(--ptresgrand) !important;
  }

  .data-card h3 {
    font-size: var(--ptresgrand) !important;
  }

  .data-card h4 {
    margin-top: 5px;
    padding: 0;
  }

  .data-card {
    padding: 15px 35px 0 35px;
  }

  .valeurs-title {
    font-size: var(--ptresgrand) !important;
  }

  .valeurs h4 {
    font-size: var(--pgrand);
  }
}


/*test reasons*/
.main-containerR {
  margin: 1.6rem 0.8rem;
}

.grid-containerR {
  margin: auto;
  display: grid;
  grid-gap: 1.1312rem;
  grid-template-columns: repeat(auto-fit, 12.8rem);
  grid-auto-rows: 12.8rem;
  grid-auto-flow: dense;
  justify-content: center;
  width: 95%;
  max-width: 75em;
}

.cardR {
  grid-row: auto/span 1;
  grid-column: auto/span 1;
  background-color: white;
  box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
  border-radius: 10px;
  border: 3px solid var(--orange1);
  position: relative;
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
}

.cardR:hover h4 {
  font-weight: bold;
}

.cardR:first-child h4 {
  font-size: 1.5rem;
  color: var(--bleuclair);
  text-transform: uppercase;
}

.cardR:first-child {
  background: var(--bleufonce);
  border: 3px solid var(--orange1);
}

.cardR:first-child h4::first-letter {
  font-size: 2rem;
  color: var(--orange1);
}
.cardR h4, .cardR p {
  margin-top: 0;
  font-weight: normal;
}
.cardR__image {
  height: 100%;
  max-height: 100%;
  width: 100%;
  display: flex;
  border-radius: 15px;
}
.cardR__image img {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  position: relative;
}
.cardR__image h4 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0; /* Pour supprimer les marges par défaut du h4 */
  padding: 10px; /* Ajoutez un remplissage pour plus de visibilité */
  z-index: 1; /* Pour s'assurer que le titre est au-dessus de l'image */
  font-size: 1.5rem;
  font-weight: 600;
}
.cardR__side-by-side {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.cardR__side-by-side--m {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.cardR__side-by-side--m img {
  min-height: auto;
}
.cardR__content {
  padding: 1.6rem;
  background: var(--degradebleu);
  border-radius: 8px;
}

.cardR--featured {
  grid-row: auto/span 3;
  grid-column: auto/span 2;
}
.cardR--2x {
  grid-row: auto/span 2;
  grid-column: auto/span 2;
}
.cardR--vertical {
  grid-row: auto/span 2;
}
.cardR--horizontal {
  grid-column: auto/span 2;
}
.cardR--frameless {
  background-color: transparent;
  box-shadow: none;
}

.padding-large {
  padding: 3.2rem;
}
.padding-large--l {
  padding: 1.6rem;
}

.big-script {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-family: "Sacramento", sans-serif;
  font-size: 4.3em;
  line-height: 1.15em;
  text-align: center;
}
.big-script p {
  margin: 0;
}

@media (max-width: 413px) {
  .grid-containerR {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .cardR {
    max-height: 10rem;
  }
}
@media (min-width: 627px) {
  .grid-containerR {
    grid-gap: 1.6rem;
  }

  .cardR__side-by-side--m {
    flex-flow: row nowrap;
  }
  .cardR__side-by-side--m img {
    min-height: 100%;
  }
  .cardR--featured {
    grid-row: auto/span 2;
    grid-column: 1/-1;
  }
}
@media (min-width: 836px) {
  .padding-large--l {
    padding: 3.2rem;
  }
}
/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/identite.css ***!
  \*************************************************************************************************************************/
/* Notre identité ---------------------------------------------------------------------------------------------*/

.identite-description p {
    text-align: justify;
}

.raisons-box {
    color: var(--background-cv-title);
    margin-bottom: 15px;
    padding: 5px 0;
}

.page-subtitle {
    font-size: 22px;
}

.identite-groupe {
    font-size: 20px;
    color: var(--background-cv-title);
}

.identitep1 span {
    line-height: 1.8;
}
.raisons-mosaique-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.raisons-mosaique-item {
    width: 200px; /* Adjust the width as needed */
    padding: 15px;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
    border-radius: 8px;
    background: rgb(174,238,230);
    background: radial-gradient(circle, rgba(174,238,230,0.3) 0%, rgba(2,11,136,0.3) 100%);
}

/* Ensure images are responsive */
.raisons-mosaique-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 5px auto; 
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.raisons-mosaique-item:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.raisons-mosaique-item:has(:hover, :focus) {
    --img-scale: 1.1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.animate-character {
    text-transform: uppercase;
    background-image: linear-gradient(
        -225deg,
        #030c35 0%,
        #336ce6 29%,
        #ff1361 67%,
        #0ad0f3 100%
    );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-emphasis-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    font-size: 20px;
    text-align: center;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
/* missions */

/*CAROUSEL MISSIONS*/
.missions {
    margin-bottom: 40px;
}

.missions h3 {
    color: var(--background-cv-title);
}

.carousel-item {
    position: relative;
}

.carousel-caption {
    position: absolute;
    width: 70%;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Couleur du texte */
    padding: 10px; /* Espace intérieur */
}

.carousel-caption p {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.6); /* Ajoutez un arrière-plan semi-transparent si nécessaire */
    padding: 10px;
    color: var(--background-cv-title);
    font-weight: bold;
}

.caption-title {
    background: rgba(255, 255, 255, 0.6); /* Ajoutez un arrière-plan semi-transparent si nécessaire */
    font-weight: bold;
    padding: 10px;
    color: var(--background-cv-title);
    margin: 0;
}

#carouselExampleControls {
    max-width: 600px; /* Ajustez la largeur maximale selon vos besoins */
    margin: auto; /* Centre le carousel horizontalement */
}
  
.carousel-inner {
    max-height: 300px; /* Ajustez la hauteur maximale selon vos besoins */
}
  
.carousel-item img {
    max-width: 700px;
    height: auto;
    opacity: 1;
}

.chiffres-box {
    color: var(--background-cv-title);
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 5px 0;
}

.chiffres-mosaique-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 15px;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
    border-radius: 8px;
    background: rgb(174,238,230);
    background: radial-gradient(circle, rgba(174,238,230,0.3) 0%, rgba(2,11,136,0.3) 100%);
}

.chiffres-mosaique-item {
    margin: 10px;
    text-align: center;
}

.chiffres-mosaique-container:has(:hover, :focus) {
    --img-scale: 1.1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.chiffres-mosaique-item-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.identite-map {
    border-radius: 5px;
    box-shadow: var(--img-box-shadow);
    width: 60%;
    height: auto;
}
/* Ensure images are responsive */
.chiffres-mosaique-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image horizontally */
}


/*carrousel clients*/
@keyframes scroll {
    0% {
        transform: translateX(0);
   }
    100% {
        transform: translateX(calc(-250px * 7));
   }
}

/*slider photos activite*/

.slider2 {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
    height: 140px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 70%;
}
.slider2::before, .slider2::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 140px;
    position: absolute;
    width: 20%;
    z-index: 2;
}
.slider2::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.slider2::before {
    left: 0;
    top: 0;
}
.slider2 .slide-track2 {
    animation: scroll 50s linear infinite;
    display: flex;
    width: calc(250px * 12);
}
.slider2 .slide2 {
    height: 140px;
    width: 140px;
}

/*slider clients*/
.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
    height: 80px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}
.slider::before, .slider::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}
.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.slider::before {
    left: 0;
    top: 0;
}
.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
}
.slider .slide {
    height: 100px;
    width: 250px;
}
/* end clients carrousel*/

.identite1p {
    margin-top: 15px;
    margin-bottom: 30px;
}

/* Ajustements pour les ordinateurs grand écran */
@media only screen and (min-width: 1200px) {
    /*tout est ok, version initiale ok*/
}

/* Ajustements pour ordinateurs écran large */
@media only screen and (min-width: 992px) and (max-width: 1199px) { 
    .raisons-mosaique-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .raisons-mosaique-item {
        width: 250px; /* Adjust the width as needed */
        padding: 15px;
        margin-bottom: 20px;
    }

    .carousel-caption {
        top: 37%;
    }
}
/* Media query pour les tablettes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .raisons-mosaique-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .raisons-mosaique-item {
        width: 250px; /* Adjust the width as needed */
        padding: 15px;
        margin-bottom: 25px;
    }

    .page-subtitle {
        font-size: 16px;
    }

    .carousel-caption {
        top: 37%;
    }

    .carousel-item img {
        opacity: 1;
    }

    .identite-map {
        width: 90%;
    }

    .slider2 {
        width: 95%;
    }
    
    .slider2::before, .slider2::after {
        width: 5%;
    }
}

/*Ajustements pour les téléphones mobiles*/
@media only screen and (max-width: 767px) {
    .raisons-mosaique-container {
        display: block; /* Change la disposition en bloc pour les petits écrans */
        text-align: center; /* Centre les éléments horizontalement */
    }

    .raisons-mosaique-item {
        width: 90%; /* Occupe la largeur complète de l'écran */
        margin: 0 auto 20px; /* Ajoute une marge inférieure pour séparer les éléments */
    }

    .page-subtitle {
        font-size: 16px;
    }

    .raisons-mosaique-item-title {
        font-size: 14px;
    }

    .animate-character {
        font-size: 14px;
    }

    .chiffres-mosaique-item-title {
        font-size: 14px;
    }

    .caption-title {
        font-size: 14px;
        margin: 0;
        padding: 2px 0;
    }

    .carousel-caption {
        width: 80%;
    }

    .carousel-caption p {
        font-size: 13px;
        font-weight: normal;
    }

    .carousel-item img {
        opacity: 1;
        height: 240px;
    }

    .identite-map {
        width: 90%!important;
    }

    .slider2 {
        width: 95%;
    }
    
    .slider2::before, .slider2::after {
        width: 5%;
    }
}
/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/valeurs.css ***!
  \************************************************************************************************************************/
/* Nos Valeurs*/
.valeurs-description {
    overflow: hidden; 
    display: flex;
    align-items: center;
}

.sborre {
    border-radius: 50%; /* Rend les bords de l'image ronds */
    float: left; /* Fait flotter l'image à gauche du texte */
    margin-right: 10px; /* Ajoute une marge à droite de l'image pour l'éloigner du texte */
    height: 140px;
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: #0a39d3; /* the color */
    padding: calc(var(--g) + var(--b));
    --_c: #06046600 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
      var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
      var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}

.sborre:hover {
    --_p: 75%;
    filter: grayscale(0%);
}

.valeurs-img {
    width: 700px;
    height: auto;
}

.guillemets {
    font-size: 20px;
    font-weight: bold;
    color: var(--orange1);
}

/* Ajustements pour les ordinateurs grand écran */
@media only screen and (min-width: 1200px) {
    /*tout est ok, version initiale ok*/
}

/* Media query pour les écrans de taille inférieure à 768 pixels (taille typique des smartphones) */
@media only screen and (max-width: 768px) {
    .valeurs-description {
        flex-direction: column; /* Change la direction du flux en colonne pour les petits écrans */
        align-items: center; /* Centre les éléments horizontalement */
        text-align: center; /* Centre horizontalement le texte */
    }

    .sborre {
        margin-right: 0; /* Réinitialise la marge à zéro pour centrer l'image */
        margin-bottom: 10px; /* Ajoute une marge inférieure pour séparer l'image du texte */
    }

    .valeurs-img {
        width: 90%;
    }
}
/*!****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/application.css ***!
  \****************************************************************************************************************************/
/* Application page -------------------------------------------------------------------*/
body.metiers {
  background-image: url(/build/images/fondemplois.ba190db0.ba190db0.jpg);
  background-attachment: fixed; 
  background-repeat: no-repeat;
  background-size:cover;
}

.metiers-presentation p {
  color: var(--bleuclair);
}

.metiers-presentation {
  background: var(--degradebleu);
  padding: 15px;
  /* border: 3px solid var(--orange1); */
  border-radius: 15px;
  margin: 0 auto;
  width: 95%;
}

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

:root {
  --purple: hsl(240, 80%, 89%);
  --pink: hsl(0, 59%, 94%);
  --light-bg: hsl(204, 37%, 92%);
  --light-gray-bg: hsl(0, 0%, 94%);
  --white: hsl(0, 0%, 100%);
  --dark: hsl(0, 0%, 7%);
  --text-gray: hsl(0, 0%, 30%);
}
  
.metiers-wrap {
  display: flex;
  justify: space-between;
  align-items: stretch;
  width: 100%;
  gap: 24px;
  padding: 24px;
  flex-wrap: wrap;
  padding-top: 0;
}

.metiers-box {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  position: relative;
  padding: 18px;
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
}

.metiers-box-top {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 12px;
  margin-bottom: auto;
}
  
.metiers-box-image {
  width: auto;
  height: 200px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 10px;
  border: 3px solid var(--bleufonce);
}

.metiers-title-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--bleufonce);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.metiers-box-title {
  border-left: 3px solid var(--orangefonce);
  padding-left: 12px;
  font-size: 22px;
}

.metiers-description {
  white-space: wrap;
  font-size: var(--pmoyen);
  color: var(--bleufonce);
}

.metiers-wrap a {
  text-decoration: none;
  color: inherit;
}

.text {
  font-size: 18px;
  font-weight: bold;
}
  
.button-64 {
  align-items: center;
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--degradebleu);
  border: none;
  display: flex;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  margin: 0 auto;
}

.button-64:active,
.button-64:hover {
  outline: 0;
  background: var(--degradebleu);
  color: var(--orange1);
  /* border: 3px solid var(--orange1); */
}

.button-64 span {
  background: var(--degradebleu);
  color: var(--orange1);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}

/* RESPONSIVE QUERIES */
  
@media (min-width: 320px) {
  .metiers-title-flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
}

@media (min-width: 460px) {
  .metiers-title-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
  }
  .metiers-user-follow-info {
    margin-top: 6px;
  }
}

@media (min-width: 640px) {
  .metiers-box {
    flex-basis: calc(50% - 12px);
  }
  .metiers-title-flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
  .metiers-user-follow-info {
    margin-top: 6px;
  }
}
  
@media (min-width: 840px) {
  .metiers-title-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
  }
  .metiers-user-follow-info {
    margin-top: 6px;
  }
}

@media (min-width: 1024px) {
  .metiers-box {
    flex-basis: calc(33.3% - 16px);
  }
  .metiers-title-flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
  .metiers-user-follow-info {
    margin-top: 6px;
  }
}
  
@media (min-width: 1100px) {
  .metiers-box {
    flex-basis: calc(25% - 18px);
  }
}

@media only screen and (max-width: 768px) {
  .separation {
      height: 30px;
  }

  .metiers-box-title {
    font-size: var(--pgrand);
  }

  .metiers-presentation p {
    font-size: var(--pmobile) !important;
  }

  .metiers-description {
    font-size: var(--pmobile);
  }
}

@media (min-width: 768px) {
  .button-64 {
    font-size: 1.2vw;
    min-width: 196px;
  }
}


  

/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/resumes.css ***!
  \************************************************************************************************************************/
/* resume pages ---------------------------------------------------------------------------------*/
.formExplication {
    font-size: 16px;
    color: var(--background-cv-title);
}

.span-title {
    font-weight: bold;
    font-size: 20px;
}

.formExplication span:nth-of-type(2) {
    display: block;
    margin-top: 20px;
}

label.asterisk-label::after {
    content: " *";
    color: red; /* Couleur de l'astérisque, ajustez selon vos préférences */
    position: relative;
    top: -0.2em; /* Ajustez la position verticale de l'astérisque selon vos besoins */
    margin-left: 4px; /* Ajoutez un espace entre le texte du label et l'astérisque si nécessaire */
}

label.asterisk-label > input {
    margin-left: 0; /* Réinitialisez la marge pour les éléments enfants, tels que les boutons radio */
}


.form-group input {
    height: 100%;
    border: none;
    border-bottom: var(--border-bottom);
}

.custom-button {
    background-color: var(--button-color);
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-style: bold;
}

.form-title {
    background-color: var(--bleumoyen);
    padding: 15px; 
    color: var(--bleuclair); 
    border-radius: 5px; 
    margin: 5px 0px 5px 0px; 
    font-size: 20px;
}
th:not(.first-column),
td:not(.first-column) {
    text-align: center;
}

.job-title {
    text-align: center;
    color: var(--background-cv-title);
}

.form-control {
    width: 100%;
    height: 30px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 8px;
}

::placeholder {
    font-size: 16px;
}

::placeholder:after {
    content: " *";
    color: red; /* Couleur de l'astérisque, ajustez selon vos préférences */
    position: relative;
    top: 0.1em; /* Ajustez la position verticale de l'astérisque selon vos besoins */
}

.languages-table {
    width: 100%;
    border-collapse: collapse;
}

.languages-table th, .languages-table td {
    border: 1px solid rgba(90, 156, 194, 0.3);
    border-radius: 5px;
    padding: 8px;
    color: var(--background-cv-title);
}

.languages-table th {
    background-color:  rgba(90, 156, 194, 0.2);
}

.languages-table .first-column {
    width: 20%; /* Largeur de la première colonne */
}

.languages-table .language-cell {
    /* Largeurs des autres colonnes */
    width: 15%; /* Deuxième colonne */
}

.languages-table .language-cell:nth-child(4) {
    width: 50%; /* quatrième colonnes */
}

.language-title {
    text-align: center;
    justify-content: center;
}


/* Styles pour les boutons radios */
input[type=radio] {
    --s: 1.15em;     /* control the size */
    
    height: var(--s);
    aspect-ratio: 1;
    border: calc(var(--s)/12) solid var(--background-cv-title);
    padding: calc(var(--s)/12);
    background: 
       radial-gradient(farthest-side,var(--background-cv-title) 94%,#0000) 
       50%/0 0 no-repeat content-box;
    border-radius: 50%;
    outline-offset: calc(var(--s)/10);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: inherit;
    transition: .3s;
    margin-right: 0.11em;
  }
  input[type=radio]:checked {
    border-color: var(--background-cv-title);
    background-size: 100% 100%;
  }
  
  input[type=radio]:disabled {
    background: 
       linear-gradient(#939393 0 0) 
       50%/100% 20% no-repeat content-box;
    opacity: .5;
    cursor: not-allowed;
  }
  
  @media print {
    input[type=radio] {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
      background: none;
    }
  }
/*-----------------fin du style pour les boutons radio*/

/* Styles pour les boutons checkbox */
input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: var(--background-cv-title);
    width: 1.2em;
    height: 1.2em;
    border: 1px solid var(--background-cv-title);
    border-radius: 0.2em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    margin-right: 0.5em;
  }

  input[type="checkbox"].luecrit {
    margin: 0 auto;
}
  
  input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
  }
  
  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }
  
  input[type="checkbox"]:focus {
    outline: max(1px, 0.12em) solid var(--background-cv-title);
    outline-offset: max(1px, 0.12em);
  }
  
  input[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);
  
    color: var(--form-control-disabled);
    cursor: not-allowed;
  }
  
  @media print {
    input[type=checkbox] {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
      background: none;
    }
  }
/*-----------------fin du style pour les boutons checkbox*/

.custom-textarea {
    height: 100px;
}

.form-legend {
    color: var(--legend-form);
    font-style: italic;
}

.skill-row {
    display: flex;
    align-items: center; /* Aligne les éléments verticalement au centre */
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.form-skills234 {
    border-bottom: var(--border-bottom);
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}

.form-skills234 .form-legend {
    font-size: 18px;
    margin-bottom: 10px;
}

.form-skillsAfnor {
    border-bottom: var(--border-bottom);
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}

.form-skillsAfnor .form-legend {
    font-size: 18px;
    margin-bottom: 10px;
}

.form-skillsPlan {
    border-bottom: var(--border-bottom);
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}

.form-skillsMaterials {
    border-bottom: var(--border-bottom);
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}

.form-skillsJob {
    border: none;
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}

.form-trainings {
    border-bottom: var(--border-bottom);
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}

.form-softSkills {
    border: none;
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}
.form-softSkills label {
    margin-bottom: 0.5em;
}

.form-habilitations {
    background-color: var(--bleuclair);
    border: none;
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}
.form-habilitations label {
    margin-bottom: 0.5em;
}

.skill-row label {
    margin-right: 10px;
}

.form-languages {
    border: none;
    padding: 8px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 5px;
}

.form-skillsMaterials .align-right input[type="checkbox"] {
    margin-right: 2px;
}

/* form-skillsMaterials .align-right */
.align-right input[type="checkbox"] {
    display: none;
}
.align-right input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    padding-left: 1.6em;
    cursor: pointer;
    font-size: 0.9em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.align-right input[type="checkbox"]:hover + label:hover {
    color: rgb(23, 86, 228);
}
.align-right input[type="checkbox"]:hover + label:before {
    background: #bad8ec;
    box-shadow: inset 0px 0px 0px 2px #f7f2f2;
}
.align-right input[type="checkbox"] + label:last-child {
    margin-bottom: 0;
}
.align-right input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid var(--background-cv-title);
    border-radius: 0.2em;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.2s, background 0.2s ease-in-out;
    transition: all 0.2s, background 0.2s ease-in-out;
    background: #f3f3f3;
}
.align-right input[type="checkbox"]:checked + label:before {
    width: 1.3em;
    height: 1.3em;
    border-radius: 0.2em;
    border: 2px solid #fff;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background: var(--background-cv-title);
    box-shadow: 0 0 0 1px #000;
}
/* form-skillsMaterials .align-right end */

.checkboxy {
    float: left;
    margin-right: 10px;
    display: inline;
    margin-top: 6px;
}

input#resume_documentFile {
    color: var(--bleufonce);
    background-color: white;
    padding: 5px;
    border-radius: 5px;
}

.form-doc {
    padding-left: 4px;
    font-size: 16px;
}

/*.form-group languages parlé style ----------------------*/

.form-group .custom-control-input label {
    margin-right: 0.2em;
}
.form-group .custom-control-input label:last-child {
    margin-right: 0;
}
.form-group .custom-control-input input[type="checkbox"] {
    display: none;
}

.form-group .custom-control-input input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    padding-left: 1.6em;
    cursor: pointer;
    font-size: 0.9em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.form-group .custom-control-input input[type="checkbox"]:hover + label:hover {
    color: rgb(23, 86, 228);
}
.form-group .custom-control-input input[type="checkbox"]:hover + label:before {
    background: #bad8ec;
    box-shadow: inset 0px 0px 0px 2px #f7f2f2;
}
.form-group .custom-control-input input[type="checkbox"] + label:last-child {
    margin-bottom: 0;
}
.form-group .custom-control-input input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid var(--background-cv-title);
    border-radius: 0.2em;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.2s, background 0.2s ease-in-out;
    transition: all 0.2s, background 0.2s ease-in-out;
    background: #f3f3f3;
}
.form-group .custom-control-input input[type="checkbox"]:checked + label:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 0.2em;
    border: 2px solid #fff;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background: var(--background-cv-title);
    box-shadow: 0 0 0 1px #000;
}
/*-------------------------------------fin .form-group languages parlé style*/

/*-------------------------------------fin .form-group languages lu écrit style*/
.form-wrapper { 
    margin: 1em auto; 
    max-width: 800px; 
    width: 100%;
    font: 18px; 
}
   
.form-wrapper code { 
    background: #F5F5F5; 
    padding: 2px 6px; 
}

/* Ajustements pour les téléphones mobiles */

@media only screen and (max-width: 768px) {
    .form-title {
        font-size: 16px; /* Ajustez la taille du titre */
    }

    .form-control {
        font-size: 14px; /* Ajustez la taille du texte dans les champs de formulaire */
        height: 30px; /* Ajustez la hauteur automatiquement */
        margin-bottom: 5px; /* Augmentez la marge en bas */
    }

    .form-legend {
        font-size: 13px; /* Ajustez la taille de la légende du formulaire */
    }

    .skill-row label {
        margin-right: 5px; /* Ajustez la marge des labels dans les lignes de compétences */
    }

    .form-wrapper {
        font-size: 14px; /* Ajustez la taille de la police générale pour la version mobile */
    }

    ::placeholder {
        font-size: 13px;
    }

    .form-skills234 .form-legend {
        font-size: 13px;
    }

    .form-skillsAfnor .form-legend {
        font-size: 13px;
    }

    .form-skillsMaterials .skill-row {
        flex-direction: column; /* Change la direction en colonne pour les écrans étroits */
    }

    .form-skillsMaterials .checkbox-container {
        display: flex;
        flex-direction: wrap;
        justify-content: space-between;
    }

    .form-skillsMaterials .checkbox-container label {
        margin-bottom: 5px;
        width: 48%;
    }

    .form-softSkills .checkboxy label {
        display: block;
    }

    .form-softSkills .checkboxy input {
        margin-right: 5px;
        display: inline-block;
    }

    .formExplication {
        font-size: 14px;
    }

    .span-title {
        font-size: 16px;
    }

    .languages-table .first-column {
        width: 35%; /* Largeur de la première colonne */
    }
    
    .languages-table .language-cell {
        /* Largeurs des autres colonnes */
        width: 15%; /* Deuxième colonne */
    }
    
    .languages-table .language-cell:nth-child(4) {
        width: 35%; /* quatrième colonnes */
    }

    /* Force le retour à la ligne de toutes les labels */
    .form-group label {
        max-width: 63%;
    }
}
/*!***************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/cvtransmis.css ***!
  \***************************************************************************************************************************/
/* Page Resume, CV transmis ---------------------------------------------------*/
.discover-content {
    font-size: 14px;
}

/* Ajustements pour les tablettes en mode portrait et paysage */
@media only screen and (min-width: 769px) and (max-width: 1199px) {
    .cvtransmis-img {
        width: 50%;
        height: auto;
    }
}   

/* Ajustements pour la version mobile - codes génériques */
@media only screen and (max-width: 768px) {
    .cvtransmis-img {
        width: 60%;
        height: auto;
    }
}
/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/contact.css ***!
  \************************************************************************************************************************/
/* Page Contact ------------------------------------------------------------------------------*/
body.candidature {
    background-image: url(/build/images/fondjobs.dad4f532.dad4f532.jpg);
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-size:cover;
}
/************************************************/
.page-container {
    text-align: center; /* Aligner le texte au centre si nécessaire */
}

.candidature-presentation {
    max-width: 1200px;
    margin: 0 auto;
}
/***************************************************/
/*Formulaire Candidature Spontanée*/

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

.column {
    float: left;
    width: 25%;
    padding: 0 10px;
}

.contact-info {
    padding: 8px;
    margin-bottom: 5px;
    background-color: var(--bleuclair);
    border-radius: 5px;
}

.applyform-group {
    width: 100%;
    background: #fff;
    padding: 25px 40px 10px 40px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    border: 3px solid var(--orange1);
    background-color: var(--bleuclair);
}

.applyform-group label {
    padding-top: 2vmin;
    margin-bottom: 1vmin; /* Espacement entre les titres */
}

.applyform-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 30px;
}
.contact-row {
    display: flex;
    align-items: center; /* Aligne les éléments verticalement au centre */
    justify-content: space-between;
    margin-bottom: 1vmin; /* Espacement entre les lignes de contact */
}

.contact-row label {
    margin-right: 10px; /* Ajustez la marge selon vos préférences */
}

.form-row-civilite {
    display: flex;
    align-items: center; /* Aligne les éléments verticalement au centre */
    justify-content: space-between;
    margin-bottom: 2vmin;
}

.form-row-civilite label {
    margin-right: 10px; /* Ajustez la marge selon vos préférences */
    font-size: 18px;
}


/* Pour déplacer les boutons radio plus près du label */
.form-row-civilite input[type="radio"] {
    margin-right: 5px; /* Ajuste la marge à droite du bouton radio */
}

/* Cible l'élément input à l'intérieur de form_row pour chaque champ */
.form-row-content input {
    width: 100%;
    border: none;
    font-size: 1em;
    background-color: var(--bleuclair);
    border-bottom: 2px solid rgba(90, 156, 194, 0.3);
    display: block;
    margin-bottom: 1vmin; /* Espacement entre les lignes de contact */
}

/* Cible l'élément label à l'intérieur de form-row-content pour chaque champ */
.form-row-content label {
    position: relative; /* Changez la position à relative */
    font-size: 18px;
    transition: all 0.3s ease;
    color: var(--bleufonce);
}
/* Applique des styles lorsqu'un champ a le focus */
.form-row-content.focused label,
.form-row-content input:valid ~ label {
    transform: translateY(-20px);
    font-size: 16px;
    color: var(--background-cv-title);
}


.form-row-cv input[type="file"] {
    border-radius: 5px;
    border: none;
    font-size: 16px;
    color: var(--background-cv-title);
}

.form-row-cv label {
    background-color: var(--bleuclair); /* Couleur de fond du bouton */
    cursor: pointer;
    border-radius: 5px; /* Coins arrondis */
    font-size: 18px;
}

/* Ajuster le positionnement du bouton */
.form-row-cv label::after {
    content: '\1F4C1'; /* Utilisez un emoji de fichier ou un autre texte pour indiquer le bouton de téléchargement */
    font-size: 1.5em;
    margin-left: 10px; /* Ajustez l'espacement entre le texte et le bouton */
}

.custom-error-message {
    color: red; /* Couleur du texte pour les erreurs */
    font-size: 14px; /* Taille de la police pour les erreurs */
    margin-top: 5px; /* Espace en haut du message d'erreur */
}

.custom-message-class {
    width: 100%; /* Faites en sorte que l'input soit large */
    margin-top: 10px; /* Ajustez la marge supérieure selon vos préférences */
    border-radius: 5px;
    border: 1px solid var(--orange1);
    padding: 5px;
}

@media only screen and (max-width: 768px) {
    .applyform-group {
        width: 95%;
        padding: 20px 0 0 0;
        margin: 0 auto;
    }
    
    .applyform-title {
        font-size: 18px;
    }

    .form-row-content label {
        font-size: 14px;
    }

    .form-row-civilite input {
        margin: auto;
    }
    .form-row-civilite label {
        font-size: 14px;
        margin-right: 0.2em;
    }

    .form-row-civilite label:first-child {
        font-size: 14px;
        margin-left: 0;
    }

    .form-row-civilite label:last-child {
        font-size: 14px;
        margin-right: 0;
    }

    .form-row-cv label {
        font-size: 14px;
    }

    .form-row-content.focused label,
    .form-row-content input:valid ~ label {
        transform: translateY(-10px);
        font-size: 13px;
    }

    .form-row-cv input[type="file"] {
        font-size: 13px;
    }
}
/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/shared/_navbar.css ***!
  \*************************************************************************************************************************/
/*navbar ---------------------------------------------------------------------*/

/*Navigation Variables*/
:root {
    --content-width: 1000px;
    --breakpoint: 799px;
    --nav-height: 50px;
    --nav-font-color: #ffffff;
    /* --link-hover-color: #7aa5cf; */
    --link-hover-color: rgba(235, 178, 67, 0.9);
}

/*Outer navigation wrapper*/
.navigation {
    height: var(--nav-height);
    background: var(--bleufonce);
    position: relative;
    z-index: 1000;
}

/*Logo and branding*/
.brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: var(--nav-height);
    text-transform: uppercase;
    font-size: 1.4em;
}

/*Container with no padding for navbar*/
.nav-container {
    max-width: var(--content-width);
    margin: 0 auto;
}

/*Navigation */
nav {
    float: right;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    float: left;
    position: relative;
}

nav ul li a,
nav ul li a:visited {
    display: block;
    padding: 0 30px;
    line-height: 40px;
    background: var(--bleufonce);
    /* color: var(--nav-font-color); */
    color: var(--bleuclair);
    text-decoration: none;
    border-left: 2px solid var(--orange1);
    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, var(--orange1) 20%, transparent 80%) 1; /* Vous pouvez ajuster la longueur et la couleur de la bordure ici */
    border-top-left-radius: 5px; /* Arrondit uniquement le coin supérieur gauche */
    border-bottom-left-radius: 5px; /* Arrondit uniquement le coin inférieur gauche */
}

nav ul li a:hover {
    background: var(--link-hover-color);
    /* color: var(--nav-font-color); */
    color: var(--bleufonce);
    font-weight: bold;
}

nav ul li a:not(:only-child):after {
    padding-left: 4px;
    /*content: ' ▾';*/
}

/* Dropdown list */
nav ul ul {
    min-width: 190px;
}

nav ul ul li a {
    padding: 10px;
    line-height: 20px;
}

/*Dropdown list binds to JS toggle event*/
.nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.nav-dropdown li {
    min-width: 200px; /* Ajustez la valeur selon vos besoins */
}

/* Mobile navigation */

/*Binds to JS Toggle*/
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: var(--bleufonce);
  height: var(--nav-height);
  width: var(--nav-height);
}

/* Media Queries */
@media only screen and (max-width: 1319px) {
    /* Hamburger nav visible on mobile only */
    .nav-mobile {
        display: block;
    }

    nav {
        width: 100%;
        padding: var(--nav-height) 0 15px;
    }

    nav ul {
        display: none;
    }

    nav ul li {
        float: none;
    }

    nav ul li a {
        padding: 15px;
        line-height: 20px;
    }

    nav ul ul li a {
        padding-left: 30px;
    }

    .nav-dropdown {
        position: static;
    }
}

@media screen and (min-width: 1320px) {
    .nav-list {
        display: block !important;
    }
}

#nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: var(--nav-font-color);
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
    top: -10px;
}

#nav-toggle span:after {
    bottom: -10px;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:before,
#nav-toggle.active span:after {
    top: 0;
}

#nav-toggle.active span:before {
    transform: rotate(45deg);
}

#nav-toggle.active span:after {
    transform: rotate(-45deg);
}
/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/shared/_footer.css ***!
  \*************************************************************************************************************************/
/* Footer */
.footer {
    background-color: var(--bleufonce);
    color: var(--bleuclair);
    margin-top: 100px;
    position: relative; 
}

.footer-content {
    padding-top: 100px;
    font-size: 1rem;
}

.footer-content .col-sm {
    text-align: center; /* Pour centrer horizontalement le contenu */
    padding: 5px; /* Ajoutez du padding pour réduire l'espace autour du contenu */
}

.list-unstyled.icones li {
    display: inline-block;
    margin-right: 10px; /* Ajoute une marge entre les icônes si nécessaire */
}

.footer-content a {
    color: var(--bleuclair);
    text-decoration: none;
}

/*banner postulez*/
.bannerItemPostuler{
    padding-top:10px; 
    padding-bottom: 10px;
    width: 70%;
    margin-top: 20px;
    margin-bottom: 120px;
    max-height:150px !important;
    position: absolute;
    top: -80px; 
    left: 50%;
    transform: translateX(-50%); 
    background: #333;    
    text-align: center;
    height: 100% !important;
    border-radius: 10px; 
    background: linear-gradient(to top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.3) 100%), url(/build/images/footer.64a3b629.64a3b629.jpg);
    background-attachment: fixed; 
    background-position: center;
    background-size:cover;
}

.banner-headerPostuler{
    margin: 0 auto;     
    color: var(--bleufonce);
    padding-left: 10px;
    padding-right: 10px;
    padding-top:-190px;
    font-size: 1.8rem;
    font-family: inherit!important;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); /* Ajouter une ombre blanche avec un léger flou */
}

/* banner postulez - button CSS */
.btn.btn-outline{
    margin-top:20px;
    background: rgba(255, 255, 255, 0.3);
    color: var(--bleufonce);
    border: 1px solid var(--bleuclair);
    padding-left:90px;
    padding-right:90px;
    margin-bottom:40px;
    border-radius: 10px;
    font-size: 1.7rem;
    text-transform: uppercase;
}
  .btn.btn-outline:hover{
    background-color:var(--background-button);
    border-color:#fff;
    color: #fff;
  }
  .btn.btn-outline.a{
    background-color: var(--background-button);
    border-color:black;
    color: var(--bleuclair);
  }
  .btn.btn-outline:active{
    font-weight:300;
    font-size:2rem;
    color: var(--bleuclair);
  }

/*fin banner postulez*/

.copyright {
    position: absolute; /* Positionnement absolu */
    left: 0; /* Déplacer le div à l'extrême gauche du parent */
    width: 100%; /* Faire en sorte que le div occupe toute la largeur du parent */
    background: var(--bleufonce); /* Couleur de fond */
    color: var(--bleuclair); /* Couleur du texte */
    text-align: center; /* Aligner le texte au centre */
    border-radius: 5px; /* Ajoutez une bordure arrondie si nécessaire */
    padding-top: 5px;
    padding-bottom: 2px;
    font-size: 0.9rem;
}

/* Ajustements pour les téléphones mobiles */
@media only screen and (max-width: 767px) {
    .footer-content {
        padding-top: 50px;
    }

    .btn.btn-outline {
        width: 60%;
        padding: 0 10px 0 10px;
        font-size: 1rem;
        font-weight: bold;
        height: fit-content;
    }

    .banner-headerPostuler{
        font-size: 1.1rem;
    }

    .bannerItemPostuler {
        width: 80%;
        max-height: 100px!important;
    }

    .footer-content h5 {
        font-size: var(--pgrand);
    }

    .links a {
        font-size: var(--pmoyen);
    }

}
/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/offers.css ***!
  \***********************************************************************************************************************/
body.offers {
    background-image: url(/build/images/fondroma2s.01f651ee.01f651ee.01f651ee.jpg);
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-size:cover;
}

/*#myInput = barre de recherche pour les offres */
.search-container {
    margin-top: 20px;
    position: relative;
}

/*Ajout du 12/02/2025*/
.search-container, .offers-container {
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1050px; /* Même largeur max que offers-container */
    margin: 0 auto; /* Centre horizontalement */
    box-sizing: border-box; /* Gère le padding sans dépasser */
}

.search-container input[type="text"] {
    padding-left: 80px !important; /* Ajustez la valeur selon vos préférences */
}
#myInput {
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%;
    font-size: 1.2rem;
    color: var(--bleuclair);
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 3px solid var(--orange1); /* Add a grey border */
    border-radius: 10px;
    margin-bottom: 12px; /* Add some space below the input */
    background: var(--bleufonce);
}

#myInput::placeholder {
    color: var(--bleuclair);
    font-size: 1.1rem; 
}
/* fin #myInput = barre de recherche pour les offres */

/* Ajoutez ces styles pour rendre la table responsive */
.offers-container {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.search-icon {
    position: absolute;
    left: 2%; /* Ajustez la position selon vos besoins */
    top: 42%;
    transform: translateY(-50%);
}

.search-icon img {
    width: auto;
    height: 32px; 
}

.cardjob {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #00203a, #05629e); /* Dégradé de bleu */;
    color: white;
    border-radius: 10px;
    font-size: 16px;
    width: calc(100% - 40px); /* Largeur ajustée à celle de la barre de recherche */
    max-width: 1050px; /* Largeur maximale pour grands écrans */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 15px;
    width: 100%;
}

.card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #00203a, #05629e); /* Dégradé de bleu */;
    border-radius: 10px;
    width: calc(100% - 40px); /* Largeur ajustée à celle de la barre de recherche */
    width: 100%;
    max-width: 1050px; /* Largeur maximale pour grands écrans */
    max-height: 70px;
    padding: 10px;
}

.cardjob-left {
    flex: 0 0 60px; /* Largeur fixe pour l'image */
    display: flex; /* Aligne l'image au centre */
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.card-right {
    flex: 1; /* Prend tout l'espace restant */
    display: flex;
    flex-direction: row; /* Les éléments internes s'empilent verticalement */
    gap: 10px; /* Espace entre les éléments internes */
}

.cardjob-title {
    text-transform: uppercase;
    color: white;
    text-align: left;
    font-size: 1rem;
    margin-bottom: 0;
    padding: 2px;
    min-width: 14rem;
    max-width: 45rem;
}

.cardjob-title::first-letter {
    font-size: 1.2rem;
}
.cardjob-contrat, .card-lieu{
    background-color: white;
    border-radius: 10px;
    padding: 2px 10px 2px 10px;
    color: var(--bleufonce);
    margin-top: 20px;
    font-size: 1rem;
}
.cardjob-contrat {
    font-weight: bold;
    margin: 1.5rem;
    letter-spacing: 1px;
    width: fit-content;
}

.card-lieu {
    margin: 1.5rem;
    text-align: center;
    width: 14rem;
}

.content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.marqueur {
    width: 43px;
    height: auto;
    margin-left: 15px;
    margin-right: 15px;
}

/* Bouton + pour écran mobile */
.toggle-jobbuttons {
    display: none;
}

/* Conteneur des boutons */
.jobuttons {
    display: flex;
    align-items: center; /* Aligne verticalement les boutons */
    gap: 10px; /* Espace entre les boutons */
}

/* bouton postuler */
.button-job {
    align-items: center;
    border-radius: 10px;
    color: var(--bleufonce);
    background-color: var(--orange1);
    display: flex;
    font-size: 1rem;
    justify-content: center;
    line-height: 1em;
    max-width: 40%;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
    margin: 0 auto;
    padding: 2px 10px 2px 10px;
}

.button-job:active,
.button-job:hover {
  outline: 0;
  border: 3px solid var(--bleufonce);
  border-radius: 10px;
}

.button-job span {
  color: var(--bleufonce);
  border-radius: 6px;
  font-size: bold;
  width: 100%;
  min-width: 7rem;
  height: 100%;
  padding: 10px 0 10px 0;
  transition: 300ms;
  text-align: center;
}

.button-job span:hover {
    font-size: 1rem !important; /* Augmente légèrement la taille du texte */
    font-weight: bold !important; /* Rend le texte en gras */
    transition: font-size 0.2s ease-in-out, font-weight 0.2s ease-in-out; /* Animation fluide */
}

/* GO bouton en savoir + */
.button-details {
    color: white;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    padding: 2px 10px 2px 10px;
    margin-right: 1rem;
}

.button-details:hover {
    color: var(--orange1);
}
/* END bouton en savoir + */

/*formulaire creation / modification offres d'emploi côté administrateur*/

.form-offers  {
    background-color: var(--bleufonce);
    color: var(--bleuclair);
    padding: 20px;
    border-radius: 20px;
    border: 3px solid var(--orange1);
    width: 70%;
    margin: 0 auto;
}

.form-offers label  {
    padding: 5px 0 5px 0;
    font-size: 1.1rem;
}

.form-offers input  {
    background-color: var(--bleuclair);
    color: var(--bleufonce);
    font-size: 1.1rem;
    height: fit-content;
}

.form-title {
    background-color: var(--background-cv-title);
}

input#offer_offerFile.form-control {
    background-color: var(--bleuclair);
    color: var(--bleufonce);
    padding: 5px;
    margin: 5px 0 15px 0;
    font-size: 1.1rem;
    height: fit-content;
}

.choicesLink {
    background-color: var(--bleuclair);
    color: var(--bleufonce);
    padding: 5px;
    margin: 10px;
    font-size: 1rem;
    min-height: 50px;
    border-radius: 10px;
    height: fit-content;
}

.buttonadmin {
    align-items: center;
    border-radius: 10px;
    color: var(--bleufonce);
    border: 3px solid var(--orange1);
    background-color: var(--bleuclair);
    display: flex;
    font-size: 1.2em;
    justify-content: center;
    line-height: 1em;
    width: 40%;
    padding: 10px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
    margin: 0 auto;
}

.buttonadmin:active,
.buttonadmin:hover {
  outline: 0;
  background-color: var(--orange1);
  color: var(--bleuclair);
  border: 3px solid var(--bleufonce);
  border-radius: 10px;
}

.buttonadmin span {
  background-color: var(--bleufonce);
  color: var(--orange1);
  border-radius: 6px;
  width: 100%;
  height: 100%;
  padding: 15px 0 15px 0;
  transition: 300ms;
  text-align: center;
}

.buttonadmin span:hover {
    color: var(--bleufonce);
    font-size: bold;
    background-color: var(--orange1);
}

.missions-field,
.competences-field,
.profil-field {
    height: fit-content;
    white-space: pre-wrap; /* Garde les sauts de ligne */
    word-wrap: break-word; /* Coupe les mots longs s'ils débordent */
}

/*raisons *******************************************************/

.enbref-raisons {
    margin: 0 auto;
    text-align: center;
    font-size: 1.5rem;
    color: var(--orange1);
    background: rgba(0, 32, 57, 0.5);
    padding: 10px;
    width: 65%;
    border-radius: 10px;
}

.enbref-raisons h3 {
  text-transform: uppercase;
  font-size: 1.5rem;
}
.page-contain-raisons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-card-raisons {
  display: flex;
  flex-direction: column;
  width: 20em;
  height: 5em;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid var(--orange1);
  text-decoration: none;
  background: var(--bleuclair);
  margin: 1em;
  padding: 2em;
  box-shadow: 0 1.5em 2.5em -0.5em rgba(0, 0, 0, 0.1);
  transition: transform 0.45s ease, background 0.45s ease;
}

.data-card-raisons h4 {
    color: var(--bleufonce);  
    text-transform: uppercase;
    font-size: 1.125em;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: color 0.45s ease;
    border-left: 3px solid var(--orange1);
    padding-left: 8px;
}

.data-card-raisons h4::first-letter {
    font-size: 1.3;
}

.data-card-raisons:hover {
  background: var(--bleufonce);
  transform: scale(1.02);
}

.data-card-raisons:hover h4 {
  color: var(--bleuclair);
}

@-webkit-keyframes point {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0.125em);
  }
}

@keyframes point {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0.125em);
  }
}

/* MEDIA QUERIES **********************************************************************************************************************/
/* Pour les écrans de taille moyenne (tablettes) */
@media (max-width: 992px) {
    .page-contain-raisons {
      flex-wrap: wrap; /* Permettre aux cards de s'enrouler sur la ligne suivante */
    }
    .data-card-raisons {
      width: calc(50% - 2em); /* Pour diviser en 2 colonnes */
    }
  }
  
  /* Pour les petits écrans (mobiles) */
  @media (max-width: 768px) {
    .data-card-raisons {
        width: calc(100% - 2em); /* Pour diviser en 2 colonnes */
    }

    .data-card-raisons h3 {
        font-size: 2rem;
    }
    .data-card-raisons h4 {
        font-size: 1rem;
    }
    .enbref-raisons {
        width: 95%;
    }
  }

/* Styles pour les petits écrans (moins de 768 pixels de large) */
@media only screen and (max-width: 768px) {
    .search-icon img {
        width: 60%;
        height: auto;
        margin-left: 10%;
    }

    .search-container,
    .offers-container {
        width: 100vw;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible !important;
    }

    .offers-container {
        overflow-x: hidden !important; /* Empêche le contenu de dépasser */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre les éléments */
        justify-content: center;
    }

    .description-p {
        font-size: 16px;
    }

    #myInput::placeholder {
        font-size: 0.9rem; 
    }

    .search-container input[type="text"] {
        padding-left: 60px !important; /* Ajustez la valeur selon vos préférences */
    }

    /* Ajustement du conteneur principal */
    .card-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        overflow: hidden; /* Évite tout débordement */
        max-height: 70px !important;
    }

    .cardjob {
        /* min-width: fit-content!important; */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 93% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 5px !important;
    }

    /* IMAGE (Prend toute la hauteur) */
    .cardjob-left {
        flex: 0 0 50px; /* Largeur fixe */
        height: 100%; /* Prend toute la hauteur */
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .marqueur {
        width: 70%;
        height: auto;
        object-fit: contain;
    }

    /* CONTENU À DROITE */
    .card-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex-grow: 1;
        width: 100%;
    }

    /* TITRE ET LIEU SUR 2 LIGNES */
    .content {
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: flex-start;
        width: 100%; /* Assure l'ajustement */
        overflow: hidden; /* Empêche tout débordement */
    }

    .cardjob-title {
        font-size: 0.9rem;
        font-weight: bold;
        text-align: left;
        margin: 0;
        padding: 0;
        line-height: 1.5; /* Ajuste la hauteur de ligne pour l'alignement */
    }

    .card-lieu {
        font-size: 0.9rem;
        color: white;
        font-weight: bold;
        background: none;
        padding: 0;
        margin: 0;
        text-align: left;
        line-height: 1.5; /* Même hauteur de ligne que le titre */
    }

    .cardjob-contrat {
        display: none;
    }

    /* Contenu caché par défaut */
    .jobuttons {
        display: none !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 10px 0;
        height: 100%;
    }

    /* BOUTON + */
    .toggle-jobbuttons {
        background-color: var(--orange1);
        border: none;
        color: white;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
        padding: 5px 12px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        width: 30px; /* Réduction de la largeur */
        height: 30px; /* Réduction de la hauteur */
    }

    .toggle-jobbuttons:hover {
        background-color: var(--bleufonce);
        color: var(--orange1);
    }

    /* Affichage des boutons En savoir + et Postuler au clic */
     .cardjob.expanded .cardjob-left,
     .cardjob.expanded .content,
     .cardjob.expanded .toggle-jobbuttons {
         display: none !important;
     }
 
     .cardjob.expanded .jobuttons {
         display: flex !important;
     }

    /* Boutons centrés */
    .jobuttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
        width: 100%;
        text-align: center;
        height: auto;
    }

    .button-job, .button-details {
        width: 45%;
        text-align: center;
        padding: 5px;
        font-weight: bold !important;
    }

    .button-job:hover {
        border: none;
        transform: none !important;
        transition: none !important;
        font-size: bold;
    }

    /* Effet hover uniquement sur le texte sans agrandir le bouton */
    .button-job:hover span {
        font-size: 1.1rem !important; /* Augmente légèrement la taille du texte */
        font-weight: bold !important; /* Rend le texte en gras */
        transition: font-size 0.2s ease-in-out, font-weight 0.2s ease-in-out; /* Animation fluide */
    }

    /* Effet hover uniquement sur le texte sans agrandir le bouton */
    .button-details:hover span {
        font-size: 1.1rem !important; /* Augmente légèrement la taille du texte */
        font-weight: bold !important; /* Rend le texte en gras */
        transition: font-size 0.2s ease-in-out, font-weight 0.2s ease-in-out; /* Animation fluide */
    }

}

/* ÉCRANS INTERMÉDIAIRES (tablettes, petits laptops) */
@media (min-width: 768px) and (max-width: 1300px) {
    .search-container {
        width: 98%; /* Ajuste selon l’écran intermédiaire */
        max-width: 1050px; /* Alignement parfait avec offers-container */
    }

    /* ✅ Garde la structure en réduisant les marges et paddings */
    .offers-container {
        width: 98% !important; /* Laisse plus d’espace sur l’écran */
        max-width: 1050px; /* Évite que ça s’étire trop */
        margin: 0 auto;
    }

    .cardjob {
        width: 100%;
        height: 70px;
        max-width: 98%;
        margin: 5px auto;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .card-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 8px;
        min-height: 65px; /* Assurer une hauteur suffisante */
        overflow: hidden;
    }

    /* ✅ Icône toujours visible */
    .cardjob-left {
        flex: 0 0 7%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .marqueur {
        width: 100%;
        max-width: 40px;
        height: auto;
        object-fit: contain;
        margin-right: 0;
    }

    /* ✅ Garder la structure du grand écran pour les textes */
    .card-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-grow: 1;
        gap: 2%; /* Égaliser l’espace entre les champs */
    }

    .content {
        display: flex;
        flex: 1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 5%; /* Distribution harmonieuse */
        min-width: 0;
        overflow: hidden;
    }

    .cardjob-title {
        flex: 1;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

    .cardjob-contrat {
        flex: 1;
        font-size: 0.9rem;
        font-weight: bold;
        background-color: white;
        border-radius: 10px;
        padding: 3px 20px;
        color: var(--bleufonce);
        margin-right: 5%;
        text-align: center;
        max-width: fit-content;
    }

    .card-lieu {
        flex: 1;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 27%;
        text-align: center;
    }

    /* ✅ Supprimer les boutons "En savoir +" et "Postuler" */
    .jobuttons {
        display: none !important; /* Caché par défaut */
    }

    /* ✅ Ajouter le bouton "+" pour afficher les boutons */
    .toggle-jobbuttons {
        background-color: var(--orange1);
        border: none;
        color: white;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        position: relative;
        right: 3%;
        width: 30px;
        height: 30px;
    }

    .toggle-jobbuttons:hover {
        background-color: var(--bleufonce);
        color: var(--orange1);
    }

    /* Affichage des boutons En savoir + et Postuler au clic */
     .cardjob.expanded .cardjob-left,
     .cardjob.expanded .content,
     .cardjob.expanded .toggle-jobbuttons {
         display: none !important;
     }
 
     .cardjob.expanded .jobuttons {
         display: flex !important;
     }

    /* Boutons centrés */
    .jobuttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
        width: 100%;
        text-align: center;
        height: auto;
    }

    .button-job, .button-details {
        width: 45%;
        text-align: center;
        padding: 5px;
        font-weight: bold !important;
    }

    .button-job:hover {
        border: none;
        transform: none !important;
        transition: none !important;
        font-size: bold;
    }

    /* Effet hover uniquement sur le texte sans agrandir le bouton */
    .button-job:hover span {
        font-size: 1.1rem !important; /* Augmente légèrement la taille du texte */
        font-weight: bold !important; /* Rend le texte en gras */
        transition: font-size 0.2s ease-in-out, font-weight 0.2s ease-in-out; /* Animation fluide */
    }

    /* Effet hover uniquement sur le texte sans agrandir le bouton */
    .button-details:hover span {
        font-size: 1.1rem !important; /* Augmente légèrement la taille du texte */
        font-weight: bold !important; /* Rend le texte en gras */
        transition: font-size 0.2s ease-in-out, font-weight 0.2s ease-in-out; /* Animation fluide */
    }

}
/* FIN MEDIA QUERIES **********************************************************************************************************************/

/* DESIGN PAGE OFFRE D'EMPLOI PAR METIER */

/* OFFER CARD PRINCIPALE */
.offer-card {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    padding: 20px;
    width: 95%;
}

/* HEADER DE L'OFFRE */
.offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 20px;
}

.offer-image img {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
}

.offer-info {
    flex: 1;
    margin-left: 35px;
}

.offer-title {
    font-size: var(--ptresgrand);
    font-weight: bold;
    color:var(--bleufonce);
}

.offer-location {
    color: var(--bleufonce);
    font-size: var(--pmoyen);
    margin: 10px 0;
}

.offer-badges {
    display: flex;
    gap: 10px;
}

.badge {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: var(--pmoyen);
    font-weight: bold;
    color: var(--bleufonce);
    background-color: var(--orange1)
}

/* BOUTON POSTULER */
.offer-cta .btn-apply {
    background: var(--degradebleu);
    color: var(--orange1);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.offer-cta .btn-apply:hover {
    background-color: #12254b;
}

/* DETAILS SECTIONS */
.offer-details {
    margin-top: 20px;
    height: fit-content;
}

.offer-details section {
    margin-bottom: 20px;
}

.offer-details h3 {
    color:var(--bleufonce);
    margin-bottom: 10px;
    font-size: var(--pgrand);
    font-weight: bold;
}

.offer-details p {
    line-height: 1.6;
    color:var(--bleufonce);
    font-size: var(--pmoyen);
    overflow: visible; /* Assure que la liste n'est pas coupée */
}

.offer-list {
    margin: 0 auto;
    padding-left: 20px;
    list-style-type: disc; /* Type de puces : disc = rond */
    max-height: none; /* Désactive toute hauteur max */
    overflow: visible; /* Assure que la liste n'est pas coupée */
}

.offer-list li {
    margin-bottom: 8px;
    color:var(--bleufonce);
    font-size: var(--pmoyen);
    line-height: 1.2;
    overflow: visible; /* Assure que la liste n'est pas coupée */
}

/* BOUTON RETOUR */
.back-button .btn-secondary {
    display: inline-block;
    background-color: var(--bleufonce);
    color: var(--orange1);
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-weight: bold;
}

.back-button .btn-secondary:hover {
    background-color: var(--orange1);
    color: var(--bleufonce);
}

@media only screen and (max-width: 768px) {
    .offer-header {
        display: grid;
        grid-template-columns: auto 1fr; /* ✅ Deux colonnes : image + texte */
        grid-template-rows: auto auto auto; /* ✅ Trois lignes : Titre, Ville, Badges */
        gap: 5px;
        align-items: start;
        text-align: left;
        width: 100%;
    }

    .offer-image {
        grid-row: 1 / span 3; /* ✅ L'image occupe les 3 lignes à gauche */
        grid-column: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .offer-image img {
        width: 6rem; /* ✅ Taille ajustée de l’image */
        height: 6rem;
        border-radius: 8px;
        object-fit: cover;
    }

    .offer-info {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: start;
        width: 100%;
        margin-left: 2% !important; /* ✅ Supprime tout décalage éventuel */
    }

    .offer-title {
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }

    .offer-location {
        font-size: 1rem;
        color: var(--bleufonce);
        margin: 5px 0;
    }

    .offer-badges {
        grid-column: 2;
        grid-row: 3;
        display: flex;
        flex-wrap: wrap;
        justify-content: start; /* ✅ Alignement à gauche */
        gap: 10px;
        margin-bottom: 10px;
        margin-left: 0;
    }

    .badge {
        padding: 3% 5%;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: bold;
        color: var(--bleufonce);
        background-color: var(--orange1);
        width: auto;
    }

    .offer-cta {
        grid-column: 1 / span 2; /* ✅ Le bouton prend toute la largeur */
        display: flex;
        justify-content: center; /* ✅ Centre le bouton */
        margin-top: 0;
        width: 100%;
    }

    .btn-apply {
        width: 100%;
        max-width: 70%;
        padding: 10px;
        font-size: 1rem;
        text-align: center;
    }
}

/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/donnees.css ***!
  \************************************************************************************************************************/
.donnees-subtitle {
    color: var(--background-cv-title);
    text-align: left;
    margin-bottom: 15px;
    font-size: 1.5em;
}


/* Ajustements pour les téléphones mobiles */
@media only screen and (max-width: 767px) {
    .donnees-subtitle h2 {
        font-size: var(--pmoyen) !important;
    }

    .donnees-subtitle p {
        font-size: var(--pmobile) !important;
        text-align: left !important;
    }
}
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/faq.css ***!
  \********************************************************************************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.faq-card {
  background: var(--bleufonce);
  color: var(--bleuclair);
  margin: 5rem auto;
  width: 90%;
  max-width: 70rem;
  min-height: 30rem;
  border-radius: 20px;
  border: 3px solid var(--orange1);
}

.hero {
  display: flex;
  justify-content: center;
  transform: translateY(-20%);
}
.hero .img-faq {
  filter: drop-shadow(0rem 1.5rem rgba(0,0,0,0.1));
  transition: 0.3s ease-out;
  width: 30%;
  height: auto;
}
.-faq-card:hover .img-faq {
  filter: drop-shadow(0rem 2.5rem rgba(0,0,0,0.1));
}

.title-faq {
  text-align: center;
  font-size: 5rem;
  padding: 1rem;
}

.faq-btn {
  width: 100%;
  padding: 1.6rem 2rem;
  font-size: 18px;
  cursor: pointer;
  background: inherit;
  border: none;
  outline: none;
  text-align: left;
  transition: all 0.5s linear;
  color: var(--bleuclair);
}
.faq-btn:after {
  content: "\27A4";
  color: var(--orange1);
  float: right;
  transition: all 0.3s linear;
}
.faq-btn.is-open:after {
  transform: rotate(90deg);
}
.faq-btn:hover, .faq-btn.is-open {
  color: var(--bleuclair);
  font-weight: bold;
}

.faq-content {
  max-height: 0;
  color: var(--bleuclair);
  margin: 0 2rem;
  padding-left: 1rem;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  border-bottom: 1px solid var(--orange1);
}

@media only screen and (max-width: 767px) {
  .faq-content p {
    font-size: var(--pmobile);
    text-align: left;
  }

  .faq-btn {
    font-size: var(--pmoyen);
  }
}
/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/activites.css ***!
  \**************************************************************************************************************************/
article {
  --img-scale: 1.001;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;
  --title-color: #28666e;
  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: #fff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}

article a::after {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
  content: "";
}
  
/* basic article elements styling */
article h2 {
  margin: 0 0 18px 0;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--background-cv-title);
  transition: color 0.3s ease-out;
}

figure {
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

article img {
  max-width: 100%;
  transform-origin: center;
  transform: scale(var(--img-scale));
  transition: transform 0.4s ease-in-out;
}

.article-body {
  padding: 24px;
}

article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #28666e;
  inset: auto auto 5px auto;
}

article a:focus {
  outline: 1px dotted #28666e;
}

article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}
  
/* using the has() relational pseudo selector to update our custom properties */
article:has(:hover, :focus) {
  --img-scale: 1.1;
  --title-color: #72adb4;
  --link-icon-translate: 0;
  --link-icon-opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

  /************************ 
  Generic layout (demo looks)
  **************************/
  
*,
*::before,
*::after {
  box-sizing: border-box;
}
    
.articles {
  display: grid;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 15px;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/* Ajustements pour les ordinateurs grand écran */
@media only screen and (min-width: 1200px) {
  /*tout est ok, version initiale ok*/
}

/* Ajustements pour les ordinateurs écran large */
@container card (min-width: 992px) and (max-width: 1199px) {
  .article-wrapper {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
  }
  .article-body {
    padding-left: 0;
  }
  figure {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  figure img {
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

/* Ajustements pour les tablettes */
@container card (min-width: 768px) and (max-width: 991px) {
    /*tout est ok, version mobile compatible*/
}

/* Ajustements pour les téléphones mobiles */
@container card (max-width: 767px) {
  .article-wrapper {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
  }
  .article-body {
    padding-left: 0;
  }
  figure {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  figure img {
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}






/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/mails.css ***!
  \**********************************************************************************************************************/
.email-body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 20px;
}

.email-header {
    color: #4285f4;
}

.applicant-info {
    list-style-type: none;
    padding: 0;
}

.applicant-info li {
    margin-bottom: 10px;
}

.info-label {
    font-weight: bold;
}

.email-body p {
    margin-bottom: 15px;
}

.email-body p:last-child {
    margin-bottom: 0;
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/pages/fichesmetiers.css ***!
  \******************************************************************************************************************************/
.faq-job {
    background: rgba(255, 255, 255, 0.6);
    margin: 2rem auto;
    padding-bottom: 0.1rem !important;
    width: 95%;
    max-width: 70rem;
    min-height: 30rem;
    border-radius: 20px;
    /* border: 3px solid var(--orange1); */
}

.teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 30px 10px 30px;
}

.teaser h3 {
    color: white;
    padding: 12px 20px;
    background: var(--degradebleu);
    border-radius: 20px;
    font-size: var(--ptresgrand);
    width: fit-content;
}

.teaser p {
    font-size: var(--pmoyen);
    padding: 10px 15px 0 5px;
    color: var(--bleufonce);
}

.teaser img {
    max-width: auto;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid var(--bleufonce);
    box-shadow: 0 0 12px 12px rgba(255, 255, 255, 0.1);
}

.page-container .content1 {
    width: 100%; /* Prend toute la largeur du conteneur parent */
    display: flex;
    gap: 10px;
    box-sizing: border-box; /* Inclut le padding et les bordures */
}

.content1 {
    width: fit-content;
    display: flex;
    margin: 20px;
    flex-direction: row;
    gap: 10px; /* Ajoute de l'espace entre les cartes en mode mobile */
    text-align: justify;
}

.content1 li {
    color: var(--bleufonce);
}

.page-container .content1 .skill-card.prerequis {
    flex: 0 0 55%;
    max-width: 55%;
    box-sizing: border-box; /* Inclut les bordures et le padding */
}

.page-container .content1 .skill-card.qualites {
    flex: 0 0 40%;
    max-width: 40%; /* Limite à 40% du parent */
    box-sizing: border-box; /* Inclut les bordures et le padding */
}

.page-container .content1 .skill-card.perspectives {
    flex: 0 0 55%;
    max-width: 55%; /* Limite à 60% du parent */
    box-sizing: border-box; /* Inclut les bordures et le padding */
}

.page-container .content1 .skill-card.ressources {
    flex: 0 0 40%;
    max-width: 40%; /* Limite à 40% du parent */
    box-sizing: border-box; /* Inclut les bordures et le padding */
}

.mission-card {
    padding: 20px 20px 10px 20px;
    margin: 0 auto;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    margin-left: 1rem;
}

.mission-card h3 {
    color: var(--bleufonce);
    text-align: left;
    padding: 2px 20px;
    border-radius: 20px;
    position: relative; /* Nécessaire pour positionner le pseudo-élément */
    font-size: var(--ptresgrand);
    background: var(--orange1);
    width: fit-content;
}


.mission-card ul {
    color: var(--bleufonce);
    font-size: var(--pmoyen);
    text-align: justify;
    /* line-height: var(--pinterligne); */
}

.mission-card p {
    color: var(--bleufonce)!important;
    font-size: 16px;
    text-align: justify;
    /* line-height: var(--pinterligne); */
}

.jobicon {
    width: 2.3rem;
    height: auto;
    margin-right: 10px;
}

.jobicon2 {
    padding: 10px;
    width: 2.3rem;
    height: auto;
    margin-right: 20px;
}

.skill-card {
    padding: 0px 20px 10px 20px;
}

.separator {
    border-right: 3px solid var(--orange1);
    margin: 0 5px;
}

.skill-card h3 {
    color: var(--bleufonce);
    text-align: left;
    font-size: 22px;
    display: inline-block;
    background: var(--orange1);
    width: fit-content;
    padding: 2px 20px;
    border-radius: 20px;
}

.skill-card.perspectives h3 {
    color: var(--bleufonce);
    text-align: left;
    font-size: 22px;
    display: inline-block;
    background: var(--orange1);
    width: fit-content;
    padding: 5px 20px;
    border-radius: 20px;
}

.skill-card.perspectives p,
.skill-card.ressources p {
    color: var(--bleufonce);
    font-size: var(--pmoyen);
    text-align: justify;
    padding-left: 0 !important;
}

.skill-card.ressources a {
    color: var(--bleufonce);
    font-weight: bold;
    font-size: var(--pmoyen);
    text-align: justify;
}

.skill-card.ressources h3 {
    color: var(--bleufonce);
    text-align: left;
    font-size: 22px;
    display: inline-block;
    background: var(--orange1);
    width: fit-content;
    padding: 5px 20px;
    border-radius: 20px;
}

.skill-card ul {
    color: var(--pcolor);
    text-align: left;
    padding-left: 20px;
    padding-bottom: 20px;
    line-height: var(--pinterligne);
    font-size: 16px;
}

.skill-card p {
    color: var(--pcolor);
    text-align: justify;
    padding-left: 20px;
    /* padding-bottom: 20px; */
    line-height: var(--pinterligne);
    font-size: 16px;
}

.skill-card a {
    color: var(--bleuclair);
}

.formation-card {
    /* background-color: white; */
    background: rgba(255, 255, 255, 0.5);
    padding: 15px 15px 5px 15px;
    width: 90%;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 30px;
    border: 3px solid var(--bleufonce);
}

.formation-card h3 {
    color: var(--bleufonce);
    text-align: left;
    padding-left: 20px;
    position: relative; /* Nécessaire pour positionner le pseudo-élément */
    font-size: 22px;
}

.formation-card p {
    color: var(--bleufonce)!important;
    font-size: 16px;
    text-align: justify;
    margin-left: 10px;
}

.jobutton {
    margin: 1.5rem auto;
}

@media (min-width: 768px) {
    .teaser {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .teaser img {
        margin: 0 0 0 20px;
        order: 2;
    }

    .teaser p {
        order: 1;
        flex: 1;
        margin-top: 20px;
    }

    .content1 {
        flex-direction: row;
        gap: 20px;
    }

    .skill-card {
        margin: 0; /* Espace entre les cartes en mode bureau */
    }
}

/*VERSION MOBILE*/
@media (max-width: 768px) {
    .faq-job p,
    .mission-card p,
    .mission-card li,
    .formation-card p,
    .content1 p,
    .skill-card ul,
    .skill-card p,
    .skill-card.perspectives p,
    .skill-card.ressources p {
        text-align: left;
        text-align-last: left;
        margin: 0; /* Supprime les marges conflictuelles */
        padding: 0 10px; /* Ajoute un peu d'espace interne pour la lisibilité */
        font-size: var(--pmobile);
    }

    .teaser h3 {
        margin: 0 auto;
    }

    .teaser h3, 
    .faq-job h3,
    .mission-card h3,
    .formation-card h3,
    .content1 h3,
    .skill-card.perspectives h3,
    .skill-card.ressources h3 {
        font-size: var(--pmoyen);
    }

    .teaser img {
        display: none;
    } 

    .teaser p {
        max-width: 100% !important;
        padding: 0 5px;
        margin-top: 15px;
    }

    .mission-card li {
        margin-bottom: 10px;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .content1 {
        flex-direction: column; /* Aligne les éléments en colonne */
        width: 100%; /* Prend toute la largeur */
    }

    .skill-card.prerequis,
    .skill-card.qualites,
    .skill-card.perspectives,
    .skill-card.ressources {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        margin: 0;
        padding: 0 10px; /* Ajoute un espace intérieur pour le texte */
        text-align: justify; /* Uniformise la justification */
    }

    .separator {
        display: none; /* Masque le séparateur sur mobile */
    }

    .jobicon {
        width: 2rem; /* Réduit la largeur à 2rem */
        height: auto; /* Conserve les proportions */
        margin-right: 5px; /* Réduit l'espacement à droite */
    }

    .jobicon2 {
        width: 50px; /* Réduit la largeur à 50px */
        height: auto; /* Conserve les proportions */
        padding: 5px; /* Réduit le padding interne */
        margin-right: 10px; /* Réduit l'espacement à droite */
    }
}
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/styles/app.css ***!
  \**************************************************************************************************************/
:root {
    --background-color: white; 
    --background-cv-title: #104d75;
    --button-color: #3498db; 
    --button-postuler: #2435ce;
    --legend-form: grey;
    --img-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    --fleche: rgb(189, 59, 59);
    --table-border: rgb(190, 223, 241) ;
    --border-bottom: 2px solid rgba(90, 156, 194, 0.3);
    --gradient: -webkit-linear-gradient(right, #56d8e4, #234c74, #64b3e7, #0762b6);
    --gradientfr: -webkit-linear-gradient(left, #081fee, #f3f6f8, #f8081c);
    --background-button: #00203a;
    --orange1 : rgb(235, 178, 67);
    --orangefonce: rgb(215, 163, 62);
    --bleufonce: rgb(0, 32, 57);
    --bleumoyen: rgb(5, 98, 158);
    --bleumiddle: rgb(27, 158, 213);
    --bleuclair: rgb(233, 244, 249);
    --fontcolor: white;
    --ptresgrand: 22px;
    --pgrand: 18px;
    --pmoyen: 16px;
    --pmobile: 14px;
    --pcolor: rgb(202, 202, 202);
    --pinterligne: 30px;
    --degradebleu: linear-gradient(90deg, #00203a, #05629e);
}

body {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.langues {
    background-color: var(--bleufonce);
    padding-top: 8px;
    padding-right: 30px;
}

/*Codes génériques à toutes les pages*/

/* .page-banner img {
    width: 100%;
    height: 180px;
    display: block;
    opacity: 0.9;
    z-index: -1;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--img-box-shadow);
    TEST border-radius: 5px;
}
.page-banner:hover img {
    opacity: 0.8; /* Changez l'opacité lorsque la souris survole la bannière */
    /* transition: opacity 0.3s ease-in-out; /* Ajoutez une transition d'opacité avec un délai de 0.3s */
/* }  */

/* Style général pour toutes les listes */
ul {
    margin: 0; /* Supprime les marges par défaut */
    padding-left: 20px; /* Définit un retrait standard pour les puces */
    list-style-position: outside; /* Position des puces à l'extérieur */
}

li {
    margin-bottom: 10px; /* Uniformise l'espacement entre les éléments */
    line-height: 1.6; /* Améliore la lisibilité */
}

.page-banner {
    position: relative;
    text-align: center;
    z-index: 1;
    max-width: 1200px;
    margin: 10px auto; /* Ajoutez cette ligne pour centrer horizontalement */
    background-color: none !important; /* Supprime tout fond parasite */
}

#banner {
    background-color: none !important; /* Supprime tout fond parasite */
    border-radius: 15px; /* Applique aussi l'arrondi à la div interne */
}

.bannerItem-home {
    background-color: none !important;
    background: none !important;
    border-radius: 15px; /* Applique aussi un arrondi à l'arrière-plan si nécessaire */
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: none;
    z-index: 2;
    text-shadow: 4px 4px 7px rgba(0, 0, 0, 1); /* Ajoutez une ombre au texte */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-title, .banner-subtitle {
    font-weight: bold;
    margin: 0; /* Supprimez les marges par défaut */
    padding: 8px 15px; /* Ajoutez un peu d'espace autour du texte */
    color: var(--bleufonce);
    text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.3); /* Ajoutez une ombre au texte */
    background-color: rgba(255, 255, 255, 0.5);
}

.banner-title {
    padding-top: 15px;
    font-size: 2.2rem;
    border-radius: 10px 10px 0 0;
}

.banner-subtitle {
    font-size: 2rem; /* Ajustez la taille du sous-titre selon vos préférences */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    text-overflow: ellipsis; /* Affiche des points de suspension (...) pour indiquer du texte coupé */
    text-transform: lowercase; /* Convertit le texte en minuscules */
    font-variant: small-caps; /* Convertit les minuscules en petites majuscules */
    padding-bottom: 20px;
}
/* FIN TEST */

.container-wrapper {
    max-width: 1200px;
    width: 70%;
    margin: 0 auto;
    align-items: center;
}

.page-title {
    color: var(--background-cv-title);
    font-size: 26px;
}

p {
    font-size: var(--pgrand);
    text-align: justify;
    color: var(--pcolor);
    line-height: var(--pinterligne);
}

.page-container {
    position: relative;
    z-index: 1;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.text-description::first-letter {
    font-size: 35px;
    padding-right: 2px;
    color: var(--orange1);
}

body.news {
    background-image: url(/build/images/fondnews.449d3f59.449d3f59.jpg);
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-size:cover;
}

body.mentions {
    background-image: url(/build/images/fondemplois.ba190db0.ba190db0.jpg);
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-size:cover;
}

body.mentions p {
    color: var(--bleufonce);
    font-size: 1rem;
}

body.mentions h2 {
    color: var(--bleufonce);
    font-size: 1.3rem;
}

/* Ajustements pour les tablettes en mode portrait et paysage */
@media only screen and (min-width: 769px) and (max-width: 1199px) {
    .page-banner img {
        width: 100%;
        height: 180px; /* Réinitialisez la hauteur automatique */
    }

    .banner-content {
        position: relative; /* Corrige le chevauchement en mode mobile */
        top: auto;
        left: auto;
        transform: none;
        text-align: center; /* Centre le texte */
        padding: 5px;
    }

    .banner-title {
        font-size: 2rem;
    }

    .banner-subtitle {
        font-size: 1.5rem;
    }

    .container-wrapper {
        width: 100%; /* Utilisez 100% de la largeur pour les écrans plus petits */
        padding: 0 15px; /* Ajoutez un peu d'espace sur les côtés */
    }

    .page-title {
        font-size: 22px;
    }

    .text-description::first-letter {
        font-size: 30px;
        padding-right: 2px;
        color: var(--orange1);
    }
}

/* Ajustements pour la version mobile - codes génériques */
@media only screen and (max-width: 768px) {
    .page-banner img {
        height: auto; /* Réinitialisez la hauteur automatique */
    }

    .banner-title {
        font-size: 1.2rem;
    }

    .banner-subtitle {
        font-size: 0.87rem;
        padding-bottom: 20px!important;
    }

    .container-wrapper {
        width: 100%; /* Utilisez 100% de la largeur pour les écrans plus petits */
        padding: 0 15px; /* Ajoutez un peu d'espace sur les côtés */
    }

    .page-title {
        font-size: 16px;
    }

    .text-description::first-letter {
        font-size: 30px;
        padding-right: 2px;
        color: var(--orange1);
    }

    body.mentions p {
        font-size: var(--pmobile);
        text-align: left;
    }

    body.mentions h2 {
        font-size: var(--pmoyen);
    }

    .langues {
        padding-right: 5px;
    }
}


/**********ADMIN - NEWS ********/
.news-container {
    width: 100%;
    margin-top: 20px;
    background-color: var(--bleuclair); /* Ajout de la couleur de fond blanc */
    border-radius: 10px; /* Arrondi des coins */
    overflow: hidden; /* Masquage du débordement */
    color: var(--bleufonce);
  }
  
  #newsList {
    width: 100%;
    border-collapse: collapse;
  }
  
  #newsList th, #newsList td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ccc;
  }
  
  #newsList th {
    background-color: var(--bleuclair);
    font-weight: bold;
  }
  
  #newsList tbody tr:nth-child(even) {
    background-color: var(--bleuclair);
  }
  
  #newsList tbody tr:hover {
    background-color: var(--bleuclair);
  }
  
  #newsList a {
    color: blue;
    text-decoration: none;
    margin-right: 10px;
  }
  
  #newsList a:hover {
    text-decoration: underline;
  }