@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/*** Variables CSS pour une meilleure cohérence ***/
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --saar-primary: #13357b;
    --saar-red: #dd3333;
    --saar-gold: #D6B033;
    --saar-dark: #1a1a1a;
    --saar-light: #f8f9fa;
}

/*** Configuration globale de la typographie ***/
* {
    font-family: var(--font-primary);
}

body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em; /* Inter fonctionne mieux avec un léger espacement négatif */
}

/* Titres avec Inter - poids optimisés */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

h1 { font-weight: 700; font-size: 2.5rem; }
h2 { font-weight: 600; font-size: 2rem; }
h3 { font-weight: 600; font-size: 1.75rem; }
h4 { font-weight: 500; font-size: 1.5rem; }
h5 { font-weight: 500; font-size: 1.25rem; }
h6 { font-weight: 500; font-size: 1rem; }

/* Paragraphes et texte corporel */
p {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.7;
}

/* Boutons avec Inter */
.btn {
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: .3s ease;
}

/* Navigation avec Inter */
.navbar-brand {
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Links et navigation */
.nav-link, .navbar-nav .nav-link {
    font-family: var(--font-primary);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Formulaires */
.form-control, .form-select, .form-label {
    font-family: var(--font-primary);
}

/* Texte petit */
small, .small {
    font-family: var(--font-primary);
    font-weight: 300;
}

/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    left: 30px;
    bottom: 40px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
}

.back-to {
    position: fixed;
    right: 30px;
    bottom: 90px;
    display: flex;
    border-radius: 10%;
    align-items: center;
    justify-content: center;
}

.back-to-at {
    position: fixed;
    right: 30px;
    bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: initial;
}

#test-cont {
    z-index: 9999;
}

/*** Button Start ***/
.btn {
    font-family: var(--font-primary);
    font-weight: 500;
    transition: .3s ease;
    letter-spacing: -0.01em;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 50%;
}

.btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--saar-red);
    font-weight: 500;
}

.btn.btn-primary:hover {
    box-shadow: inset 300px 0 0 0 var(--saar-red) !important;
    color: var(--saar-gold) !important;
}

.btn.btn-light {
    box-shadow: inset 0 0 0 0 var(--saar-primary);
}

.btn.btn-light:hover {
    box-shadow: inset 300px 0 0 0 var(--saar-primary);
    color: var(--bs-light) !important;
}

.btn-hover {
    transition: 0.5s;
}

.btn-hover:hover {
    color: var(--bs-secondary) !important;
}

/*** Topbar Start ***/
.fixed-top .container {
    transition: 0.5s;
}

.topbar {
    padding: 2px 10px 2px 20px;
    background: var(--saar-primary) !important;
    font-family: var(--font-primary);
}

.topbar a,
.topbar a i {
    transition: 0.5s;
    font-family: var(--font-primary);
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-secondary) !important;
}

@media (max-width: 768px) {
    .topbar {
        display: none;    
    }
}
/*** Topbar End ***/

/*** Navbar ***/
.navbar-light .navbar-nav .nav-link {
    font-family: var(--font-primary);
    position: relative;
    padding: 35px 15px; 
    color: var(--bs-white) !important;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    outline: none;
    transition: .3s ease;
    z-index: 1000;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 15px;
    color: var(--bs-dark) !important;
    z-index: 1000;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-white) !important;
    z-index: 1000;
}

