@media only screen and (min-width: 768px) {
	.nav-box {
		display:block !important;
		height:auto !important;
	}
}
@media only screen and (max-width: 1440px) {
	.welcome-title {
		font-size: 100px;
		margin-bottom:20px;
	}
	.next-section {
	/*	bottom: auto; */
	}
	.welcome-title:before {
		margin: 20px auto 5px;
	}
	.welcome-first {
		font-size: 26px;
	}
	.welcome-box p {
		margin-bottom: 20px;
	}
	.navbar-nav li a {
		font-size: 15px;
	}
	.subscribe-row h5 {
		font-size:18px;
	}
	.wide-col-laptop {
		-ms-flex: 0 0 85%;
		flex: 0 0 85%;
		max-width: 85%;
	}
	.service-box h3 {
		font-size:18px;
	}
	
	/* Taille de titre ajustée pour grand écran */
	h1, h2 {
		font-size: 30px;
		line-height: 1.2;
		margin-bottom: 15px;
	}
	
	/* Sous-titre plus petit et bien différencié */
	.title-block span {
		font-size: 18px;
		letter-spacing: 1px;

		display: block;
		opacity: 0.9;
	}
	
	.title-block p {
		line-height: 1.6;
	}
	.title-block {
		margin-bottom:25px;
	}
	.service-icon {
		width:80px;
		line-height:80px;
		font-size:30px;
		margin: 0 auto;
	}
	.service-box {
		padding:30px 20px;
	}
	.testimonial-content {
		font-size:18px;
	}
	.owl-carousel .owl-item .client-img img {
		max-width:80px;
	}
	.gallery-section {
		padding-top:10px;
	}
}
@media only screen and (max-width: 1199px) {
	#fp-nav.fp-right {
		right:5px;
	}
	.welcome-title:before {
		margin: 20px auto 15px;
	}
	.wide-col-laptop {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.about-img {
		margin-right:0;
	}
	.welcome-title {
		font-size:80px;
	}
	.welcome-title:after {
		margin-top:15px;
	}
	.welcome-box {
		font-size:18px;
	}
	
	/* Taille de titre ajustée pour écran moyen */
	h1, h2 {
		font-size: 28px;
		line-height: 1.2;
	}
	
	/* Sous-titre plus distinct */
	.title-block span {
		font-size: 17px;
		font-weight: 400;
		opacity: 0.85;
	}
	
	.counter-box {
		font-size:13px;
	}
	.count-number, .counted {
		margin-bottom:5px;
	}
	.owl-nav {
		margin-top: 35px;
	}
	.testimonial-content {
		font-size: 16px;
		padding:20px 25px;
	}
	.testimonials-section {
		padding-top:10px;
	}
	.owl-carousel .owl-dots {
		margin-top:35px;
	}
	.social-icons li a {
	  width:25px;
	  height:30px;
	  display:inline-block;
	  line-height:30px;
	  text-align:center;
	  background: rgba(255, 255, 255, 0.1);
	  color: rgba(255,255,255,1);
	  font-size:14px;
	}
	.menu-trigger {
		margin:0;
	}
}
@media only screen and (max-width: 991px) {
	#fp-nav.fp-right {
		right:5px;
	}
	.welcome-title:before {
		margin: 20px auto 15px;
	}
	.wide-col-laptop {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.about-img {
		margin-right:0;
	}
	.welcome-title {
		font-size:80px;
	}
	.welcome-title:after {
		margin-top:15px;
	}
	.welcome-box {
		font-size:18px;
	}
	
	/* Taille de titre ajustée pour tablette */
	h1, h2 {
		font-size: 26px;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	
	/* Sous-titre encore plus distinct pour tablette */
	.title-block span {
		font-size: 16px;
		opacity: 0.8;
		display: block;
		letter-spacing: 1.5px;
	}
	
	/* Espacement du bloc titre */
	.title-block {
		margin-bottom: 30px;
	}
	.counter-box {
		font-size:13px;
	}
	.count-number, .counted {
		margin-bottom:5px;
	}
	.owl-nav {
		margin-top: 35px;
	}
	.testimonial-content {
		font-size: 16px;
		padding:20px 25px;
	}
	.testimonials-section {
		padding-top:10px;
	}
	.owl-carousel .owl-dots {
		margin-top:35px;
	}
	.social-icons li a {
	  width:25px;
	  height:30px;
	  display:inline-block;
	  line-height:30px;
	  text-align:center;
	  background: rgba(255, 255, 255, 0.1);
	  color: rgba(255,255,255,1);
	  font-size:14px;
	}
	.menu-trigger {
		margin:0;
	}
	.navbar {
		padding: 12px 0;
	}
	#navigation button {
		background: transparent;
		border: none;
	}
	.navbar-nav li a {
		font-size: 14px;
	}
	.navbar-nav li {
		margin-left: 15px;
	}
	.footer-right {
		font-size:13px;
	}
	.owl-nav > button {
		width: 40px;
		height: 40px;
	}
	.owl-nav > button:after {
		width:12px;
		height:12px;
		left:17px;
		top:13px;
	}
	.owl-nav > button.owl-next:after {
		left:11px;
	}
	.contact-box h4 {
		font-size:20px;
	}
	.contact-row {
		padding: 10px 15px!important;
		font-size:13px;
		margin-bottom: 15px;
	}
	.facts-row > .row > div {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width:100%;
	}
	#ajax-contact {
		margin-top: 20px;
	}
	#ajax-contact input {
		margin-bottom: 20px;
	}
	.contact-row i {
		font-size: 25px;
		width:45px;
	}
	.contact-row i.fa-envelope {
		font-size: 20px;
	}
	.container-fluid {
		padding:0 15px;
	}
	.skills-ul {
		top: 0;
	}
	.contact-row {
		padding: 42px 45px;
	}
	.service-block .row {
		align-items: center !important;
	}
	
	.service-block.compact .row {
		flex-direction: column;
	}
	
	.service-block.compact .col-4,
	.service-block.compact .col-8 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}
	.service-block.compact .col-4 {
        display: flex;
        align-items: center;
    }
	
	.service-block.compact h3 {
		text-align: center;
		margin-bottom: 15px;
	}
	
	.service-block.compact .serviceRow {
		margin-bottom: 15px;
	}
	
	/* Styles pour les pack tabs */
	#slide04 .pack-tab-wrapper {
		margin-bottom: 0px !important;
	}
	
	#slide04 .pack-tab {
		transition: all 0.3s ease;
		cursor: pointer;
	}
	
	#slide04 .pack-details-wrapper {
		margin-top: 20px;
	}
	
	.pack-tab {
		margin-bottom: 0px;
	}
	
	.pack-visual {
		margin-bottom: 20px;
	}
	
	.contact-row {
		padding: 15px !important;
		display: flex;
		align-items: center;
	}
}
@media only screen and (max-width: 767px) {
	#header {
		position: fixed;
		top: 0;
		z-index: 6666;
		background-color: transparent;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		width: 100%;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	#header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: -1;
	}
	
	/* Masquer le logo quand on est en haut de la page */
	body.fp-viewing-slide01 #header a#logo {
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	body:not(.fp-viewing-slide01) #header a#logo {
		opacity: 1;
		transition: opacity 0.3s ease;
	}
	
	#navigation button i {
		color: #fff;
	}
	
	.welcome-box {
		padding: 150px 0px;
	}
	
	#logo {
		color: #fff;
	}
	
	.navbar-toggle {
		padding: 0;
		margin: 0;
		color: #fff;
		font-size: 28px;
		position: absolute;
		right: 0;
		top: 50%;
		background: none;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		display: block;
		box-shadow: none;
		border: 0;
		outline: none;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	#header {
		padding: 0;
	}
	
	.navbar {
		padding: 12px 0;
	}
	
	.navbar-toggle:hover {
		color: #007bff;
	}
	
	.navbar-toggle:focus {
		outline: none;
	}
	
	.navbar-nav {
		margin: 0;
	}
	
	.collapse:not(.show) {
		display: none;
	}
	
	.navigation-menu > li {
		display: block;
		margin: 0;
		font-size: 15px;
		text-align: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	
	.navigation-menu > li:last-child {
		border-bottom: none;
	}
	
	.navigation-menu > li > a {
		color: #fff;
		padding: 15px;
		line-height: 1.2;
		transition: all 0.3s ease;
	}
	
	.navigation-menu > li > a:hover {
		color: #fff;
		background-color: rgba(255, 255, 255, 0.1);
	}
	
	/* Style pour l'élément actif en mobile - supprimer le pseudo-élément ::before */
	.navigation-menu > li.active {
		position: relative;
		background: #826eff;
		border-radius: 6px;
	}
	
	/* Supprimer explicitement le ::before pour les LI actifs en mobile */
	.navigation-menu > li.active::before {
		display: none;
	}
	
	.navigation-menu > li.active > a {
		color: #fff;
		font-weight: 600;
	}
	
	.navbar-nav {
		overflow-y: auto;
		display: block;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		max-height: 70vh;
		border-radius: 0 0 10px 10px;
	}
	
	.navbar-nav li a:after {
		display: none;
	}
	
	.nav-box {
		position: absolute;
		left: -15px;
		right: -15px;
		border: 0;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		text-align: left;
		top: 100%;
		display: none;
		border-radius: 0 0 10px 10px;
	}
	
	/* Appliquer le flou à tous les éléments du menu (LI compris) */
	.nav-box li {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	.welcome-title {
		font-size: 60px;
		margin-bottom:20px;
	}
	.welcome-first {
		font-size: 20px;
	}
	.welcome-title:before {
		margin: 20px auto 15px;
	}
	.welcome-box {
		font-size:inherit;
	}
	.welcome-box .btn {
		margin-top:0;
	}
	.about-img {
		margin-bottom:10px;
	}
	
	/* Taille de titre ajustée pour mobile */
	h1, h2 {
		font-size: 24px;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	
	/* Sous-titre clairement différencié sur mobile */
	.title-block span {
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 2px;
		opacity: 0.7;
		margin-bottom: 6px;
		display: block;
		color: rgba(255, 255, 255, 0.8);
	}
	
	/* Espacement du bloc titre réduit sur mobile */
	.title-block {
		margin-bottom: 25px;
	}
	
	/* Augmenter la lisibilité des textes sur mobile */
	p {
		font-size: 15px;
		line-height: 1.5;
	}
	
	/* Ajuster les titres h3 pour plus de cohérence */
	h3 {
		font-size: 22px;
		margin-bottom: 15px;
	}
	
	/* Ajuster les titres h4 pour plus de lisibilité */
	h4 {
		font-size: 16px;
		margin-bottom: 10px;
	}
	.contact-box {
		margin-top: 0px;
		height:auto;
	}
	.nopad767 {
		margin-bottom:0 !important;
	}
	.footer-right {
		width:100%;
		margin:15px 0 0;
		text-align:left;
	}
	.btn {
		font-size:15px;
		line-height:48px;
		padding:0 30px;
	}
	.contact-row {
		margin-top: 15px;
	}
	.content-section {
		padding:50px 0;
	}
	.info-inner {
		margin-top: 20px;
		padding-bottom:15px;
	}
	.index-white .navbar-toggle {
		color: #242424;
	}
	.side-menu .nav-box > ul {
		padding: 70px 40px 40px;
	}
	.side-menu .navbar-nav li a {
		font-size:20px;
	}
	.social-icons {
		margin: 0 auto;
	}
	.detail-page h1 {
		margin-bottom: 50px;
	}
	.project-detail-col figure {
		margin-top: 35px;
	}
	.project-buttons-margin {
		margin-top: 50px;
	}
	.section-inner {
		padding: 60px 15px;
	}
	.service-block .col-4,
	.service-block .col-8 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
		text-align: center;
	}
	.service-block .row {
		flex-direction: column;
	}
	
	.aptitude-icon {
		margin: 0 auto 10px;
	}
	.pack-tab-wrapper {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 15px;
	}
	.animate {
		transition-duration: 0.6s;
	}
	.gallery-item {
		margin-bottom: 15px;
	}
	.navbar-toggle i {
		transition: transform 0.3s ease;
	}
	
	.navbar-toggle i.fa-times {
		transform: rotate(90deg);
	}
	
	/* Restaurer les styles qui étaient présents avant */
	body {
		font-size: 15px;
	}
	
	.about-contentbox {
		margin-top: 60px;
		text-align: center;
	}
	
	.testimonials-section {
		padding-top: 0;
	}
	
	/* Centrer la ligne pour les mobiles */
	.title-block {
		text-align: center;
	}
	
	/* Sous-titre clairement différencié sur mobile */
	.title-block span {
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 2px;
		opacity: 0.7;
		color: rgba(255, 255, 255, 0.8);
	}
	
	/* Rendre le titre H2 plus impactant et clairement différencié */
	.title-block h2 {
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		position: relative;
		display: inline-block;
		margin-bottom: 25px;
		color: #fff;
	}
	
	/* 1. Section "Qui suis-je" - Inverser l'ordre des colonnes */
    #slide02 .row > .col-md-6 {
        width: 100%;
    }
    
    #slide02 .row {
        display: flex;
        flex-direction: column;
    }
    
    #slide02 .row .col-md-6:last-child {
        order: -1; /* Placer la photo en premier */
        margin-bottom: 30px;
    }
    
    /* 2. Section "Services" - Réorganiser les blocs */
    /* Réorganisation des blocs dans la section Services */
    #slide03 .section-inner .wide-col-laptop {
        display: flex;
        flex-direction: column;
    }
    
    /* Déplacer les services compacts en haut */
    #slide03 .section-inner .wide-col-laptop > .row:not(.justify-content-center) {
        order: -1; /* Mettre en premier */
        margin-bottom: 20px;
    }
    
    /* Placer le service actif en bas */
    #slide03 .section-inner .wide-col-laptop > .row.mb-4 {
        order: 1; /* Mettre en dernier */
    }
    
    /* Ajouter plus d'espace entre les services compacts */
    #slide03 .col-md-6 {
        margin-bottom: 15px;
    }
    
    /* Séparer clairement les deux services compacts */
    #slide03 .service-block.compact {
        min-height: 0;
        margin-bottom: 15px;
    }
    
    /* Réduire la hauteur des services compacts */
    #slide03 .service-block.compact .serviceRow {
        padding: 15px;
    }
    
    /* Ajuster les icônes pour qu'elles prennent moins de place */
    #slide03 .service-block .aptitude-icon img {
        max-height: 50px;
        width: auto;
    }
    
    /* 3. Section "Packs Web" - Ajuster l'espace des tabs */
    #slide04 .pack-tab-wrapper {
        padding: 0;
        margin-bottom: 15px;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    #slide04 .pack-tab {
        padding: 15px !important;
        display: flex;
        align-items: center;
    }
    
	.service-box {
        display: flex;
        align-items: center;
		justify-content: center;
        padding: 0 !important;
        width: 100%;
    }
	.service-icon {
        margin: 0 15px 0 0;
    }
    
    #slide04 .service-icon {
        width: 60px;
        height: 60px;
        line-height: 60px;
        margin: 0 15px 0 0;
    }
    
    #slide04 .pack-tab h3 {
        font-size: 18px;
        margin-bottom: 0;
        text-align: left;
    }
    
    /* Pack details styling */
    #slide04 .pack-details-wrapper {
        background: rgba(0,0,0,0.2);
        border-radius: 10px;
        padding: 15px;
        margin-top: 10px;
    }
    
    #slide04 .pack-details-inner {
        padding: 10px;
    }
    
    #slide04 .pack-visual {
        text-align: center;
        margin-bottom: 20px;
    }
    
    #slide04 .pack-gif {
        max-width: 120px;
        height: auto;
        margin-bottom: 10px;
    }
    
    #slide04 .pack-title h3 {
        margin-bottom: 5px;
    }
    
    #slide04 .pack-tagline {
        font-size: 14px;
        opacity: 0.8;
        margin-bottom: 15px;
    }
    
    #slide04 .checklistpack {
        padding-left: 15px;
        list-style: none;
    }
    
    #slide04 .checklistpack li {
        margin-bottom: 8px;
        position: relative;
        padding-left: 25px;
    }
    
    #slide04 .checklistpack li i {
        position: absolute;
        left: 0;
        top: 4px;
        color: #826eff;
    }
    
    /* Supprimer les autres ajustements qui pourraient entrer en conflit */
    #slide04 .row > div {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Optimiser l'affichage des détails des packs */
    .pack-details-wrapper {
        margin-top: 10px;
    }
	
	/* Supprimer les styles qui pourraient interférer avec les classes d'ordre Bootstrap */
	#slide02 .row .col-md-6:last-child,
	#slide03 .row.mb-4,
	#slide03 > .section-inner > .row > .col-md-8 {
		/* Annuler nos anciennes règles qui pourraient entrer en conflit */
		order: unset;
	}
	
	/* Ajustements pour la lisibilité */
	.service-block.compact .serviceRow {
		margin-bottom: 15px;
	}
	
	/* Amélioration des service-block compact en 2 colonnes sur mobile */
	.service-block.compact .serviceRow {
		padding: 10px 5px !important;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	/* Ajustement des titres pour un meilleur centrage */
	.service-block.compact h3 {
		text-align: center;
		font-size: 16px;
		margin-bottom: 10px;
		width: 100%;
	}
	
	/* Ajuster la taille des icônes */
	.service-block.compact .aptitude-icon {
		margin-bottom: 5px;
	}
	
	.service-block.compact .aptitude-icon img {
		max-height: 30px;
		width: auto;
	}
	
	/* Ajuster la taille et l'espacement des h4 */
	.service-block.compact h4 {
		font-size: 10px;
		margin-bottom: 0;
		text-align: center;
	}
	
	/* Supprimer les marges inutiles qui causent des décalages */
	.service-block.compact .row,
	.service-block.compact .col-4,
	.service-block.compact .col-8 {
		margin: 0;
		padding: 0 5px;
	}
	
	/* IMPORTANT: Désactiver les règles qui forcent les service-block compact à s'étendre sur toute la largeur */
	.service-block.compact .col-4,
	.service-block.compact .col-8 {
		width: auto !important; /* Annule les règles précédentes */
		max-width: none !important;
		flex: unset !important;
	}
	
	/* Empêcher l'affichage en flex-direction: column sur les service-block compact */
	#slide03 .row > div:has(.service-block.compact) {
		/* Garder les colonnes côte à côte */
		flex-direction: row !important;
	}
	
	/* Réinitialiser les structures flex qui pourraient perturber la mise en page */
	.service-block.compact .row.align-items-center {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
}
@media only screen and (max-width: 575px) {
	.welcome-title {
		font-size: 40px;
	}
	.welcome-first {
		font-size: 16px;
		margin-bottom:5px;
	}
	.welcome-title:before,.welcome-title:after {
		width: 100%;
	}
	
	/* Taille de titre encore réduite pour très petit écran */
	h1, h2 {
		font-size: 24px;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	
	/* Sous-titre plus petit mais toujours visible */
	.title-block span {
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 2px;
		text-transform: uppercase;
		opacity: 0.7;
		margin-bottom: 5px;
		display: block;
	}
	
	/* Espacement du bloc titre très compact */
	.title-block {
		margin-bottom: 20px;
	}
	
	/* Ajuster les titres h3 pour très petit écran */
	h3 {
		font-size: 20px;
		margin-bottom: 12px;
	}
	
	/* Ajuster les titres h4 pour très petit écran */
	h4 {
		font-size: 15px;
		margin-bottom: 8px;
	}
	.about-contentbox {
		line-height:1.6;
	}
	.owl-carousel .owl-item .client-img img {
		max-width:65px;
		margin-right: 10px;
	}
	.testimonials-section {
		font-size:13px;
	}
	.form-control {
		height:52px;
		font-size:14px;
		padding:4px 15px;
	}
	.skill-item {
	  border-bottom: 1px solid rgba(250,250,250,0.1);
	  margin-bottom: 20px;
	  padding-bottom: 50px;
	}
	.skills-row h6 {
	  text-align: left;
	  margin-bottom: 30px;
	}
	.skill-bar {
	  width: 100%;
	  height: 6px;
	  border-radius: 3px;
	  background-color: rgba(250,250,250,0.25);
	  position: relative;
	}
	.input-field {
		margin-bottom: 15px;
	}
	.subscribe-row h5 {
		font-size: 16px;
	}
	.client-row {
		padding-left: 40px;
	}
	.testimonial-content:before {
		left: 46%;
	}
	.client-row {
		padding-left: 0;
	}
	.titlelogo img {
		max-width: 80%;
		height: auto;
	}
	.btn {
		display: block;
		width: 100%;
		margin: 10px 0 !important;
		text-align: center;
	}
	.form-group {
		margin-bottom: 15px;
	}
	textarea.form-control {
		height: 100px;
	}
	.modal-dialog {
		margin: 10px;
	}
	.modal-content {
		padding: 15px;
	}
	.modal-body {
		padding: 15px 0;
	}
	.welcome-box {
		padding: 120px 15px 80px;
	}
	.welcome-title {
		font-size: 32px;
	}
	.welcome-first {
		font-size: 14px;
	}
	h1, h2 {
		font-size: 24px;
	}
	.about-img img {
		max-width: 80%;
		margin: 0 auto;
		display: block;
	}
	
	/* Réduire davantage l'espace pour les très petits écrans */
    #slide04 .pack-tab-wrapper {

    }
    
    #slide04 .pack-tab {
        padding: 10px !important;
    }
    
    
    /* Réduire encore la taille des tabs */
    .pack-tab {
        padding: 8px !important;
    }
	.service-icon {
        width: auto;
    }
    
    /* Optimiser les titres pour petits écrans */
    .pack-tab h3 {
        font-size: 12px;
    }
	
	/* Ajustements supplémentaires pour les packs sur très petits écrans */
	#slide04 .service-icon {
		width: 50px;
		height: 50px;
	}
	
	#slide04 .pack-tab {
		padding: 12px;
	}
}
@media only screen and (max-width: 460px) {
	/* Taille minimale pour les très petits écrans */
	h1, h2 {
		font-size: 20px;
		line-height: 1.2;
		margin-bottom: 8px;
	}
	
	/* Sous-titre minimaliste mais lisible */
	.title-block span {
		font-size: 12px;
		letter-spacing: 1.5px;
		opacity: 0.8;
		margin-bottom: 4px;
	}
	
	/* Espacement minimal */
	.title-block {
		margin-bottom: 15px;
	}
	
	/* Déjà existant... */
	.testimonial-content:before {
		left: 45%;
	}
	.welcome-box {
		padding: 120px 15px 80px;
	}
	.welcome-title {
		font-size: 32px;
	}
	.welcome-first {
		font-size: 14px;
	}
	h1, h2 {
		font-size: 24px;
	}
	.testimonial-content:before {
		left: 45%;
	}
}
@media only screen and (max-width: 320px) {
	.gallery-overlay p {
		display: none;
	}
	.testimonial-content:before {
		left: 43%;
	}
	.navigation-menu > li > a {
		padding: 12px 10px;
		font-size: 14px;
	}
	.service-block h4 {
		font-size: 14px;
	}
	.section-inner {
		padding: 50px 10px;
	}
}

