@import url('https://fonts.cdnfonts.com/css/abnes');

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #0a192f; 
            color: white;
            text-align: center;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px; /* Ajustement du padding */
            background-color: #005f73;
            position: fixed; /* Fixe le header en haut */
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }     

        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 50px;
            margin-right: 10px;
        }
        
        .logo h1 {
            font-family: 'Abnes', sans-serif;
            font-size: 35px;
            margin: 0;
        }
        
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            transform: translateX(-30px); /* Déplacement de 2 cm vers la gauche */
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            cursor: pointer;
           
        }

        .hero {
            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 80px;
            
            
        }
 
 /* SLOGAN */       
        .hero h2 {
            margin-top: -25px; /* 🔼 remonte le slogan d'environ 2 à 3 lignes */
            font-size: 48px;
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
        }
        
        .hero p {
            font-size: 22px;
            max-width: 800px;
            color: white;
            text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);
            background-color: black;
            opacity: 80%;
            padding: 20px;
            
        }
        
.background-animation {
  position: absolute;
  inset: 0;
  background: url('./images/fond-accueil-vitruve4.png') center/cover no-repeat;
  filter: brightness(1.3) contrast(1.05);
  opacity: 0.6;
  animation: moveNodes 10s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
  z-index: -1;
}




@keyframes moveNodes {
  0%   { transform: scale(1) translate(-2%, -2%); }
  100% { transform: scale(1.05) translate(2%, 2%); }
}

/* Accessibilité : désactiver l’animation si l’utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .background-animation { animation: none; }
}

      
 
      
      
        
        @keyframes moveNodes {
            0% { transform: scale(1) translate(-2%, -2%); }
            100% { transform: scale(1.05) translate(2%, 2%); }
        }

        .cta-buttons a {
            background: #005f73;
            color: white;
            padding: 15px 25px;
            margin: 10px;
            text-decoration: none;
            font-size: 20px;
            border-radius: 5px;
            transition: 0.3s;
            display: inline-block;
        }
        
        .cta-buttons a:hover {
            background:white;
            color: black;
        }

        /* Section styles */
        section {
            padding: 60px 20px;
            min-height: 100vh;
        }
        
        #about, #approach, #pourquoi-skillmap, #contact {
            padding-top: 120px;
        }
        form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: auto;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box; /* Empêche le rognage */
    width: 100%; /* Garantit que le formulaire ne dépasse pas */
}
input, textarea, button {
    width: 100%; /* Force tous les éléments à prendre toute la largeur */
    box-sizing: border-box; /* Évite que le padding ne cause un débordement */
}

label {
    margin-top: 10px;
    font-weight: bold;
}

input, textarea {
    padding: 10px;
    margin-top: 5px;
    border-radius: 5px;
    border: none;
    width: 100%;
    font-size: 16px;
}

textarea {
    resize: vertical;
}

button {
    background:#005f73;
    color: white;
    padding: 12px;
    border: none;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 18px;
    transition: 0.3s;
    width: 100%; /* Assure que le bouton prend toute la largeur du formulaire */
    display: block; /* S'assure qu'il n'est pas en ligne avec autre chose */
    box-sizing: border-box; /* Prévient tout dépassement à cause du padding */
}

button:hover {
    background:rgb(99, 151, 247);
    color:black
}
.policeForm {
font-size:1em;
font-family: Georgia, serif;
        }
#contact {
      opacity: 0;
      transform: translateY(50px); /* Augmenter la translation pour plus de visibilité */
      transition: opacity 1s ease-out, transform 1s ease-out; /* Augmenter la durée de l'animation */
    }

    #contact.visible {
      opacity: 1;
      transform: translateY(0);
    }

.menu-link {
  text-decoration: none;
  transition: all 0.3s;
}

.menu-link.active {
  text-decoration: underline;
    color:white;
  font-weight: normal;
    opacity: 0.3;
    
}
/* Style de la section globale */
.services-section {
    text-align: justify;
    padding: 60px 20px;
    color: white; /* Couleur du texte pour être bien visible */
}

/* Titre de la section */
.section-title {
    font-size: 2rem;
    color: #007bff;
    margin-bottom: 15px;
}

/* Sous-titre de la section */
.section-subtitle {
    background: #1c1c1c; /* Couleur de fond gris foncé */
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 30px;
}


/* Conteneur des services (ajusté pour ne pas faire de wrap) */
.service-features {
    display: flex;
    justify-content: space-between; /* Espace uniforme entre les services */
    gap: 20px;
    flex-wrap: wrap; /* Autoriser le retour à la ligne si l'écran est petit */
    flex: 1;
    max-width: 100%; /* Garantit que le conteneur prend toute la largeur disponible */
    margin: 0 auto; /* Centrer les services dans la section */
}

/* Chaque service individuel */
.service {
    display: flex; /* Aligne l'image et le texte horizontalement */
    flex-direction: row; /* L'image à gauche et le texte à droite */
    align-items: center; /* Centre verticalement */
    gap: 20px; /* Espacement entre l'image et le texte */
    background: #fff; /* Fond blanc pour chaque service */
    padding: 20px; /* Padding à ajuster selon l'apparence souhaitée */
    border-radius: 8px; /* Coins arrondis pour un look plus moderne */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    width: 18%; /* Fixe une largeur pour chaque service, modifiable selon tes préférences */
}

/* Pour un comportement responsive sur mobile, on passe en disposition verticale */
@media (max-width: 768px) {
    .service-features {
        flex-direction: column; /* En colonne sur mobile */
        align-items: center;
    }

    .service {
        width: 80%; /* Pour donner plus d'espace sur mobile */
    }
}

/* Image du service */
.service-image {
    width: 100px; /* Ajuste la largeur de l'image selon tes préférences */
    height: auto; /* Laisse la hauteur se ajuster automatiquement */
}

