@import url('https://fonts.googleapis.com/css2?family=Allura&family=Lora:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    --primary:#D9BE48 ;
    --font1: "Playfair Display", serif;
    --font2: "Open Sans", sans-serif;
    --font3: "Lora", serif;
}

/* General */
body{
    font-family:var(--font2); font-size: 16px;
}
h1{
    font-family:var(--font1);  font-size: 64px;
}
h2{
    font-family:var(--font1);  font-size: 36px;
}
h3{
    font-family:var(--font1);  font-size: 33px;
}
.text-primary{
    color:var(--primary) !important
}
.btn{
    border-radius: 50rem !important;
    padding: 0.375rem 1.2rem !important;
}
.btn-primary{
    background-color:var(--primary) !important;
    border-color:var(--primary) !important;
    color: white;
}
.btn-outline-primary{
    color:var(--primary) !important;
    border-color:var(--primary) !important;
}
.btn-outline-primary:hover{
    color:white !important;
    background-color:var(--primary) !important;
    border-color:var(--primary) !important;
}
.font1{
    font-family: var(--font1);
}
.font3{
    font-family: var(--font3);
}

#flash-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: auto;
    max-width: 90%;
}

.flash-message {
    text-align: center;
    padding: 2rem !important;
    font-size: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border-radius: 10px;
}


/* Header */
nav{
    position: fixed;
    top: 20px;
    z-index: 1045;
}
#logo-header{
    height: 93px;
}

.min100vh{
    min-height: 100vh;
}
/* Index */
#heroDiv{margin:0;
    padding:0;
    -webkit-background-size: cover;

}
.card-experience{
    background-color: white ;
    border: 1px solid #d4d4d4;
    transition: all 300ms ease;
}
.card-experience:hover{
    background-color: #F5EFD3 ;
    border-color: var(--primary) ;
}
.signature{
    font-family: "Allura", cursive;
}

/* Configuration de la Grille */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    grid-auto-rows: minmax(100px, auto);
    gap: 20px;
}

/* Placement spécifique des éléments */
.item-1 { grid-row: span 2; } /* Prend 2 rangées de haut */
.item-2 { grid-column: span 2; } /* Prend 2 colonnes de large */
.item-4 { grid-row: span 2; }
.item-5 { grid-column: span 2; }

/* Style des Cartes */
.custom-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid transparent !important; ;
    transition: all 300ms ease;
}

.custom-card:hover {
    border: 1px solid var(--primary) !important; ;
}

.card-body {
    padding: 20px;
    margin-top: auto;
}

.card-body h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.card-body p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Effet Dégradé et Image */
.gradient-overlay {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Hauteurs variables selon le type de carte */
.v-tall { height: 500px; }
.v-tall2 { height: 550px; }
.v-wide { height: 200px; }
.v-medium { height: 250px; }
.v-small { height: 200px; }

.gradient-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit l'espace sans déformation */
}

.gradient-overlay::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Hauteur du fondu */
    /*background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);    /*background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);    /*background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);*/
}

.glass-effect {
    background-color: #FFFFFFB2;
    border-radius: 15px;
    border: 1px solid #ffffff47;
    backdrop-filter: blur(var(--glass, 4px));
}

.form-label {
    margin-bottom: 2px;
}

.grecaptcha-badge{
    display: none !important;
}

#flash-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: auto;
    max-width: 90%;
}

.flash-message {
    text-align: center;
    padding: 2rem;
    font-size: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border-radius: 10px;
}

.card{
    border-radius: 8px;
}

.card-img-wrapper {
    height: 350px;
    overflow: hidden;
}

.card-img-wrapper .card-img-top {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}


.custom-carousel {
    position: relative;
}
.custom-carousel-item {
    display: none;
}
.custom-carousel-item.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.custom-carousel-prev,
.custom-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 3rem;
    cursor: pointer;
    color: #000;
    z-index: 10;
    line-height: 1;
    display: none;
}
.custom-carousel-prev { left: 0; }
.custom-carousel-next { right: 0; }

@media screen and (max-width:768px){
    h1{font-size: 40px;}
    h2{font-size: 30px;}
    #logo-header{height: 60px;}

}