@charset "UTF-8";
/* CSS Document */



/* Styles spécifiques pour le slider Kimono-like - VERSION RESPONSIVE */
.section-slider {
  background-color: transparent;
  padding-top: 8rem; /* Réduit le padding-top excessif */
  padding-bottom: 4rem;
}

.swiper.heroSwiper {
  /* Dimensions responsives basées sur la viewport */
  height: 70vh; /* 60% de la hauteur de l'écran */
  max-height: 800px; /* Hauteur maximale pour les très grands écrans */
  min-height: 500px; /* Hauteur minimale pour les petits écrans */
  width: 100%;
  margin-bottom: 2rem;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintient le ratio et recadre si nécessaire */
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.swiper-slide:hover .slider-image {
  transform: scale(1.01);
}

/* Désactive les effets de survol pour les images spécifiques au slider */
.swiper-slide .slider-image {
  transition: none !important;
}

.swiper-slide .slider-image:hover {
  transform: none !important;
  filter: none !important;
}

/* Styles pour la pagination Swiper */
.swiper-pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
    z-index: 1000;
}

/* Ajoutez cette règle pour réduire la marge sur mobile */
@media (max-width: 768px) {
    .swiper-pagination {
        margin-top: 10px; /* Réduit la marge de 20px à 10px sur mobile */
    }
}

@media (max-width: 480px) {
    .swiper-pagination {
        margin-top: 8px; /* Encore plus petite sur très petits écrans */
    }
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
  .swiper.heroSwiper {
    height: 55vh;
    max-height: 600px;
  }
  
  .section-slider {
    padding-top: 6rem;
  }
}

@media (max-width: 1200px) {
  .swiper.heroSwiper {
    height: 50vh;
    max-height: 500px;
  }
  
  .section-slider {
    padding-top: 5rem;
  }
}

@media (max-width: 992px) {
  .swiper.heroSwiper {
    height: 45vh;
    max-height: 450px;
    min-height: 350px;
  }
  
  .section-slider {
    padding-top: 4rem;
  }
}

@media (max-width: 768px) {
  .swiper.heroSwiper {
    height: 90vh;
    max-height: 800px;
    min-height: 450px;
  }
  
  .section-slider {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }
  
  .slider-image {
    border-radius: 8px; /* Coins moins arrondis sur mobile */
  }
  
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 4px;
  }
}

@media (max-width: 480px) {
  .swiper.heroSwiper {
    height: 65vh;
    min-height: 350px;
  }
  
  .section-slider {
    padding-top: 2rem;
  }
}

/* Pour les très grands écrans (4K, etc.) */
@media (min-width: 1920px) {
  .swiper.heroSwiper {
    height: 65vh;
    max-height: 800px;
  }
  
  .section-slider {
    padding-top: 10rem;
  }
}
/*----CURSEUR DU SLIDER-----*/
.swiper.heroSwiper {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20"><rect x="10" y="8" width="30" height="4" rx="2" fill="white" stroke="rgba(64,142,176,1)" stroke-width="1"/><path d="M5 10l5-4v3h5v2h-5v3z" fill="rgba(64,142,176,1)"/><path d="M45 10l-5-4v3h-5v2h5v3z" fill="rgba(64,142,176,1)"/></svg>') 25 10, auto;
}
/* Désactiver le curseur sur mobile */
@media (max-width: 768px) {
    .swiper.heroSwiper {
        cursor: default;
    }
    
    .swiper-slide {
        cursor: default;
    }
}




/* --- Styles pour la Navigation (Navbar) --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* Fond transparent par défaut */
    padding: 15px 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;
}

/* Style de la navbar quand on scroll */
.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95); /* Blanc semi-transparent */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Ombre portée */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Logo à gauche, reste à droite */
    align-items: center;
    padding: 0 20px;
}

.logo {
    color: #333; /* Ou une autre couleur si souhaité */
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}

.nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Affiche les liens horizontalement sur grand écran */
}

.nav-links ul li {
    margin-left: 30px; /* Espacement entre les items */
}

