* {
  margin: 0;
  padding: 0;
}

:root {
  --main-color: #BCAD4A;
  --second-color: #313C4C;
  --third-color: #F7F7F5;
}

html {
  font-size: 62.5%;
}

h1 {
  color: var(--main-color);
}

body {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  color: var(--second-color);
}

/* Empêche le scroll quand le menu mobile est ouvert */
body.menu-open {
  overflow: hidden;
}

/* =============================================
   HEADER & NAV
   ============================================= */

#header-section {
  height: 100vh;
  background-image: 
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url('../images/header-bg.jpg');
  background-position: center center;
  background-size: cover;
  padding-top: 100px;
}

.header-title-description-bloc {
  text-align: center;
  color: #fff;
  width: 80%;
  margin: 15vh auto 0 auto;
}

.header-title > h1 {
  font-size: 4rem;
}

.header-description {
  font-size: 2rem;
  margin-top: 2%;
  font-family: "Nunito", sans-serif;
}

.menu-items-bloc {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15px 0;
  transition: background-color 0.3s ease;
}

.menu-items-bloc.scrolled {
  background-color: var(--second-color);
}

.logo-koromak > img {
  width: 70px;
  height: auto;
  transition: transform .4s ease;
}

.logo-koromak > img:hover {
  transform: scale(1.15) rotate(5deg);
  cursor: pointer;
}

.menu-items > ul {
  display: flex;
  gap: 20px;
  font-size: 1.7rem;
}

.menu-items > ul > li {
  list-style-type: none;
}

.menu-items > ul > li > a {
  text-decoration: none;
  color: #fff;
  transition: all .3s ease;
  font-family: "Nunito", sans-serif;
}

.menu-items > ul > li > a:hover {
  color: var(--main-color);
}

.menu-items > ul > li > a > span {
  background-color: var(--main-color);
  padding: 10px 15px;
  border-radius: 10px;
}

.menu-items > ul > li > a > span:hover {
  background-color: #fff;
  color: var(--main-color);
}

/* =============================================
   BURGER BUTTON
   ============================================= */

.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: 1200;
  border-radius: 6px;
  transition: background 0.2s ease;
  position: relative;
}

.burger-btn:hover {
  background: rgba(255,255,255,0.1);
}

.burger-line {
  display: block;
  width: 26px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: transform 0.35s ease, opacity 0.25s ease, width 0.3s ease;
  transform-origin: center;
}

.burger-btn.open .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger-btn.open .burger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.burger-btn.open .burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Overlay sombre derrière le menu mobile */
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 950;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-overlay.open {
  pointer-events: auto;
}

/* =============================================
   ACTIVITIES SECTION
   ============================================= */

#activities-section {
  background-color: var(--third-color);
}

#activities-section-main-div {
  text-align: center;
  width: 80%;
  margin: 0 auto;
  padding: 2% 0 7% 0;
}

#activities-section-main-div > h1 {
  color: var(--second-color);
  font-size: 4rem;
  font-weight: 500;
}

#activities-section-main-div > p {
  font-family: "Nunito", sans-serif;
  font-style: italic;
  font-size: 2rem;
  font-weight: 400;
  margin: 2% auto 4% auto;
}

.activities-blocs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

.activities-blocs > div {
  background-color: #fff;
  border: 1px solid #313c4c39;
  border-radius: 0 25px 0 25px;
}

.bg-activities-blocs {
  height: 200px;
  background-color: var(--main-color);
  background-size: cover;
  background-position: center center;
  border-radius: 0 25px 0 0;
}

.text-bloc > h2 {
  font-size: 3rem;
  padding: 5% 0;
  color: var(--second-color);
}

.text-bloc > p {
  font-family: "Nunito", sans-serif;
  padding: 0 3% 7% 3%;
  font-size: 1.7rem;
}

#bab1 { background-image: url('../images/1.jpg'); }
#bab2 { background-image: url('../images/2.jpg'); }
#bab3 { background-image: url('../images/3.jpg'); }
#bab4 { background-image: url('../images/4.jpg'); }

/* =============================================
   GUIDANCE SECTION
   ============================================= */

#guidance-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 80%;
  margin: 0 auto;
  padding: 5% 0 2% 0;
}

.guidance-description {
  padding: 0 15%;
}

