:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #4a4a78;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}


*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                            



/* Incorporation des polices Lato */
@font-face {
    font-family: 'Lato';
    src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('./assets/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('./assets/fonts/Lato-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('./assets/fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Styles généraux */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    background-color: #f8f8f8; /* Couleur de fond claire */
    color: #333;
    line-height: 1.6;
}

a{
    text-decoration: none;
    color: #fff;
}


.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
      overflow: hidden;
    }
    
    #cs-navigation {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0.75rem 1rem;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
    }
    #cs-navigation:before {
      /* black blurred overlay */
      content: "";
      width: 0%;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      display: block;
      position: absolute;
      top: 100%;
      right: 0;
      z-index: -11;
      transition: width 0.5s, opacity 0.3s;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    #cs-navigation.cs-active:before {
      width: 100%;
      opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      opacity: 1;
      transform: scaleX(1);
      transition-delay: 0.2s;
    }
    #cs-navigation.cs-active .cs-li {
      opacity: 1;
      transform: translateX(0);
    }
    #cs-navigation .cs-container  {
        height: 50px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    #cs-navigation .cs-logo {
      width: 40%;
      max-width: 9.125rem;
      height: 100%;
      margin: 0 auto 0 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
    #cs-navigation .cs-logo img {
      width: 100%;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
      /* places the image to the left edge of the parent */
      object-position: left;
    }
    #cs-navigation .cs-toggle {
      /* 44px - 48px */
      width: clamp(2.75rem, 6vw, 3rem);
      height: clamp(2.75rem, 6vw, 3rem);
      margin: 0 0 0 auto;
      background-color: transparent;
      border: none;
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-active .cs-line1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
      top: 50%;
      transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
      transform-origin: center;
    }
    #cs-navigation .cs-active .cs-line3 {
      opacity: 0;
      bottom: 100%;
    }
    #cs-navigation .cs-box {
      /* 24px - 28px */
      width: clamp(1.5rem, 2vw, 1.75rem);
      /* 14px - 16px */
      height: clamp(0.875rem, 1.5vw, 1rem);
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      background-color: #1a1a1a;
      border-radius: 2px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transition: transform 0.5s, top 0.3s, left 0.3s;
      animation-duration: 0.7s;
      animation-timing-function: ease;
      animation-direction: normal;
      animation-fill-mode: forwards;
      transform-origin: center;
    }
    #cs-navigation .cs-line2 {
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      transition: top 0.3s, left 0.3s, transform 0.5s;
      animation-duration: 0.7s;
      animation-timing-function: ease;
      animation-direction: normal;
      animation-fill-mode: forwards;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom 0.3s, opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
      height: 100vh;
      background-color: #fff;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
      opacity: 0;
      position: absolute;
      top: 100%;
      right: 0;
      left: auto;
      z-index: -1;
      overflow: hidden;
      transform: scaleX(0);
      transition: transform 0.4s, opacity 0.3s;
      transform-origin: top right;
    }
    #cs-navigation .cs-ul {
      width: auto;
      min-width: 40%;
      height: 65vh;
      margin: 0;
      /* 28px - 40px */
      padding: 3rem clamp(1.75rem, 3vw, 2.5rem) 2rem 4.375rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 1.25rem;
      overflow: scroll;
    }
    #cs-navigation .cs-li {
      text-align: right;
      list-style: none;
      width: 100%;
      margin-right: 0;
      opacity: 0;
      /* transition from these values */
      transform: translateX(-2.5rem);
      transition: transform 0.6s, opacity 0.9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: 0.05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: 0.1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: 0.15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: 0.2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: 0.25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: 0.3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: 0.35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: 0.4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: 0.45s;
    }
    #cs-navigation .cs-li-link {
      /* 16px - 24px */
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      line-height: 1.2em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: inline-block;
      position: relative;
    }
    #cs-navigation .cs-li-link:before {
      /* active state underline */
      content: "";
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      display: none;
      position: absolute;
      bottom: -0.125rem;
      left: 0;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      display: block;
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0 1rem;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      width: 18.4%;
      max-width: 21.875rem;
      height: 4.0625rem;
      /* margin-right auto pushes everything away from it to the right */
      margin: 0 auto 0 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100;
    }
    #cs-navigation .cs-logo img {
      width: 100%;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
    }
    #cs-navigation .cs-ul {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      /* 20px - 36px */
      gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 2rem 0;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
      position: relative;
    }
    #cs-navigation .cs-li-link:hover:before {
      width: 100%;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      width: 100%;
    }
    #cs-navigation .cs-li-link:before {
      /* active state underline */
      content: "";
      width: 0%;
      height: 2px;
      background: var(--primary);
      opacity: 1;
      display: block;
      position: absolute;
      bottom: 0rem;
      left: 0;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      color: #fff;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      border-radius: 0.25rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
  }
                                  
                                  