.nav-links ul li a {
    color: #333; /* Couleur des liens par défaut */
    text-decoration: none;
    font-size: 16px;
    padding: 5px 0;
    transition: color 0.3s ease;
    display: block;
}

.nav-links ul li a:hover {
    color: #408EB0; /* Exemple de couleur au survol */
}

/* Styles pour le menu hamburger */
.hamburger-menu {
    display: none; /* Caché par défaut sur les grands écrans */
    cursor: pointer;
    padding: 10px;
}

.hamburger-menu .bar {
    width: 25px;
    height: 3px;
    background-color: #333; /* Couleur des barres du hamburger */
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* --- Media Queries pour le Responsive --- */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Cache les liens sur mobile par défaut */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 70px; /* Positionne le menu sous la navbar */
        left: 0;
        background-color: rgba(255, 255, 255, 0.98); /* Fond blanc quasi-transparent pour le menu ouvert */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 20px 0;
        border-top: 1px solid #eee;
        /* Ajoutez max-height et overflow pour un menu déroulant si nécessaire */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .nav-links.active {
        display: flex; /* Affiche les liens quand le menu est actif */
        max-height: 300px; /* Une hauteur suffisante pour contenir tous les liens */
    }

    .nav-links ul {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .nav-links ul li {
        margin: 10px 0; /* Espacement vertical pour les liens mobiles */
    }

    .hamburger-menu {
        display: block; /* Affiche le hamburger sur mobile */
    }

    /* Animation du hamburger en croix */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

.btn.gray.creative:hover {
    background-color: #408EB0; /* Ou le code hexadécimal de votre bleu désiré */
    color: #ffffff; /* Si le texte devient noir, assurez-vous qu'il reste blanc */
    /* Vous pouvez aussi ajuster la couleur de la bordure si elle existe */
    border-color: #408EB0;
}


/* Assurez-vous que ces sections occupent toute la largeur */
.section-slider,
.wptb-project {
    display: block; /* S'assurer qu'elles sont des éléments de bloc */
    width: 100%;    /* S'assurer qu'elles prennent toute la largeur disponible */
    box-sizing: border-box; /* Inclure padding et border dans la largeur */
    margin-bottom: 30px; /* Ajoutez un peu d'espace entre les sections si nécessaire */
}

/* Empile verticalement le titre et la galerie dans la section "Mes derniers travaux" */
.wptb-project > .container {
    flex-direction: column;
    align-items: center; /* Pour centrer le contenu comme le titre */
}

/* Optionnel : Ajustez l'espacement si nécessaire */
.wptb-project .wptb-heading {
    margin-bottom: 20px; /* Espace sous le titre */
}

.footer-bottom .social-box ul li {
    margin-right: 40px; /* Ajoute un espace à droite de chaque icône */
}

.footer-bottom .social-box ul li:last-child {
    margin-right: 0; /* Supprime l'espace à droite de la dernière icône */
}


/* Style pour le curseur personnalisé */
#bnz-pointer {
    position: fixed; /* Reste en place par rapport à la fenêtre de visualisation */
    width: 10px;     /* Taille du rond */
    height: 10px;    /* Taille du rond */
    background-color: #408EB0; /* Couleur bleue (la même que votre survol de bouton) */
    border-radius: 50%; /* Rend l'élément circulaire */
    pointer-events: none; /* Permet de cliquer à travers l'élément */
    transform: translate(-50%, -50%); /* Centre le rond sur les coordonnées de la souris */
    transition: transform 0.1s ease-out; /* Animation douce du mouvement */
    z-index: 9999; /* Assurez-vous qu'il est au-dessus de la plupart des éléments */
    opacity: 0; /* Caché par défaut */
}

/* Optionnel: pour le faire apparaître au survol du corps de la page 
body:hover #bnz-pointer {
    opacity: 1;
}
*/
/* Optionnel: pour un effet de taille au survol des liens/boutons */
a:hover #bnz-pointer,
button:hover #bnz-pointer,
.wptb-item--button a:hover #bnz-pointer { /* Spécifique pour vos boutons Book Appontment */
    transform: translate(-50%, -50%) scale(1.5); /* Agrandit le curseur au survol des éléments interactifs */
    background-color: #D70006; /* Change la couleur au survol des liens/boutons si vous voulez */
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-sizer,
.grid-item {
  width: 25%; /* 4 colonnes sur desktop */
}

@media (max-width: 768px) {
  .grid-sizer,
  .grid-item {
    width: 50%; /* 2 colonnes sur mobile */
  }
}


/* Centrer l'image et ajuster sa taille dans la section "À propos de moi" */
.wptb-about-two .wptb-item--inner img {
    max-width: 70%; /* Ajustez cette valeur pour la taille désirée de l'image */
    height: auto;
    display: block;
    margin: 0 auto; /* Cette règle centre l'image horizontalement */
}



/* Rapprocher les colonnes de l'image et du texte sur les grands écrans */
@media (min-width: 992px) { /* Applique ces styles à partir de la taille "large" de Bootstrap */
    .wptb-about-two .col-lg-6:first-child { /* La colonne qui contient l'image */
        padding-right: 5px; /* Réduit l'espace à droite de l'image */
    }

    .wptb-about-two .col-lg-6:last-child {  /* La colonne qui contient le texte */
        padding-left: 5px;  /* Réduit l'espace à gauche du texte */
    }
}

/* Ajustements pour les écrans plus petits */
@media (max-width: 991px) {
    .wptb-about-two .wptb-item--inner {
        margin-bottom: 20px; /* Ajoute un peu d'espace sous l'image lorsqu'elle est au-dessus du texte sur mobile */
    }
}

/* Styles pour le bouton "Retour en haut" */
.totop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    background-color: #408EB0; /* Votre couleur bleue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.totop:hover {
    background-color: #D70006; /* Votre couleur rouge au survol */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.totop a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.totop a:hover {
    color: white;
}

