:root {
    --clr-color3:rgba(35, 35, 35, .9);
    --clr-color4:#fff;
}

strong {
font-weight: 500;
}



body.modal-open {
 padding-right:0px!important;
}


/* Appliquer un style blanc par défaut aux boutons */
.btn-primary{
    color: #333 !important;
    background-color: #fff !important;
    border-color: #fff !important;
    width: 100%;
}

/* Effet hover (survol) */
.btn-primary:hover {
   color: rgb(68 68 68 / 60%)!important; 
   /*background-color: #fff !important; */
   border-color: none !important; 
}




/* Désactiver l'effet au clic (focus et active) */
.btn-primary:focus, 
.btn-primary:active {
   color: rgb(68 68 68 / 60%)!important; 
   /*background-color: #fff !important; */
   box-shadow: none !important; /* Supprime l'effet de focus */
   outline: none !important; /* Supprime le contour au focus */
}





/*header .container {
   box-shadow: 0 0 5rem rgba(255, 255, 255, 0.5) !important;
}*/


header .photo {
   width: 250px; 
   height: 250px;
   border-radius: 100%;
   overflow: hidden; 
   display: inline-block; 
}

header .logo {
   width: 200px;
}

.name{
   font-size: 1.75rem;
   font-weight: 700;
   line-height: 2.25rem;
}
.societe{
   font-size: 1.25rem;
   line-height: 1.5rem;
   font-weight: 600;
}

.ville{
   font-size: 1.25rem;
   line-height: 2rem;
   font-weight: 700;
   color:var(--clr-color2);
}

.text-activite {
   font-size: 1.25rem;
   margin-top:20px;
  
}

.pt-5 {
   background-color: var(--clr-color4)!important;
}

a {
   color: var(--clr-color3);
}

a:hover {
   color: var(--clr-color3);
   text-decoration: none;
 }
 .footer a{color:var(--clr-color3); font-size:14px;}

 .footer a:hover{
   color: var(--clr-color3);
}

.text-sm {
   font-size: 1.05rem;
   margin-top:20px;
}

.btn-dark:hover {
   opacity: .75;
}

.btn-orange {
   background-color: var(--clr-color3);
}

.btn-orange:hover {
   opacity: .75;
}

/* Désactiver les bordures en mode mobile */
@media screen and (min-width: 320px) and (max-width: 478px) {    
   .container-header, .container-body {        
       border-radius: 0 !important; 
   }
}


.container-body{
   max-width: 400px;
   background-color: #fff;
   margin:0 auto;
   overflow:hidden;
   border-radius: 10px;
   margin-top: -20px;
}



.svg-inline--fa:not(.fa-2x) {
   font-size: 1.5em;
   color: var(--clr-color2);
}

.fa-star{
    color: var(--clr-color3) !important;
   font-size:18px !important;
}

.w-50 {
   width: 70% !important;
   margin-left: 70px !important;
 }

body {
   background-color: var(--clr-color1);

}

.form-inline {
   flex-flow: row ;
 }
 
 .form-inline input{
     margin-left:0px !important;
 }
 
 .form-inline button{
     width: 100px;
 }

 .social-links {
   display: flex; 
   justify-content: center; 
   align-items: center; 
   gap: 15px; 
}

.social-link {
   text-decoration: none; 
   color: inherit; 
   transition: color 0.3s ease; 
}

.info{
   padding:0px 40px 0 0;
}



.qrc_page_wrapper {
   background-position: top center;
   background-size: cover;
   height: unset;
   min-height: 100vh;
}

.qrc_page_wrapper {
   background-color: unset;
}

.qrc_page_wrapper {
   background-size: cover;  
   background-position: inherit;
   background-color: var(--qrc-secondary);
   max-width: 1000%;
   padding: 0;
   padding-top: 0.1px;
   padding-bottom: 0.1px;
   overflow: auto;
   position: relative;
   height: 100vh;
}

.pg_background {
   width: 100%;
   height: 100vh;
   position: fixed;
   background-size: cover;
   background-position: top center;
}


.qrc_page_inner {
   max-width: 400px;
   margin: auto;
   position: relative;
   z-index: 9;
   text-align:left;
}


.qrc_profile_5 {
   background-color: var(--clr-color4);
   border-radius: 18px;
   overflow: hidden;
   margin: 15px 0;
   margin-top:-88px;
   
}

.qrc_profile_5 .qrc_profile_inner {
   padding-top: 0;
   position: relative;
   padding-bottom: 0;
   height: 466px;
}


.qrc_profile_5 .qrc_profilepic {
   margin-top:40px;
   height: 426px;
   width: 100%;
   border-radius: 0;
}

