/* ================================
   BASE
================================ */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }
* { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: rgb(0, 0, 0);
  background-color: #ffffff;
  min-height: 100vh;
}

p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }
ul { margin: 0; }
a { text-decoration: none; }

/* ================================
   CONTENEUR - Largeur 80% sur desktop
================================ */
.container {
  width: 80%; /* Largeur 80% comme demandé */
  max-width: 1200px; /* Sécurité pour éviter que ce soit trop large sur grands écrans */
  padding: 19px 10px 0;
  margin: 0 auto;
}

/* ================================
   TITRE
================================ */
.main-title {
  font-family: 'Acme', sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 50px;
  text-align: center;
  margin: 5px 0 40px;
  padding-bottom: 20px;
}

/* ================================
   LAYOUT 2 COLONNES (DESKTOP)
================================ */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: flex-start;
}

/* COL GAUCHE */
.col-text {
  padding: 10px;
  font-size: 23px;
  line-height: 30px;
  text-align: left;
}

.col-text p + p {
  margin-top: 0;
}

/* COL DROITE */
.col-calendly {
  padding: 10px;
}

.calendly-box {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4),
              0 0 15px rgba(255, 255, 255, 0.2),
              0 0 3px rgba(255, 255, 255, 0.4);
  padding: 10px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  background: white;
}

/* ================================
   CALENDLY - Option 4 : clip-path
================================ */
.calendly-inline-widget {
  height: 550px !important; /* Hauteur définie */
  /* Masque tout ce qui dépasse en bas (zone grise) */
  clip-path: inset(0 0 50px 0) !important; /* Coupe 30px en bas */
  -webkit-clip-path: inset(0 0 50px 0) !important; /* Pour Safari */
}

/* ================================
   FOOTER
================================ */
.footer-row {
  margin: 14px 20px 0;
  padding: 0 5px 14px;
}

.footer-text {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  text-align: center;
  color: rgb(0, 0, 0);
  line-height: 23px;
}

/* ================================
   UTILITAIRES DESKTOP/MOBILE
================================ */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* ================================
   MOBILE (max-width: 800px)
================================ */
@media only screen and (max-width: 800px) {

  /* Sticky */
  .main-section {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* Conteneur - pleine largeur sur mobile */
  .container {
    width: 100%;
    max-width: 100%;
    padding: 5px 5px 0;
  }

  /* Titre mobile */
  .main-title {
    font-size: 35px;
    line-height: 36.8px;
    margin: 20px 0 30px;
    padding: 0 15px 0;
    word-break: normal;
    hyphens: none;
    overflow-wrap: break-word;
  }

  /* Affichage mobile/desktop */
  .mobile-only { display: block; }
  .desktop-only { display: none; }

  /* Layout colonne unique */
  .two-col-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Texte */
  .col-text {
    font-size: 25px;
    line-height: 33px;
    text-align: left;
    padding: 0 30px;
    margin-bottom: 30px;
  }

  /* Calendly */
  .col-calendly {
    padding: 0;
    width: 100%;
  }

  .calendly-box {
    padding: 5px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4),
                0 0 15px rgba(255, 255, 255, 0.2),
                0 0 3px rgba(255, 255, 255, 0.4);
  }

  .calendly-inline-widget {
    height: 550px !important;
    clip-path: inset(0 0 50px 0) !important;
    -webkit-clip-path: inset(0 0 50px 0) !important;
  }

  /* Footer */
  .footer-row {
    margin: 0;
    padding: 10px 20px;
  }

  .footer-text {
    font-size: 18px;
    text-align: center;
    line-height: 23px;
  }
}