.navbar-light .navbar-brand h1 {
    color: var(--bs-white);
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sticky-top.navbar-light .navbar-brand h1 {
    color: var(--saar-red);
}

.navbar-light .navbar-brand img {
    max-height: 60px;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-brand img {
    max-height: 45px;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        border-radius: 10px;
        transition: .5s;
        opacity: 0;
        z-index: 1000;
        font-family: var(--font-primary);
    }
}

.dropdown .dropdown-menu a {
    font-family: var(--font-primary);
    font-weight: 400;
}

.dropdown .dropdown-menu a:hover {
    background: var(--saar-gold);
    color: var(--bs-white);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    transition: .5s;
    opacity: 1;
    z-index: 1000;
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative;
        background: var(--bs-white);
    }

    .navbar-light .navbar-brand h1 {
        color: var(--saar-primary);
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 8px 12px;
        border: 2px solid var(--saar-primary);
        border-radius: 6px;
        background-color: transparent;
        z-index: 1000;
        transition: all 0.3s ease;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Forcer l'affichage de l'icône hamburger Bootstrap */
    .navbar-toggler-icon {
        background-image: none !important;
        position: relative;
        width: 1.5em !important;
        height: 1.5em !important;
        transition: all 0.3s ease;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Solution de secours : icône hamburger en CSS pur */
    .navbar-toggler-icon::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 2px;
        background-color: var(--saar-primary);
        box-shadow: 0 6px 0 var(--saar-primary), 0 -6px 0 var(--saar-primary);
        transition: all 0.3s ease;
    }
    
    /* Animation de l'icône hamburger vers X */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        background-color: var(--saar-primary);
        box-shadow: none;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        width: 20px;
        height: 2px;
        background-color: var(--saar-primary);
    }
    
    .navbar.navbar-expand-lg .navbar-toggler:hover,
    .navbar.navbar-expand-lg .navbar-toggler:focus {
        background-color: var(--saar-primary);
        box-shadow: 0 2px 4px rgba(19, 53, 123, 0.2);
    }
    
    .navbar.navbar-expand-lg .navbar-toggler:hover .navbar-toggler-icon::before,
    .navbar.navbar-expand-lg .navbar-toggler:focus .navbar-toggler-icon::before {
        background-color: white;
        box-shadow: 0 6px 0 white, 0 -6px 0 white;
    }
    
    .navbar.navbar-expand-lg .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(19, 53, 123, 0.25);
    }

    .navbar-light .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid #DDDDDD;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        padding: 15px;
        z-index: 1000;
        position: relative;
        width: 100%;
        display: none !important;
    }
    
    .navbar-light .navbar-collapse.show {
        display: block !important;
    }
    
    /* Forcer le comportement Bootstrap sur mobile */
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }
    
    .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
    }
    
    /* S'assurer que le menu est en mode vertical sur mobile */
    .navbar-light .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100%;
    }
    
    /* Animation d'ouverture du menu */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Animation de fermeture du menu */
    @keyframes slideUp {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }
    
    /* Animation de fermeture */
    .navbar-light .navbar-collapse:not(.show) {
        animation: slideUp 0.3s ease-out;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Forcer la fermeture du menu */
    .navbar-collapse:not(.show) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 12px 15px;
        color: var(--bs-dark) !important;
        border-radius: 6px;
        margin: 2px 0;
        transition: all 0.3s ease;
        z-index: 1000;
        animation: fadeInUp 0.4s ease-out;
        animation-fill-mode: both;
    }
    
    /* Animation progressive des éléments du menu */
    .navbar-light .navbar-nav .nav-item:nth-child(1) .nav-link { animation-delay: 0.1s; }
    .navbar-light .navbar-nav .nav-item:nth-child(2) .nav-link { animation-delay: 0.2s; }
    .navbar-light .navbar-nav .nav-item:nth-child(3) .nav-link { animation-delay: 0.3s; }
    .navbar-light .navbar-nav .nav-item:nth-child(4) .nav-link { animation-delay: 0.4s; }
    .navbar-light .navbar-nav .nav-item:nth-child(5) .nav-link { animation-delay: 0.5s; }
    .navbar-light .navbar-nav .nav-item:nth-child(6) .nav-link { animation-delay: 0.6s; }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active  {
        color: var(--saar-primary) !important;
        background-color: rgba(19, 53, 123, 0.1);
        z-index: 1000;
    }

    .navbar-light .navbar-brand img {
        max-height: 45px;
    }
    
    /* Amélioration des dropdowns sur mobile */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: rgba(248, 249, 250, 0.95);
        border: 1px solid #e9ecef;
        border-radius: 6px;
        box-shadow: none;
    }
    
    .navbar-nav .dropdown-item {
        padding: 10px 20px;
        color: var(--bs-dark);
        border-radius: 4px;
        margin: 2px 0;
    }
    
    .navbar-nav .dropdown-item:hover {
        background-color: var(--saar-primary);
        color: white;
    }
    
    /* Styles pour les sous-menus sur mobile */
    .dropdown-submenu .dropdown-menu {
        position: static !important;
        margin-left: 20px;
        border-left: 2px solid var(--saar-primary);
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    /* Bouton "Gérer votre sinistre" sur mobile */
    .navbar .btn-primary {
        width: 100%;
        margin-top: 15px;
        padding: 12px 20px;
        font-size: 0.95rem;
        border-radius: 8px;
        animation: fadeInUp 0.4s ease-out 0.7s both;
        position: relative;
        overflow: hidden;
    }
    
    /* Effet de brillance sur le bouton */
    .navbar .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    
    .navbar .btn-primary:hover::before {
        left: 100%;
    }
    
    /* Amélioration de l'accessibilité tactile */
    .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }
    
    /* Espacement optimal pour les éléments de navigation */
    .navbar-nav .nav-item {
        margin: 3px 0;
    }
    
    /* Amélioration de la visibilité des dropdowns */
    .dropdown-toggle::after {
        margin-left: 0.5em;
        vertical-align: 0.15em;
    }
    
    /* Styles spécifiques pour les sous-menus complexes */
    .dropdown-submenu > .dropdown-toggle::after {
        transform: rotate(-90deg);
        margin-left: 0.3em;
    }
    
    .dropdown-submenu.show > .dropdown-toggle::after {
        transform: rotate(0deg);
    }
    
    /* Animation pour les sous-menus */
    .dropdown-submenu .dropdown-menu {
        transition: all 0.3s ease;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    
    .dropdown-submenu.show .dropdown-menu {
        opacity: 1;
        max-height: 500px;
    }
    
    /* Indicateur visuel pour les sous-menus */
    .dropdown-submenu > .dropdown-toggle {
        position: relative;
    }
    
    .dropdown-submenu > .dropdown-toggle::before {
        content: "▶";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8em;
        color: var(--saar-primary);
        transition: transform 0.3s ease;
    }
    
    .dropdown-submenu.show > .dropdown-toggle::before {
        transform: translateY(-50%) rotate(90deg);
    }
}

@media (min-width: 992px) {
    .navbar-light {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        z-index: 999;
    }
    
    .sticky-top.navbar-light {
        position: fixed;
        background: var(--bs-light);
    }

    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 0;
        bottom: -1px;
        left: 0;
        background: var(--saar-red);
        transition: .3s ease;
        z-index: -1;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        height: calc(100% + 1px);
        left: 1px;
    }

    .navbar-light .navbar-nav .nav-link.nav-contact::before {
        display: none;
        z-index: 1000;
    }
}