/* Afficher le bouton quand on scroll */
.totop.show {
    opacity: 1;
    visibility: visible;
}

/* Version mobile */
@media (max-width: 768px) {
    .totop {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    .totop a {
        font-size: 18px;
    }
}

/* Espacement pour le footer */
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px; /* Ajoute un espace entre les éléments */
}

/* Espacement pour les icônes sociales */
.social-box ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px; /* Espace entre chaque icône */
}

.social-box ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
}

.social-box ul li a:hover {
    background-color: #408EB0; /* Votre couleur bleue */
    transform: translateY(-2px);
}

/* Version mobile */
@media (max-width: 768px) {
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .social-box ul {
        justify-content: center;
    }
}

/* Espacement pour le footer - icônes à droite */
.footer-bottom-inner {
    display: flex !important;
    justify-content: space-between !important; /* Copyright à gauche, icônes à droite */
    align-items: center !important;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.copyright {
    flex: 1; /* Prend l'espace disponible à gauche */
    text-align: left;
}

.social-box {
    margin-left: auto !important; /* Force les icônes vers la droite */
    margin-right: 20px !important; /* Ajoute une marge à droite */
    flex-shrink: 0; /* Empêche la réduction de taille */
}

.social-box ul {
    display: flex !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px; /* Espace entre chaque icône */
    justify-content: flex-end !important; /* Aligne les icônes à droite */
}

.social-box ul li {
    margin: 0 !important; /* Supprime les marges par défaut */
}

.social-box ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-box ul li a:hover {
    background-color: #408EB0; /* Votre couleur bleue */
    transform: translateY(-2px);
    color: white;
}

/* Version mobile */
@media (max-width: 768px) {
    .footer-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px;
    }
    
    .copyright {
        text-align: center !important;
    }
    
    .social-box {
        margin-left: 0 !important;
    }
    
    .social-box ul {
        justify-content: center !important; /* Centré sur mobile */
    }
}


/* Section Instagram - force une ligne sur mobile */
.wptb-instagram--gallery .wptb-item--inner {
    flex-wrap: nowrap !important; /* Force les éléments sur une ligne */
    width: 100%;
}