/* Texte du service */
.service-text h3 {
    font-size: 1.5rem; /* Ajuste la taille du titre */
    color: #333;
    margin-bottom: 10px;
}

.service-text p {
    font-size: 1rem;
    color: #666;
}
/*
.feature {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
*/

.feature {
    display: flex;
    flex-direction: column; /* Met l’image et le texte en colonne */
    align-items: center; /* Centre les éléments */
    text-align: center; /* Assure un alignement du texte */
}


.icon {
    font-size: 1.5rem;
}

.service-image img {
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
}

.cta-button {
    margin-top: 20px;
}

.btn-primary {
    background: #007bff;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    text-decoration: none;
}

.services-section {
    text-align: center;
    padding: 80px 20px;
    background: #0a192f; /* Utilisation du même fond que les autres sections */
    color: white; /* Texte blanc pour rester lisible */
}

/* ✅ Harmonisation visuelle entre "Nos Services" et "Pourquoi SkillMap" */
.services-header {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 15px 35px 25px 35px; /* top | right | bottom | left */
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  color: white;
  max-width: 900px;
  margin: 0 auto 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ✅ Effet de survol identique */
.services-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* ✅ Sous-box pour "Nos Services" (identique à Pourquoi SkillMap) */
.services-texte {
  /*text-align: justify;*/
  background-color: rgba(255, 255, 255, 0.08); /* gris bleuté translucide */
  border-radius: 10px;
  padding: 25px 35px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  margin-top: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ✅ Effet de survol identique */
.services-texte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}


/* ✅ Sous-box gris bleuté pour "Pourquoi SkillMap" */
.pourquoi-texte {
  background-color: rgba(255, 255, 255, 0.08); /* gris bleuté translucide */
  border-radius: 10px;
  padding: 25px 35px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  margin-top: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pourquoi-texte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.section-title {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: bold;
}

.section-subtitle {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: white;
    background: #1c1c1c; /* Couleur de fond gris foncé */
    text-align: justify;
    /*background: rgba(0, 0, 0, 0.6); /* Ajout d'un fond pour améliorer la lisibilité */
    padding: 15px;
    border-radius: 8px;
    display: inline-block;
}

.service-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.feature {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    background: rgba(255, 255, 255, 0.1); /* Fond semi-transparent pour visibilité sur fond sombre */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: white; /* Texte blanc pour rester lisible */
}

.feature img {
    width: 100%;
    max-width: 280px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: block;
}

.cta-button {
    margin-top: 30px;
}

.btn-primary {
    background: #005f73;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
}

.btn-primary:hover {
    background: #003f4f;
}

#services {
    min-height: 100vh; /* Assure que la section occupe au moins l'écran */
}

/* Pourquoi SkillMap */


/* Styles pour la section "Pourquoi SkillMap" */
.pourquoi-intro {
    background-color: rgba(10, 30, 40, 0.9); /* effet verre bleuté */
    color: #ffffff; /* Texte blanc */
    padding: 20px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.6;
    max-width: 800px; /* Largeur max */
    margin: 0 auto; /* Centre le bloc */
}

.pourquoi-intro p {
    margin: 10px 0; /* Espacement entre les paragraphes */
    text-align: justify; /* Aligne le texte à gauche */
    display: inline-block; /* Permet de s'assurer que tout reste sur la même ligne */
    width: 100%; /* Assure que le texte occupe toute la largeur */
}

.icon {
    font-size: 22px; /* Taille de l'icône */
    margin-right: 10px; /* Espace entre l'icône et le texte */
    display: inline-block; /* L'icône reste à côté du texte */
    vertical-align: middle; /* Aligne verticalement l'icône avec le texte */
}

.pourquoi-intro strong {
    display: inline; /* Le texte en gras reste sur la même ligne */
    text-align: left; /* Assure que le texte est aligné à gauche */
}

#pourquoi-skillmap {
    text-align: center;
    padding: 80px 20px;
    background: #0a192f; /* Fond de la section */
    color: white;
}

.pourquoi-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.pourquoi-item img {
    width: 40%;
    max-width: 300px;
    border-radius: 10px;
}

/* ✅ Harmonisation de la hauteur des images / box texte dans "Pourquoi SkillMap" */
.pourquoi-item {
  align-items: stretch; /* étire l'image et la box texte à la même hauteur */
}

.pourquoi-item img {
  height: 100%;           /* l'image prend toute la hauteur du conteneur */
  object-fit: cover;      /* recadre l'image sans la déformer */
}


.pourquoi-item .texte {
    flex: 1;
    text-align: justify;
    background: #132e4a; /* Couleur de la box (plus claire que le fond principal) */
    padding: 20px;
    border-radius: 10px; /* Coins arrondis pour harmonisation */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Légère ombre pour du relief */
}


.pourquoi-item h3 {
    font-size: 1.5em;
    color: #64ffda; /* Harmonisation avec la section Services */
}

.pourquoi-item p {
    font-size: 1.1em;
    color: white;
    line-height: 1.6;
}

.pourquoi-texte p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #f5f5f5;
  text-align: justify;
  margin-bottom: 22px;
}


.bullet {
  color: #64ffda; /* vert turquoise SkillMap */
  font-size: 1.2rem;
  margin-right: 6px;
}

.phrase-finale {
  font-size: 1.2rem;
  color: #64ffda;
  text-align: center;
  margin-top: 25px;
  font-weight: 500;
}

.bullet-final {
  color: #64ffda; /* ton turquoise SkillMap */
  font-size: 1.3rem;
  margin-right: 6px;
}


/*pour appliquer la police ABNES à tous les mots skillMap*/
.skillmap-font {
    font-family: 'ABNES', sans-serif;
    font-size: 0.8em; /* Ajustez cette valeur selon vos besoins */
}

