/* 1) Variables globales */
:root {
  --header-height: 100px;           /* Hauteur de votre header */
  --header-offset: calc(var(--header-height) + 20px); /* Décalage pour le scroll */
  --couleur-principale: #00264C;
  --couleur-secondaire: #ffffff;
  --couleur-accent: #00264C;
  --couleur-fond: #f8f9fa;
}

/* 2) Reset de base */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 3) Comportement du scroll d’ancre */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset); /* décale l’ancre */
}

/* 4) Body et header */
body {
  margin: 0;
  padding-top: var(--header-height); /* décale tout le contenu sous le header */
  font-family: 'Arial', sans-serif;
  background-image: url('imagesWavy/vague1.gif');
  background-repeat: no-repeat;    /* pas de répétition */
  background-size: cover;          /* adapte l’image à tout l’écran */
  background-position: center;     /* centre l’image */
  background-attachment: fixed;    /* reste fixe au scroll */
  color: var(--couleur-principale);
  line-height: 1.6;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--couleur-principale);
  color: var(--couleur-secondaire);
  z-index: 1000;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 1) Transforme le container en flexbox horizontale */
.header-container {
  display: flex;
  align-items: center;            /* centre verticalement logo & nav */
  justify-content: space-between; /* pousse logo à gauche, nav à droite */
  padding: 1rem 2rem;             /* ajustez selon vos besoins */
}

/* 2) Taille et centrage du logo */
.header-container .pdf-logo {
  display: block;
  max-height: 60px; /* ou la hauteur que vous souhaitez */
  width: auto;
}


/* 5) Menu */
header nav ul {
  list-style: none;
  display: flex;
}

header nav ul li {
  position: relative;
  margin-left: 1rem;
}
header nav ul li a {
  color: var(--couleur-secondaire);
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
  display: block;
}
header nav ul li a:hover {
  background: var(--couleur-secondaire);
  color: var(--couleur-principale);
  border-radius: 5px;
}
header nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--couleur-secondaire);
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
header nav ul li:hover > ul {
  display: block;
}
header nav ul li ul li a {
  color: var(--couleur-principale);
  font-weight: normal;
  padding: 0.75rem 1rem;
}
header nav ul li ul li a:hover {
  background: var(--couleur-accent);
  color: #fff;
}

.contact-icons {
  display: flex;
  align-items: center;
  gap: 15px;  /* Ajoutez l'espacement entre les icônes */
}

.icon {
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;  /* Arrondi des coins pour l'élément de l'icône */
  overflow: hidden;    /* Assurez-vous que l'image respecte l'arrondi */
}

.icon img {
  width: 36px;         /* Largeur fixe (ajustez si nécessaire) */
  height: 36px;        /* Hauteur fixe (ajustez si nécessaire) */
  object-fit: cover;   /* Pour bien remplir le conteneur sans déformation */
  border-radius: 8px;  /* Arrondi des coins pour l'image à l'intérieur */
}

/* Votre tooltip téléphone existant */
.phone-tooltip {
  display: none;
  position: absolute;
  bottom: auto;
  top: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #ffffff;
  color: #00264C;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-size: 0.9rem;
  z-index: 10;
  pointer-events: none;
  margin-top: 0.25rem;
}

.icon:hover .phone-tooltip {
  display: block;
  border-radius: 4px;    /* bords arrondis légers */
}



/* Section intro */
/* 🌟 Section d'intro animée */
#intro {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out;
  overflow: hidden;
}

#intro.bg-loaded {
  background-image: url('imagesWavy/vague1.gif');
}

/* 🎬 Titre 1 avec effet texte masqué dans image */
.intro-text-mask {
  font-size: 9vw;
  font-weight: bold;
  background: white;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin: 0;
}

/* Conteneur animé */
.intro-wrapper {
  opacity: 0;
  transform: scale(1);
  transition: transform 1.2s ease, opacity 1.2s ease;
  will-change: transform, opacity;
}