.wptb-instagram--gallery .wptb-item {
    flex: 1; /* Chaque image prend un espace égal */
    flex-shrink: 1; /* Permet aux images de se rétrécir */
    min-width: 0; /* Permet aux images de devenir très petites si nécessaire */
}

.wptb-instagram--gallery .wptb-item .wptb-item--image {
    width: 100%;
    height: auto;
}

.wptb-instagram--gallery .wptb-item .wptb-item--image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 768px) {
    .wptb-instagram--gallery .wptb-item--inner {
        justify-content: space-between !important;
        gap: 2px; /* Très petit espace entre les images */
    }
    
    .wptb-instagram--gallery .wptb-item {
        flex: 1; /* Distribution égale de l'espace */
        max-width: calc(20% - 2px); /* 5 images = 20% chacune moins l'espace */
    }
}

/* Bouton Instagram plus petit sur mobile */
    .wptb-instagram--gallery .wptb-item--button .btn {
        font-size: 14px !important; /* Réduit la taille du texte */
        padding: 8px 16px !important; /* Réduit le padding */
    }
    
    .wptb-instagram--gallery .wptb-item--button .btn .text-first {
        font-size: 12px; /* Texte plus petit */
    }
    
    .wptb-instagram--gallery .wptb-item--button .btn i {
        font-size: 16px; /* Icônes plus petites */
    }

/* Version mobile footer */
@media (max-width: 768px) {
    .footer-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px;
    }
    
    .copyright {
        text-align: center !important;
    }
    
    .social-box {
        margin-left: 0 !important;
    }
    
    .social-box ul {
        justify-content: center !important; /* Centré sur mobile */
    }
}

/* LOGO */
.logo {
  color: #333;
  transition: color 0.3s ease;
}

.logo:hover {
  color: #408EB0; /* Par exemple ton bleu branding */
}

/* Corrections pour la galerie - Suppression du padding excessif sur grands écrans */

/* Section galerie - dimensions adaptées */
.gallery-section {
    background-color: #f8f9fa;
    padding: 60px 0; /* Padding uniforme au lieu de min-height */
    /* min-height: 100vh; SUPPRIMÉ - causait l'espace excessif */
}

.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Titre de la galerie */
.wptb-heading {
    margin-bottom: 40px; /* Réduit l'espace sous le titre */
}

.wptb-heading h1 {
    position: relative;
    padding-bottom: 15px; /* Réduit le padding */
    margin-bottom: 20px; /* Réduit la marge */
}

.wptb-heading h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background-color: #408EB0;
}

/* Masonry grid - optimisé pour grands écrans */
.gallery-grid {
    margin: 0 -10px;
}

.gallery-sizer,
.gallery-item {
    width: 25%;
    padding: 10px;
}

.gallery-item {
    margin-bottom: 0; /* Supprime la marge bottom excessive */
}

.gallery-item-inner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    /* Ratio maintenu pour cohérence */
    padding-bottom: 120%; /* Ratio ajusté pour éviter trop de hauteur */
    height: 0;
}

.gallery-item-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Images dans la galerie */
.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

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