/* Uniformise la police/poids du paragraphe du hero */
.hero .hero-intro {
  font-family: Arial, sans-serif;  /* même police que le site */
  font-weight: 400;                /* texte normal */
}

/* "SkillMap" reste en ABNES, sans gras forcé */
.skillmap-font {
  font-family: 'ABNES', sans-serif;
  font-weight: 400;
}

/* "SERUM" reste visuellement identique (gras + couleurs), sans changer de police */
.serum-clickable {
  font-family: inherit;  /* hérite d'Arial (pas de police spéciale) */
  font-weight: 700;      /* conserve l’effet visuel "gras" de SERUM */
}

/* CTA unique : mise en avant */
.cta-buttons a.btn-primary {
  min-width: 260px;
}


/* Mobile : plein largeur pour le clic facile */
@media (max-width: 768px) {
  .cta-buttons a.btn-primary {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 10px auto;
  }
}


/* Pour les écrans de taille inférieure à 768px (taille des téléphones) */
@media only screen and (max-width: 768px) {
    .pourquoi-item {
        display: flex;
        flex-direction: column; /* Change l'orientation des éléments, l'image en haut et le texte en dessous */
        align-items: center; /* Centre les éléments horizontalement */
        margin-bottom: 20px; /* Ajoute un peu d'espace entre chaque item */
    }

    .pourquoi-item img {
        width: 100%; /* L'image prend toute la largeur de l'écran */
        height: auto; /* Garder les proportions de l'image */
    }

    .pourquoi-item .texte {
        text-align: justify; /* Centre le texte */
        padding-top: 15px; /* Ajoute un peu d'espace entre l'image et le texte */
    }
}


/* Lorsque l'on survole chaque lettre du mot "SERUM", le curseur devient une main */
.serum-link:hover {
    cursor: pointer; /* Affiche la main au survol */
    color: #f1dd7e; /* Change la couleur au survol (optionnel) */
}

/* Animation douce pour le changement de couleur */
.serum-link {
    transition: color 0.3s ease; /* Adoucit le changement de couleur */
}

.serum-clickable {
    cursor: pointer; /* Affiche la main au survol */
}



@media screen and (max-width: 768px) {
    #skillmap-logo {
        text-align: center;
        margin: 0 auto;
        width: 80%; /* Réduit la largeur pour éviter la coupure */
        display: block;
        padding-left: 10px; /* Décale légèrement à gauche */
    }

    h1 {
        text-align: center;
        font-size: 1.8em; /* Ajuste la taille si nécessaire */
        margin: 0 auto;
        padding-left: 5px; /* Décale légèrement à gauche */
    }
}

@media (max-width: 768px) {
    .slogan {
        margin-top: 80px; /* Ajuste cette valeur selon le rendu */
        text-align: center;
    }

    header {
        height: auto; /* Ajuste la hauteur du menu pour éviter qu'il recouvre du texte */
    }
}

@media (max-width: 768px) {
    .slogan {
        position: relative;
        margin-top: 100px; /* Augmente la marge pour éviter qu'il soit caché */
        text-align: center;
        z-index: 2; /* S'assure qu'il passe au-dessus du menu */
    }

    header {
        position: relative;
        z-index: 3; /* Met le menu légèrement au-dessus sans cacher le texte */
    }
}

/* Pour les écrans mobiles (moins de 768px de large) */
@media (max-width: 768px) {
    .serum-link span {
        font-size: 18px;  /* Ajuste la taille de police pour les écrans plus petits */
    }
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Ajustement du padding */
    background-color: #005f73;
    position: fixed; /* Fixe le header en haut */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

body {
    padding-top: 70px; /* Décale le contenu pour ne pas être masqué sous le header */
}


/* Uniformisation du style des boutons */
button, 
.cta-buttons a, 
.btn-primary {
    background: #005f73; /* Couleur de fond standard */
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}


@media (max-width: 768px) {
    #header {
        display: flex;
        justify-content: flex-start; /* aligne le contenu à gauche */
        align-items: center;
        padding-left: 20px; /* espace supplémentaire sur la gauche pour éviter le "P" coupé et décaler encore le logo */
    }

    #header img {
        margin-right: 10px; /* espace entre le logo et le texte */
    }

    #header h1 {
        margin-left: 0; /* Enlève toute marge à gauche du texte */
    }
}

html, body {
    overflow-x: hidden; /* Empêche le scroll horizontal */
    width: 100%;
}

@media (max-width: 768px) {
    #menu {
        width: 100%; /* Assure que le menu ne dépasse pas */
        overflow: hidden; /* Évite tout débordement du menu */
    }
}

/* Ajuste la position du texte SKILLMAP */
#header h1 {
    padding-left: 10px; /* Décale légèrement vers la gauche */
    white-space: nowrap; /* Empêche le saut de ligne */
}

@media (max-width: 768px) {
    #header {
        display: flex;
        align-items: center;
        justify-content: center; /* Centre le contenu */
        padding: 0 10px; /* Ajoute un peu d'espace à gauche et à droite */
        overflow: hidden; /* Évite les coupures */
    }

    #header img {
        margin-right: 8px; /* Décale un peu le logo vers la gauche */
    }

    #header h1 {
        white-space: nowrap; /* Empêche les retours à la ligne */
        overflow: visible; /* S'assure que le texte s'affiche bien */
    }
}

@media (max-width: 768px) {
    #header {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Aligner à gauche */
        padding-left: 5%; /* Ajoute un peu d'espace à gauche */
        overflow: hidden; /* Empêche tout débordement */
        white-space: nowrap; /* Empêche le texte d'aller à la ligne */
    }

    #header img {
        max-width: 50px; /* Ajuste la taille du logo si nécessaire */
        margin-right: 10px; /* Crée un espace entre le logo et le texte */
    }

    #header h1 {
        font-size: 1.2em; /* Ajuste la taille si nécessaire */
        overflow: visible;
    }
}