/* Support pour les navigateurs mobiles et iOS */
@supports (-webkit-touch-callout: none) {
    /* CSS spécifique pour iOS */
    @media only screen and (max-width: 767px) {
        #header::before {
            /* iOS peut avoir des problèmes avec backdrop-filter */
            background: rgba(0, 0, 0, 0.7); /* Plus opaque pour iOS */
        }
        
        .navbar-nav, .nav-box, .navigation-menu > li {
            /* iOS peut avoir des problèmes avec backdrop-filter */
            background: rgba(0, 0, 0, 0.7); /* Plus opaque pour iOS */
        }
    }
}

/* Assurons-nous que le flou s'applique bien à tous les éléments en mobile */
@media only screen and (max-width: 767px) {
    /* Force le flou sur chaque élément de navigation */
    .navigation-menu > li {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    /* Mais garder la couleur correcte pour l'élément actif */
    .navigation-menu > li.active {
        background: #826eff !important;
    }
    
    /* Assurons-nous que le contenu du menu reste visible même avec le flou */
    .navigation-menu > li > a {
        position: relative;
        z-index: 2;
    }
}

/* Améliorations des sous-titres pour mieux les différencier du titre principal */
.title-block span {
    position: relative;
    display: block; /* Forcer l'affichage en bloc pour qu'il reste toujours au-dessus du H2 */
}

/* S'assurer que les titres et sous-titres restent empilés verticalement */
.title-block {
    display: flex;
    flex-direction: column;
}

.title-block h2 {
    width: 100%;
}

@media only screen and (max-width: 1440px) {
	/* Taille de titre ajustée pour grand écran */
	h1, h2 {
		font-size: 30px;
		line-height: 1.2;
		margin-bottom: 15px;
	}
}

@media only screen and (max-width: 1199px) {
	/* Taille de titre ajustée pour écran moyen */
	h1, h2 {
		font-size: 28px;
		line-height: 1.2;
	}
}

@media only screen and (max-width: 991px) {
	/* Taille de titre ajustée pour tablette */
	h1, h2 {
		font-size: 26px;
		line-height: 1.2;
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 767px) {
	/* Centrer pour les mobiles */
	.title-block {
		text-align: center;
	}
	
	/* Sous-titre clairement différencié sur mobile */
	.title-block span {
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 2px;
		opacity: 0.7;
		color: rgba(255, 255, 255, 0.8);
		display: block; /* Forcer l'affichage en bloc */
		width: 100%; /* Prendre toute la largeur */
	}
	
	/* Rendre le titre H2 plus impactant et clairement différencié */
	.title-block h2 {
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		position: relative;
		display: inline-block;
		margin-bottom: 25px;
		color: #fff;
	}
}

@media only screen and (max-width: 575px) {
	/* Sous-titre plus petit mais toujours visible */
	.title-block span {
		font-size: 13px;
		padding-bottom: 6px;
		margin-bottom: 8px;
	}
	
	/* Rendre le titre H2 encore plus petit sur petit mobile */
	.title-block h2 {
		font-size: 22px;
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 460px) {
	/* Taille minimale pour les très petits écrans */
	h1, h2 {
		font-size: 20px;
		line-height: 1.2;
		margin-bottom: 8px;
	}
	
	/* Sous-titre minimaliste mais lisible */
	.title-block span {
		font-size: 12px;
		letter-spacing: 1.5px;
		opacity: 0.8;
		margin-bottom: 4px;
	}
	
	/* Titre H2 encore plus petit sur très petit écran */
	.title-block h2 {
		font-size: 20px;
		margin-bottom: 15px;
	}
}

/* Corrections pour Packery Gallery - Responsive */
/* Configuration simple et propre: 4 colonnes en desktop, 3 colonnes sur mobile */

/* Empêcher tout défilement horizontal ou espaces indésirables */
body, html {
  overflow-x: hidden; /* Empêche le défilement horizontal */
  width: 100%;
  max-width: 100%;
}

/* DESKTOP: 4 colonnes */
.grid-sizer,
.gallery-item-wrapper.width-1 {
  width: 25% !important; /* 1/4 de largeur - 4 colonnes */
}

.gallery-item-wrapper.width-2 {
  width: 50% !important; /* 1/2 de largeur - 2 colonnes sur 4 */
}

/* MOBILE: 3 colonnes à partir de 768px */
@media (max-width: 768px) {
  .grid-sizer,
  .gallery-item-wrapper.width-1 {
    width: 33.33% !important; /* 1/3 de largeur - exactement 3 colonnes */
  }
  
  .gallery-item-wrapper.width-2 {
    width: 66.66% !important; /* 2/3 de largeur - exactement 2 colonnes sur 3 */
  }
  
  /* Ajustement des gaps pour éviter débordement */
  .gallery-grid {
    margin: 0;
  }
  
  .gallery-item-wrapper {
    padding: 4px;
  }
}

/* Très petits écrans: maintenir 3 colonnes, réduire spacing */
@media (max-width: 480px) {
  .gallery-item-wrapper {
    padding: 2px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    /* Force 2 columns layout for tablets */
    #slide02 .row > .col-md-6 {
        width: 50%;
        float: left;
    }
    
    #slide02 .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* Reset the order to keep the original order */
    #slide02 .row .col-md-6:last-child {
        order: unset;
        margin-bottom: 0;
    }
    
    /* Apply similar column layouts to other sections that need 2 columns */
    #slide03 .col-md-6 {
        width: 50%;
        float: left;
        margin-bottom: 30px;
    }
    
    #slide04 .pack-tab-wrapper {
        padding: 0 10px;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media only screen and (max-width: 480px) {
    /* Maintenir 2 colonnes pour les service-block compact même sur très petit écran */
    .service-block.compact .row > [class*="col-"] {
        padding: 0 2px;
    }
    
    .service-block.compact h3 {
        font-size: 14px;
    }
    
    .service-block.compact .serviceRow {
        padding: 8px 3px !important;
    }
    
    .service-block.compact .aptitude-icon img {
        max-height: 25px;
    }
    
    .service-block.compact h4 {
        font-size: 8px;
    }
    
    /* Garantir l'alignement sur la grille */
    #slide03 .col-6 {
        width: 50%;
        float: left;
        padding: 0 5px;
    }
}