/*-- -------------------------- -->
<---           Accueil             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-82 {
        /* Centers button */
        text-align: center;
        /* 144px - 300px - leaving extra space for the navigation */
        padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
        /* 130px - 200px */
        padding-bottom: clamp(8.125rem, 12.5vw, 25em);
        position: relative;
        z-index: 1;
    }
    #hero-82 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #hero-82 .cs-background:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.7;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-82 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #hero-82 .cs-container {
        width: 100%;
        max-width: 67.5rem;
        margin: auto;
    }
    #hero-82 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 700;
        line-height: 1.2em;
        text-align: center;
        max-width: 51.8125rem;
        /* 16px - 24px */
        margin: 0 auto clamp(1rem, 4vw, 1.5rem);
        color: #fff;
        position: relative;
    }
    #hero-82 .cs-title:after {
        /* Divider Line */
        content: "";
        width: 6.25rem;
        height: 0.5rem;
        /* 16px - 24px */
        margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
        background: var(--primary);
        opacity: 1;
        position: relative;
        display: block;
    }
    #hero-82 .cs-text {
        /* 16px - 25px */
        font-size: clamp(1rem, 1.95vw, 1.5625rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        /* 464px - 800px */
        max-width: clamp(29rem, 60vw, 50rem);
        margin: 0 auto;
        /* 40px - 48px */
        margin-bottom: clamp(2.5rem, 4vw, 3rem);
        color: #fff;
    }
    #hero-82 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        margin: auto;
        color: #fff;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    #hero-82 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #hero-82 .cs-button-solid:hover:before {
        width: 100%;
    }
}
                                

/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1062 {
      padding: var(--sectionPadding);
  }
  #services-1062 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1062 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #services-1062 .cs-title {
      max-width: 18ch;
  }
  #services-1062 .cs-card-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.25rem;
  }
  #services-1062 .cs-item {
    width: 100%;
    text-align: center; /* Centrage du texte */
    list-style: none;
    margin: 0;
    border-radius: 8px;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Alignement central */
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#services-1062 .cs-item:hover {
  transform: translateY(-10px); /* Légère élévation au survol */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Ombre plus intense */
}

  #services-1062 .cs-icon-wrapper {
      width: 4.25rem;
      height: 4.25rem;
      margin: 0 0 1.5rem 0;
      background-color: var(--primary);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  #services-1062 .cs-icon {
      width: 3rem;
      height: auto;
  }
  #services-1062 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: bold;
      text-align: center; /* Centrage du titre */
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
  }
  #services-1062 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      max-width: 28.125rem;
      margin: 0 auto; /* Centrage horizontal */
      padding: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center; /* Centrage du texte */
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1062 .cs-item {
      grid-column: span 4;
  }
}

/*-- -------------------------- -->
<---         Projets           -->
<--- -------------------------- -*/
#projets {
  padding: 60px 0;
  background-color: #4a4a78; /* Teinte violette pour la section Projets */
  color: #fff; /* Texte en blanc pour le contraste */
  text-align: center;
}

#projets h2 {
  font-size: 36px;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 700; /* Utilisation de la variante Bold */
}

.portfolio-grid {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.portfolio-item {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 350px;
  min-height: 210px;
  max-width: 30%;
  text-align: center;
  color: #333; /* Texte foncé pour contraste avec le fond blanc */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour l'effet de hover */
}

.portfolio-item img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 15px;
}

.portfolio-item h3 {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 700; /* Utilisation de la variante Bold */
}

#restaurant{
  background:url(./assets/img/preview\ restaurant.PNG) center/cover;
}
#salon_de_coiffure{
  background:url(./assets/img/preview_barbier.PNG) center/cover;
}

/* Effet de hover sur les projets */
.portfolio-item:hover {
  transform: translateY(-10px); /* Légère élévation au survol */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Ombre plus intense */
}

/*-- -------------------------- -->
<---         notre histoire           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1663 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #services-1663 .cs-container {
    width: 100%;
    /* changes to 1280px at small desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 3.9vw, 4rem);
  }
  #services-1663 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 44rem;
    height: auto;
    /* 328px - 640px */
    min-height: clamp(20.5rem, 45vw, 40rem);
  }
  #services-1663 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #services-1663 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 40.625rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1663 .cs-title {
    /* 25 characters wide including spaces */
    max-width: 25ch;
  }
  #services-1663 .cs-text {
    margin-bottom: 1rem;
  }
  #services-1663 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #services-1663 .cs-card-group {
    width: 100%;
    max-width: 44rem;
    /* 28px - 40px */
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
    align-items: stretch;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1663 .cs-item {
    list-style: none;
    padding: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  #services-1663 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
  }
  #services-1663 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #services-1663 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 11.625rem;
    margin: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #services-1663 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    /* add a border radius below this to round corners */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #services-1663 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1663 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #services-1663 .cs-content {
    width: 55%;
    padding: 3rem 0;
    align-self: center;
    flex: none;
  }
  #services-1663 .cs-picture {
    max-width: 33.875rem;
    min-height: 28.125rem;
  }
}                      
                           
  .custom-separator {
    border: none; /* Retire le style par défaut de la balise hr */
    border-top: 2px solid var(--primary); /* Un trait fin de la couleur principale */
    width: 80%; /* Le trait occupe 80% de la largeur de la page */
    margin: 50px auto; /* Ajoute de l'espace au-dessus et au-dessous et centre le trait horizontalement */
}

  
/* Section Contact et Réseaux Sociaux */
/*-- -------------------------- -->
<---           contacts            -->
<--- -------------------------- -*/

