/**
* Template Name: Personal
* Template URL: https://bootstrapmade.com/personal-free-resume-bootstrap-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: ;
  /* Background color for the entire website, including individual sections */
  --default-color: #1d1d1d;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #000000;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #a9a8ad;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: rgb(255, 255, 255);
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #676666;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #000000;
  /* The default color of the main navmenu links */
  --nav-hover-color: #555a58;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #e4e1da;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #1a1a1a;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #fafafa;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #858d89;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #1a1a1a;
  --surface-color: #343434;
}

.dark-background {
  --background-color: rgba(15, 15, 15, 0.975);
  --default-color: #2d2727;
  --heading-color: #0e0e0e;
  --surface-color: #292929f9;
  --contrast-color: #000000;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* Conteneur de la vidéo */
.skyrocket-div {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Par défaut, occupe toute la hauteur de l'écran */
  overflow: hidden;
}

/* Vidéo principale */
.skyrocket-div video {
  width: 100%;
  /* Largeur 100% du conteneur */
  height: 100%;
  /* Hauteur 100% du conteneur */
  object-fit: cover;
  /* Remplir l'espace, mais avec découpe si nécessaire */
}

/* Pour les petits écrans (moins de 768px) */
@media (max-width: 768px) {
  .skyrocket-div {
    height: auto;
    /* La hauteur du conteneur devient automatique */
  }

  .skyrocket-div video {
    width: 100%;
    /* Largeur toujours à 100% */
    height: auto;
    /* Laisse la hauteur se rétrécir */
    object-fit: contain;
    /* La vidéo reste visible entièrement sans découpe */
    max-width: 100%;
    /* Limite la largeur à 100% */
    max-height: 100vh;
    /* Limite la hauteur à 100% de la hauteur de l'écran */
  }
}

.skyrocket-div {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Par défaut, occupe toute la hauteur de l'écran */
  overflow: hidden;
}

/* Vidéo principale */
.skyrocket-div video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Remplir l'espace, peut couper la vidéo */
  transition: transform 0.3s ease-in-out;
}

/* Pour les petits écrans (moins de 768px) */
@media (max-width: 768px) {
  .skyrocket-div {
    height: auto;
    /* La hauteur devient automatique pour s'ajuster */
  }

  .skyrocket-div video {
    width: 100%;
    /* Largeur toujours à 100% du conteneur */
    height: auto;
    /* Hauteur automatique pour garder le ratio d'aspect */
    object-fit: contain;
    /* Reste dans l'espace sans découper */
    max-width: 100%;
    /* La largeur ne dépasse pas le conteneur */
    max-height: 100vh;
    /* La hauteur ne dépasse pas la hauteur de l'écran */
  }
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Ajuster le texte et les sections sur les petits écrans */
@media (max-width: 767px) {
  .about .col-lg-4 {
    text-align: center;
  }

  .about .col-lg-8 {
    text-align: left;
  }
}


@media (max-width: 768px) {
  .wave {
    position: absolute;
    top: -30px;
    /* Remonté à 10 pixels du haut */
    left: 0;
    width: 100%;
    height: auto;
  }
}

.skills .section-title {
  position: relative;
  z-index: 10;
  /* L'élément avec le plus haut z-index */
}

.some-other-block {
  position: relative;
  z-index: 1;
  /* Valeur plus faible */
}

.skills .section-title {
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  /* Force un nouveau contexte d'empilement */
}

@media (max-width: 992px) {
  .about .content {
    text-align: center;
  }
}






/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  height: 100%;
  /* Assurez-vous que le body et le html prennent toute la hauteur de la page */
  margin: 0;
  /* Retirer les marges par défaut */

  background: url(../img/abstract_pattern_design_background_2007.jpg);
  background-size: cover;
  animation: gradientShift 50s ease-in-out infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}


a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(248, 247, 247, 0.3);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;

}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 32px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;


  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;

  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 25px;

  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);

  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .buttondescr {
    font-size: 1rem;
    color: white;
    background-color: #007BFF;
    /* Couleur du bouton */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
  }
}




.button-container {
  display: flex;

  margin-top: 0rem;
  /* Espace au-dessus des boutons */
  flex-wrap: wrap;
  /* Permet aux boutons de se déplacer sur la ligne suivante si nécessaire */
  gap: 1rem;
  /* Espacement entre les boutons */
  max-width: 80%;
  margin-left: 800px;
  margin-bottom: 20px;

}

.buttondescr:hover {
  background-color: #0056b3;
  /* Couleur au survol */
}

/* Ajuste les boutons sur très petits écrans */
@media (max-width: 600px) {
  .buttondescr {
    flex: 1;
    text-align: center;
  }
}

.portfolio-description-container {
  background: rgba(255, 255, 255, 0.8);
  /* Blanc avec 80% d'opacité */
  padding: 15px 20px;
  /* Réduction du padding vertical */
  border-radius: 10px;
  /* Arrondi des bords */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Effet d'ombre léger */
  max-width: 800px;
  /* Largeur max du bloc */
  margin: 10px auto;
  /* Réduction de la marge au-dessus */
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-coor)l;
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;

  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(24, 49, 74, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: black;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }

  .buttondescr {
    width: 200px;
    font-size: 1rem;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: #e4e4dc;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
  position: relative;
}

.col-lg-4 {
  margin-bottom: 25px;
  /* Ajuste selon ton besoin */
}

.footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer .social-links {
  margin: 0 0 30px 0;
}

.footer .social-links a {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  line-height: 1;
  margin: 0 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration: none;
}

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .credits {
  font-size: 13px;
  padding-top: 5px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
  margin-bottom: 150px;
  /* Ajoute une marge sous le titre de la page */
}




.page-title .heading {
  padding: 80px 0 40px 0;
  /* Réduire les valeurs de padding */
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 10px 0;
  /* Réduire l'espacement autour de la navigation */
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 40px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title div {
  color: var(--heading-color);
  margin: 0;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--heading-font);
}

.section-title2 {
  padding-bottom: 80px;
  position: relative;
}


#testimonials {
    padding-top: 57px; /* Ajuste selon l'effet recherché */
}

.section-title2 h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title2 h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title2 div {
  color: var(--heading-color);
  margin: 0;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.container222 {
  margin-top: 100px;
  padding-left: 80px;
  padding-right: 80px;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
}

.hero p {
  margin: 5px 0 0 0;
  font-size: 26px;
}

.hero p span {
  letter-spacing: 1px;
  border-bottom: 2px solid var(--accent-color);
}

.hero .social-links {
  margin-top: 25px;
}

.hero .social-links a {
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  font-size: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  transition: 0.3s;
}

.hero .social-links a:hover {
  background-color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 20px;
  }
}



/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h2 {
  font-weight: 700;
  font-size: 24px;
  padding-top: 20px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.about .content ul strong {
  margin-right: 10px;
}

.about .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats i {
  background-color: rgb(255, 255, 255);
  color: black;
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  width: 54px;
  height: 54px;
  font-size: 24px;
  border-radius: 50px;
  border: 2px solid var(--background-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-top: -100px;
}

.stats .stats-item {
  background-color: white;
  margin-top: -27px;
  padding: 30px 30px 25px 30px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 0;
  border: 2px solid #000000;
  /* Contour en couleur (bleu dans cet exemple) */
}

.stats-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Animation fluide */
}

.stats-item:hover {
  transform: scale(1.1);
  /* Zoom à 110% */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Ajoute une ombre pour un effet visuel */
}

i {
  transition: color 0.3s ease;
  /* Change la couleur de l'icône au survol */
}

.stats-item:hover i {
  color: #007bff;
  /* Couleur personnalisée au survol */
}

.stats .stats-item span {
  font-size: 36px;
  display: block;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

@media (max-width: 768px) {
  .col-lg-6 {
    margin-top: 60px;
    /* Ajuste la valeur selon tes besoins */
  }
}



/*--------------------------------------------------------------
# Interests Section
--------------------------------------------------------------*/
.interests .features-item {
  background-color: var(--surface-color);
  display: flex;
  align-items: center;
  padding: 20px;
  transition: 0.3s;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
}

.interests .features-item i {
  font-size: 32px;
  padding-right: 10px;
  line-height: 0;
}

.interests .features-item h3 {
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
}

.interests .features-item h3 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.interests .features-item:hover {
  border-color: var(--accent-color);
}

.interests .features-item:hover h3 a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Testimonials Section - Responsive
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: border-box;
  min-height: auto;
  padding: 20px;
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 80px;
  border-radius: 50%;
  margin: 0 auto 15px auto;
  display: block;
  border: 4px solid var(--background-color);
}

.testimonials .testimonial-item h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  padding: 15px;
  background: var(--surface-color);
  border-radius: 6px;
  position: relative;
  z-index: 1;
  background-color: white;
  border: 1px solid #000000;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 15px;
  position: relative;
}

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