/*** Carousel Hero Header Start ***/
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next {
    background: transparent;
    z-index: initial;
}

.carousel-header .carousel-control-prev .carousel-control-prev-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50px;
    background-size: 60% 60%;
    z-index: initial;
}

.carousel-header .carousel-control-next .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0;
    background-size: 60% 60%;
    z-index: initial;
}

.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li {
    opacity: 0;
}

.carousel-header .carousel-inner .carousel-item {
    position: relative;
    min-height: 100vh;
}

/* .carousel-header .carousel-inner .carousel-item img { */
    /* position: absolute;
    width: 100%; */
    /* height: 100%; */
    /* max-height: 550px;
    object-fit: cover;
    z-index: initial;
} */

.carousel-header .carousel-inner .carousel-item .carousel-caption  {
    position: absolute;
    width: 100%;
    max-height: 800px;
    top: 0;
    left: 0;
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, 0.15)); */
    /* background: linear-gradient(rgba(19, 53, 123, 0.15), rgba(19, 53, 123, 0.15)), url(../img/accueil_1.png); */
    background: linear-gradient(rgba(19, 53, 123, 0.15), rgba(19, 53, 123, 0.15)), url(../img/accueil_saarci_t.jpeg);

    background-size: cover;
    z-index: initial;
    font-family: var(--font-primary);
} 





/* Style alternatif plus moderne (optionnel) */
.carousel-header.modern-style .carousel-inner .carousel-item .carousel-caption {
    background: linear-gradient(
        45deg,
        rgba(19, 53, 123, 0.1) 0%,
        rgba(214, 176, 51, 0.1) 100%
    );
    backdrop-filter: blur(5px);
}