.guidance-description > h2 {
  font-size: 3rem;
  margin-bottom: 5%;
}

.guidance-description > p {
  margin-bottom: 10%;
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
  line-height: 3rem;
}

.work-with-us-light > span > a {
  color: var(--main-color);
  border: 1px solid var(--main-color);
  border-radius: 10px;
  padding: 10px 15px;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 1.7rem;
  transition: .3s all ease;
  font-family: "Nunito", sans-serif;
}

.work-with-us-light > span > a:hover {
  background-color: var(--main-color);
  color: #fff;
}

.guidance-blocs {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
}

.guidance-bloc-top,
.guidance-bloc-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.guidance-bloc-top {
  margin-bottom: 5%;
}

.guidance-icons {
  height: 100px;
  width: 100px;
  background-position: center center;
  background-size: cover;
}

#guidance-icon-1 { background-image: url('../images/competitor-analysis.png'); transition: transform .4s ease; }
#guidance-icon-1:hover { transform: scale(1.15) rotate(5deg); cursor: pointer; }
#guidance-icon-2 { background-image: url('../images/professionalism.png'); transition: transform .4s ease; }
#guidance-icon-2:hover { transform: scale(1.15) rotate(5deg); cursor: pointer; }
#guidance-icon-3 { background-image: url('../images/certificate.png'); transition: transform .4s ease; }
#guidance-icon-3:hover { transform: scale(1.15) rotate(5deg); cursor: pointer; }
#guidance-icon-4 { background-image: url('../images/open-book.png'); transition: transform .4s ease; }
#guidance-icon-4:hover { transform: scale(1.15) rotate(5deg); cursor: pointer; }

.guidance-bloc-description {
  font-family: "Nunito", sans-serif;
  margin-top: 5%;
  line-height: 2.5rem;
  font-size: 1.6rem;
}

/* =============================================
   SERVICES TASKS SECTION
   ============================================= */

#services-tasks-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 5%;
}

.services-tasks-blocs {
  border-top: 1px solid var(--main-color);
}

.services-tasks-blocs > h3 {
  padding: 3% 0;
  font-family: "Nunito", sans-serif;
  font-weight: 300;
}

.services-tasks-blocs > h2 {
  padding-bottom: 3%;
}

.services-tasks-description {
  margin-bottom: 5%;
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
  line-height: 2.5rem;
}

.icon-go-services > span > a > img {
  scale: 1;
  transition: all .3s ease;
}

.icon-go-services > span > a > img:hover {
  scale: 1.2;
}

/* =============================================
   WHY US SECTION
   ============================================= */

#why-us-section {
  background-color: var(--third-color);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 6% 0;
}

.why-us-description {
  border-bottom: 1px solid var(--main-color);
  width: 60%;
  margin: 0 auto;
  gap: 50px;
}

.why-us-description > h2 {
  font-size: 3rem;
}

.why-us-description > p {
  padding-top: 3%;
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
}

.why-us-img {
  width: 80%;
  background-image: url('../images/why-us.jpg');
  background-position: center center;
  background-size: cover;
  border-radius: 0 25px 0 25px;
}

#last-why-us-description {
  padding-bottom: 5%;
}

/* =============================================
   KOROMAK SERVICES SECTION
   ============================================= */

#koromak-services-section {
  text-align: center;
  padding: 5% 0;
}

#koromak-services-section > p {
  padding-bottom: 3%;
}

.koromak-services-section-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 80%;
  margin: 0 auto;
  gap: 50px;
}

.koromak-services-section-items > div > h2 {
  padding: 2% 0;
}

#koromak-services-section > p,
.koromak-consults-bloc > p,
.koromak-products-bloc > p,
.koromak-gives-bloc > p {
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
}

.koromak-consults-bloc > img,
.koromak-products-bloc > img,
.koromak-gives-bloc > img {
  height: 70px;
  width: 70px;
  transition: transform .4s ease;
}

.koromak-consults-bloc > img:hover,
.koromak-products-bloc > img:hover,
.koromak-gives-bloc > img:hover {
  transform: scale(1.15) rotate(5deg);
  cursor: pointer;
}

/* =============================================
   MANTRA SECTION
   ============================================= */

#mantra-section {
  text-align: center;
  background-color: var(--third-color);
  padding: 5% 0;
}