@media (max-width: 768px) {
    #header {
        display: flex;
        align-items: center;
        justify-content: center; /* Centre correctement les éléments */
        padding: 0 10px; /* Ajoute un peu d'espace sur les côtés */
        overflow: hidden;
        white-space: nowrap;
    }

    #header img {
        max-width: 40px; /* Ajuste la taille du logo */
        margin-right: 8px; /* Ajoute un petit espace entre le logo et le texte */
    }

    #header h1 {
        font-size: 1.4em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 60px); /* Ajuste la largeur max pour éviter la coupure */
    }
}

@media (max-width: 768px) {
    #header {
        padding-left: 30px; /* Décale tout vers la gauche */
    }
}

@media (max-width: 768px) {
    #logo-skillmap {
        margin-left: -20px; /* Ajuste cette valeur selon ton besoin pour décaler à gauche */
    }     
    
    #logo-skillmap a {
        margin-right: 1px; /* Ajuste cette valeur pour réduire l'espace à droite du logo */
    }
    
    #logo-skillmap h1 {
        margin-left: 1px; /* Ajuste cette valeur pour réduire l'espace à gauche du texte */
    }
    
}

/*menu déroulant sur le logo*/

@media (max-width: 768px) {
    /* On masque l'ancien menu burger */
    .burger-menu {
        display: none;
    }

    /* Le menu est caché par défaut */
    #nav-menu {
        display: none;
        position: absolute;
        top: 60px;
        left: 10px; /* Décale un peu le menu vers la droite */
        width: calc(100% - 10px); /* Garde la largeur mais avec l'espace à gauche */
        background: rgba(0, 95, 115, 0.9);
        text-align: left;
        padding: 20px 0;
        transition: all 0.3s ease-in-out;
    }

    /* Afficher le menu quand il est actif */
    #nav-menu.nav-active {
        display: block;
    }

    /* Aligner le menu à gauche */
    #nav-menu ul {
        flex-direction: column;
        align-items: flex-start; /* Aligne à gauche */
        padding-left: 40px; /* Augmente pour décaler vers la droite */
       
    }

    /* Espacement entre les éléments du menu */
    #nav-menu ul li {
        margin: 10px 0;
    }
}


/*Flèche retour*/
#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #005f73;
    color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

section {
  margin-bottom: 60px;
}

/* Harmoniser la version responsive */
@media (max-width: 768px) {
  section {
    margin-bottom: 40px;
  }
}

/* Section à Propos */
/* ---- À propos ---- */
.about-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.about-text {
  flex: 1 1 60%;
  color: #f5f5f5;
  text-align: justify;
  line-height: 1.7;
}

.about-text strong {
  color: #f5f5f5; /* supprime le turquoise flashy */
}

/* Police ABNES pour SKILLMAP */
.skillmap-font {
  font-family: 'ABNES', sans-serif;
  letter-spacing: 1px;
  color: #ffffff;
  font-weight: bold;
}

/* Mention Alsace et SIRET */
.about-info {
  font-size: 0.9em;
  color: #ccc;
  margin-top: 15px;
  text-align: left;
}

/* Image du brevet SERUM */
.about-image {
  flex: 1 1 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-image img {
  max-width: 250px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    flex: 1 1 100%;
  }

  .about-info {
    text-align: center;
  }

  .about-image img {
    max-width: 180px;
    margin-top: 20px;
  }
}

.accent-skillmap {
  color: #64b09d; /* vert-bleu SkillMap */
}


/* ✅ Responsive (mobile & tablette) */
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    flex: 1 1 100%;
  }

  .about-info {
    text-align: center;
  }

  .about-image img {
    max-width: 180px;
    margin-top: 20px;
  }
}



/* Effet au survol */
button:hover, 
.cta-buttons a:hover, 
.btn-primary:hover {
    background: #003f4f; /* La couleur du bouton "Découvrez votre profil" au survol */
    color: white; /* Assure que le texte reste bien visible */
}

.menu-link.active {
    background: rgba(255, 255, 255, 0.2); /* Ajoute un léger fond */
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: bold;
    transition: background 0.3s;
}

/* Effet visuel doux au survol des liens du menu */
nav ul li a:hover,
.menu-link:hover {
  background: rgba(255, 255, 255, 0.15); /* léger fond clair au survol */
  border-radius: 5px;
  padding: 5px 10px; /* même padding que l'état actif */
  transition: background 0.3s ease, transform 0.2s ease;
  transform: translateX(3px); /* petit effet de retrait vers la droite */
}

/* Colonne image du 1er bloc structurée comme les autres */
.pourquoi-gauche { 
  flex: 0 0 40%;          /* même largeur de colonne que .pourquoi-item img */
  max-width: 300px;       /* même max que les autres images */
}

/* Le logo occupe toute la colonne, sans déformation */
.pourquoi-gauche .logo-serum {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* =======================================================
   💶 SECTION NOS OFFRES — alignement + design harmonisé
   ======================================================= */

/* fond pleine largeur */
#offres {
  background: #0a192f;
  color: white;
  padding: 80px 0;
  width: 100%;
}

/* bloc titre + intro */
.offres-header {
  text-align: center;
  margin-bottom: 40px;
}