.carousel-header.modern-style .carousel-caption .p-3 {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(214, 176, 51, 0.3);
    box-shadow: 
        0 10px 30px rgba(214, 176, 51, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}


/* .carousel-caption h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.carousel-caption p {
    font-weight: 400;
    font-size: 1.1rem;
} */

@media (max-width: 768px) {
    .carousel-header .carousel-inner .carousel-item {
        min-height: 50vh; /* Réduction de la hauteur pour mobile */
    }
    
    .carousel-header .carousel-inner .carousel-item img,
    .carousel-header .carousel-inner .carousel-item .carousel-caption {
        height: 50vh; /* Hauteur réduite et cohérente */
        margin-top: -50px; /* Ajustement du décalage */
        z-index: initial;
    }

    .carousel-header {
        height: 50vh !important; /* Hauteur du container ajustée */
        z-index: initial;
    }

    .carousel-header .carousel-control-prev .carousel-control-prev-icon,
    .carousel-header .carousel-control-next .carousel-control-next-icon {
        opacity: 0;
    }
    
    .search-bar {
        margin-top: -50px; /* Ajustement cohérent */
        transition: 0.5s;
    }
    
    /* Optimisation du contenu du carousel pour mobile */
    .carousel-header .carousel-inner .carousel-item .carousel-caption .p-3 {
        padding: 1rem !important; /* Réduction du padding */
        max-width: 100% !important; /* Utilisation de toute la largeur */
    }
    
    .carousel-header .carousel-inner .carousel-item .carousel-caption h1 {
        font-size: 1.8rem !important; /* Taille de titre adaptée */
        margin-bottom: 1rem !important;
    }
    
    .carousel-header .carousel-inner .carousel-item .carousel-caption p {
        font-size: 0.9rem !important; /* Texte plus petit sur mobile */
        margin-bottom: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .carousel-header .carousel-inner .carousel-item {
        min-height: 40vh; /* Encore plus petit pour très petits écrans */
    }
    
    .carousel-header .carousel-inner .carousel-item img,
    .carousel-header .carousel-inner .carousel-item .carousel-caption {
        width: 100%;
        height: 40vh; /* Hauteur cohérente */
    }
    
    .carousel-header {
        height: 40vh !important;
    }
    
    /* Typographie encore plus compacte */
    .carousel-header .carousel-inner .carousel-item .carousel-caption h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .carousel-header .carousel-inner .carousel-item .carousel-caption p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
}

.carousel-item img.img-fluid {
    width: 85%;
    height: auto;
    max-height: 550px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}
/*** Carousel Hero Header End ***/

/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    /* background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../img/assurance_auto.jpg); */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrum {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../img/assurance_auto.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-SA {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/thumbnail_sante.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-IA {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/individuel_accident.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-AV {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/assurance_voyage_2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-AH {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/assurance_habita.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-AT {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/assurance_transport.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-AC {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/assurance_caution.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-RD {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/RC.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-TA {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/assurance_halal.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-JB {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/assurance_loyers_impayes.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-AVI {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../../../media/img/virtual-assistant.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb-2 {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5)), url(../img/man-sinistre.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

/* Breadcrumb avec Inter */
.bg-breadcrumb .breadcrumb-item a {
    color: var(--saar-gold) !important;
    font-family: var(--font-primary);
    font-weight: 500;
}

.bg-breadcrumb-JB .breadcrumb-item a {
    color: var(--bs-secondary) !important;
    font-family: var(--font-primary);
}

.breadcrumb-item {
    font-family: var(--font-primary);
    font-weight: 400;
}
/*** Single Page Hero Header End ***/

/*** About Start ***/
.about .container .section-about-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--saar-primary);
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.about .container .section-about-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--saar-primary) !important;
}
/*** About End ***/

/*** Services Start ***/
.service .service-content-inner {
    transition: 0.3s ease;
    max-height: 60vh;
    min-height: 45vh;
}

.service .service-content-inner:hover {
    position: relative;
    background: var(--saar-gold) !important;
}

.service .service-content-inner .service-content h5,
.service .service-content-inner .service-content p,
.service .service-content-inner .service-icon i {
    transition: 0.3s ease;
    font-family: var(--font-primary) !important;
}

.service .service-content-inner .service-content h5 {
    font-weight: 600;
}

.service .service-content-inner .service-content p {
    font-weight: 400;
}

.service .service-content-inner:hover .service-content h5,
.service .service-content-inner:hover .service-content p,
.service .service-content-inner:hover .service-icon i {
    color: var(--bs-white);
}
/*** Service End ***/

/*** Destination Start ***/
.destination .tab-class .tab-content .tab-pane .destination-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: 1;
}

.destination .tab-class .tab-content .tab-pane .destination-img .destination-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    z-index: 3;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    justify-content: end;
    padding: 20px 20px 0 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.5s;
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon a i {
    opacity: 0;
    transition: 0.5s;
}

.destination .tab-class .nav-item {
    padding: 0 0 20px 0;
    z-index: initial;
}

.destination .tab-class .nav-item a {
    font-family: var(--font-primary);
    font-weight: 500;
}

.destination .tab-class .nav-item a.active {
    background: var(--saar-primary) !important;
    z-index: initial;
}

.destination .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
    z-index: initial;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon {
    background: rgba(19, 53, 123, 0.4);
}

.destination .tab-class .tab-content .destination-img:hover .destination-overlay {
    bottom: 0;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon a i {
    opacity: 1;
}

.destination .tab-class .tab-content .destination-img img {
    transition: 0.5s;
}

.destination .tab-class .tab-content .destination-img:hover img {
    transform: scale(1.2);
}
/*** Destination End ***/

/*** Packages Start ***/
.packages .packages-item .packages-img {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 1;
}

.packages .packages-item .packages-img .packages-info {
    background: rgba(0, 0, 0, .3);
    font-family: var(--font-primary);
}

.packages .packages-item .packages-img .packages-info small,
.packages .packages-item .packages-img .packages-info small i {
    color: var(--bs-white);
    transition: 0.5s;
    font-family: var(--font-primary);
    font-weight: 400;
}

.packages .packages-item .packages-img::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid;
    border-radius: 10px !important;
    visibility: hidden;
    transition: 0.7s;
    z-index: 3;
}

.packages .packages-item .packages-img:hover.packages-img::after {
    width: 100%;
    height: 100%;
    border: 300px solid;
    border-color: rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6);
    visibility: visible;
}

.packages .packages-item .packages-img small,
.packages .packages-item .packages-img small i {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover small,
.packages .packages-item .packages-img:hover small i {
    color: var(--bs-white) !important;
}

.packages .packages-item .packages-img img {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover img {
    transform: scale(1.3);
}

.packages .packages-item .packages-img .packages-price {
    position: absolute;
    width: 100px; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%);
    display: inline-block;
    background: var(--saar-primary);
    color: var(--bs-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
    z-index: 5;
    font-family: var(--font-primary);
    font-weight: 600;
}

.packages .packages-carousel {
    position: relative;
    z-index: initial;
}

.packages .packages-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -50px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--saar-primary);
    border-radius: 30px;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.packages .packages-carousel .owl-nav .owl-next {
    position: absolute;
    top: -50px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--saar-primary);
    border-radius: 30px;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.packages .packages-carousel .owl-nav .owl-prev i,
.packages .packages-carousel .owl-nav .owl-next i {
    color: var(--saar-primary);
    font-size: 17px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev:hover,
.packages .packages-carousel .owl-nav .owl-next:hover {
    background: var(--saar-primary);
}

.packages .packages-carousel .owl-nav .owl-prev:hover i,
.packages .packages-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}

/* Contenu des packages avec typographie améliorée */
.packages-content h5 {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.packages-content p {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}
/*** Packages End ***/

/*** Explore Tour Start ***/
.ExploreTour .tab-class .nav-item {
    padding: 0 0 20px 0;
    z-index: initial;
}

.ExploreTour .tab-class .nav-item a {
    font-family: var(--font-primary);
    font-weight: 500;
}

.ExploreTour .tab-class .nav-item a.active {
    background: var(--saar-primary) !important;
    z-index: initial;
}

.ExploreTour .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
    z-index: initial;
    font-family: var(--font-primary);
}

/* National Tour Start */
.ExploreTour #NationalTab-1 .national-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #NationalTab-1 .national-item img {
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #NationalTab-1 .national-item .national-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .2);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.ExploreTour #NationalTab-1 .national-item:hover .national-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #NationalTab-1 .national-item .national-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-plus-icon {
    opacity: 1;
}

.ExploreTour #NationalTab-1 .national-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 40px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--saar-primary);
    color: var(--bs-white);
    font-family: var(--font-primary);
    font-weight: 600;
}

/* International Tour Start */
.ExploreTour #InternationalTab-2 .international-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .international-item img {
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #InternationalTab-2 .international-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 30px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--saar-primary);
    color: var(--bs-white);
    font-family: var(--font-primary);
    font-weight: 600;
}

.ExploreTour #InternationalTab-2 .international-item .international-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #InternationalTab-2 .international-item .international-content .international-info a {
    font-size: 14px;
    font-family: var(--font-primary);
    font-weight: 400;
}

.ExploreTour #InternationalTab-2 .international-item .international-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-plus-icon {
    opacity: 1;
}

/* carousel Start */
.ExploreTour #InternationalTab-2 .InternationalTour-carousel .international-item {
    position: relative;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--saar-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot.active {
    width: 40px;
    background: var(--saar-primary);
}
/*** Explore Tour End ***/

/*** Gallery Start ***/
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery .gallery-item img {
    min-height: 300px;
    object-fit: cover;
}

.gallery .gallery-item .gallery-content {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.gallery .gallery-item .gallery-content .gallery-info {
    position: relative;
    margin-bottom: -100%;
    opacity: 0;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.gallery .gallery-item .gallery-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.gallery .gallery-item:hover .gallery-content .gallery-info,
.gallery .gallery-item:hover .gallery-plus-icon {
   opacity: 1;
   margin: 0;
}

.gallery .gallery-item img {
    transition: 0.5s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.2);
}

.gallery .gallery-item:hover .gallery-content {
    background: rgba(19, 53, 123, 0.8);
}

.gallery .tab-class .nav-item {
    padding: 0 0 20px 0;
    z-index: initial;
}

.gallery .tab-class .nav-item a {
    font-family: var(--font-primary);
    font-weight: 500;
}

.gallery .tab-class .nav-item a.active {
    background: var(--saar-primary) !important;
    z-index: initial;
}

.gallery .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
    z-index: initial;
}
/*** Gallery End ***/

/*** Tour Booking Start ***/
.booking {
    background: linear-gradient(rgba(19, 53, 123, .6), rgba(19, 53, 123, .6)), url(../img/man-sinistre.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.booking .container .section-booking-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.booking .container .section-booking-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.booking .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--saar-red);
    font-family: var(--font-primary);
    font-weight: 500;
}

.booking .container form .btn.btn-primary:hover {
    box-shadow: inset 800px 0 0 0 var(--saar-red) !important;
    color: var(--saar-primary) !important;
}

/* Formulaires avec Inter */
.booking form input,
.booking form select,
.booking form textarea {
    font-family: var(--font-primary);
    font-weight: 400;
}

.booking form label {
    font-family: var(--font-primary);
    font-weight: 500;
}
/*** Tour Booking end ***/

/*** Travel Guide Start ***/
.guide .guide-item .guide-img {
    position: relative;
}

.guide .guide-item .guide-img .guide-icon {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translate(-50%, -50%);
    margin-bottom: -50px;
    display: flex;
    justify-content: center;
    border: 1px solid var(--saar-primary);
    background: var(--bs-light);
    z-index: 9;
}

.guide .guide-item .guide-img .guide-img-efects {
    position: relative;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.guide .guide-item .guide-img .guide-img-efects::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-img-efects::after {
    height: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background: rgba(19, 53, 123, .5);
}

.guide .guide-item .guide-img-efects img {
    transition: 0.5s;
}

.guide .guide-item:hover .guide-img-efects img {
    transform: scale(1.1);
}

.guide .guide-item .guide-title {
    position: relative;
    background: var(--bs-light);
    transition: 0.5s;
    font-family: var(--font-primary);
}

.guide .guide-item .guide-title::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title::after {
    height: 100%;
    background: var(--saar-primary) !important;
    color: var(--bs-white);
}

.guide .guide-item .guide-title .guide-title-inner,
.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    transition: 0.5s;
    font-family: var(--font-primary);
}

.guide .guide-item .guide-title .guide-title-inner h4 {
    font-weight: 600;
}

.guide .guide-item:hover .guide-title .guide-title-inner {
    position: relative;
    color: var(--bs-white) !important;
    z-index: 2;
}

.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    color: var(--bs-white);
}
/*** Travel Guide End ***/

/*** Blog Start ***/
.blog .blog-item .blog-img {
    position: relative;
    max-width: 70vh;
    max-height: 50vh;
}

.blog .blog-item .blog-img .blog-info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    background: rgba(255, 255, 255, .2);
    color: var(--bs-white);
    font-family: var(--font-primary);
}

.blog .blog-item .blog-img .blog-img-inner {
    position: relative;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    max-width: 70vh;
    max-height: 50vh;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon a {
    opacity: 1;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon {
    height: 100%;
    background: rgba(19, 53, 123, .6);
    opacity: 1;
}

.blog .blog-item .blog-img .blog-img-inner {
    overflow: hidden;
}

.blog .blog-item .blog-img .blog-img-inner img {
    transition: 0.5s;
    max-width: 70vh;
    max-height: 50vh;
}

.blog .blog-item .blog-img:hover .blog-img-inner img {
    transform: scale(1.2);
}

/* Contenu blog avec typographie améliorée */
.blog .blog-content h5 {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.blog .blog-content p {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}

.blog .blog-content .blog-info {
    font-family: var(--font-primary);
    font-weight: 300;
}
/*** Blog End ***/

/*** Testimonial Start ***/
.testimonial .testimonial-carousel {
    position: relative;
    z-index: initial;
}

.testimonial .testimonial-carousel .testimonial-item .testimonial-img {
    position: relative;
    width: 100px; 
    height: 100px; 
    top: 0; left: 50%; 
    transform: translate(-50%, -50%);
    border: 3px solid var(--saar-gold);
    border-style: dotted;
    border-radius: 50%;
}

.testimonial .testimonial-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial .testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--saar-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-dot.active {
    width: 40px;
    background: var(--saar-gold);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -55px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--saar-primary);
    border-radius: 30px;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-next {
    position: absolute;
    top: -55px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--saar-primary);
    border-radius: 30px;
    transition: 0.5s;
    font-family: var(--font-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev i,
.testimonial .testimonial-carousel .owl-nav .owl-next i {
    color: var(--saar-primary);
    font-size: 17px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--saar-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover i,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-comment {
    background: var(--saar-gold) !important;
    color: var(--bs-white);
    transition: 0.5s;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-img {
    border: 3px solid var(--bs-white); 
    border-style: dotted;
    transition: 0.5s;
}

/* Noms et métiers dans les témoignages */
.testimonial-item h5 {
    font-family: var(--font-primary);
    font-weight: 600;
}

.testimonial-item p {
    font-family: var(--font-primary);
    font-weight: 300;
}
/*** Testimonial End ***/

/*** Contact Start ***/
.contact .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 var(--saar-primary);
    font-family: var(--font-primary);
    font-weight: 500;
}

.contact .container form .btn.btn-primary:hover {
    box-shadow: inset 1000px 0 0 0 var(--bs-light) !important;
    color: var(--saar-primary) !important;
}

/* Formulaires de contact avec Inter */
.contact form input,
.contact form select,
.contact form textarea {
    font-family: var(--font-primary);
    font-weight: 400;
}

.contact form label {
    font-family: var(--font-primary);
    font-weight: 500;
}

.contact h2, .contact h3 {
    font-family: var(--font-primary);
    font-weight: 600;
}
/*** Contact End ***/

/*** Subscribe Start ***/
.subscribe {
    background: linear-gradient(rgba(19, 53, 123, .6), rgba(19, 53, 123, .6)), url(../img/man-sinistre.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.subscribe .subscribe-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.subscribe .subscribe-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.subscribe .subscribe-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-white) !important;
}
/*** Subscribe End ***/

/*** Footer Start ***/
.footer {
    background: var(--bs-dark);
    font-family: var(--font-primary);
}

.footer .footer-item a {
    line-height: 30px;
    color: var(--bs-white);
    transition: 0.5s;
    font-family: var(--font-primary);
    font-weight: 400;
}

.footer .footer-item a:hover {
    letter-spacing: 2px;
    color: var(--saar-gold);
}

.footer h5 {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--bs-white);
}

.footer p {
    font-family: var(--font-primary);
    font-weight: 400;
    color: #adb5bd;
}
/*** Footer End ***/

/*** Copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark) !important;
    font-family: var(--font-primary);
}

.titre {
    color: var(--saar-red);
    font-family: var(--font-primary);
    font-weight: 600;
}

.test_img {
    width: 200px;
    height: auto;
}

fieldset, legend {
    all: revert;
    font-family: var(--font-primary);
}

.required::after {
    content: '   *';
    color: red;
}

/* CHAT BOT CSS */
#chat4 .form-control {
    border-color: transparent;
    font-family: var(--font-primary);
}

#chat4 .form-control:focus {
    border-color: transparent;
    box-shadow: inset 0px 0px 0px 1px transparent;
}

.divider:after,
.divider:before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee;
}

.navbar {
    z-index: 1000;
}

#chatSection {
    display: block;
    width: 90%;
    max-width: 400px;
    height: 75%;
    max-height: 70vh;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: white;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
    font-family: var(--font-primary);
}

#chat4 .card-body {
    height: 50vh;
    width: 90vw;
    max-width: 400px;
    overflow-y: auto;
    padding: 10px;
    font-family: var(--font-primary);
}

#chat4 .card-body .p-2 {
    max-width: 100%;
    word-wrap: break-word;
    font-size: 0.9rem;
    font-family: var(--font-primary);
    font-weight: 400;
}