#mantra-section > p {
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
  margin: 2% 0 3% 0;
}

.work-with-us-full {
  margin-top: 3%;
}

.work-with-us-full > span > a {
  background-color: var(--main-color);
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid var(--main-color);
  transition: all .3s ease;
  font-size: 1.7rem;
  font-family: "Nunito", sans-serif;
  letter-spacing: 1px;
}

.work-with-us-full > span > a:hover {
  background-color: #fff;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  cursor: pointer;
}

/* =============================================
   TESTIMONY SECTION
   ============================================= */

#testimony-section {
  width: 90%;
  margin: 0 auto;
  gap: 70px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  padding: 3% 0 5% 0;
}

.testimony-items-pics {
  border-radius: 50%;
  background-color: var(--main-color);
  height: 80px;
  width: 80px;
  background-position: center center;
  background-size: cover;
  margin-left: 50%;
  translate: -40px;
}

.testimony-items > p {
  font-size: 1.7rem;
  font-family: "Nunito", sans-serif;
  text-align: justify;
}

#testimony-item-pic-1 { background-image: url('../images/djibril.jpg'); }
#testimony-item-pic-2 { background-image: url('../images/michka.jpg'); }

/* =============================================
   FOOTER
   ============================================= */

footer {
  background-color: var(--second-color);
  color: #fff;
  padding: 5% 0 0 0;
}

.footer-items > h3 {
  font-size: 2.5rem;
  color: var(--main-color);
  padding-bottom: 2%;
}

.footer-items > p,
.footer-items > h3 > a {
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
}

.footer-items > h3 > a {
  text-decoration: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 3% 0;
  transition: all .3s ease;
}

.footer-items > h3 > a:hover {
  color: var(--main-color);
  cursor: pointer;
}

.footer-items > h3 > a > img {
  transition: transform .4s ease;
}

.footer-items > h3 > a > img:hover {
  transform: scale(1.15) rotate(5deg);
  cursor: pointer;
}

.logo-koromak-footer > img {
  height: auto;
  width: 100px;
  padding-bottom: 3%;
}

#footer-items-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 80%;
  margin: 0 auto;
  gap: 50px;
  border-bottom: 1px solid #fff;
  padding-bottom: 3%;
}

#copyright {
  text-align: center;
  font-family: "Nunito", sans-serif;
  padding: 3% 0;
}

#copyright > small {
  font-size: 1.5rem;
}

/* =============================================
   PAGE DE CONTACTS
   ============================================= */

#header-section-contacts {
  height: 70vh;
  background-image: 
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url('../images/contacts.jpg');
  background-position: center center;
  background-size: cover;
  padding-top: 100px;
}

#contacts-form-bloc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 80%;
  margin: 0 auto;
  padding: 5% 0;
}

#contacts-form-description {
  padding: 0 5%;
}

#contacts-form-description > h3,
#contacts-form-description > p {
  font-family: "Nunito", sans-serif;
}

#contacts-form-description > h3 {
  font-size: 1.4rem;
  font-weight: 300;
  padding-top: 2%;
}

#contacts-form-description > p {
  font-size: 1.7rem;
  padding-top: 3%;
}

#contacts-details-section {
  background-color: var(--third-color);
  padding: 5% 0;
}

#call-us > p,
#email > p > a,
#social-media > p > a {
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
}

#call-us > p,
#email > p,
#social-media > p {
  padding: 1% 0;
}

#call-us > p > a,
#email > p > a {
  text-decoration: none;
  color: var(--second-color);
  transition: all .4s ease;
}

#call-us > p > a:hover,
#email > p > a:hover {
  color: var(--main-color);
}

#social-media > p > a {
  text-decoration: none;
  color: var(--second-color);
  transition: all .4s ease;
}

#social-media > p > a:hover {
  color: var(--main-color);
}

#contacts-details-section > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

input,
textarea {
  width: 100%;
  padding: 15px 10px;
  border: 1px solid var(--second-color);
  border-radius: 15px;
  box-sizing: border-box;
}

#contact-form-name,
#contact-form-email {
  margin-bottom: 3%;
}

#contact-form-name > label,
#contact-form-email > label,
#contact-form-message > label {
  font-family: "Nunito", sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