.portfolio-description-container {
  background: rgba(255, 255, 255, 0.8);
  /* Blanc avec 80% d'opacité */
  padding: 15px 20px;
  /* Réduction du padding vertical */
  border-radius: 10px;
  /* Arrondi des bords */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Effet d'ombre léger */
  max-width: 800px;
  /* Largeur max du bloc */
  margin: 10px auto;
  /* Réduction de la marge au-dessus */
}


.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.solicor_img {
  width: 150px;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .testimonials .testimonial-item {
    padding: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    width: 70px;
    margin-bottom: 10px;
  }

  .testimonials .testimonial-item h3 {
    font-size: 14px;
  }

  .testimonials .testimonial-item h4 {
    font-size: 12px;
  }

  .testimonials .testimonial-item p {
    font-size: 14px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .testimonials .testimonial-item {
    padding: 10px;
  }

  .testimonials .testimonial-item .testimonial-img {
    width: 60px;
  }

  .testimonials .testimonial-item p {
    font-size: 13px;
    padding: 8px;
  }
}

@media screen and (max-width: 768px) {
  .testimonials {
    margin-top: 1100px;
    /* Augmente la marge en version mobile */
  }
}

@media screen and (max-width: 480px) {
  .testimonials {
    margin-top: 1000px;
    /* Augmente la marge en version mobile */
  }
}


/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/


.resume-page {
  background-image: url('../img/abstract_pattern_design_background_2007.jpg');
}

.resume .resume-title {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

.resume .resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-color);
  position: relative;
}

.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, rgb(102, 102, 102), transparent 20%);
  margin-bottom: 10px;
}

.resume .resume-item h5 {
  font-size: 16px;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}

.resume .resume-item ul {
  padding-left: 20px;
}

.resume .resume-item ul li {
  padding-bottom: 10px;
}

.resume .resume-item:last-child {
  padding-bottom: 0;
}

.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: var(--background-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  text-align: center;
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;

}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}





/* Scroll container *

/* Contenu interne */


.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--surface-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/

.service-details-page {
  background-image: url('../img/abstract_pattern_design_background_2007.jpg');
}

.service-details .services-list {
  background-color: rgb(206, 204, 204);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
  margin-bottom: 50px;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;

}

.portfolio .portfolio-content img {
  transition: 0.3s;

}


.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}



.bi-zoom-in {
  font-size: 60px;
  /* Taille ajustable selon tes préférences */
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
  background-color: white;
  /* Couleur de fond */
  background-color: rgba(255, 255, 255, 0.78);
  /* Blanc avec 70% d'opacité */
  padding: 20px;
  border-radius: 5px;

}


.image-above-footer {
  display: block;
  width: 30%;
  /* La largeur de l'image s'adapte à l'écran */
  margin: 0 auto;
  /* Centre l'image horizontalement */
  padding: 0;
  /* Pas de remplissage */
  position: relative;
  /* Utilisation de 'relative' pour un placement souple */
  z-index: 10;
  /* L'image restera devant le footer */
  bottom: 0;
  left: 50%;
  /* Centre horizontalement par rapport au parent */
  transform: translateX(-170%) translateY(-15%);
  /* Ajuste verticalement sans perturber le layout */
}


.contact .info-item .icon {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  margin-right: 15px;

}

.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px 0;

}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item .social-links a {
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  margin: 4px 6px 0 0;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);

}

.contact .info-item .social-links a:hover {
  color: var(--accent-color);
}

.contact .php-email-form {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 30px;
  background-color: white;
  /* Couleur de fond */
  background-color: rgba(255, 255, 255, 0.78);
  padding: 20px;
  border-radius: 5px;
}



button {
  padding: 20px 50px;
  font-size: 1.5rem;
  cursor: pointer;
  border: 0px;
  background: transparent;
  position: relative;
  transition: all .5s;
  overflow: hidden;
  color: #fff;
  border-radius: 30px;
  box-shadow: 0px -0px 0px 0px #e4e4dc, 0px 0px 0px 0px rgba(112, 112, 112, 0.5);
  margin-top: 70px;
}

button::after {
  content: '';
  width: 400px;
  height: 400px;
  position: absolute;
  top: -50px;
  left: -100px;
  background-image: linear-gradient(225deg, #7c7c7c 0%, #4f5354 50%, #545354 100%);
  z-index: -1;
  transition: all .5s;

}

button:hover::after {
  transform: rotate(150deg);
}

button:hover {
  transform: translate(0, -6px);
  box-shadow: 10px -10px 25px 0px rgba(95, 95, 95, 0.25), -10px 10px 25px 0px rgba(168, 169, 169, 0.25);
}

.slide-container {
  width: 100%;
  height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: rgb(110, 110, 250);
}

.image-slider {
  width: 100%;
  height: 600px;
  position: absolute;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
}

.slides-div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30px;
}

.img {
  position: relative;
  width: 240px;
  height: 370px;
  transition: 0.5s;
}

.button {
  position: absolute;
  width: 240px;
  height: 370px;
  transition: 0.5s;
  background-color: rgba(67, 67, 151, 0.2);
}

#slider-span1:target~.image-slider #img1,
#slider-span1:target~.image-slider #button-1 {
  width: 380px;
  height: 585px;
  background-color: transparent;
}

#slider-span2:target~.image-slider #img2,
#slider-span2:target~.image-slider #button-2 {
  width: 380px;
  height: 585px;
  background-color: transparent;
}

#slider-span3:target~.image-slider #img3,
#slider-span3:target~.image-slider #button-3 {
  width: 380px;
  height: 585px;
  background-color: transparent;
}

#slider-span1:target~.image-slider {
  left: 20%;
}

#slider-span2:target~.image-slider {
  left: 0%;
}

#slider-span3:target~.image-slider {
  left: -20%;
}


.experience {
  position: relative;
  padding: 45px 0 15px 0;
}

.experience .timeline {
  position: relative;
  width: 100%;
}

.experience .timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: #EF233C;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.experience .timeline .timeline-item {
  position: relative;
  background: inherit;
  width: 50%;
  margin-bottom: 30px;
}

.experience .timeline .timeline-item.left {
  left: 0;
  padding-right: 30px;
}

.experience .timeline .timeline-item.right {
  left: 50%;
  padding-left: 30px;
}

.experience .timeline .timeline-item::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 48px;
  right: -8px;
  background: #ffffff;
  border: 2px solid #EF233C;
  border-radius: 16px;
  z-index: 1;
}

.experience .timeline .timeline-item.right::after {
  left: -8px;
}

.experience .timeline .timeline-item::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 46px;
  right: 10px;
  z-index: 1;
  border: 10px solid;
  border-color: transparent transparent transparent #dddddd;
}

.experience .timeline .timeline-item.right::before {
  left: 10px;
  border-color: transparent #dddddd transparent transparent;
}

.experience .timeline .timeline-date {
  position: absolute;
  width: 100%;
  top: 44px;
  font-size: 16px;
  font-weight: 600;
  color: #EF233C;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
}

.experience .timeline .timeline-item.left .timeline-date {
  text-align: left;
  left: calc(100% + 55px);
}

.experience .timeline .timeline-item.right .timeline-date {
  text-align: right;
  right: calc(100% + 55px);
}