/* Overlay au survol */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(64, 142, 176, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item-inner:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-icon {
    color: white;
    font-size: 2rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.gallery-item-inner:hover .gallery-overlay-icon {
    transform: scale(1);
}

/* Liens dans la galerie */
.gallery-item-inner a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Responsive pour différentes tailles d'écran */
@media (min-width: 1600px) {
    .gallery-section {
        padding: 80px 0; /* Padding plus important sur très grands écrans */
    }
    
    .gallery-container {
        max-width: 1600px; /* Container plus large */
    }
    
    .gallery-item-inner {
        padding-bottom: 100%; /* Ratio plus carré sur très grands écrans */
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .gallery-section {
        padding: 70px 0;
    }
    
    .gallery-item-inner {
        padding-bottom: 110%;
    }
}

@media (max-width: 1199px) {
    .gallery-section {
        padding: 60px 0;
    }
    
    .gallery-sizer,
    .gallery-item {
        width: 33.333%;
    }
}

@media (max-width: 768px) {
    .gallery-section {
        padding: 40px 0; /* Padding réduit sur mobile */
    }
    
    .gallery-sizer,
    .gallery-item {
        width: 50%;
    }
    
    .gallery-item-inner {
        height: auto !important;
        padding-bottom: 0 !important;
        min-height: 250px;
    }
    
    .gallery-item img {
        position: relative !important;
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease; /* Maintien de la transition */
    }
    
    /* Effets de survol maintenus sur mobile */
    .gallery-item-inner:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .gallery-item-inner:hover img {
        transform: scale(1.05);
    }
    
    .gallery-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(64, 142, 176, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .gallery-item-inner:hover .gallery-overlay {
        opacity: 1;
    }
    
    .gallery-overlay-icon {
        color: white;
        font-size: 2rem;
        transform: scale(0.8);
        transition: transform 0.3s ease;
    }
    
    .gallery-item-inner:hover .gallery-overlay-icon {
        transform: scale(1);
    }
    
    .gallery-item-inner a {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2;
    }
}

@media (max-width: 480px) {
    .gallery-section {
        padding: 30px 0;
    }
    
    .gallery-sizer,
    .gallery-item {
        width: 100%;
    }
    
    .gallery-grid {
        margin: 0 -5px;
    }
    
    .gallery-item {
        padding: 5px;
    }
}

/* Assure-toi que la section suivante n'a pas de marge excessive */
.gallery-section + section,
.gallery-section + .wptb-about-two,
.gallery-section + .footer {
    margin-top: 0 !important;
    padding-top: 60px; /* Espacement normal entre sections */
}


/* Aligner l'image et le contenu en haut */
@media (min-width: 768px) { /* Appliquer sur les écrans moyens et plus grands */
    .align-with-image-content {
        margin-top: 0 !important; /* Supprime la marge supérieure qui la pousse vers le bas */
        padding-top: 0 !important; /* S'assure qu'aucun rembourrage supérieur supplémentaire ne la pousse vers le bas */
    }

    .blog-details .row {
        align-items: flex-start; /* Aligne les éléments en haut de la ligne */
    }
}

.titre-presta {
    margin-top: 80px; /* Ajustez cette valeur selon vos besoins */
    margin-bottom: 30px; /* Vous pouvez également ajouter une marge inférieure si vous le souhaitez */
}

.wptb-heading h1 {
    position: relative;
    padding-bottom: 20px; /* Espace pour la ligne */
    margin-bottom: 40px; /* Espace après la ligne */
}
.wptb-heading h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Longueur de la ligne */
    height: 2px;
    background-color: #408EB0; /* Votre couleur d'accent */
}

@media (max-width: 767px) {
   

    /* Ou si c'est la section elle-même qui a une marge */
   section {
        margin-bottom: 30px;
    }
}

/* Ajustement de l'interlignage pour tous les textes sous les prix */

/* Pour les descriptions sous les titres de prix (balises <sub>) */
.wptb-packages1 sub {
    line-height: 1.3; /* Interligne plus serré */
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Pour les éléments de liste dans les packages */
.wptb-packages1 .wptb-list1 .wptb--item .wptb-item--text {
    line-height: 1.4; /* Interligne ajusté pour une meilleure lisibilité */
    margin-bottom: 8px; /* Espace entre chaque élément */
}

/* Espacement entre la liste et le bouton */
.wptb-packages1 .wptb-list1 {
    margin-bottom: 25px; /* Espace suffisant avant le bouton */
}

/* Bouton "Voir les détails" */
.wptb-packages1 .wptb-item--button {
    margin-top: 20px; /* Marge supplémentaire au-dessus du bouton */
    clear: both; /* S'assure que le bouton est bien en dessous */
}

/* Pour les titres de prix */
.wptb-packages1 .wptb-item--title {
    line-height: 1.2; /* Interligne serré pour les prix */
    margin-bottom: 15px;
}

/* Pour les sous-titres des packages */
.wptb-packages1 .wptb-item--subtitle {
    line-height: 1.3;
    margin-bottom: 5px;
}

/* Ajustements spécifiques pour mobile */
@media (max-width: 767px) {
    /* Descriptions sous les prix sur mobile */
    .wptb-packages1 sub {
        line-height: 1.2; /* Interligne encore plus serré sur mobile */
        font-size: 0.75em; /* Texte plus petit sur mobile */
		text-align: left;
    }
    
    /* Textes des éléments de liste sur mobile */
    .wptb-packages1 .wptb-list1 .wptb--item .wptb-item--text {
        line-height: 1.3; /* Interligne réduit sur mobile */
        font-size: 0.8em; /* Texte plus petit sur mobile */
		text-align: left;
    }
    
    /* Sous-titres des packages sur mobile */
    .wptb-packages1 .wptb-item--subtitle {
        font-size: 0.95em; /* Légèrement plus petit */
		text-align: left;
    }
    
    /* Espacement renforcé entre la liste et le bouton sur mobile */
    .wptb-packages1 .wptb-list1 {
        margin-bottom: 25px; /* Espace optimisé avec texte plus petit */
    }
    
    /* Bouton sur mobile */
    .wptb-packages1 .wptb-item--button {
        margin-top: 20px; /* Marge ajustée avec texte plus petit */
        padding-top: 10px; /* Padding supplémentaire */
    }
    
    /* Titres de prix sur mobile */
    .wptb-packages1 .wptb-item--title {
        line-height: 1.1;
        margin-bottom: 10px;
		text-align: left;
    }
}

/* Ajustements pour tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Descriptions sous les prix sur tablette */
    .wptb-packages1 sub {
        line-height: 1.25;
        font-size: 0.8em; /* Texte plus petit sur tablette */
		text-align: left; 
    }
    
    /* Textes des éléments de liste sur tablette */
    .wptb-packages1 .wptb-list1 .wptb--item .wptb-item--text {
        line-height: 1.35;
        font-size: 0.85em; /* Texte plus petit sur tablette */
		text-align: left;
    }
    
    /* Sous-titres des packages sur tablette */
    .wptb-packages1 .wptb-item--subtitle {
        font-size: 0.95em;
		text-align: left;
    }
    
    /* Espacement entre la liste et le bouton sur tablette */
    .wptb-packages1 .wptb-list1 {
        margin-bottom: 20px;
    }
    
    /* Bouton sur tablette */
    .wptb-packages1 .wptb-item--button {
        margin-top: 15px;
    }
}


/* Styles pour la section contact - image responsive */

/* Styles par défaut pour l'image de contact */
.wptb-contact-form .wptb-heading-two img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Tablettes - iPad et similaires */
@media (min-width: 768px) and (max-width: 1024px) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 80%; /* Réduit à 80% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
    }
    
    /* Optionnel : ajuster le conteneur pour centrer */
    .wptb-contact-form .wptb-heading-two .wptb-item--inner {
        text-align: center;
    }
}

/* Smartphones - tous les téléphones */
@media (max-width: 767px) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 80%; /* Réduit à 70% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
        margin-bottom: 20px; /* Ajoute un espace sous l'image */
    }
    
    /* Centre le conteneur de l'image */
    .wptb-contact-form .wptb-heading-two .wptb-item--inner {
        text-align: center;
    }
    
    /* Ajuste le padding du conteneur si nécessaire */
    .wptb-contact-form .wptb-heading-two {
        padding-right: 0; /* Supprime le padding-right sur mobile */
        margin-bottom: 30px; /* Ajoute de l'espace sous l'image avant le formulaire */
    }
}