textarea {
  font-family: "Nunito", sans-serif;
  font-size: 1.5rem;
  outline: none;
  font-weight: 400;
}

button {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  padding: 15px 10px;
  color: #fff;
  border-radius: 15px;
  margin-top: 3%;
  font-size: 1.7rem;
  letter-spacing: 2px;
  transition: all .3s ease;
}

button:hover {
  background-color: #fff;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  cursor: pointer;
}

/* Contacts — layout interne du formulaire */
#contact-form-first-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 3%;
}

#contacts-form-items {
  padding: 0 5% 0 0;
}

.ctc-btn2 {
  margin-top: 3%;
}

.ctc-btn2 > button {
  width: 100%;
}

/* =============================================
   PAGE DE SERVICES
   ============================================= */

#header-section-services {
  height: 70vh;
  background-image: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)),
    url('../images/services.jpg');
  background-position: center top;
  background-size: cover;
  padding-top: 100px;
}

#section-form-bloc {
  background-color: var(--third-color);
}

#services-form-bloc {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  width: 80%;
  margin: 0 auto;
  padding: 5% 0;
  font-family: "Nunito", sans-serif;
  gap: 40px;
  align-items: center;
}

.pdg-words {
  font-family: "DM Serif Display", serif;
  font-weight: 600;
  font-style: italic;
  font-size: 2rem;
}

.pdg-name {
  font-size: 1.7rem;
  padding: 2% 0 1% 0;
  font-weight: 600;
}

.pdg-title {
  color: #313C4C;
}

#sevices-form-bloc-2,
#sevices-form-bloc-3,
#sevices-form-bloc-4,
#sevices-form-bloc-5 {
  background-color: var(--main-color);
  border-radius: 0 25px 0 25px;
  text-align: center;
  padding: 3%;
  font-size: 1.7rem;
  font-weight: 700;
  scale: 1;
  transition: .3s all ease;
}

#sevices-form-bloc-2 > p > a,
#sevices-form-bloc-3 > p > a,
#sevices-form-bloc-4 > p > a,
#sevices-form-bloc-5 > p > a {
  color: #fff;
  text-decoration: none;
}

#sevices-form-bloc-2:hover,
#sevices-form-bloc-3:hover,
#sevices-form-bloc-4:hover,
#sevices-form-bloc-5:hover {
  scale: 1.1;
}

#services-items-blocs {
  padding: 5% 0;
  font-family: "Nunito", sans-serif;
}

.services-items-bloc-1,
.services-items-bloc-2,
.services-items-bloc-3,
.services-items-bloc-4 {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  align-items: center;
}

.services-items-bloc-2 {
  margin: 7% auto;
}

.services-items-bloc-1-left,
.services-items-bloc-2-right,
.services-items-bloc-3-left {
  height: 80vh;
  border-radius: 0 25px 0 25px;
  background-position: center center;
  background-size: cover;
}

.services-items-bloc-1-left { background-image: url('../images/services-consultation.jpg'); }
.services-items-bloc-2-right { background-image: url('../images/services-products.jpg'); }
.services-items-bloc-3-left { background-image: url('../images/services-talks.jpg'); }

.services-items-bloc-1-right > h3,
.services-items-bloc-2-left > h3,
.services-items-bloc-3-right > h3 {
  font-weight: 400;
}

.services-items-bloc-1-right > h1,
.services-items-bloc-2-left > h1,
.services-items-bloc-3-right > h1 {
  padding-bottom: 2%;
}

.services-items-bloc-1-right > p,
.services-items-bloc-2-left > p,
.services-items-bloc-3-right > p {
  font-size: 1.7rem;
  padding: 1% 0;
}

.checked-points {
  display: flex;
  align-items: center;
  gap: 10px;
}

.last-checked-points {
  margin-bottom: 5%;
}

/* =============================================
   PAGE ABOUT
   ============================================= */

#header-section-about {
  height: 90vh;
  background-image: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)),
    url('../images/about.jpg');
  background-position: center top;
  background-size: cover;
  padding-top: 100px;
}

#about-band {
  text-align: center;
  padding: 2.5% 0;
  background-color: var(--second-color);
  border-top: 5px solid var(--main-color);
  border-bottom: 5px solid var(--main-color);
  margin-bottom: 4%;
}