.experience .timeline .timeline-text {
  padding: 30px;
  background: #ffffff;
  position: relative;
  border-right: 5px solid #dddddd;
  box-shadow: 0 0 60px rgba(0, 0, 0, .08);
}

.experience .timeline .timeline-item.right .timeline-text {
  border-right: none;
  border-left: 5px solid #dddddd;
}

.experience .timeline .timeline-text h2 {
  margin: 0 0 5px 0;
  font-size: 22px;
  font-weight: 600;
}

.experience .timeline .timeline-text h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

.experience .timeline .timeline-text p {
  margin: 0;
  font-size: 16px;
}

@media (max-width: 767.98px) {
  .experience .timeline::after {
    left: 8px;
  }

  .experience .timeline .timeline-item {
    width: 100%;
    padding-left: 38px;
  }

  .experience .timeline .timeline-item.left {
    padding-right: 0;
  }

  .experience .timeline .timeline-item.right {
    left: 0%;
    padding-left: 38px;
  }

  .experience .timeline .timeline-item.left::after,
  .experience .timeline .timeline-item.right::after {
    left: 0;
  }

  .experience .timeline .timeline-item.left::before,
  .experience .timeline .timeline-item.right::before {
    left: 18px;
    border-color: transparent #dddddd transparent transparent;
  }

  .experience .timeline .timeline-item.left .timeline-date,
  .experience .timeline .timeline-item.right .timeline-date {
    position: relative;
    top: 0;
    right: auto;
    left: 0;
    text-align: left;
    margin-bottom: 10px;
  }

  .experience .timeline .timeline-item.left .timeline-text,
  .experience .timeline .timeline-item.right .timeline-text {
    border-right: none;
    border-left: 5px solid #dddddd;
  }
}




.fst-italic1 {

  font-size: 17px;

}

.fst-italic2 {
  font-style: italic;
  font-size: 17px;
}

.highlight-on-hover {
  color: black;
  background: linear-gradient(to top, #e1dcdc 50%, transparent 50%) no-repeat left bottom;
  transition: background-size 0.5s;
  font-family: 'Quicksand', sans-serif !important;
}



.highlight-on-hover:hover {
  background-size: 100% 80%;
  /* Affiche le surlignage à moitié en hauteur au survol */
  color: black;
}

.highlight-on-hover1 {
  color: black;
  background: linear-gradient(to top, #78cdb6 50%, transparent 50%) no-repeat left bottom;
  transition: background-size 0.5s;
}

.highlight-on-hover1:hover {
  background-size: 100% 80%;
  /* Affiche le surlignage à moitié en hauteur au survol */
  color: black;
}


.photoimg {
  float: right;
  /* Fait flotter l'image à droite */
  margin-left: 800px;
  /* Ajoute un espacement à gauche de l'image */
  max-width: 750px;
  /* Limite la largeur de l'image */
  height: auto;
  /* Ajoute un espacement à gauche de l'image */
}

/* Pour les petits écrans (comme les smartphones), ajuster la taille de l'image */
@media (max-width: 768px) {
  .photoimg {
    display: none;
  }
}

.propos {
  color: black
}


.wave-container {
  position: relative;
  width: 100%;
  height: auto;
  /* Ajuste la hauteur en fonction de son contenu */
}

.wave {
  width: 100%;
  height: auto;
  z-index: -888;
}



@media (max-width: 768px) {
  .rectangle {
    height: 80px;
    /* Ajuste la hauteur du rectangle si nécessaire pour les petits écrans */
  }
}

.rectangle {
  width: 100%;
  height: 100vh;
  margin-top: -100px;
  /* Ajuste cette valeur en fonction de la hauteur de la vague */
  /* Couleur blanche pour le rectangle */
}


@media (max-width: 768px) {
  .rectangle {
    height: 80px;
    /* Ajuste la hauteur pour les petits écrans */
    margin-top: -50px;
    /* Ajuste la marge pour ne pas trop pousser le rectangle */
  }
}





.second-wave {
  position: relative;
  z-index: 2;
  transform: rotate(180deg);
  margin-top: -2500px;
  margin-left: -100px;
  margin-top: -226px;
  width: 425vh;
}

/* Pour les écrans de téléphone */
@media (max-width: 122px) {
  .second-wave {
    margin-top: -60px;
    /* Ajuste la position verticale pour les petits écrans */
    margin-left: 0;
    /* Réinitialise la marge gauche pour qu'il s'adapte à l'écran */
    width: 100vw;
    /* Utilise 100% de la largeur de l'écran, ajustable selon le besoin */
  
}
}

.portfolio-filters li {
  font-weight: bold;
}

#skills {
  position: relative;
  z-index: 2;
  margin-top: -730px;
  background-color: white;
  /* Ajuste cette valeur pour que la section soit superposée */
}

.zigzag-box {
  position: absolute;
  top: 50%;
  /* Centrer verticalement */
  left: -100px;
  /* Commencer en dehors de l'écran à gauche */
  width: 50px;
  /* Largeur de la boîte */
  height: 50px;
  /* Hauteur de la boîte */
  background-color: #FF5733;
  /* Couleur de la boîte */
  animation: zigzag 5s linear infinite;
  /* Animation qui dure 5 secondes et se répète à l'infini */

}

@keyframes zigzag {
  0% {
    transform: translate(0, 0);
    /* Position de départ */
  }

  25% {
    transform: translate(25vw, -50px);
    /* Déplacement vers la droite et vers le haut */
  }

  50% {
    transform: translate(50vw, 0);
    /* Déplacement vers la droite, niveau du sol */
  }

  75% {
    transform: translate(75vw, 50px);
    /* Déplacement vers la droite et vers le bas */
  }

  100% {
    transform: translate(100vw, 0);
    /* Atteint le bord droit de l'écran */
  }
}

* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  transition: .2s linear;
  list-style: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
  color: black;

}

.container11 {

  padding: 15px 9%;
  padding-bottom: 100px;
  padding-top: 70px;
}

.container11 .heading {
  text-align: center;
  padding-bottom: 15px;
  color: #000000;
  text-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  font-size: 50px;
  margin-bottom: 50px;
}

.container11 .box-container11 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 15px;
}

.container11 .box-container11 .box {
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  border-radius: 5px;
  background: #fff;
  text-align: center;
  padding: 30px 20px;
}

.container11 .box-container11 .box img {
  height: 80px;
}

.container11 .box-container11 .box h3 {
  color: #444;
  font-size: 22px;
  padding: 10px 0;
}

.container11 .box-container11 .box p {
  color: #777;
  font-size: 15px;
  line-height: 1.8;
}

.container11 .box-container11 .box .btn {
  margin-top: 10px;
  display: inline-block;
  background: #333;
  color: #fff;
  font-size: 17px;
  border-radius: 5px;
  padding: 8px 25px;
}

.container11 .box-container11 .box .btn:hover {
  letter-spacing: 1px;
}

.container11 .box-container11 .box:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  transform: scale(1.03);
}