/* Très petits écrans (iPhone SE, etc.) */
@media (max-width: 480px) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 60%; /* Encore plus petit sur très petits écrans */
        margin-bottom: 25px;
    }
}

/* Grands téléphones en mode paysage */
@media (max-width: 767px) and (orientation: landscape) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 50%; /* Plus petit en mode paysage */
        margin-bottom: 15px;
    }
}

/* Styles pour la section contact - image responsive */

/* Styles par défaut pour l'image de contact */
.wptb-contact-form .wptb-heading-two img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Tablettes - iPad et similaires */
@media (min-width: 768px) and (max-width: 1024px) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 80%; /* Réduit à 80% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
    }
    
    /* Optionnel : ajuster le conteneur pour centrer */
    .wptb-contact-form .wptb-heading-two .wptb-item--inner {
        text-align: center;
    }
}

/* Smartphones - tous les téléphones */
@media (max-width: 767px) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 70%; /* Réduit à 70% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
        margin-bottom: 20px; /* Ajoute un espace sous l'image */
    }
    
    /* Centre le conteneur de l'image */
    .wptb-contact-form .wptb-heading-two .wptb-item--inner {
        text-align: center;
    }
    
    /* Ajuste le padding du conteneur si nécessaire */
    .wptb-contact-form .wptb-heading-two {
        padding-right: 0; /* Supprime le padding-right sur mobile */
        margin-bottom: 30px; /* Ajoute de l'espace sous l'image avant le formulaire */
    }
}