.intro-wrapper.visible {
  opacity: 1;
}

.intro-wrapper.fade-out {
  opacity: 0;
  transform: scale(2.5);
}

/* 🎯 Titre 2 qui s'affiche ensuite */
.second-title {
  font-size: 5rem;
   font-weight: bold;     /* Pour un rendu plus marqué */
  color: white;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  margin-top: 2rem;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(0%, -120%);
}
.second-title a {
  color: white;
  text-decoration: none;
}

.second-title a:hover {
  text-decoration: underline; /* ou none si vous ne voulez jamais de soulignement */
}

.second-title.visible {
  opacity: 1;
}


/* 📱 Responsive */
@media (max-width: 768px) {
  .intro-text-mask {
    font-size: 14vw;
  }

  .second-title {
    font-size: 2rem;
  }
}

#video-background {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Titre “Nous découvrir” */
.second-title {
  color: #ffffff;        /* Blanc */
  font-size: 4rem;       /* Ajustez la taille selon votre convenance */
  font-weight: bold;     /* Pour un rendu plus marqué */
  text-align: center;
  margin-top: 2rem;
}


/* Sections - réduire hauteur */
section {
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1000px;
    background: rgba(255, 255, 255, 0.85); /* Blanc transparent */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
   
    border-radius: 12px;
}
/* Sections - réduire hauteur */
/* 🎯 Section Histoire — hauteur fixe */
#histoire {
    height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
    min-height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    background: linear-gradient(to right, #ffffff, #f0f8ff);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}

/* Conteneur image + texte */
.histoire-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    height: 100%;
    width: 100%;
}

/* Image */
.histoire-image {
    flex: 0 0 380px;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.histoire-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Texte */
.histoire-texte {
    flex: 1;
    min-width: 300px;
}

.histoire-texte h2 {
    font-size: 2rem;
    color: var(--couleur-principale);
    margin-bottom: 1rem;
}

.histoire-texte p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
    text-align: justify;
}

/* 📱 Responsive : plein écran et colonne sur mobile */
@media (max-width: 768px) {
    #histoire {
        height: 100vh;
        flex-direction: column;
        padding: 1.5rem;
    }

    .histoire-container {
        flex-direction: column;
        justify-content: center;
    }

    .histoire-image {
        flex: none;
        max-width: 90%;
    }
}
/* ===========================
   👤 Section Équipe : Fabrice
   =========================== */
#equipe_fabrice {
    height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
    min-height: 450px;       
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    background: linear-gradient(to right, #ffffff, #f0f8ff);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 120px; /* hauteur de ton header + un petit espace */
}

/* Conteneur image + texte */
.equipe_fabrice-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    height: 100%;
    width: 100%;
}

/* Image */
.equipe_fabrice-image {
    flex: 0 0 380px;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.equipe_fabrice-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Texte */
.equipe_fabrice-texte {
    flex: 1;
    min-width: 300px;
}

.equipe_fabrice-texte h2 {
    font-size: 2rem;
    color: var(--couleur-principale);
    margin-bottom: 1rem;
}

.equipe_fabrice-texte p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
    text-align: justify;
}

/* 📱 Responsive : plein écran et colonne sur mobile */
@media (max-width: 768px) {
    #equipe_fabrice {
        height: 100vh;
        flex-direction: column;
        padding: 1.5rem;
    }

    .equipe_fabrice-container {
        flex-direction: column;
        justify-content: center;
    }

    .equipe_fabrice-image {
        flex: none;
        max-width: 90%;
    }
}
#equipe_wydeline {
     height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
	 min-height: 450px;       
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    background: linear-gradient(to right, #ffffff, #f0f8ff);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 120px; /* hauteur de ton header + un petit espace */
}

/* Conteneur image + texte */
.equipe_wydeline-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    height: 100%;
    width: 100%;
}