@media (max-width:768px) {
  .container {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .icon-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .circle-item {
    width: 22%;
  }
}



.section-title {
  margin-top: 120px !important;
  /* Forcer l'application */
  padding-top: 20px;
  /* Ajout d'espace interne */
  display: block;
  /* S'assurer que l'élément prend bien sa place */
  position: relative;
    /* Nécessaire pour que le z-index fonctionne */
    z-index: 10;
    /* Assure qu'il est au-dessus de la wave */
    /* Si nécessaire pour couvrir */
    padding-top: 90px;
    /* Pour ajouter de l’espace */
}

/* Appliquer un margin-top pour descendre le titre en format mobile */
@media (max-width: 768px) {

  /* Assure-toi que cette règle s'applique pour les écrans de petite taille */
  .section-title {
    margin-top: 80px;
    /* Ajuste cette valeur selon tes besoins pour descendre le titre */
  }

  /* Enlever ou ajuster les marges par défaut du titre */
  .section-title h2 {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .container.section-title h2 {
    padding-top: 100px;
    /* Ajuste selon la taille de l'écran */
  }
}

.section-title {
  position: relative;
  /* Nécessaire pour le positionnement de z-index */
  z-index: 1;
  /* S'assure que le titre se trouve au-dessus de la vague */
}

/* Applique un z-index inférieur à la vague pour qu'elle reste en dessous */
.wave-container .wave {
  position: absolute;
  /* Nécessaire pour le positionnement */
  z-index: -1;
  /* La vague passe sous tous les autres éléments */
}

.icon-container {
  display: flex;
  gap: 40px;
  /* Espacement entre les ronds */
  padding-right: 20px;
}

.circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

}

.circle {
  width: 100px;
  /* Taille des cercles */
  height: 100px;
  /* Taille des cercles */
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.circle i {
  font-size: 36px;
  /* Taille des icônes */
  color: #333;
}

.circle-item p {
  margin-top: 10px;
  /* Espace entre le cercle et le texte */
  font-size: 14px;
  /* Taille du texte */
  color: #333;
  text-align: center;
}

.icon-container {
  display: flex;
  gap: 40px;
  /* Augmente l'espace entre les ronds */
  padding-right: 20px;
}

.circle-item {
  display: flex;
  flex-direction: column;
  /* Alignement vertical pour le cercle et le texte */
  align-items: center;
  /* Centrer le texte sous le cercle */
}

.circle {
  width: 100px;
  /* Augmente la taille des cercles */
  height: 100px;
  /* Augmente la taille des cercles */
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.circle-icon {
  width: 60px;
  /* Ajuste la taille de l'image à l'intérieur du cercle */
  height: 60px;
  /* Ajuste la taille de l'image à l'intérieur du cercle */
}

.circle-item p {
  margin-top: 10px;
  /* Espacement entre le cercle et le texte */
  font-size: 14px;
  /* Taille de la police pour le texte */
  color: #333;
  /* Couleur du texte */
  font-weight: bold;
  /* Met le texte en gras */
}

.container1 {
  display: flex;
  align-items: center;
  height: 60vh;
}

/* Réinitialisation des marges et padding */

/* Conteneur principal */
.scroll {
  display: flex;
  flex-direction: column;
  /* Empile les lignes verticalement */
  justify-content: center;
  align-items: center;
  width: 100vw;
  /* Prend toute la largeur de l'écran */
  overflow: hidden;
  /* Cache le texte qui dépasse */
  margin: 0;
  padding: 0;
  position: relative;
  padding-top: 50px;
  /* Pousse les lignes vers le bas */
}

/* Les lignes de texte */
.RightToLeft,
.LeftToRight {
  white-space: nowrap;
    /* Empêche le texte de se diviser en plusieurs lignes */
    display: block;
    /* S'assure que le texte occupe toute la largeur */
    padding: 0;
    margin: 0;
    font-size: 18px;
    /* Ajuste la taille du texte */
    text-align: center;
    animation: scrollText 70s linear infinite;
}

/* Espacement entre les deux lignes */
.RightToLeft {
  margin-bottom: 10px;
  /* Espacement entre les lignes */
}

/* Animation pour faire défiler le texte */
@keyframes scrollText {
  0% {
    transform: translateX(100vw);
    /* Commence à droite (hors de l'écran) */
  }

  100% {
    transform: translateX(-100vw);
    /* Fin à gauche (hors de l'écran) */
  }
}

.scroll div {
  display: flex;
  gap: 2em;
}

.scroll p {
  font-size: 5em;
  color: rgb(0, 0, 0);
  font-weight: bold;
  margin-bottom: 1;
  line-height: 65px;
}

#stats {
  margin-bottom: 0;
  /* Enlève la marge en bas */
  padding-bottom: 0;
  /* Enlève l'espacement interne */
}

.second-wave {
  margin-bottom: 0;
  /* Retire la marge sous la vague */
  position: relative;
  top: 90px;
  /* Ajuste la position de la vague pour la remonter */
}

.RightToLeft {
  animation: RightToLeft 45s infinite linear;
}

@keyframes RightToLeft {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-50%);
  }
}

.LeftToRight {
  animation: LeftToRight 10s infinite linear;
}

@keyframes LeftToRight {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0%);
  }
}


/********************************************************/
.project-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-top: -100px;
}

.project {
  padding: 24px;
  border: 2px solid black;
  border-radius: 60px;
  text-align: center;
  background-color: white;


}

/* Style général des projets */
.project {
  position: relative;
  overflow: hidden;
  /* Cache l'excédent lors du zoom */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Animation fluide sur zoom et ombre */
  border-radius: 10px;
  /* Coins arrondis pour un effet plus doux */
}

.project:hover {
  transform: scale(1.05);
  /* Zoom à 105% lors du survol */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* Ombre douce pour donner du relief */
}

/* Effet zoom sur l'image */
.project img {
  transition: transform 0.3s ease;
  /* Transition d'agrandissement sur l'image */
}

.project:hover img {
  transform: scale(1.1);
  /* Zoom plus important sur l'image */
}

/* Style pour le texte du titre */
.highlight-on-hover {
  transition: color 0.3s ease;
  /* Transition de couleur */
}

.project:hover .highlight-on-hover {
  color: #02070c;
  /* Change la couleur du titre au survol */
}

/* Effet sur le fond de la description */
.header-action-aria {
  transition: background-color 0.3s ease;
  /* Transition du fond */
  padding: 10px;
  /* Ajoute un peu de padding pour l'effet */
  border-radius: 10px;
  /* Coins arrondis pour un effet doux */
}

.project:hover .header-action-aria {
  background-color: rgba(145, 145, 121, 0.1);
  /* Fond légèrement coloré */
}

.project img {
  border-radius: 30px;
  margin-bottom: 1rem;
  width: 100%;
  /* L'image occupe toute la largeur disponible */
  max-width: 250px;
  /* Fixe une largeur maximale */
  height: 200px;
  /* Hauteur fixe pour uniformiser toutes les images */
  object-fit: cover;
  /* Ajuste l'image sans la déformer */
  border: 3px solid #cdccd3;
  /* Contour en couleur (bleu dans cet exemple) */

}

.btn {
  border: 1px solid #000000;
  border-radius: 30px;
}

.btn:hover {
  background: black;
  color: white;
}

header {
  padding-top: 14rem;
}

.header-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 820px;
  gap: 20px;
  justify-content: space-between;
}

.project-box {
  text-align: center;
  border: #000000;

  z-index: 100;
}

.header-action-aria {
  margin-top: .7rem;
  text-align: center;
  gap: .7rem
}

.icon1 {
  width: 250px;
  height: max-content
}

.heading {
  text-align: center;
  margin-bottom: rem;
}

.p {
  font-size: 17px;
  line-height: 140%
}

.heading-p {
  padding-top: 6rem;
}

.header-right {
  text-align: center;
  margin: auto;
}

.header-right p {
  color: var(--color-darkvariant);
}

.header-right h2 {
  margin-top: .2rem;
}


#about .buttondescr {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #c7c6c1;
  /* Choisissez votre couleur */
  color: white;
  /* Texte en blanc */
  border: none;
  border-radius: 80px;
  /* Coins arrondis */
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 70px;
}



/* Rendre les boutons responsives - pour les petits écrans */
@media (max-width: 768px) {
  #about .buttondescr {
    width: 100%;
    /* Les boutons occupent toute la largeur */
    margin-top: 10px;
    /* Espacement réduit sur petits écrans */
  }
}

.container.section-title {
  position: relative;
  top: -50px;
  /* ajustez selon votre préférence */
}

.container.section-title2 {
  position: relative;
  top: 50px;
}

.container.project-container {
  position: relative;
  top: 50px;
}

.title-up {
  margin-top: -80px;
}

.cd-container {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 2px;
  bottom: 100px;
}

.cd-container::after {
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;

}

#cd-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25px;
  height: 100%;
  width: 4px;
  background: #9c9d9e;
}

@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }

  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}

.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}

.cd-timeline-block:first-child {
  margin-top: 0;
}