#chat4 {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    font-family: var(--font-primary);
}

.tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: #B4B4B8;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8em;
    z-index: 9999;
    font-family: var(--font-primary);
    font-weight: 400;
}

.btn:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    #chat4 .card-body {
        width: 100vw;
        height: 45vh; /* Réduction de la hauteur */
        overflow-y: auto;
        padding: 8px; /* Réduction du padding */
    }

    #chatSection {
        max-width: 100%;
        max-height: 100%;
        width: 100vw;
        height: 65vh; /* Réduction de la hauteur totale */
        right: 0;
        bottom: 0;
        border-top-left-radius: 15px; /* Coins arrondis plus marqués */
        border-top-right-radius: 15px;
    }

    #chat4 .card-body .p-2 {
        max-width: 90%;
        font-size: 0.85rem; /* Texte plus petit sur mobile */
        padding: 8px 12px; /* Padding ajusté */
    }
    
    /* Optimisation de l'en-tête du chat */
    #chat4 .card-header {
        padding: 10px 15px; /* Réduction du padding */
    }
    
    #chat4 .card-header h4 {
        font-size: 1.1rem; /* Titre plus petit */
        margin: 0;
    }
    
    /* Optimisation du footer du chat */
    #chat4 .card-footer {
        padding: 8px 12px; /* Réduction du padding */
    }
    
    #chat4 .card-footer textarea {
        font-size: 0.9rem; /* Texte plus petit dans le textarea */
        min-height: 60px; /* Hauteur minimale réduite */
    }
    
    /* Boutons de contrôle plus grands pour mobile */
    #chatToggle {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    #back-to-at {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
}