#section-about {
  padding-bottom: 7%;
}

.section-about-items {
  width: 100%;
}

.section-about-item-1,
.section-about-item-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  width: 80%;
  margin: 0 auto;
  padding: 2% 0;
  font-family: "Nunito", sans-serif;
  gap: 40px;
  align-items: center;
}

.section-about-item-1 {
  grid-template-columns: 2fr 1fr;
  padding: 7% 0;
}

.section-about-item-2 {
  grid-template-columns: 1fr 2fr;
  padding: 2% 0 7% 0;
}

.section-about-item-1-left > h3,
.section-about-item-2-right > h3 {
  font-weight: 300;
  padding-bottom: 2%;
}

.section-about-item-1-left > h1,
.section-about-item-2-right > h1 {
  padding-bottom: 2%;
}

.section-about-item-1-left > p,
.section-about-item-2-right > p {
  padding: 1% 0;
  font-size: 1.7rem;
}

.section-about-item-1-right,
.section-about-item-2-left {
  background-position: center center;
  background-size: cover;
  height: 80vh;
  background-color: var(--main-color);
  border-radius: 0 25px 0 25px;
  scale: 1;
  transition: .3s all ease;
}

.section-about-item-1-right:hover,
.section-about-item-2-left:hover {
  scale: 1.05;
  cursor: pointer;
}

.section-about-item-1-right { background-image: url('../images/etienne-1.jpg'); }
.section-about-item-2-left { background-image: url('../images/etienne-2.png'); }

/* =============================================
   PAGE RDV
   ============================================= */

#header-section-rdv {
  height: 60vh;
  background-image: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)),
    url('../images/rdv.jpg');
  background-position: center center;
  background-size: cover;
  padding-top: 100px;
}

#section-partners {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 80%;
  margin: 0 auto;
  padding: 2% 0;
  gap: 40px;
  align-items: center;
}

.partner-1,
.partner-2,
.partner-3,
.partner-4,
.partner-5 {
  height: 15vh;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  scale: 1;
  transition: .3s all ease;
}

.partner-1:hover,
.partner-2:hover,
.partner-3:hover,
.partner-4:hover,
.partner-5:hover {
  cursor: pointer;
  scale: 1.05;
}

.partner-1 { background-image: url('../images/ig.jpg'); }
.partner-2 { background-image: url('../images/rogers.png'); }
.partner-3 { background-image: url('../images/uqam.png'); }
.partner-4 { background-image: url('../images/2ccmm.png'); }
.partner-5 { background-image: url('../images/banque-nationale.png'); }

#atouts-section {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  text-align: center;
}

#booking-section {
  width: 100%;
  padding: 80px 0;
  background: #f8f8f8;
  font-family: "Nunito", sans-serif;
}