.cd-timeline-block:last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }

  .cd-timeline-block:first-child {
    margin-top: 0;
  }

  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #78777a, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-timeline-img {
  background: #353433;
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 30px;
    height: 30px;
    left: 50%;
    margin-left: -15px;
    margin-top: 15px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
}

.cd-timeline-content {
  position: relative;
  background: #b6b6b7;
  border-radius: 2px;
  padding: 1em;
}

span {
  text-transform: none !important;
}

/* Si une règle CSS globale force la capitalisation, on la désactive */
* {
  text-transform: unset !important;
  color :black;
}

.timeline-content-info {
  background: #8f9092;
  padding: 5px 10px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 2px;

  i {
    margin-right: 5px;
  }

  .timeline-content-info-title,
  .timeline-content-info-date {
    width: calc(50% - 2px);
    display: inline-block;
  }

  @media (max-width: 500px) {

    .timeline-content-info-title,
    .timeline-content-info-date {
      display: block;
      width: 100%;
    }
  }
}

.content-skills {
  font-size: 12px;
  padding: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  li {
    background: #40484D;
    border-radius: 2px;
    display: inline-block;
    padding: 2px 10px;
    color: rgba(255, 255, 255, 0.7);
    margin: 3px 2px;
    text-align: center;
    flex-grow: 1;
  }
}


.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}

.cd-timeline-content h2 {
  color: rgba(255, 255, 255, .9);
  margin-top: 0;
  margin-bottom: 5px;
}

.cd-timeline-content p,
.cd-timeline-content .cd-date {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-size: 0.8125rem;
}

.cd-timeline-content .cd-date {
  display: inline-block;
}

.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}

.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #333C42;
}

@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }

  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }

  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    color: white;
    margin-left: 0;
    padding: 1.6em;
    width: 36%;
    margin: 0 5%
  }

  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #333C42;
  }



  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #333C42;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
}



/* Animation d'apparition en fondu */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation de disparition en fondu */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

/* Ajout de classes pour contrôler l'animation */
.cd-timeline-block {
  opacity: 0;
  /* Bloc invisible par défaut */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;

}

.cd-timeline-block.show {
  animation: fadeIn 0.6s forwards;
}

.cd-timeline-block.hide {
  animation: fadeOut 0.6s forwards;
}

.cd-timeline-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.cd-timeline-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.cd-timeline-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.cd-timeline-block.visible {
  opacity: 1;
  transform: translateY(0);
}


.page-title {
  background-color: #e4e1da;
  /* Choisissez la couleur que vous souhaitez */
  padding: -100px;
  /* Ajoute de l’espace en haut et en bas */
}

#resume .container {
  background-color: rgb(232, 232, 232);

  /* Changez la couleur de fond selon vos préférences */
  border: 2px solid #2e2e2e;
  /* Bordure de l'élément (modifiez la couleur ici) */
  padding: 20px;
  /* Espace intérieur entre le contenu et la bordure */
  border-radius: 10px;
  /* Arrondir les coins si nécessaire */
  margin: 20px auto;
  /* Ajouter un espacement autour de la section */
  max-width: 1200px;
  /* Optionnel : Limiter la largeur max pour éviter un fond trop large */
}

.resume {

  opacity: 85%;
}

/* Vous pouvez également ajuster la bordure de chaque élément à l'intérieur de la section */
.resume-item {
  border-bottom: 1px solid #ccc;
  /* Bordure entre chaque élément, changez la couleur à votre goût */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.resume-title {
  color: #000000;
  /* Changer la couleur des titres si nécessaire */
  font-size: 1.5rem;
}

.services-page {
  background-image: url('../img/abstract_pattern_design_background_2007.jpg');
}

/* Appliquer un fond flou aux éléments de service */
.service-item {
  position: relative;
  overflow: hidden;
  /* S'assurer que l'image de fond ne dépasse pas du cadre */
}

.service-item .icon {
  position: relative;
  z-index: 2;
  /* Garder les icônes et le texte au-dessus de l'image floue */
}

/* Garder l'élément au-dessus de l'image floue */
.service-item h3,
.service-item p {
  position: relative;
  z-index: 2;
}

.service-item {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.service-item .icon {
  position: relative;
  z-index: 2;
  /* Les icônes et le texte doivent être au-dessus de l'image floue */
}

.service-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  /* Applique un flou de 10px */
  z-index: 1;
  /* L'image est derrière le contenu */
}

/* Styles pour le texte */
.service-item h3,
.service-item p,
.service-item-1 h3,
.service-item-1 p,
.service-item-2 h3,
.service-item-2 p,
.service-item-3 h3,
.service-item-3 p,
.service-item-4 h3,
.service-item-4 p,
.service-item-5 h3,
.service-item-5 p {
  color: white;
  /* Assure que le texte est en blanc pour un meilleur contraste */
}



/* Bloc - Communication */
.service-item {
  position: relative;
  overflow: hidden;
}

.service-item:before {
  content: '';
  /* Nécessaire pour afficher l'élément pseudo */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/comjpg.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
  /* Rend l'image plus sombre */
  z-index: -1;
  /* Place l'image derrière le texte */
}

/* Bloc 1 - Design - Graphisme */
.service-item-1 {
  position: relative;
  overflow: hidden;
}

.service-item-1:before {
  content: '';
  /* Nécessaire pour afficher l'élément pseudo */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/graphique.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
  /* Rend l'image plus sombre */
  z-index: -1;
  /* Place l'image derrière le texte */
}

/* Bloc 2 - Marketing */
.service-item-2 {
  position: relative;
  overflow: hidden;
  /* Assure que tout dépassement est caché */
}

.service-item-2:before {
  content: '';
  /* Nécessaire pour afficher l'élément pseudo */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/marketing.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
  /* Rend l'image plus sombre */
  z-index: -1;
  /* Place l'image derrière le texte */
}

/* Bloc 3 - Développement Web */
.service-item-3 {
  position: relative;
  overflow: hidden;
}

.service-item-3:before {
  content: '';
  /* Nécessaire pour afficher l'élément pseudo */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/developpementweb.webp');
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
  /* Rend l'image plus sombre */
  z-index: -1;
  /* Place l'image derrière le texte */
}

/* Bloc 4 - Audiovisuel */
.service-item-4 {
  position: relative;
  overflow: hidden;
}

.service-item-4:before {
  content: '';
  /* Nécessaire pour afficher l'élément pseudo */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/audiovisuelle.jpeg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
  /* Rend l'image plus sombre */
  z-index: -1;
  /* Place l'image derrière le texte */
}

/* Bloc 5 - Vente */
.service-item-5 {
  position: relative;
  overflow: hidden;
}

.service-item-5:before {
  content: '';
  /* Nécessaire pour afficher l'élément pseudo */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/vente.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
  /* Rend l'image plus sombre */
  z-index: -1;
  /* Place l'image derrière le texte */
}

/* Garder l'élément au-dessus de l'image floue */
.service-item h3,
.service-item p {
  position: relative;
  z-index: 2;
}

.service-item h3,
.service-item p {
  color: #ffffff9a;
  /* couleur du texte */
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.7),
    /* ombre à droite et en bas */
    -2px -2px 4px rgba(0, 0, 0, 0.7),
    /* ombre à gauche et en haut */
    2px -2px 4px rgba(0, 0, 0, 0.7),
    /* ombre en diagonale */
    -2px 2px 4px rgba(0, 0, 0, 0.7);
  /* ombre inverse en diagonale */
  /* contour de 2px avec couleur noire */
  /* contour de 2px avec couleur noire */
}

.service-item {
  background-color: rgba(255, 255, 255, 0.8);
  /* Fond blanc avec opacité */
  padding: 20px;
  /* Ajoute un peu d'espace autour du contenu */
  border-radius: 8px;
  /* Arrondir les coins du bloc */
}

.service-item {
  position: relative;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  /* Fond blanc avec opacité pour un léger effet transparent */
  border-radius: 8px;
  /* Coins arrondis */
  z-index: 2;
}

/* L'élément contenant l'image floue */