/* Media query spécifique pour très petits écrans */
@media (max-width: 480px) {
    #chatSection {
        height: 60vh; /* Encore plus compact */
    }
    
    #chat4 .card-body {
        height: 40vh;
        padding: 6px;
    }
    
    #chat4 .card-body .p-2 {
        font-size: 0.8rem;
        padding: 6px 10px;
        max-width: 95%; /* Plus d'espace utilisé */
    }
    
    #chat4 .card-footer textarea {
        min-height: 50px;
        font-size: 0.85rem;
    }
}

#chatToggle {
    background-color: var(--saar-primary);
    box-shadow: inset 0 0 0 0 var(--saar-primary) !important;
    font-family: var(--font-primary);
    font-weight: 500;
}

#chatToggle:hover {
    color: #FFF;
    background-color: var(--saar-red);
    border-color: var(--saar-red);
}

#chatToggle:focus {
    color: #FFF;
    background-color: var(--saar-gold);
    border-color: var(--saar-gold);
}

.chat-notification {
    display: none;
    position: absolute;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    z-index: initial;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateY(10px);
    font-family: var(--font-primary);
    font-weight: 400;
}

.chat-notification.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ACTUALITES et BLOG */
.blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--font-primary);
}

.blog-img-inner img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

/* Améliorations responsives pour les images */
@media (max-width: 768px) {
    .blog-img-inner img {
        height: 180px; /* Réduction de la hauteur sur mobile */
    }
    
    .packages-img img {
        height: 160px; /* Optimisation pour mobile */
    }
}

