:root {
  --bs-font-sans-serif: 'Roboto', sans-serif !important;
}
header {
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
header h1 {
    color: black;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
}
.opaque-box {
    background: rgba(255, 255, 255, 0.62); /* Black background with 50% opacity */
    padding: 20px;
    border-radius: 10px;
}
@media (max-width: 768px) {
    .opaque-box {
        display: inline-block;
        box-shadow:2px 2px 2px 2px rgba(0, 0, 0, 0.65);

    }
}
@media (min-width: 769px) {
    .opaque-box {
        background: none; /* Remove background on larger screens */
        padding: 0;
        border-radius: 0;
    }
}
.card {
    width: 100%; /* Set the card to take the full width of its parent column */
}
body {
    font-family: 'Roboto', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 700;
}
p, li, a, span {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
}
.navbar-nav .nav-link {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.card-link-wrapper {
    text-decoration: none;
    color: inherit;
}
.card-hover {
    transition: all 0.25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.card-img-top {
    height: 200px;       /* hauteur fixée (tu peux ajuster) */
    object-fit: cover;   /* recadre proprement */
    width: 100%;         /* prend toute la largeur */
    border-radius: 8px;  /* optionnel, joli */
}
.photo-border {
    border: 4px solid #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}