.booking-container {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.booking-left .duration {
  margin: 10px 0;
}

.booking-left .description {
  margin-bottom: 20px;
  line-height: 1.6;
}

.timezone select {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
}

.booking-right h3 {
  margin-bottom: 20px;
}

.booking-right form input[type="date"],
.booking-right form input[type="text"],
.booking-right form input[type="email"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.time-slots label { cursor: pointer; }
.time-slots input { display: none; }

.time-slots span {
  display: block;
  padding: 10px;
  border: 1px solid var(--main-color);
  text-align: center;
  transition: .3s;
}

.time-slots input:checked + span {
  background: var(--main-color);
  color: #fff;
}

.booking-right button {
  width: 100%;
  padding: 15px;
  background: var(--main-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: .3s;
}

.booking-right button:hover {
  background: var(--second-color);
}

.slot-btn {
  padding: 10px;
  border: 1px solid var(--main-color);
  text-align: center;
  cursor: pointer;
  transition: .2s;
}

.slot-btn:hover { background: #eee; }

.slot-btn.active {
  background: var(--main-color);
  color: #fff;
}


/* =============================================
   RESPONSIVE — TABLETTE (≤ 1024px)
   ============================================= */

@media (max-width: 1024px) {

  .work-with-us-light {
    margin-top: 10%;
  }

  /* --- NAV --- */
  .burger-btn {
    display: flex;
  }

  .menu-overlay {
    display: block;
  }

  .menu-items-bloc {
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
  }

  .logo-koromak {
    display: flex;
    align-items: center;
  }

  .burger-btn {
    align-self: center;
  }

  .menu-items {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--second-color);
    z-index: 1050;
    padding: 90px 30px 40px;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
  }

  .menu-items.open {
    right: 0;
  }

  .menu-overlay.open {
    opacity: 1;
  }

  .menu-items > ul {
    flex-direction: column;
    gap: 0;
    font-size: 1.8rem;
  }

  .menu-items > ul > li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .menu-items > ul > li > a {
    display: block;
    padding: 16px 0;
    font-size: 1.7rem;
  }

  .menu-items > ul > li:last-child > a > span {
    display: inline-block;
    margin-top: 10px;
  }

  /* --- HEADER --- */
  .header-title > h1 {
    font-size: 4rem;
  }

  .header-description {
    font-size: 1.7rem;
  }

  /* --- ACTIVITIES : 2 colonnes --- */
  .activities-blocs {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* --- GUIDANCE : 1 colonne --- */
  #guidance-section {
    grid-template-columns: 1fr;
    width: 90%;
    padding: 5% 0;
  }

  .guidance-description {
    padding: 0;
    margin-bottom: 40px;
  }

  .guidance-blocs {
    grid-template-rows: auto;
  }

  .guidance-bloc-top,
  .guidance-bloc-bottom {
    gap: 30px;
  }

  /* --- SERVICES TASKS : 1 colonne --- */
  #services-tasks-section {
    grid-template-columns: 1fr;
    gap: 30px;
    width: 90%;
    margin-bottom: 8%;
  }

  /* --- WHY US : 1 colonne --- */
  #why-us-section {
    grid-template-columns: 1fr;
    padding: 8% 0;
  }

  .why-us-description {
    width: 80%;
    margin-bottom: 40px;
    border-bottom: none;
  }

  .why-us-img {
    width: 80%;
    margin: 0 auto;
    min-height: 300px;
  }

  /* --- KOROMAK SERVICES : 1 colonne --- */
  .koromak-services-section-items {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* --- TESTIMONY : 1 colonne --- */
  #testimony-section {
    grid-template-columns: 1fr;
    gap: 40px;
    width: 90%;
  }

  /* --- FOOTER : 2 colonnes --- */
  #footer-items-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 90%;
  }

  /* --- CONTACTS PAGE --- */
  #header-section-contacts {
    height: 60vh;
  }

  #contacts-form-bloc {
    grid-template-columns: 1fr;
    width: 90%;
    gap: 30px;
    padding: 8% 0;
  }

  #contacts-form-description {
    padding: 0;
  }

  #contacts-form-items {
    padding: 0;
  }

  #contact-form-first-row {
    gap: 20px;
  }

  #contacts-details-section > div {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: left;
  }

  /* --- SERVICES PAGE --- */
  #header-section-services {
    height: 70vh;
  }

  #section-form-bloc {
    padding: 0;
  }

  #services-form-bloc {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 90%;
    padding: 5% 5%;
  }

  #sevices-form-bloc-1 {
    grid-column: 1 / -1;
  }

  .services-items-bloc-1,
  .services-items-bloc-2,
  .services-items-bloc-3,
  .services-items-bloc-4 {
    grid-template-columns: 1fr;
    width: 90%;
  }

  .services-items-bloc-1-left,
  .services-items-bloc-2-right,
  .services-items-bloc-3-left {
    height: 50vh;
  }

  /* Image avant texte sur bloc-2 */
  .services-items-bloc-2-right {
    order: 1;
  }

  .services-items-bloc-2-left {
    order: 2;
  }

  .services-items-bloc-1-right > h1,
  .services-items-bloc-2-left > h1,
  .services-items-bloc-3-right > h1 {
    font-size: 2.8rem;
  }

  /* --- ABOUT PAGE --- */
  #header-section-about {
    height: 70vh;
  }

  .section-about-item-1,
  .section-about-item-2 {
    grid-template-columns: 1fr;
    width: 90%;
  }

  .section-about-item-2-left {
    order: 2;
  }

  .section-about-item-2-right {
    order: 1;
  }

  .section-about-item-1-right,
  .section-about-item-2-left {
    height: 50vh;
  }

  #about-band {
    padding: 4% 5%;
  }

  #about-band > h1 {
    font-size: 2.5rem;
  }

  /* --- RDV PAGE --- */
  #section-partners {
    grid-template-columns: repeat(3, 1fr);
    width: 90%;
  }

  .booking-container {
    grid-template-columns: 1fr;
    width: 90%;
  }

  #atouts-section {
    grid-template-columns: 1fr;
    width: 90%;
  }
}