.offres-header .section-title {
  color: #64ffda;
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.offres-header .section-subtitle {
  color: #e0e0e0;
  font-size: 1.1rem;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Conteneur principal : EXACTEMENT comme "Pourquoi SkillMap" */
.offres-inner {
  width: 100%;
  margin: 0;                 /* ⛔ plus de centrage */
  padding: 0 20px;           /* ✅ même padding que #pourquoi-skillmap */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ✅ tout à gauche */
  gap: 20px;                   /* ✅ même écart que .pourquoi-item */
}

/* Colonne image : même largeur que l'image "entreprises" */
.offres-inner .tarif-image-container {
  flex: 0 0 300px;     /* ✅ 300px comme en haut */
  max-width: 300px;
  display: flex;
  align-items: stretch; /* ← c’est cette ligne qui va faire le job */
  justify-content: flex-start;
}

.offres-inner .tarif-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Boîte cartes : prend le reste, même logique que la box "texte" de Pourquoi */
.offres-inner .tarif-cartes-container {
  flex: 1;                 /* ✅ prend tout l'espace restant */
  background: #132e4a;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  min-height: 320px;       /* hauteur visuelle comparable */
}

/* =========================================================
   🎨 STYLE DES CARTES TARIFS — affichage en 3 colonnes
   ========================================================= */

/* Conteneur des cartes (on le remet en flex 3 colonnes) */
.offres-inner .tarif-cartes-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex: 1;
  background: #132e4a;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  text-align: left;
  min-height: 320px;
}

/* Chaque carte */
.offres-inner .carte-tarif {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.offres-inner .carte-tarif:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* Titres */
.offres-inner .carte-tarif h3 {
  color: #64ffda;
  border-bottom: 1px solid #64b09d;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* Listes */
.offres-inner .carte-tarif ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.offres-inner .carte-tarif ul li {
  margin: 6px 0;
  color: #fff;
  line-height: 1.5;
}

.offres-inner .carte-tarif ul li strong {
  color: #f1dd7e;
}

/* Texte */
.offres-inner .carte-tarif p {
  color: #e0e0e0;
  line-height: 1.6;
}

/* Bouton */
.offres-inner .carte-tarif a.btn-primary {
  align-self: flex-start;
  margin-top: 12px;
  text-decoration: none;
  background-color: #64ffda;
  color: #0a192f;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.offres-inner .carte-tarif a.btn-primary:hover {
  background-color: #5ae0c4;
}

/* Responsive : les 3 cartes passent en pile */
@media (max-width: 992px) {
  .offres-inner .tarif-cartes-container {
    flex-direction: column;
  }

  .offres-inner .carte-tarif {
    width: 100%;
  }
}

/* Ajustement des marges et alignement parfait avec la section du dessus */
.offres-inner {
  width: 100%;
  margin: 0;
  padding-left: 20px;    /* bord gauche aligné */
  padding-right: 10px;   /* ✅ bord droit ajusté */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}

/* Boîte des cartes (légère réduction du padding droit) */
.offres-inner .tarif-cartes-container {
  flex: 1;
  background: #132e4a;
  padding: 30px 25px 30px 30px; /* ✅ marge droite réduite */
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  min-height: 320px;
}

/* Ajustement final de la largeur du bloc tarifs à droite */
.offres-inner .tarif-cartes-container {
  flex: 0 0 71%; /* ✅ réduit la largeur totale du bloc droit */
  max-width: 71%;
}
/* Autres styles de fin… */

/* =============================
   ALIGNEMENT JUSTIFIÉ (textes descriptifs)
   ============================= */
.texte-justifie {
  text-align: justify;
}


/* Ajustement vertical de l'image tarifs */
.offres-inner {
  align-items: center !important; /* force le centrage vertical */
}

.tarif-image-container {
  display: flex;
  align-items: center; /* centre l'image dans son conteneur */
}

.tarif-image {
  position: relative;
  top: 2px; /* ajuste finement la hauteur si besoin (+ ou -) */
}

/* responsive */
@media (max-width: 992px) {
  .offres-inner {
    flex-direction: column;
    align-items: center;
  }

  .offres-inner .tarif-image-container {
    max-width: 90%;
    justify-content: center;
  }

  .offres-inner .tarif-cartes-container {
    flex-direction: column;
    width: 90%;
    padding: 25px;
  }
}

/* ✅ Couleur harmonisée du slogan d’accueil */
.hero h2.hero-slogan {
  color: #c6e2f0 !important; /* bleu-gris clair lumineux */
  text-shadow: 0 0 12px rgba(160, 220, 255, 0.3);
}
/* Remonte légèrement le slogan */
.hero h2.hero-slogan {
  color: #c6e2f0 !important;
  text-shadow: 0 0 12px rgba(160, 220, 255, 0.3);
  position: relative;
  top: -65px; /* 🔼 remonte uniquement le slogan, sans déplacer le reste */
  z-index: 2;
  animation: haloPulse 6s ease-in-out infinite;
}


/* ✅ Correction finale de la transparence sur la box d'intro */
.hero-intro {
  position: relative !important;
  background: rgba(0, 0, 0, 0.6) !important; /* 🔹 effet fixe semi-transparent */
  z-index: 2 !important; /* 🔹 force l'affichage au-dessus du fond */
  padding: 20px !important;
  border-radius: 5px !important;
  color: #fff !important;
  text-align: justify !important;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(2px) !important; /* 🔹 optionnel : flou doux derrière */
}



/* ✅ Correction de la hauteur pour l'image "Expertise en relations humaines" */
.pourquoi-item img[alt="Expertise en relations humaines"] {
  height: auto;              /* réinitialise le comportement précédent */
  flex: 0 0 40%;             /* garde la même largeur que les autres images */
  align-self: stretch;       /* s'aligne sur la hauteur du texte */
  object-fit: cover;         /* recadre sans déformer */
  object-position: center;   /* garde le sujet bien centré */
  border-radius: 10px;
}

/* 🎨 Harmonisation du fond global avec l'image d'accueil */
body {
  background-color: #071C26;
  color: #c6e2f0;
}

section:not(#home) {
  background-color: #071C26 !important;
  position: relative;
  z-index: 1;
}

/* ✅ Boutons SkillMap – sobres et élégants */
.btn-primary {
  background-color: #64b09d; /* ton bleu-vert SkillMap */
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 12px 26px;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Survol – subtil et raffiné */
.btn-primary:hover {
  background-color: #5aa592; /* légèrement plus foncé */
  box-shadow: 0 4px 10px rgba(100, 176, 157, 0.3); /* halo doux et naturel */
  transform: translateY(-1px); /* petit relief discret */
}

/* Boutons cliqués */
.btn-primary:active {
  background-color: #4c8f7f;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transform: translateY(0);
}

/* ✅ Boutons SkillMap – version sobre et élégante (comme celui de l'accueil) */
.btn,
.btn-primary,
.button,
.cta {
  background-color: #0d2f3f !important; /* 🔹 bleu foncé élégant, cohérent avec le fond */
  color: #c6e2f0 !important; /* bleu glacier pour un contraste doux */
  border: 1px solid #14495e !important; /* contour subtil */
  border-radius: 6px !important;
  padding: 12px 26px !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  display: inline-block;
  text-decoration: none;
}

/* ✅ Survol : halo bleu doux et sobre */
.btn:hover,
.btn-primary:hover,
.button:hover,
.cta:hover {
  background-color: #133d50 !important; /* ton légèrement plus clair */
  box-shadow: 0 4px 10px rgba(70, 150, 180, 0.3) !important; /* halo bleuté subtil */
  transform: translateY(-1px) !important;
}

/* ✅ Clic : effet appuyé */
.btn:active,
.btn-primary:active,
.button:active,
.cta:active {
  background-color: #0b2533 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(0) !important;
}

/* ✅ Harmonisation du bouton "Envoyer" dans la section Contact */
input[type="submit"],
button[type="submit"] {
  background-color: #0d2f3f !important;
  color: #c6e2f0 !important;
  border: 1px solid #14495e !important;
  border-radius: 6px !important;
  padding: 12px 26px !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer;
}

/* ✅ Survol : halo bleu doux et sobre */
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #133d50 !important;
  box-shadow: 0 4px 10px rgba(70, 150, 180, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* ✅ Clic : effet appuyé */
input[type="submit"]:active,
button[type="submit"]:active {
  background-color: #0b2533 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(0) !important;
}

/* ✅ Harmonisation des boxes sur toutes les sections */
.pourquoi-item .texte,
.offres-inner .tarif-cartes-container,
.about-text {
  background: rgba(255, 255, 255, 0.1) !important; /* Gris bleuté transparent */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Survol subtil */
.pourquoi-item .texte:hover,
.offres-inner .tarif-cartes-container:hover,
.about-text:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

/* ✅ Ajustement de la teinte turquoise des titres */
/* ✅ Turquoise SkillMap premium lumineux */
h2, h3, h4, .section-title, .feature h3, .pourquoi-item h3 {
  color: #79d1ba !important; /* turquoise clair et élégant */
  transition: color 0.3s ease;
}

h2:hover, h3:hover, h4:hover, .section-title:hover {
  color: #8ae0ca; /* survol plus lumineux mais doux */
}

/* ✅ Uniformisation des boxes "Pourquoi SkillMap" avec celles des Services */
.pourquoi-item .texte {
  background-color: rgba(255, 255, 255, 0.1) !important; /* même gris bleuté que les Services */
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pourquoi-item .texte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* ✅ Box "À propos" confortable et bien alignée avec le logo */
.about-text {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 35px 55px; /* marges internes conservées */
  max-width: 65%; /* réduit légèrement pour libérer la place du logo */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  color: #c6e2f0;
  line-height: 1.6;
  display: inline-block; /* évite que la box prenne toute la ligne */
  vertical-align: middle; /* aligne mieux avec le logo */
}

/* ✅ Mise en page horizontale de la section À propos */
.about-container {
  display: flex; /* aligne la box et le logo sur une même ligne */
  align-items: center; /* aligne verticalement au milieu */
  justify-content: center; /* centre l’ensemble dans la section */
  gap: 40px; /* espace horizontal entre la box et le logo */
  flex-wrap: wrap; /* évite le débordement sur petits écrans */
}

/* ✅ Correction alignement "À propos" */
.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* pour mieux répartir */
  gap: 40px;
  flex-wrap: nowrap; /* force le maintien sur une ligne */
  max-width: 1100px;
  margin: 0 auto;
}

/* Ajuste la largeur des colonnes */
.about-text {
  flex: 0 1 65%; /* légèrement plus étroit */
  background: rgba(255, 255, 255, 0.08); /* discret fond clair */
  padding: 10px 55px 35px 55px; /* top | right | bottom | left */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.about-image {
  flex: 0 1 28%; /* un peu plus étroit */
  display: flex;
  justify-content: center;
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 🎨 Harmonisation finale des couleurs dans la section À propos */
.about-text {
  color: #bfe6fa; /* bleu clair uniforme et lisible */
  line-height: 1.6;
}

/* ✅ SkillMap et SERUM : bleu clair cohérent */
.about-text .skillmap-font,
.about-text .serum-clickable {
  color: #bfe6fa;
  font-weight: 600;
}

/* ✅ Phrase de conviction mise en relief */
.about-text .conviction {
  color: #ffffff;       /* blanc pur pour le relief */
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 0 12px rgba(150, 220, 255, 0.5); /* halo doux */
  margin-top: 15px;
  display: block;
}

/* ✅ Corrige la couleur du texte "Diplômé Praticien confirmé SERUM" */
.about-text strong {
  color: #bfe6fa; /* même bleu clair que le reste */
  font-weight: 700;
}

/* 🎨 Harmonisation du bloc titre + texte de la section "Nos Offres" */
.offres-header {
  background: rgba(255, 255, 255, 0.08); /* fond semi-transparent comme les autres sections */
  border-radius: 10px;
  padding: 25px 35px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  color: white;
  max-width: 900px;
  margin: 0 auto 30px; /* centré et espacé */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offres-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.offres-header .section-subtitle {
  color: #ffffff; /* bleu clair harmonisé */
  text-align: justify;
  margin-top: 10px;
}

/* Harmonisation explicite pour Offres + Contact (même rendu que Services/Pourquoi) */
.offres-header.services-header,
.contact-header.services-header {
  /* mêmes propriétés que .services-header (déjà définies) — on force l’application */
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 25px 35px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  color: #fff;
  max-width: 900px;
  margin: 0 auto 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offres-header.services-header:hover,
.contact-header.services-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.offres-header .services-texte,
.contact-header .services-texte {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 25px 35px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  margin-top: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #fff;              /* ✅ texte en blanc */
}

.offres-header .services-texte:hover,
.contact-header .services-texte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* ✅ Taille de police plus grande pour les textes des sous-box */
.services-texte p,
.pourquoi-texte p {
  font-size: 1.23rem;   /* augmente la taille (1.25rem ≈ 20px) */
  line-height: 1.8;     /* un peu plus d’espace entre les lignes */
}

/* === Bandeau en relief + halo néon SkillMap === */
.topbar {
  /* fond plus sombre pour que le halo ressorte bien */
  background: #071f2d; /* bleu nuit cohérent avec ton thème */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  /* léger relief intérieur + ombre douce */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 12px rgba(0,0,0,0.35);
}


/* ✅ Version mobile */
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    flex: 1 1 100%;
    padding: 30px;
  }

  .about-image {
    margin-top: 25px;
  }
}

/* ✅ Sous-box Contact ajustée (légèrement plus étroite) */
.contact-box {
  max-width: 950px; /* au lieu de 1100px */
  width: 88%;        /* au lieu de 95% */
  margin: 0 auto 40px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 40px 60px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ✅ Effet de survol inchangé */
.contact-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* ✅ Formulaire interne bien centré */
#contact-form {
  width: 100%;
  max-width: 880px; /* ajusté proportionnellement */
  margin: 0 auto;
}

/* ✅ Zone message confortable */
#contact-form textarea {
  min-height: 200px;
  resize: vertical;
}

/* ✅ Image coordonnées sous la box Contact */
.contact-image {
  text-align: center; /* centre horizontalement */
  margin-top: 30px;   /* espace au-dessus de l’image */
  margin-bottom: 40px;
}

.contact-image img {
  width: 300px; /* taille fixe ou auto selon ton image */
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.4)); /* halo subtil */
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* ✅ Effet au survol */
.contact-image img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.4));
}


#scrollToTop {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  background: #005f73;
  color: white;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  z-index: 9999; /* ✅ toujours au-dessus du header */
  box-shadow: 0 0 10px rgba(100, 176, 157, 0.5);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#scrollToTop:hover {
  background: #003f4f;
  transform: scale(1.1);
}

/* 🔧 Réduction de l’espace au-dessus des titres dans les en-têtes de section */
.services-header h2.section-title,
.offres-header h2.section-title,
.contact-header h2.section-title {
  margin-top: 0 !important;   /* supprime l’espace haut */
  margin-bottom: 10px;        /* espace bas harmonieux */
}

/* 🎨 Alignement vertical harmonisé pour les en-têtes de section */
.services-header,
.offres-header.services-header,
.contact-header.services-header {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centre verticalement le contenu */
  min-height: 150px; /* hauteur cohérente pour tous les en-têtes */
  padding: 20px 35px;
}

.services-header h2.section-title,
.offres-header h2.section-title,
.contact-header h2.section-title {
  margin-top: 0 !important;
  margin-bottom: 10px;
}

.services-texte {
  padding: 10px 30px;
}


/* ✨ Effet de relief doux et plus lumineux sur le bandeau de menu */
header {
  background-color: #0b3242; /* légèrement plus clair que #071f2d */
  box-shadow: 0 4px 12px rgba(100, 176, 157, 0.25); /* halo bleu-vert plus visible */
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

header:hover {
  background-color: #0d3e50; /* éclaircissement subtil au survol */
  box-shadow: 0 4px 22px rgba(100, 176, 157, 0.45);
}

/* Centrage du bouton "Contactez-nous pour établir votre profil" dans accueil */
.hero .cta-buttons {
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .hero .cta-buttons {
    padding: 0 16px;
  }
  .hero .cta-buttons .btn-primary {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 10px auto;
  }
}

/* ✅ Optimisation largeur des box et sous-box sur mobile */
@media (max-width: 768px) {

  html, body {
    overflow-x: hidden !important;
  }

  section {
    box-sizing: border-box;
    padding-left: 4vw;   /* légère marge latérale responsive */
    padding-right: 4vw;
    width: 100%;
  }

  /* ✅ Désactive effets hover qui décalent sur mobile */
  .service-item,
  .pourquoi-item,
  .offre-item,
  .contact-item {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
  }

  /* ✅ Les conteneurs principaux occupent toute la largeur visible */
  .offres,
  .contact,
  .offres-container,
  .contact-container {
    width: 100vw !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ✅ Sous-box élargies à la largeur maximale (lecture confortable) */
  .offre-item,
  .contact-box {
    width: 100% !important;      /* pleine largeur du conteneur */
    max-width: none !important;  /* supprime toute limite fixe */
    margin: 12px 0 !important;
    box-sizing: border-box;
  }

  /* ✅ Centrage des images */
  .offres img,
  .contact img {
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 700px;
    height: auto !important;
  }

  /* ✅ Correction générale anti-débordement */
  body * {
    box-sizing: border-box;
    max-width: 100vw !important;
  }
}


@media (max-width: 768px) {
  /* ✅ Centrage images */
  .pourquoi-item img {
    display: block;
    margin: 0 auto;
  }

  /* ✅ Taille du titre générale */
  .section-title {
    font-size: 1.4em;
  }

  .section-title span {
    font-size: 0.9em;
  }
  

  #pourquoi-skillmap .pourquoi-texte {
    width: 100%;
    text-align: justify;
  }

  #pourquoi-skillmap .section-title {
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 20px;
  }

  /* ✅ Ajustement des puces pour un rendu homogène */
  #pourquoi-skillmap .bullet,
  #pourquoi-skillmap .bullet-final {
    margin-right: 6px;
    transform: translateY(-1px);
  }
}

@media (max-width: 768px) {
  #offres .services-header {
    width: 92vw !important;              /* même largeur que Pourquoi SkillMap */
    margin: 0 auto 25px auto !important; /* centrée et espacée */
    padding: 20px 4vw;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {

  /* ✅ SECTION NOS OFFRES — largeur harmonisée et centrée */
#nos-offres .services-header {
  width: 92vw !important;                /* largeur fluide et équilibrée */
  margin: 0 auto 25px auto !important;   /* centrage horizontal */
  padding: 20px 4vw;                     /* respirations latérales */
  box-sizing: border-box;
}


  /* Sous-box Nos Offres */
  #nos-offres .offre-item {
    width: 100% !important;
    max-width: none !important;
    margin: 10px auto;
    box-sizing: border-box;
  }

/* ================================
   MOBILE ≤ 768px — Ajustements finaux
   ================================ */
@media (max-width: 768px) {

  /* 1 & 2) NOS OFFRES
     - La box "entête + intro" est déjà OK chez toi.
     - On aligne la largeur des BOX tarifs sur l'image "skillmap-tarifs"
       → pleine largeur visible avec un léger padding fluide. */
  #nos-offres .services-header,
  #nos-offres .offres-cards,
  #nos-offres .offres-grid,
  #nos-offres .tarifs,
  #nos-offres .tarifs-container {
    width: 100vw !important;
    margin-left: calc(-4vw) !important; /* compense le padding du parent */
    margin-right: 0 !important;
    padding-left: 4vw;
    padding-right: 4vw;
    box-sizing: border-box;
  }

  /* Toutes les cartes/offre-item = même largeur que l'image */
  #nos-offres .offre-item,
  #nos-offres .offre-card,
  #nos-offres .tarif-card {
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 !important;
    box-sizing: border-box;
  }

  /* Image tarifs : pleine largeur du même conteneur */
  #nos-offres img[src*="skillmap-tarifs"] {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }


/* ✅ Centrage du titre "À propos" */
#about .section-title {
  text-align: center !important;
  display: block;
  margin: 0 auto 25px auto;
  width: 100%;
}

/* ✅ Réglage largeur des cartes tarifs */
@media (max-width: 768px) {
  #offres .tarif-cartes-container {
    width: 92vw !important;              /* aligné avec le header */
    margin: 0 auto !important;
    padding: 20px 4vw !important;
    box-sizing: border-box;
  }

  #offres .carte-tarif {
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0;
  }

  #offres img.tarif-image {
    display: block;
    width: 92vw !important;
    margin: 0 auto;
    border-radius: 10px;
  }
}

/* ✅ réglage marge droite de l'entête Pourquoi SKILLMAP */
@media (max-width: 768px) {
  #pourquoi-skillmap .services-header {
    width: 92vw !important;       /* au lieu de 100vw */
    margin: 0 auto 25px auto !important;
    padding: 20px 4vw;
    box-sizing: border-box;
  }
}

/* =========================================
   ✅ Finitions et ajustements version mobile
   ========================================= */
@media (max-width: 768px) {

  /* 2️⃣ Réduit légèrement la box et la sous-box à droite dans "Pourquoi SkillMap" */
  #pourquoi-skillmap .pourquoi-item {
    width: 92vw !important;            /* aligne sur le reste du site */
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  #pourquoi-skillmap .pourquoi-item .texte {
    width: 90vw !important;            /* laisse une marge douce à droite */
    margin: 0 auto;
  }


