:root {
    --bs-primary: #449eff; 
    --bs-secondary: #7c7fc7; 
    --bs-primary-light: #93c7ff;
    --bs-secondary-light: #b4b5df;
    --bs-body:rgba(4, 13, 59, 255);
  }


  @font-face {
  font-family: 'Garet';
  src: url('/fonts/Garet-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  }

  @font-face {
    font-family: 'Garet';
    src: url('/fonts/Garet-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
  }



  body{
    font-family: 'Garet', sans-serif;
    color: #b3b3b6
  }
  
  /* Override spécifique pour les boutons */
  .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #000 !important; /* Si nécessaire */
  }
  
  .btn-primary:hover, 
  .btn-primary:focus, 
  .btn-primary:active {
    background-color: var(--bs-primary-light) !important;
    border-color: var(--bs-primary-light) !important;
    color: #FFF !important; /* Si nécessaire */
  }
  
  .btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #fff !important; /* Si nécessaire */
  }
  
  .btn-secondary:hover, 
  .btn-secondary:focus, 
  .btn-secondary:active {
    background-color: var(--bs-primary-light) !important;
    border-color: var(--bs-primary-light) !important;
  }

.navbar-dark, footer, .modal-header{
    background-color: #00002a;
}

.navbar-dark .menu a {
    color:var(--bs-primary);
    text-decoration:none; 
    transition: .3s;
    font-variant: small-caps;
    font-size: 12pt;
}

.navbar-dark a:hover{
    color:#fff;   
}

body{
    background-color:var(--bs-body);
}

.card {
    background-color:var(--bs-secondary);
    color:#e8e8e8;
    
}

.img-overflow{
    overflow: hidden;
    cursor: pointer;
}

.card img{
    width:100%;
    transition: transform .5s;
}
.card:hover{
    width:100%;
    transition: .5s;
}

.card:hover img{
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
    
}

footer a, footer a:hover{
        color:#FFF;    
}


h2{
    color: #333;
    border-left :10px solid var(--bs-primary);
}


h5{
    color: #666;
    border-left :10px solid var(--bs-secondary);
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }


  .modal-header{
    background-color: var(--bs-secondary);
    color:#fff;
  }

.rotate-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* quand le lien n’a PAS la classe collapsed → ouvert */
a[data-bs-toggle="collapse"]:not(.collapsed) .rotate-icon {
  transform: rotate(45deg); /* + devient X */
}

.infoIcon {
  color: var(--bs-secondary);
  font-size: 14pt;
}

.infoIcon:hover {
  color: var(--bs-secondary);
}

.case-subtitle {
  font-size: 10pt;
  color: #ffffff94;
  height: 20px;
}