.qrc_profilepic {
   background-position: center;
}
.qrc_profilepic {
  
   background-size: cover;
   background-repeat: no-repeat;
  
   margin: auto;
}
.qrc_profile_5_ovrlay_svg {
   position: absolute;
   bottom: 40px;
   display:flex;
}
.cls-1 {
   fill: url(#linear-gradient);
}

.qrc_profile_5 .qrc_profile_inner_info {
   margin-top: -235px;
   text-align:left;
   /* color:#000; */
   z-index: auto;
}

.qrc_profile_inner_info {
   padding: 0 15px;
   margin-top: -180px;
   position: relative;
}

.qrc_profile_5_svg {
   position: absolute;
   bottom: -1px;
   display:flex; 
   width:100%;
 
}

.qrc_profile_shortcut ul li {
   text-align: center;
   background: var(--clr-color2);
   color: #fff;
   width: 44px;
   height: 44px;
   font-size: 22px;
   padding-top: 0px;
   margin-bottom: 8px;
}

.qrc_profile_shortcut ul li {
   margin: 4px;
   padding: 0;
   list-style: none;
   display: inline-block;
   border-radius: 60px;
   width: 40px;
   height: 40px;
   font-size: 10px;
   color: var(--clr-color1);
}
.qrc_profile_shortcut ul {
   margin: 0;
   padding: 0;
}


.qrc_profile_shortcut ul li a {
   align-items: center;
   display: flex;
   justify-content: center;
   height: 100%;
   color: var(--clr-color4);
}


.qrc_profile_brand_logo {
   position: absolute;
   right: 34px;
   top: 100px;
   max-width: 110px;
   height: auto;
   margin: auto;
   vertical-align: middle;
   display: flex;
   overflow: hidden; 
   
}

.qrc_profile_brand_logo img {
   max-width: 100%;
   max-height: 100%;
  /* border-radius: 50%;*/
   object-fit: cover;
}

.qrc_profile_5 h2 {
   text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
   color: var(--qrc-profile-primary);
   font-size: 32px;
   line-height: 34px;
   font-weight: bold;
   word-break: break-word;
}

.video-pattern {
   background: transparent url(../img/pattern.png) repeat scroll 0% 0%;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   padding: 75px 0px;
   position: absolute;
   text-align: center;
 }
 #video {
   background: #000;
   margin: 0px;
   position: relative;
}


.video-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 4px #000;
}


   /* Positionnement en haut à droite */
   .btn-qrcode {
      position: fixed;
      top: 20px;
      right: 10px;
      background: black;
      padding: 12px;
      border-radius: 999px;
      transition: 0.3s ease-in-out;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
  }

  .btn-light {
 
   border-color: rgba(0, 0, 0, .2);
}

  @media (min-width:768px) {
      .btn-qrcode {
          display: none;
      }
  }
/* cadre qrcode 
  .qrcode_name{
   border: solid 7px;
   max-width: 100%; 
   height: auto; 

}*/
  /* bouton echange */

  .icon-space {
   margin-right: 8px;
   /* Ajoute un espace entre l'icône et le texte */
}


.qrc_profile_shortcut {
   display: flex;
   justify-content: space-around;
   align-items: center;
   height: 7vh;
   gap: 0px;
   width: 100%;
   margin:110px 0px 20px 0px;
   align-content: center;
}

/* Style des boutons */
.card_echange {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 50px;
    border-radius: 8px;
    border: solid 1px #ddd;
    transition: background 0.3sease-in-out;
    background: #fff;
   
}

.card_contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border-radius: 8px;
    border: solid 1px #ddd;
    transition: background 0.3sease-in-out;
   background: #343a40;
   
}

.card_echange strong{
vertical-align: top;
}


/* formulaire contact */

#contact-vcard {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: auto;
   background: rgba(0, 0, 0, 0.5);
   display: none;
   justify-content: center; 
   align-items: flex-end; 
   z-index: 1050;
}

.contact-content {
   background: white;
   width: 100%;
   max-width: 500px;             
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
   padding: 20px;
   animation: slideUp 0.4s ease-out; 
   margin-top:40px !important;
}

/* Animation pour glisser le modal depuis le bas */
@keyframes slideUp {
   from {
       transform: translateY(100%);
   }
   to {
       transform: translateY(0);
   }
}

/* Style pour le bouton de fermeture */
 /* Bouton de fermeture */
 .contact-modal .close {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 20px;
     cursor: pointer;
 }

 .modal-header{
   border-bottom: none !important;
 }

 .modal-title {
   line-height: 0 !important;
}

 .modal-content{
   z-index:2000;
   padding: 10px;
 }

/* Pour que le bouton de soumission prenne toute la largeur */

.fullscreen-width-button {
  width: 100%;
  padding: 6px 0 8px 0px;
  border: none;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  margin:20px 0 10px 0;
}

.download-direct {
   text-decoration: none;
   color: #555;
   font-size: 14px;
   font-weight: 400;
   display: block;
   text-align: center;
   margin: 10px auto;
   width: fit-content;
   opacity: 0.7;
   transition: opacity 0.3s ease;
}

.download-direct:hover {
   opacity: 1;
   color: #000; 
 
}