/* =========================================
   ✅ Ajustements finaux mobile (version fine)
   ========================================= */
@media (max-width: 768px) {

  /* 2️⃣ POURQUOI SKILLMAP — Réduction subtile à droite */
  #pourquoi-skillmap .services-header {
    width: 90vw !important;           /* légèrement moins que 92vw */
    margin: 0 auto !important;
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
  }

/* =========================================
   ✅ Corrections finales mobile (version 100% ajustée)
   ========================================= */
@media (max-width: 768px) {

  /* 2️⃣ POURQUOI SKILLMAP — ajoute un espace au-dessus des images */
  #pourquoi-skillmap .pourquoi-item img {
    margin-top: 20px !important;
  }

  /* Réduit très légèrement la largeur globale de la box principale */
  #pourquoi-skillmap .services-header {
    width: 89vw !important;
    margin: 0 auto !important;
    padding: 20px 5vw !important;
  }

/* =========================================
   ✅ Correctif structurel mobile final
   ========================================= */
@media (max-width: 768px) {

/* ✅ Restauration de la section Accueil à son état d'origine */
#home {
  overflow: visible;
}

#home .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  box-sizing: border-box;
}

#home .hero-title {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin-bottom: 15px;
}

#home .hero-slogan {
  font-size: clamp(1.2rem, 4vw, 2rem);
  line-height: 1.4;
  margin-bottom: 25px;
}

#home .hero-intro {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}


/* ✅ Agrandit le slogan sur mobile */
@media (max-width: 768px) {
  #home .hero-slogan {
    font-size: 1.6rem !important; /* tu peux tester 1.6rem si tu veux plus grand */
    line-height: 1.3;
  }
}