/* =============================================
   RESPONSIVE — MOBILE (≤ 600px)
   ============================================= */

@media (max-width: 600px) {

  html {
    font-size: 62.5%;
  }

  /* --- HEADER --- */
  #header-section {
    padding-top: 80px;
  }

  .header-title-description-bloc {
    width: 90%;
    margin-top: 10vh;
  }

  .header-title > h1 {
    font-size: 2.5rem;
  }

  .header-description {
    font-size: 1.7rem;
    margin-top: 4%;
  }

  .menu-items-bloc {
    padding: 12px 20px;
  }

  .logo-koromak > img {
    width: 55px;
  }

  /* --- ACTIVITIES : 1 colonne --- */
  .activities-blocs {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  #activities-section-main-div {
    width: 90%;
    padding: 5% 0 10% 0;
  }

  #activities-section-main-div > h1 {
    font-size: 3rem;
  }

  #activities-section-main-div > p {
    font-size: 1.7rem;
  }

  /* --- GUIDANCE --- */
  .guidance-bloc-top,
  .guidance-bloc-bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* --- SERVICES TASKS --- */
  #services-tasks-section {
    width: 90%;
    margin-top: 5%;
  }

  /* --- WHY US --- */
  .why-us-description {
    width: 90%;
  }

  .why-us-img {
    width: 90%;
  }

  /* --- KOROMAK SERVICES --- */
  #koromak-services-section {
    padding: 8% 5%;
  }

  .koromak-services-section-items {
    width: 100%;
  }

  /* --- MANTRA --- */
  #mantra-section {
    padding: 8% 5%;
  }

  /* --- TESTIMONY --- */
  #testimony-section {
    width: 90%;
    gap: 30px;
  }

  /* --- FOOTER : 1 colonne --- */
  #footer-items-section {
    grid-template-columns: 1fr;
    gap: 25px;
    width: 90%;
  }

  .footer-items > h3 {
    font-size: 2rem;
  }

  /* --- CONTACTS PAGE --- */
  #header-section-contacts {
    height: 55vh;
  }

  #contact-form-first-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  #contacts-details-section > div {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: left;
    width: 90%;
  }

  #call-us > h1,
  #email > h1,
  #social-media > h1 {
    font-size: 2.5rem;
  }

  /* --- SERVICES PAGE --- */
  #header-section-services {
    height: 60vh;
  }

  #services-form-bloc {
    grid-template-columns: 1fr;
    padding: 8% 5%;
    gap: 15px;
  }

  #sevices-form-bloc-1 {
    grid-column: auto;
  }

  .pdg-words {
    font-size: 1.7rem;
  }

  .services-items-bloc-1-left,
  .services-items-bloc-2-right,
  .services-items-bloc-3-left {
    height: 35vh;
  }

  .services-items-bloc-1-right > h1,
  .services-items-bloc-2-left > h1,
  .services-items-bloc-3-right > h1 {
    font-size: 2.4rem;
  }

  .services-items-bloc-1-right > p,
  .services-items-bloc-2-left > p,
  .services-items-bloc-3-right > p {
    font-size: 1.6rem;
  }

  /* --- ABOUT PAGE --- */
  #header-section-about {
    height: 60vh;
  }

  .section-about-item-1-right,
  .section-about-item-2-left {
    height: 35vh;
  }

  #about-band > h1 {
    font-size: 2rem;
  }

  .section-about-item-1-left > h1,
  .section-about-item-2-right > h1 {
    font-size: 3rem;
  }

  .section-about-item-1-left > p,
  .section-about-item-2-right > p {
    font-size: 1.6rem;
  }

  /* --- RDV PAGE --- */
  #section-partners {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .partner-1,
  .partner-2,
  .partner-3,
  .partner-4,
  .partner-5 {
    height: 10vh;
  }

  .time-slots {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-with-us-full {
    margin-top: 10%;
  }
}