@media (max-width: 480px) {
    .blog-img-inner img {
        height: 150px; /* Encore plus petit pour très petits écrans */
    }
    
    .packages-img img {
        height: 140px;
    }
}

.blog-item .blog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
}

.blog-item .blog-content h5 {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.blog-item .blog-content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}

/* PACKAGES/ACTUALITES */
.packages-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--font-primary);
}

.packages-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.packages-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}

.packages-content h5 {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.packages-content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .packages-img img {
        height: 150px;
    }
    .packages-content {
        min-height: 180px;
    }
}

/* Background styling */
body {
    background-image: url("../img/fond_1.png");
    background-size: cover;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
    font-family: var(--font-primary);
}

.contact {
    background-image: url("../img/ca_peut.jpg") !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.takaful {
    background-image: url("../img/fond_1.png") !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

/* Dropdown submenu styling */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -0.25rem;
    display: none !important;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    font-family: var(--font-primary);
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
}

.dropdown-submenu .dropdown-menu a {
    font-family: var(--font-primary);
    font-weight: 400;
}

/*** Améliorations typographiques spécifiques SAAR ***/

/* Sections titles avec style corporate */
.section-title {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--saar-primary);
    position: relative;
    margin-bottom: 2rem;
}

/* Cards et contenus */
.card {
    font-family: var(--font-primary);
}