.cs-picture {
    width: 7rem; /* Taille du cercle */
    height: 7rem; /* Taille du cercle */
    margin-right: clamp(0.75rem, 3vw, 1.25rem);
    border-radius: 50%;
    border: 1px solid #bababa;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    transition:
        background-color 0.3s,
        box-shadow 0.3s,
        transform 0.6s;
}

.cs-icon {
    font-size: 2.3rem; /* Taille de l'icône */
    color: #333; /* Couleur de l'icône */
    line-height: 1; /* Assure que l'icône soit bien centré verticalement */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Prend toute la hauteur du parent pour faciliter le centrage */
}

#mail, #phone{
    transform: translateX(-10%);
}



/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-strip-324 {
        padding: 3rem var(--sectionPadding); /* Réduction du padding */
        background-color: #f7f7f7;
        min-height: 350px; /* Réduction de la hauteur minimale */
        display: flex;
        justify-content: center;
        align-items: center; /* Centrage vertical des éléments */
    }
    #contact-strip-324 .cs-stat-group {
        width: 100%;
        max-width: 40rem;
        margin: auto;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2.5rem; /* Ajustement de l'écart entre les éléments */
    }
    #contact-strip-324 .cs-item {
        list-style: none;
        width: 19rem; /* Ajustement de la largeur des éléments */
        margin: 0 0 1.5rem 0; /* Réduction de l'espace en bas */
        padding: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #contact-strip-324 .cs-item:hover .cs-picture {
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transform: scale(1.05);
    }
    #contact-strip-324 .cs-picture {
        width: 5.5rem; /* Ajustement de la taille des images */
        height: 5.5rem; /* Ajustement de la taille des images */
        margin-right: clamp(1rem, 3vw, 1.25rem);
        border-radius: 50%;
        border: 1px solid #bababa;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: none;
        transition:
            background-color 0.3s,
            box-shadow 0.3s,
            transform 0.6s;
    }
    #contact-strip-324 .cs-flex-group {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    #contact-strip-324 .cs-icon {
        width: 1.85rem; /* Ajustement de la taille des icônes */
        height: auto;
    }
    #contact-strip-324 .cs-header {
        font-size: 1.4rem; /* Ajustement de la taille de la police */
        color: var(--headerColor);
        font-weight: 900;
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 1rem;
        display: block;
    }
    #contact-strip-324 .cs-link,
    #contact-strip-324 .cs-hours {
        font-size: 0.95rem; /* Ajustement de la taille de la police */
        line-height: 1.5em;
        text-decoration: none;
        color: #767676;
        display: block;
    }
    #contact-strip-324 .cs-link:hover {
        text-decoration: underline;
    }
}

/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
    #contact-strip-324 .cs-stat-group {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 1.5rem;
        row-gap: 2rem;
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #contact-strip-324 .cs-stat-group {
        max-width: 82rem; /* Ajustement de la largeur max */
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
}



                                
/* Pied de page */
footer {
    background-color: #4a4a78; /* Revenir au violet pour le pied de page */
    color: #fff;
    padding: 20px 0;
    text-align: center;
    font-weight: 400; /* Utilisation de la variante Regular */
}

footer p {
    margin: 0;
    font-size: 14px;
}

/* Media Queries pour le Responsive Design */
@media (max-width: 768px) {

    header nav ul {
        flex-direction: row;
        justify-content: center; /* Centre les éléments horizontalement */
        flex-wrap: wrap;
        display: none;
    }

    header .logo {
        margin-bottom: 10px;
        text-align: center; /* Centre le logo */
    }

    header .logo img {
        margin: 0 auto; /* Centre l'image du logo */
    }


    #services .services-grid,
    #projets .portfolio-grid {
        flex-direction: column;
        align-items: center;
    }

    .service,
    .portfolio-item {
        max-width: 100%;
        margin-bottom: 20px;
        min-height: 185px;
    }
}

@media (max-width: 480px) {
    #accueil h1 {
        font-size: 36px;
    }

    #accueil p {
        font-size: 18px;
    }

    .social-media img {
        width: 30px;
        height: 30px;
    }
}