/* ------ general ------ */
  @import url(global.css);
  @import url('https://fonts.googleapis.com/css2?family=Funnel+Display&display=swap');

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Funnel Display', Arial, sans-serif;
    color: var(--dark-green);
  }

  html,
  body {

    height: 100%;
    scroll-behavior: smooth;
    overflow-y: scroll;
  }

  /* effet scroll */
  body {
    scroll-snap-type: y mandatory;

  }

  section {
    scroll-snap-align: start;
  }











  /* ------ general section ------ */
  .page-section {
    height: 100vh;
    /* full viewport */
    padding: top 40px;
    /* space for navbar */
    box-sizing: border-box;
    /* include padding in height */
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    /* prevent overflow */
  }

  /* ------ css pour chaque section------ */

  /* acceuil negoci */
  .section1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4em;
  }


  /* etape 1 */
  .section2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* important! */
    background: #aabfcc;
    padding: 4em;
    gap: 10px;
  }



  .full-width-center {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* keep side by side */
    align-items: center;
    /* ✅ fixes vertical alignment */
    justify-content: space-between;
    box-sizing: border-box;
    gap: 30px;
  }

  .section2-footer {
    padding-bottom: 4em;
    /* extra space below */
    font-size: 0.8em;
    /* make it discreet */

    text-align: center;
    /* center it horizontally */
    background: transparent;
    /* or match section bg */

  }

  /* etape 2 */
  .section3 {
    background: #b4a9b9;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 72px;
  }

  .section3 .full-width-center {
    display: flex;
    flex-direction: row;
    gap: 20px;
    /* spacing between elements */
    box-sizing: border-box;
  }

  .section3 .full-width-center>.side {
    flex: 0 0 20%;
    /* each element takes 25% of width */
    box-sizing: border-box;
  }

  .section3 .side img {
    width: 100%;
    /* image fills its container */
    max-width: 100%;
    /* prevents stretching beyond container */
    height: auto;
    /* maintain aspect ratio */
    display: block;
    /* removes inline spacing */
    object-fit: cover;
    /* optional: ensures image fills box proportionally */
  }


  /* etape 3 */
  .section4 {

    background: #afbdb5;
    flex-direction: column;
    gap: 15px;
    display: flex;
    align-items: flex-start;
  }

  .calc div {
    display: flex;
    width: 300px;
    height: 580px;
    padding: 20px;
    flex-direction: column;
    align-items: center;

    gap: 30px;
    border-radius: 32px;
    background: rgba(204, 204, 204, 0.4);

  }

  .calc {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
  }

  .calc div:nth-of-type(4) {
    background: rgba(250, 171, 107, 0.37);
  }

  /* etape 4 */
  .section5 {
    background: #c9adad;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 72px;

  }

  .box3 {
    display: flex;
    width: 315px;
    height: 436px;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;

    border: 2px solid rgba(250, 172, 107, 0.9);



    background: rgba(250, 171, 107, 0.068);
    
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    padding: 40px 40px 50px;

    margin: 0 auto;
  }


  ul li {
    margin-bottom: 15px;
  }

  .section5 .full-width-center {
    display: flex;
    flex-direction: row;
    gap: 20px;
    /* space between elements */
    width: 100%;
    box-sizing: border-box;
  }

  /* timing parfait */
  .section6 {
    background: #afbdb5;
    flex-direction: column;
    gap: 20px;
    display: flex;
    align-items: flex-start;

  }

  .section6-intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
  }

  .timeline div {
    display: flex;
    width: 240px;
    height: 300px;
    padding: 15px;
    flex-direction: column;
    align-items: center;

    gap: 20px;
    border-radius: 32px;
    background: rgba(204, 204, 204, 0.40);

  }

  .timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
  }

  .email {
    display: flex;
    width: 760px;
    height: 254px;

    padding: 20px 20px;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    border-radius: 20px;
    border: 1px solid rgba(250, 172, 107, 0.9);
  }

  .email-icon-text {
    display: flex;
    flex: row;
    gap: 26px;
    flex-shrink: 0;
    align-self: stretch;
  }

  .email-icon-text img {
    height: 96px;
    width: 96px;
  }

  .eviter {
    display: flex;
    width: 500px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 32px;
    background: rgba(250, 171, 107, 0.37);

  }


  .section6-low {
    display: flex;
    padding: 0 30px;
    align-items: center;
    justify-items: center;
    gap: 20px;
    align-self: stretch;
    align-content: flex-start;
    margin: 0 auto;
    /* centers it horizontally */

  }

  .timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
  }

  /* jour j */
  .section7 {
    background: rgb(147, 140, 158);
    display: flex;
    flex-direction: column;
    gap: 72px;
  }

  .section7>div>div {
    display: flex;
    width: 300px;
    height: 436px;
    padding: 36px 20px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    border-radius: 20px;
    border: 1px solid rgba(250, 172, 107, 0.9);
  }

  .section7 img {
    width: 74px;
    height: 74px;
  }

  .section7>div {

    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  /* download p)age */
  .section8 {
    background: transparent;

    display: flex;
    flex-direction: column;
    gap: 72px;

    align-items: center;
    justify-items: center;
  }

  
  .button {
  display: flex;
  padding: 0.5rem 3.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;   /* test uniformisation ajout Louise  */
  color: white;
  background-color: var(--dark-green);
   cursor: pointer; /* test uniformisation ajout Louise  */
  transition: all 0.25s ease; /* test uniformisation ajout Louise  */
}

  .button2 {
  display: flex;
  padding: 0.5rem 3.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;   /* test uniformisation ajout Louise  */
  color: white;
  background-color: #506158;
   cursor: pointer; /* test uniformisation ajout Louise  */
  transition: all 0.25s ease; /* test uniformisation ajout Louise  */
}




  .content-container {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 3em;
    width: 90%;
    max-width: fit-content;
    height: 100%;
    /* fill section height */
    max-height: fit-content;


  }





  .text-side {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: white;
    overflow: hidden;
    gap: 1rem;
  }





  .image-side {

    display: flex;
    justify-content: center;
    gap: 100px;
  }

  .image-side img {
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
  }



  .custom-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns in row 1 */
    grid-template-rows: auto auto;
    /* 2 rows */
    gap: 40px;
    width: 90%;
    max-width: 1200px;
  }

  .custom-container .text-box:nth-child(4) {
    grid-column: 1 / 2;
    /* first column of row 2 */
  }


  .custom-container .image-side {
    grid-column: 2 / 4;
    /* spans 2 columns in row 2 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .custom-container .image-side img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
  }