.card-title {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.card-text {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}

/* Listes et éléments de navigation */
.list-group-item {
    font-family: var(--font-primary);
    font-weight: 400;
}

/* Badges et labels */
.badge {
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.label, .form-label {
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Tables */
.table {
    font-family: var(--font-primary);
}

.table th {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.table td {
    font-weight: 400;
}

/* Alertes et messages */
.alert {
    font-family: var(--font-primary);
    font-weight: 400;
}

.alert-heading {
    font-family: var(--font-primary);
    font-weight: 600;
}

/* Modals */
.modal-title {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.modal-body {
    font-family: var(--font-primary);
    font-weight: 400;
}

/* Pagination */
.page-link {
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Accordions */
.accordion-button {
    font-family: var(--font-primary);
    font-weight: 500;
}

.accordion-body {
    font-family: var(--font-primary);
    font-weight: 400;
}

/* Optimisations supplémentaires pour la lisibilité */
@media (max-width: 768px) {
    /* Titres principaux */
    h1 { 
        font-size: 2.2rem; 
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    h2 { 
        font-size: 1.9rem; 
        line-height: 1.3;
        margin-bottom: 0.8rem;
    }
    h3 { 
        font-size: 1.6rem; 
        line-height: 1.3;
        margin-bottom: 0.7rem;
    }
    h4 { 
        font-size: 1.3rem; 
        line-height: 1.4;
    }
    h5 { 
        font-size: 1.1rem; 
        line-height: 1.4;
    }
    
    /* Navigation */
    .navbar-brand h1 {
        font-size: 1.6rem;
    }
    
    /* Sections principales */
    .section-title {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    /* Texte corporel */
    p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    /* Boutons */
    .btn {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
    
    .btn-lg {
        font-size: 1rem;
        padding: 12px 25px;
    }
}

@media (max-width: 576px) {
    /* Titres encore plus compacts */
    h1 { 
        font-size: 1.9rem; 
        line-height: 1.2;
    }
    h2 { 
        font-size: 1.6rem; 
        line-height: 1.3;
    }
    h3 { 
        font-size: 1.4rem; 
        line-height: 1.3;
    }
    h4 { 
        font-size: 1.2rem; 
        line-height: 1.4;
    }
    h5 { 
        font-size: 1rem; 
        line-height: 1.4;
    }
    
    .navbar-brand h1 {
        font-size: 1.4rem;
    }
    
    /* Texte plus compact */
    p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Boutons plus compacts */
    .btn {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
    
    /* Cards et contenus */
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
}

/* Optimisations des espacements pour mobile */
@media (max-width: 768px) {
    /* Containers et sections */
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-3 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Marges des sections */
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    /* Grilles et colonnes */
    .row.g-5 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
    
    .row.g-4 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
    
    /* Cards et contenus */
    .card {
        margin-bottom: 1rem;
    }
    
    .blog-content,
    .packages-content {
        padding: 1rem !important;
    }
    
    /* Footer optimisé */
    .footer .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .footer-item {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 576px) {
    /* Espacements encore plus compacts */
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .py-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Marges réduites */
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    /* Grilles très compactes */
    .row.g-5 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    .row.g-4 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    /* Contenus plus compacts */
    .blog-content,
    .packages-content {
        padding: 0.75rem !important;
    }
    
    /* Testimonials compacts */
    .testimonial-item {
        padding: 1rem;
    }
    
    /* Formulaires optimisés */
    .form-floating {
        margin-bottom: 1rem;
    }
    
    .form-control {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

/* Améliorations tactiles et accessibilité mobile */
@media (max-width: 768px) {
    /* Boutons tactiles optimisés (minimum 44px) */
    .btn,
    .navbar-toggler,
    .carousel-control-prev,
    .carousel-control-next {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation; /* Optimisation tactile */
    }
    
    /* Links et éléments cliquables */
    a, 
    button,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        touch-action: manipulation;
    }
    
    /* Navigation tactile améliorée */
    .navbar-nav .nav-link {
        padding: 12px 15px; /* Plus d'espace tactile */
    }
    
    /* Dropdown tactile */
    .dropdown-menu {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        margin-top: 8px;
    }
    
    .dropdown-item {
        padding: 12px 20px; /* Plus d'espace tactile */
        font-size: 0.95rem;
    }
    
    /* Carousels tactiles */
    .owl-nav .owl-prev,
    .owl-nav .owl-next {
        min-width: 50px;
        min-height: 50px;
        border-radius: 50%;
    }
    
    /* Formulaires tactiles */
    .form-control,
    .form-select {
        min-height: 48px; /* Hauteur tactile optimale */
        font-size: 16px; /* Évite le zoom sur iOS */
    }
    
    /* Éléments interactifs */
    .blog-icon a,
    .packages-price,
    .testimonial-carousel .owl-dot {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Amélioration des focus states pour tactile */
    .btn:focus,
    .form-control:focus,
    .nav-link:focus {
        outline: 2px solid var(--saar-gold);
        outline-offset: 2px;
    }
    
    /* Suppression des effets hover sur tactile */
    @media (hover: none) {
        .btn:hover,
        .nav-link:hover,
        .dropdown-item:hover {
            background-color: initial;
            color: initial;
        }
    }
}

/* Amélioration de la hiérarchie visuelle */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Lead text styling */
.lead {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Text utilities avec Inter */
.text-muted {
    font-family: var(--font-primary);
    font-weight: 300;
}

.fw-bold, .font-weight-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-light {
    font-weight: 300 !important;
}

/* Améliorations pour les CTA (Call to Action) */
.cta-button {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 12px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Styling pour les prix et offres */
.price-text {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--saar-red);
    font-size: 1.5rem;
}

.offer-text {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--saar-gold);
}

/* Améliorations pour les formulaires */
.form-floating label {
    font-family: var(--font-primary);
    font-weight: 400;
}

.form-control:focus {
    border-color: var(--saar-gold);
    box-shadow: 0 0 0 0.2rem rgba(214, 176, 51, 0.25);
}

.form-select:focus {
    border-color: var(--saar-gold);
    box-shadow: 0 0 0 0.2rem rgba(214, 176, 51, 0.25);
}

/* Amélioration des transitions globales */
* {
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Accessibilité et contraste améliorés */
/* .text-primary {
    color: var(--saar-primary) !important;
} */

.bg-entete {
    background-color: #dd3333 !important;
}

.border-primary {
    border-color: var(--saar-primary) !important;
}

/* Style pour les citations et témoignages */
blockquote {
    font-family: var(--font-primary);
    font-weight: 400;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Footer amélioré */
.footer-brand {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--saar-gold);
}

.footer-description {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.7;
    color: #adb5bd;
}

/* Call-to-action sections */
.cta-section {
    background: linear-gradient(135deg, var(--saar-primary) 0%, var(--saar-red) 100%);
    color: white;
    font-family: var(--font-primary);
}

.cta-section h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cta-section p {
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Optimisation finale pour les performances */
.font-display-swap {
    font-display: swap;
}