/* Ombre portée sur le texte pour améliorer la lisibilité */
.service-item h3,
.service-item p {
  color: #ffffff;
  /* Couleur du texte */

}

.service-item h3 {
  position: relative;
  display: inline-block;
  color: #ffffff;
  /* Couleur du texte */
  font-weight: bold;
}

.service-item h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  /* Surligner seulement la moitié du texte */
  height: 3px;
  /* Épaisseur de la ligne */
  background-color: #ff5e57;
  /* Couleur du surlignage (ajustez selon votre préférence) */
  z-index: -1;
}

#about {
  padding: 60px 0;
  /* Un peu d'espace autour de la section */
  /* Prend toute la largeur de l'écran */
  position: relative;
}

#about .container {
  background-color: #ffffff;
  /* Fond blanc pour le contenu */
  border-radius: 12px;
  /* Bords arrondis pour un effet plus doux */
  padding: 10px;
  /* Espacement interne pour le contenu */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  /* Ombre subtile pour ajouter de la profondeur */
  position: relative;
  z-index: 2;
  /* Assure que le contenu reste au-dessus du fond */
}

.container11 .box-container11 .box .icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  /* Espace entre les icônes */

  margin-bottom: 15px;
  /* Espace en dessous des icônes */

}

.container11 .box-container11 .box .icons img {
  height: 55px;
  /* Ajustez la taille des icônes si nécessaire */
  width: 55px;
}

.container11 .box-container11 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 15px;
}

.container11 .box {
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  border-radius: 5px;
  background: #fff;
  text-align: center;
  padding: 30px 20px;
}

.container11 .box .icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  /* Espacement entre les icônes */
  margin-bottom: 15px;
}

.container11 .box .icons img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  /* Rend l'image circulaire */
  border: 2px solid #ccc;
  /* Ajoute une bordure */
  padding: 5px;
  /* Espace interne autour de l'image */
  background-color: #f5f5f5;
  /* Fond clair derrière l'image */
  transition: transform 0.3s ease;
  /* Animation au survol */
}

.container11 .box .icons img:hover {
  transform: scale(1.1);
  /* Agrandissement au survol */
}

.container11 .box h3 {
  color: #444;
  font-size: 22px;
  padding: 10px 0;
}

.container11 .box p {
  color: #777;
  font-size: 15px;
  line-height: 1.8;
}

.container11 .box .btn {
  margin-top: 10px;
  display: inline-block;
  background: #333;
  color: #fff;
  font-size: 17px;
  border-radius: 5px;
  padding: 8px 25px;
}

.container11 .box .btn:hover {
  letter-spacing: 1px;
}

.container11 .box:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, .3);
  transform: scale(1.03);
}

@media (max-width:768px) {
  .container11 {
    padding: 20px;
  }
}

#section-2 {
  background-color: #d3d3d3;
  /* Gris foncé */
  color: #fff;

}

/* Transition wave */
.transition-wave svg {
  display: block;
  width: 100%;
  height: auto;

  /* Inverser pour que la vague pointe vers la section 1 */
  transform: rotate(720deg);
}

.rectangle11 {
  width: 100%;
  height: 800px;
  background-color: #ffffff;
  margin-top: -50px;
}

.transition-wave2 {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1) rotate(180deg);
  /* Inverse horizontalement et tourne la forme de 180° */
  z-index: -999;
  transform-origin: center;

}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Adapte la vidéo pour remplir tout l'espace */
  z-index: 2;
}

.skyrocket-div {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Hauteur de l'écran */
  overflow: hidden;
  /* Évite tout débordement de contenu */
}

.skyrocket-div video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Adapte la vidéo pour remplir l'espace */
}

.full-width-bar {
  width: 100%;
  height: 70px;
  /* Hauteur du rectangle */
  background-color: #e4e1da;
  /* Couleur de fond */
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Cache les mots qui sortent du rectangle */
  position: relative;
}

.scrolling-text {
  white-space: nowrap;
  /* Empêche les mots de passer à la ligne */
  animation: scroll 40s linear infinite;
  /* Animation continue */
  font-size: 20px;
  color: #000000;
  /* Couleur du texte */
  display: flex;
  animation: scroll 50s linear infinite;
}

.scrolling-text span {
  padding: 0 2rem;
  /* Espacement entre les textes */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
    /* Le texte commence déjà visible */
  }

  100% {
    transform: translateX(-100%);
    /* Le texte sort de l'écran */
  }
}

.floating-animation {
  animation: float 2s infinite ease-in-out;
  /* Animation de rebond */
  display: inline-block;
  /* Assurez-vous que l'image est inline-block */
}

@keyframes float {
  0% {
    transform: translateY(0);
    /* Position initiale */
  }

  50% {
    transform: translateY(-10px);
    /* Monte légèrement */
  }

  100% {
    transform: translateY(0);
    /* Retour à la position initiale */
  }
}

.circle-item {
  transition: transform 0.3s ease;
  /* Transition pour l'effet de zoom */
  width: 100%;
  /* Permet de rendre l'élément responsive */
}

.circle-item:hover {
  transform: scale(1.1);
  /* Zoom léger sur le cercle au survol */
}

.subtitle {
  --heading-font: "Raleway", sans-serif;
  font-weight: bold;
  /* Ajoute un espace au-dessus du titre */
  margin-top: 10px;
  /* Ajoute un espacement entre le titre et les images */
}

.imageeee {
  width: 50px;
  /* Largeur fixe */
  height: 50px;
  /* Hauteur fixe */
  object-fit: contain;
  /* Empêche le recadrage de l'image */
  margin-right: 10px;
  display: inline-block;
  margin-top: 20px;
}

.imageeee-container {

  display: flex;
  flex-direction: column;
  /* Aligne l'image et le sous-titre verticalement dans chaque bloc */
  align-items: center;
  /* Centre l'image et le sous-titre dans chaque bloc */


}

.imageeees-container {
  display: flex;
  /* Alignement des éléments horizontalement */
  justify-content: 10px;
  /* Espacement entre les éléments */
  /* Espacement sous le titre principal */
  gap: 20px;

}

.image-subtitle {
  font-size: 14px;
  /* Taille du sous-titre */
  color: #666;
  /* Couleur du sous-titre */
  margin-top: 10px;

  /* Espacement entre l'image et le sous-titre */
  font-weight: bold;


}

.container222 {
  margin-top: 80px;
}

p {
  text-transform: none;
  font-family: "Quicksand", sans-serif;
  color: #000000
}

h1 {
  text-transform: none;
}

h2 {
  text-transform: none;
}

h3 {
  text-transform: none;
}


h4 {
  text-transform: none;
}

h5 {
  text-transform: none;
}

h6 {
  text-transform: none;

}