/* Très petits écrans (iPhone SE, etc.) */
@media (max-width: 480px) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 60%; /* Encore plus petit sur très petits écrans */
        margin-bottom: 25px;
    }
}

/* Grands téléphones en mode paysage */
@media (max-width: 767px) and (orientation: landscape) {
    .wptb-contact-form .wptb-heading-two img {
        max-width: 50%; /* Plus petit en mode paysage */
        margin-bottom: 15px;
    }
}

/* ========================================== */
/* SECTION PRESTATIONS - Image responsive */
/* ========================================== */

/* Styles par défaut pour l'image de la section prestations */
.wptb-pricing .wptb-packages1 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Tablettes - iPad et similaires */
@media (min-width: 768px) and (max-width: 1024px) {
    .wptb-pricing .wptb-packages1 img {
        max-width: 80%; /* Réduit à 80% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
    }
    
    /* Centre le conteneur de l'image */
    .wptb-pricing .wptb-packages1 .wptb-item--holder {
        text-align: center;
    }
}

/* Smartphones - tous les téléphones */
@media (max-width: 767px) {
    .wptb-pricing .wptb-packages1 img {
        max-width: 70%; /* Réduit à 70% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
        margin-bottom: 20px; /* Ajoute un espace sous l'image */
    }
    
    /* Centre le conteneur de l'image */
    .wptb-pricing .wptb-packages1 .wptb-item--holder {
        text-align: center;
    }
    
    /* Ajuste l'espacement de la colonne contenant l'image */
    .wptb-pricing .col-lg-4:last-child {
        margin-top: 30px; /* Ajoute de l'espace au-dessus sur mobile */
    }
}

/* Très petits écrans (iPhone SE, etc.) */
@media (max-width: 480px) {
    .wptb-pricing .wptb-packages1 img {
        max-width: 60%; /* Encore plus petit sur très petits écrans */
        margin-bottom: 25px;
    }
}

/* Grands téléphones en mode paysage */
@media (max-width: 767px) and (orientation: landscape) {
    .wptb-pricing .wptb-packages1 img {
        max-width: 50%; /* Plus petit en mode paysage */
        margin-bottom: 15px;
    }
}

/* ========================================== */
/* SECTION ABOUT - À propos de moi */
/* ========================================== */

/* Styles par défaut pour la section À propos */
.wptb-contact-form.style2 {
    padding-top: 30px; /* Padding top standard */
    padding-bottom: 30px; /* Padding bottom standard */
}

/* Styles par défaut pour l'image de contact */
.wptb-contact-form .wptb-heading-two img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;  margin: 0 auto; /* Centre l'image */
}