/* Image */
.equipe_wydeline-image {
    flex: 0 0 380px;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.equipe_wydeline-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Texte */
.equipe_wydeline-texte {
    flex: 1;
    min-width: 300px;
}

.equipe_wydeline-texte h2 {
    font-size: 2rem;
    color: var(--couleur-principale);
    margin-bottom: 1rem;
}

.equipe_wydeline-texte p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
    text-align: justify;
}

/* 📱 Responsive : plein écran et colonne sur mobile */
@media (max-width: 768px) {
    #equipe_wydeline {
        height: 100vh;
        flex-direction: column;
        padding: 1.5rem;
    }

    .equipe_wydeline-container {
        flex-direction: column;
        justify-content: center;
    }

    .equipe_wydeline-image {
        flex: none;
        max-width: 90%;
    }
}

#conviction {
     height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
	 min-height: 450px;       
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    overflow: hidden;
    background: linear-gradient(to right, #ffffff, #f0f8ff);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	margin: 2rem auto !important;  /* centré avec 2rem d’espaces verticaux */
	padding: 2rem !important;      /* idem que equipe_wydeline */
    scroll-margin-top: 120px; /* hauteur de ton header + un petit espace */
}

/* Conteneur image + texte */
.conviction-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    height: 100%;
    width: 100%;
}

/* Image */
.conviction-image {
    flex: 0 0 380px;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.conviction-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Texte */
.conviction-texte {
    flex: 1;
    min-width: 300px;
}

.conviction-texte h2 {
    font-size: 2rem;
    color: var(--couleur-principale);
    margin-bottom: 1rem;
}

.conviction-texte p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
    text-align: justify;
}

/* 📱 Responsive : plein écran et colonne sur mobile */
@media (max-width: 768px) {
    #conviction {
        height: 100vh;
        flex-direction: column;
        padding: 1.5rem;
    }

    .conviction-container {
        flex-direction: column;
        justify-content: center;
    }

    .conviction-image {
        flex: none;
        max-width: 90%;
    }
}

/* Flèche fixe en haut, centrée horizontalement */
.scroll-arrow {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: var(--couleur-accent);
  animation: bounce 1.5s infinite;
  z-index: 10;
  display: block;
}


.scroll-arrow.up {
     position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    color: var(--couleur-principale);
    opacity: 1; /* 👈 Force l’apparition immédiate */
    z-index: 9999; /* 👈 Force l'affichage au-dessus de tout */
    text-align: center;
}


/* Animation douce */
@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(5px);
  }
}



/* ACTIVITÉS */
#activite {
     height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
	 min-height: 450px;       
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    background: linear-gradient(to right, #ffffff, #f0f8ff);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 120px; /* hauteur de ton header + un petit espace */
}

/* Conteneur image + texte */
.activite-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    height: 100%;
    width: 100%;
}
.activites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 320px;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flip-card-front {
    background-color: var(--couleur-secondaire);
}

.flip-card-front img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.flip-card-back {
    background-color: var(--couleur-principale);
    color: white;
    transform: rotateY(180deg);
    text-align: center;
}

.flip-card-back .btn {
    background-color: var(--couleur-accent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
}

/* FOOTER */
footer {
    background-color: var(--couleur-principale);
    color: var(--couleur-secondaire);
    text-align: center;
    padding: 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* RESPONSIVE */
@media (max-width: 700px) {
    .histoire-container,
    .equipe-container,
    .conviction-container {
        flex-direction: column;
    }

    .activites-grid {
        grid-template-columns: 1fr;
    }
}


/* 2/ On fait de la section #pdf un flex-container vertical plein écran */
#pdf {
  display: flex;
  flex-direction: column;
  height: 200vh;
  overflow: hidden;    /* pas de scroll interne */
}

/* 3/ Le titre reste à sa taille naturelle */
#pdf > h2 {
  flex: 0 0 auto;
  margin: 1rem 0;
  text-align: center;
}

/* 4/ On supprime toute limite de taille sur .pdf-container et on le rend extensible */
.pdf-container {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;    /* masque tout débordement */
}