.rectangle222 {
  display: none;
  /* Masqué par défaut */
  width: 300px;
  height: 100px;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Lorsque le rectangle devient visible */
.rectangle222.show {
  display: block;
  opacity: 1;
}

.portfolio-intro {
  margin-bottom: 70px;
  text-align: center;
  color: red;
  font-size: px;
}

.cta-button {
  padding: 12px 60px;
  background-color: #8b8b8b;
  color: white;
  text-decoration: none;
  border-radius: 40px !important;
  font-size: 16px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.cta-button:hover {
  transform: scale(1.1);
  /* Grossit légèrement */
  box-shadow: 0 0 15px #585858;
  /* Ombre autour du bouton */
}

.section {
  padding: 0 0;
}

.stats-item {
  text-align: center;
  margin-top: 30px;
  /* Plus d'espace au-dessus de chaque élément */
}


@media (max-width: 1200px) {
  .col-lg-3 {
    width: 50%;
    margin-bottom: 40px;
    /* Augmentation de l'espacement entre les éléments */
  }
}



@media (max-width: 768px) {
  .col-lg-3 {
    width: 100%;
    margin-bottom: 50px;
    /* Augmenter encore plus l'espacement entre les éléments */
    padding: 15px;
    /* Plus de padding pour un meilleur espacement intérieur */
  }

  .stats-item {
    font-size: 14px;
  }

  .titleskills {
    font-size: 16px;
  }

  .container {
    padding: 0 20px;
    /* Augmenter légèrement le padding du container */
  }

  .stats-item i {
    font-size: 35px;
    /* Agrandir l'icône pour une meilleure visibilité sur mobile */
    margin-bottom: 20px;
    /* Plus d'espace autour de l'icône */
  }
}

@media (max-width: 768px) {

  /* Assurer que sur mobile, les projets occupent toujours 100% de la largeur */
  .project {
    width: 100%;
    /* Chaque projet prendra 100% de la largeur */
    margin-bottom: 30px;
    /* Espace entre les projets */
  }

  .cta-button-container {
    margin-top: 80px;
  }

  .cta-button {
    padding: 15px 60px;
    font-size: 14px;
  }
}

/* Style de base */

/* Responsive pour les petits écrans (tablettes, téléphones) */
@media (max-width: 768px) {
  .container1 p {
    font-size: 16px;
    /* Taille du texte un peu plus petite */
  }
}

/* Pour les écrans très petits (téléphones) */
@media (max-width: 480px) {
  .container1 p {
    font-size: 14px;
    /* Taille du texte encore plus petite */
  }
}

/* Utilisation d'unités relatives comme le vw pour le texte fluide */
@media (max-width: 768px) {
  .container1 p {
    font-size: 4vw;
    /* La taille du texte sera 4% de la largeur de la fenêtre */
  }
}

@media (max-width: 768px) {
  .container1 p {
    font-size: 5vw;
    /* La taille du texte sera 5% de la largeur de la fenêtre */
  }
}

------------------------------
/* Encadré pour le texte */

/* Texte principal */
.title {
  color: #8b8b8b;
  margin-bottom: 15px;
}

.subtitle {
  text-decoration: underline;
  color: #000000;
  margin-bottom: 20px;
}

/* Surlignage important */
.highlight {
  font-weight: 600;
  color: #000000;
}

.highlight-red {
  color: #a41919;
}

/* Style des liens */
.highlight-on-hover {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
}

.highlight-on-hover:hover {
  text-decoration: underline;
}



.buttondescr:hover {
  background: #8b8b8b;
}

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

  .about .col-lg-4 img {
    max-width: 60%;
  }

  .about .col-lg-8 {
    max-width: 100%;
    padding: 15px;
  }

  .about-box {
    padding: 15px;
  }

  .button-container {
    flex-direction: column;
    align-items: center;
  }

  .buttondescr {
    width: 90%;
    max-width: 250px;
    margin: 10px 0;
  }
}









-------------------------
/* Sur les écrans de petite taille (téléphone) */


.transition-wave,
.transition-wave2 {
  position: relative;
  /* Ajoute cette ligne pour rendre z-index actif */
  margin-top: -50px;
  z-index: -100;
  /* Les vagues seront derrière les autres éléments */
}

@media (max-width: 768px) {

  /* Sur mobile et tablette */
  .project-container {
    grid-template-columns: 1fr;
    /* Une seule colonne sur les petits écrans */
    gap: 30px;
    /* Espacement entre les projets */
  }

  .cta-button-container {
    margin-top: 80px;
  }

  .cta-button {
    padding: 15px 60px;
    font-size: 14px;
  }
}

@media (min-width: 769px) {

  /* Sur écrans plus grands */
  .project-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Plusieurs colonnes sur grands écrans */
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .circle-item {
    width: 90px;
  }

  .circle {
    width: 70px;
    height: 70px;
  }

  .circle-icon {
    max-width: 50px;
    max-height: 50px;
  }

  /* Ajout d'un espace en dessous uniquement en mode mobile */

}



/* Responsive pour les téléphones */
@media (max-width: 768px) {
  #about .container {
    width: 90%;
    /* Garde des marges sur les côtés */
    padding: 15px;
    /* Augmente légèrement l'espacement interne */
  }
}

#about {
  margin-bottom: 50px;
  /* Ajuste cette valeur selon ton besoin */
}

@media (max-width: 768px) {
  .skills {
    position: relative;
    top: 650px;
    /* Déplace la section plus bas sur mobile */
  }
}





/* Assurer que le conteneur des boutons est bien centré et ne dépasse pas */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Centrer horizontalement */
  align-items: center;
  /* Centrer verticalement */
  gap: 20px;
  width: 100%;
  /* Assurer que la largeur est bien à 100% */
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto;
  max-width: 100%;
  margin-left: 30%;
  /* Empêche le débordement */
}




/* Responsivité pour les petits écrans (moins de 768px) */
@media (max-width: 768px) {
  .button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centrer les éléments verticalement */
    align-items: center;
    /* Centrer les éléments horizontalement */
    padding: 10px;
    width: 100%;
    /* S'assurer que la largeur est de 100% */
  }

  .button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;
    margin: 0 auto;
  }

  .buttondescr {
    width: 80%;
    max-width: 300px;
    margin-bottom: 10px;
    margin-left: 0;
    /* Aucune marge à gauche */
    margin-right: 0;
    /* Aucune marge à droite */
  }


}




@media screen and (max-width: 768px) {
  #stats {
    position: relative !important;
    /* Assure que le parent est positionné */
    overflow: visible !important;
    /* Permet à la wave de dépasser */
    margin-top: 830px;
    /* Place le conteneur au-dessus des autres éléments */
  }

  .wave.second-wave {
    display: block !important;
    position: absolute !important;
    top: 200px;
    /* left: 0 !important; */
    width: 724px !important;
    height: auto !important;
    min-height: 300px !important;
    transform: translateY(-200px) !important;
    transform: translateY(-200px) scaleY(-1) !important;
  }
}


@media screen and (max-width: 768px) {
  .container.section-title {
    margin-bottom: 30px !important;
    /* Ajoute un espace vers le bas */
  }

  .titleskills {
    margin-bottom: 20px !important;
    /* Espacement spécifique pour la section "Quelque chiffres..." */
  }
}

@media screen and (max-width: 768px) {
  .rectangle11 {
    position: relative;
    padding-top: 40px !important;
    padding-bottom: 90px !important;
    /* Essaie sans valeur !important si possible */
    margin-bottom: 90px !important;
    height: auto;
    /* Si vous voulez que l'élément s'ajuste en fonction de son contenu */
    min-height: 100px;
    /* Optionnel, ajuste la hauteur minimale */
  }

}



@media screen and (max-width: 768px) {

  /* On réinitialise toute marge et padding pour la transition-wave */
  .transition-wave {
    margin: 0 !important;
    /* Enlever toute marge */
    padding: 0 !important;
    /* Enlever tout padding */
  }

  /* On réinitialise aussi pour le rectangle11 et on ajuste les espacements */
  .rectangle11 {
    margin-top: -10px !important;
    /* Supprimer la marge en haut */
    padding-top: 50px !important;
    /* Conserver un peu de padding au dessus */
    padding-bottom: 50px !important;
    /* Conserver un peu de padding en bas */
  }

  .contenu {
    margin-top: 50px;
  }

}

/* Swiper container */
.swiper {
  width: 100%;
  height: auto;
}

/* Section title */
#testimonials .section-title2 {
  margin-top: -50px;
  /* Ajustez selon vos besoins */
  text-align: center;
}