/* Tablettes - iPad et similaires */
@media (min-width: 768px) and (max-width: 1024px) {
    .wptb-contact-form.style2 {
        padding-top: 20px; /* Réduit le padding top sur tablette */
        padding-bottom: 20px; /* Réduit le padding bottom sur tablette */
    }
    
    .wptb-contact-form .wptb-heading-two img {
        max-width: 80%; /* Réduit à 80% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
    }
    
    /* Optionnel : ajuster le conteneur pour centrer */
    .wptb-contact-form .wptb-heading-two .wptb-item--inner {
        text-align: center;
    }
    
    /* Réduit les marges du titre sur tablette */
    .wptb-contact-form .wptb-heading {
        margin-bottom: 30px; /* Réduit l'espace sous le titre */
    }
    
    .wptb-contact-form .wptb-heading h1 {
        margin-bottom: 20px; /* Réduit la marge du titre */
    }
}

/* Smartphones - tous les téléphones */
@media (max-width: 767px) {
    .wptb-contact-form.style2 {
        padding-top: 30px; /* Réduit significativement le padding top sur mobile */
        padding-bottom: 30px; /* Réduit significativement le padding bottom sur mobile */
    }
    
    .wptb-contact-form .wptb-heading-two img {
        max-width: 80%; /* Réduit à 70% de la largeur disponible */
        margin: 0 auto; /* Centre l'image */
        display: block;
        margin-bottom: 20px; /* Ajoute un espace sous l'image */
    }
    
    /* Centre le conteneur de l'image */
    .wptb-contact-form .wptb-heading-two .wptb-item--inner {
        text-align: center;
    }
    
    /* Ajuste le padding du conteneur si nécessaire */
    .wptb-contact-form .wptb-heading-two {
        padding-right: 0; /* Supprime le padding-right sur mobile */
        margin-bottom: 20px; /* Réduit l'espace sous l'image avant le texte */
    }
    
    /* Réduit les marges du titre sur mobile */
    .wptb-contact-form .wptb-heading {
        margin-bottom: 20px; /* Réduit l'espace sous le titre */
    }
    
    .wptb-contact-form .wptb-heading h1 {
        margin-bottom: 15px; /* Réduit la marge du titre */
        font-size: 1.8rem; /* Réduit légèrement la taille du titre sur mobile */
    }
    
    /* Réduit l'espace après le texte */
    .wptb-contact-form .wptb-item--description {
        margin-bottom: 15px; /* Réduit l'espace entre les paragraphes */
    }
    
    .wptb-contact-form p:last-child {
        margin-bottom: 0; /* Supprime la marge du dernier paragraphe */
    }
}

/* Très petits écrans (iPhone SE, etc.) */
@media (max-width: 480px) {
    .wptb-contact-form.style2 {
        padding-top: 20px; /* Encore plus petit sur très petits écrans */
        padding-bottom: 20px;
    }
    
    .wptb-contact-form .wptb-heading-two img {
        max-width: 80%; /* Encore plus petit sur très petits écrans */
        margin-bottom: 15px;
    }
    
    .wptb-contact-form .wptb-heading h1 {
        font-size: 1.6rem; /* Titre encore plus petit */
        margin-bottom: 10px;
    }
}

/* Grands téléphones en mode paysage */
@media (max-width: 767px) and (orientation: landscape) {
    .wptb-contact-form.style2 {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    .wptb-contact-form .wptb-heading-two img {
        max-width: 50%; /* Plus petit en mode paysage */
        margin-bottom: 15px;
    }
}

/* Styles pour centrer l'image dans la section prestations sur téléphones et tablettes */
@media (max-width: 991px) { /* Appliquer pour les écrans jusqu'à 991px de large (tablettes et téléphones) */
    .wptb-packages1 img.rounded {
        display: block; /* Convertit l'image en élément de type bloc */
        margin: 0 auto; /* Centre l'image horizontalement dans son conteneur */
    }
}

/* Optionnel : Ajuster la taille de l'image spécifiquement sur les petits téléphones */
@media (max-width: 767px) { /* S'applique aux écrans jusqu'à 767px de large (smartphones) */
    .wptb-packages1 img.rounded {
        max-width: 90%; /* Ajuste la largeur maximale de l'image à 90% de son conteneur */
        /* Vous pouvez modifier cette valeur (ex: 80%, 100%) selon le rendu souhaité */
    }
}

section .blog-details {padding-top: 10px;}