/* 5/ L’objet PDF prend 100 % de l’espace disponible 
      et on ajoute #zoom=page-fit pour forcer l’ajustement */
.pdf-container object {
  width: 100%;
  height: 100%;
  border: none;
}

/* ================================
   SECTION "Ils nous font confiance"
   ================================ */
.clients-section {
  background: var(--couleur-fond);
  padding: 4rem 1rem;
  text-align: center;
}

.clients-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--couleur-principale);
}

.clients-section p {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--couleur-principale);
}

/* Slider logos */
.clients-slider {
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(250px * 8); /* nombre_de_logos × largeur_slide */
  animation: scroll 30s linear infinite;
}

.slide {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.slide img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

/* Animation de défilement */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 4)); } /* - (nombre_unique_logos × largeur_slide) */}


 /* Styles spécifiques à la page "Nos réalisations" */
     #recrutement {
      padding: 4rem 1rem;
      max-width: 1000px;
      margin: 0 auto;
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 2rem;
    }
    #recrutement h2 {
      text-align: center;
      margin-bottom: 1.5rem;
      color: var(--couleur-principale);
    }
    #intro p {
      line-height: 1.6;
      text-align: center;
      font-size: 1.1rem;
      color: #333;
    }
    .projet-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }
    .projet-card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      padding: 1.5rem;
      transition: transform 0.2s ease-in-out;
    }
    .projet-card:hover {
      transform: translateY(-5px);
    }
    .projet-card h3 {
      margin-bottom: 0.8rem;
      color: var(--couleur-accent);
    }
    .projet-card p {
      line-height: 1.4;
      color: #555;
    }
    @media (max-width: 700px) {
      #intro, #recrutement {
        padding: 2rem 1rem;
      }
      .projet-cards {
        grid-template-columns: 1fr;
      }
    }
	 /* Styles spécifiques à la page "Nous recrutons" */
    #offres {
      max-width: 1000px;
      margin: 2rem auto;
      padding: 1rem;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    #offres h2 {
      text-align: center;
      color: var(--couleur-accent);
      margin-bottom: 1.5rem;
    }
    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
      align-items: center;
      margin-bottom: 2rem;
    }
    .search-form label {
      font-weight: bold;
    }
    .search-form select,
    .search-form button {
      padding: 0.6rem 1rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .search-form button {
      background-color: var(--couleur-accent);
      color: #fff;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
    }
    .search-form button:hover {
      background-color: #0056b3;
    }
    .offre {
      margin-bottom: 3rem;
      padding: 1rem;
      border-radius: 12px;
      background-color: var(--couleur-secondaire);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      scroll-margin-top: 120px; /* pour compenser le header fixe */
    }
    .offre h3 {
      color: var(--couleur-principale);
      margin-bottom: 0.5rem;
    }
    .offre p {
      margin: 0.3rem 0;
      line-height: 1.4;
    }
    .offre h4 {
      margin-top: 1rem;
      color: var(--couleur-accent);
    }
    .offre ul {
      margin: 0.5rem 0 1rem 1.2rem;
      list-style: disc inside;
    }
    .offre a.btn {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.6rem 1.2rem;
      background-color: var(--couleur-accent);
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      transition: background-color 0.2s ease-in-out;
    }
    .offre a.btn:hover {
      background-color: #0056b3;
    }
    @media (max-width: 700px) {
      .search-form {
        flex-direction: column;
      }
    }
/* Conteneur global pour le flux */
#presentation-service {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}
#presentation-service h3 {
  margin-top: 2rem; /* ou ajustez la valeur pour obtenir l’espace souhaité */
}

#processus {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
  margin-bottom: 2rem; 
   height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
    min-height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}
#temoignages {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
  margin-bottom: 2rem; 
   height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
    min-height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}
#contact-prospects {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
  margin-bottom: 2rem; 
   height: 75vh;               /* 🔼 Augmenté pour plus d’espace */
    min-height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}