/* Testimonial Item */
.testimonial-item {
  text-align: center;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Quote Styling */
.testimonial-item p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* Image in Testimonials */
.testimonial-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

/* Adjusting for smaller screens */
@media screen and (max-width: 768px) {
  .testimonial-item {
    padding: 20px;
  }

  .testimonial-img {
    width: 60px;
    height: 60px;
  }
}

@media screen and (max-width: 768px) {
  .rectangle11 {
    position: relative;

    /* Déplace le bloc vers le haut, ajustez la valeur si nécessaire */
    padding-top: 0 !important;
    padding-bottom: 100px !important;
    margin-bottom: 20px !important;
  }

  /* Ajustements pour le carrousel Swiper */
  .swiper-container {
    padding: 10px;
    transform: translateY(9500px) !important;
    /* Évitez les débordements, ajuste la largeur si besoin */
  }

  /* Ajustement du témoignage (exemple) */
  .testimonial-item {
    padding: 15px;
    /* Réduit l'espace pour les petits écrans */
  }

  .testimonial-img {
    width: 60px;
    /* Réduit la taille des images pour mieux s'adapter */
    height: 60px;
  }
}

@media screen and (max-width: 768px) {

  /* Réduire la marge du bloc 1 */
  .section-title2 {
    margin-bottom: 80px !important;
    /* Réduit l'espace sous le bloc 1 */
  }

  /* Réduire l'espace entre les sections */
  #testimonials {
    margin-top: 0 !important;
    /* Ajuste l'espace au-dessus des témoignages */
  }

  /* S'il y a des marges supplémentaires, vous pouvez les ajuster aussi */
  .container222 {
    margin-top: 90px !important;
    /* Ajuste l'espace au-dessus de ce conteneur */
  }
}

@media (max-width: 768px) {
  .rectangle11 {
    margin-top: -20px;
    /* Remonte encore plus le bloc */
    padding-top: 60px;

  }
}


.container.section-title {
  margin-top: 10px !important;
  /* Ajuste l'espace au-dessus du titre */

  /* Ajuste l'espace sous le titre */
}


@media screen and (max-width: 768px) {
  .scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centrer les lignes si nécessaire */
  }

  .RightToLeft p,
  .LeftToRight p {
    margin-bottom: 5px;
    /* Réduit l'espace entre les paragraphes */
    line-height: 1.2;
    /* Réduit l'espacement entre les lignes de texte */
    font-size: 27px;
  }
}

/* Par défaut, l'image prendra toute la largeur du conteneur sans dépasser */







.click-animation {
  display: inline-block;
  animation: clickBounce 1.2s infinite;
}

@keyframes clickBounce {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-5px);
  }

  60% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-3px);
  }
}


.instruction-text {
  display: inline-block;
  background-color: #ffffff;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 2.5rem;
  color: #333;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeSlideUp 0.8s forwards ease-out;
  cursor: default;
  position: relative;
}

.instruction-text:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
  color: #007bff;
}

.click-animation {
  display: inline-block;
  margin-left: 8px;
  animation: pulseRotate 1.6s infinite ease-in-out;
  transform-origin: center bottom;
  user-select: none;
  cursor: pointer;
}

.click-animation:active {
  animation: bounceClick 0.3s forwards;
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseRotate {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.15) rotate(10deg);
    opacity: 0.8;
  }
}

@keyframes bounceClick {
  0% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(0.85) rotate(-10deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}



/* Sur les écrans plus petits (ex. téléphone) */
@media (max-width: 768px) {
  .transition-wave svg {
    top: 0px;
    /* Hauteur plus grande sur téléphone */
  }
}

@media screen and (max-width: 768px) {
  .contact.section {
    padding-bottom: 100px;

    /* Ajuste cette valeur selon ton besoin */
  }
}

@media (max-width: 768px) {
  .image-above-footer {
    width: 90%;
    margin-right: -95%;
    /* Décaler davantage sur les grands écrans */

    /* Remonter l'image de 15% sur les grands écrans */
    /* Agrandir légèrement l'image à 110% sur les petits écrans */
  }
}

.skyrocket-div {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* Ratio 16:9 (hauteur / largeur = 9 / 16 = 0.5625) */
  overflow: hidden;
}

.skyrocket-div video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Centrer la vidéo horizontalement */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Assure que la vidéo couvre tout l'espace tout en maintenant son ratio */
}

@media (max-width: 768px) {
  .skyrocket-div {
    padding-bottom: 56.25%;
    /* Maintenir le ratio même sur les petits écrans */
  }

}

/* Pour les petits écrans */
@media (max-width: 767px) {
  .cd-timeline-block {
    display: block;
    padding: 10px 0;
    margin-left: 0;
  }

  .cd-timeline-content {
    margin: 0 auto;
    width: 90%;
    text-align: center;
  }

  /* Déplacer l'image en dessous du contenu */
  .cd-timeline-img {
    display: block;
    margin: 20px auto 0;
    /* Espacement au-dessus de l'image */
  }

  .cd-timeline-img img {
    width: 80%;
    height: auto;
    max-width: 100%;
  }
}

/* Pour les tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
  .cd-timeline-block {
    display: block;
    padding: 20px 0;
    margin-left: 0;
  }

  .cd-timeline-content {
    margin: 0 auto;
    width: 70%;
    text-align: center;
  }

  /* Déplacer l'image en dessous du contenu */
  .cd-timeline-img {
    display: block;
    margin: 20px auto 0;
  }

  .cd-timeline-img img {
    width: 70%;
    height: auto;
    max-width: 100%;
  }
}

/* Pour les petits écrans */
@media (max-width: 767px) {
  .cd-timeline-block {
    padding: 40px 0;
    width: 60%;
    height: 40%;
    text-align: center;
  }

  .cd-timeline-content {
    width: 50%;
    margin-left: 60px;
    margin-top: -20px;
  }
}

/* Pour les tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
  .cd-timeline-block {
    display: block;
    padding: 20px 0;
    margin-left: 0;
    text-align: center;
  }

  .image_expérience {
    width: 100px;
  }

  .cd-timeline-content {
    margin: 0 auto;
    width: 70%;
  }
}


.image_expérience {
  width: 500px;
  height: auto;
}

.image_expérience2 {
  width: 400px;
  height: auto;
}

.image_expérience3 {
  width: 200px;
  height: auto;
}


@media (max-width: 768px) {
  .cd-container {
    width: 100%;
    top: -50px;
  }

  .cd-timeline-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
  }

  .cd-timeline-img {
    display: none;
  }

  .cd-timeline-content {
    width: 90%;
    text-align: center;
  }

  .timeline-image {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }

  .timeline-image img {
    width: 80%;
    max-width: 250px;
    height: auto;
    border-radius: 10px;
  }
}

.timeline-image1 {
  margin-top: -100px;
  margin-left: 610px;
}

.timeline-image2 {
  margin-top: 100px;
  margin-left: 150px;
}

.timeline-image3 {
  margin-left: 700px;
  margin-top: -250px;
}

@media (max-width: 768px) {

  .timeline-image1 img {
    width: 250px;
    margin-top: 100px;
    margin-right: 500px;
  }

  .timeline-image2 img {
    width: 150px;
    margin-right: 150px;
    margin-top: -100px;
  }

  .timeline-image3 img {
    width: 80px;
    margin-left: -200px;
  }
}

@media (max-width: 768px) {
  .cd-timeline-content-master {
    width: 90%;
    text-align: center;
    margin-top: 150px;
    margin-left: 90px;
  }
}

.cd-timeline-content-master {
  position: relative;
  background: #b6b6b7;
  border-radius: 2px;
  padding: 1em;
}


.cd-timeline-content-master:after {
  content: "";
  display: table;
  clear: both;
}

.cd-timeline-content-master h2 {
  color: rgba(255, 255, 255, .9);
  margin-top: 0;
  margin-bottom: 5px;
}

.cd-timeline-content-master p,
.cd-timeline-content-master .cd-date {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-size: 0.8125rem;
}

.cd-timeline-content-master .cd-date {
  display: inline-block;
}

.cd-timeline-content-master p {
  margin: 1em 0;
  line-height: 1.6;
}

.cd-timeline-content-master::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #333C42;
}

@media only screen and (min-width: 768px) {
  .cd-timeline-content-master h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }

  .cd-timeline-content-master p {
    font-size: 16px;
    font-size: 1rem;
  }

  .cd-timeline-content-master .cd-read-more,
  .cd-timeline-content-master .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-content-master {
    color: white;
    margin-left: 0;
    padding: 1.6em;
    width: 36%;
    margin: 0 5%
  }

  .cd-timeline-content-master::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #333C42;
  }



  .cd-timeline-block:nth-child(even) .cd-timeline-content-master {
    float: right;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content-master::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #333C42;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content-master .cd-read-more {
    float: right;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content-master .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
}