#recrutement {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
  margin-bottom: 2rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}
#prestation {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
  margin-bottom: 2rem; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}
#formation {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
  margin-bottom: 2rem;               /* 🔼 Augmenté pour plus d’espace */
    min-height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}
#bilan {
  display: flex;
  flex-direction: column; /* titre au-dessus, container ensuite */
  align-items: center;
  margin-bottom: 2rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 180px; /* hauteur de ton header + un petit espace */
}

/* ----------------------------------------------------
   Styles pour la section Bilan de Compétences (cercles)
   ---------------------------------------------------- */

/* Container pour aligner les 3 cercles en grille/flex */
#bilan .bilan-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 0;
  padding: 0 1rem;
}

/* Style de chaque cercle */
#bilan .bilan-circle {
  background-color: #f0f4f8; /* Couleur de fond claire (ajustable) */
  border: 2px solid #00aaff; /* Bordure aux couleurs Wavy (ajustable) */
  border-radius: 50%;        /* Pour obtenir un cercle parfait */
  width: 300px;              /* Largeur fixe (ajustez selon vos besoins) */
  height: 300px;             /* Hauteur identique à la largeur pour un cercle */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.5rem;           /* Petit espace intérieur */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Ajustement du titre à l’intérieur du cercle */
#bilan .bilan-circle h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: #003e5c;
}

/* Ajustement du paragraphe à l’intérieur du cercle */
#bilan .bilan-circle p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #1a1a1a;
}

/* Effet au survol : petit agrandissement */
#bilan .bilan-circle:hover {
  transform: scale(1.05);
}

/* Responsive : sur écrans étroits, placer les cercles en colonne */
@media (max-width: 900px) {
  #bilan .bilan-container {
    flex-direction: column;
  }

  #bilan .bilan-circle {
    margin-bottom: 1.5rem;
  }
}



/* Conteneur global pour le flux */
.process-container {
  display: flex;
  align-items: stretch;   /* étire chaque .process-box à la même hauteur */
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1rem;
  margin-top: 2rem;
  overflow-x: auto;       /* si la largeur dépasse, permet le scroll horizontal */
  padding-bottom: 1rem;
}

/* Style de chaque étape (rectangle) */
.process-box {
  display: flex;                 /* transforme la boîte en conteneur flex vertical */
  flex-direction: column;        /* empile titre + paragraphe verticalement */
  justify-content: space-between;/* répartit titre en haut, texte en bas/centre */
  position: relative;
  flex: 0 0 200px;               /* largeur fixe ; ajustez si besoin */
  background-color: #fff;
  border: 2px solid var(--couleur-accent);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Titre dans le rectangle */
.process-box h4 {
  font-size: 1.1rem;
  color: var(--couleur-principale);
  margin-bottom: 1rem;  /* espace sous le titre */
  line-height: 1.3;
}

/* Texte explicatif */
.process-box p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-word;
  
}


/* Pour que le titre de section reste au‐dessus des box */
#processus .section-title {
  display: block;
  text-align: center;
  margin-bottom: 1.5rem; /* espace entre le titre et les boîtes */
  font-size: 2rem;       /* ou la taille que vous souhaitez */
  color: var(--couleur-principale);
}

/* Si besoin de rendre le conteneur moins compact sur mobile */
@media (max-width: 700px) {
  .process-box {
    flex: 0 0 150px;
    padding: 0.75rem;
  }
  .process-container {
    gap: 0.5rem;
  }
  .process-box:not(:last-child)::after {
    right: -0.5rem;
    font-size: 1.2rem;
  }
}

/* =============== Override pour #intro en pleine largeur =============== */
section#intro {
  margin: 0 !important;      /* supprime toute marge */
  padding: 0 !important;     /* supprime tout padding */
  max-width: none !important;/* enlève la contrainte de largeur max */
  width: 100vw !important;   /* force la largeur à 100% de la fenêtre */
}