/*
Theme Name: Organisation
Description: Feuille de style pour la page Organisation.
Author: MACOM DIGITALE
Version: 1.0.5
*/

/* === HERO BANNER ORGANISATION === */
.hero {
    width: 100%;
    max-width: 1440px;
    height: 622px;
    margin: 0 auto;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end; /* contenu aligné en bas */
    justify-content: flex-start; /* contenu à gauche */
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

.hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.hero .hero-content {
    position: relative;
    z-index: 2;
    padding: 60px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* bouton aligné à gauche du texte */
    gap: 15px; /* espace harmonieux entre les éléments */
}

.hero .hero-content h1 {
    font-size: 50px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.hero .hero-content p {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

.hero .btn-primary {
    display: inline-block;
    margin-top: 25px; /* espace sous le texte */
    padding: 12px 28px;
    border: 2px solid #05D9C4;
    color: #fff;               /* police blanche */
    background: transparent;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
}

.hero .btn-primary:hover {
    background-color: #05D9C4;
    color: #000;               /* police noire au hover */
}



/* === CONTENU PRINCIPAL === */
.organisation {
    padding: 0; /* collé au hero */
}

/* === SECTION ORGANISATION === */
.organisation-section {
    display: flex;                 
    flex-direction: row;           
    justify-content: flex-start;   
    align-items: flex-start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 0 50px 120px;   /* padding-top légèrement augmenté pour espace sous le hero */
    gap: 50px;                     
}

/* Texte à gauche */
.organisation-text {
    width: 580px;
    height: 796px;
    display: flex;
    flex-direction: column;
}

.organisation-title {
    font-family: 'Watchtower', sans-serif;
    font-size: 75px;
    margin: 0 0 20px 0;
}

.organisation-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 15px 0;
}

.organisation-paragraph {
    font-family: 'Roboto', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 20px;
  text-align: justify; /* texte justifié */
    margin-bottom: 20px;
}

/* Boutons */
.organisation-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}

.organisation-buttons .btn {
    background-color: #000;       /* fond noir */
    color: #fff;                  /* texte blanc */
    border: 2px solid #05D9C4;   /* contour vert */
    border-radius: 0;             /* pas d'arrondi */
    padding: 12px 28px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 18px;
  padding: 12px 35px
}

.organisation-buttons .btn:hover {
    background-color: transparent; /* fond transparent */
    color: #000;                   /* texte noir */
    border: 2px solid #000;        /* contour noir */
}

/* Image à droite */
.organisation-image {
    width: 578px;
    height: 835px;
    margin-left: 30px; /* décale l'image vers la droite */
}

.organisation-image img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #05D9C4;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
    .organisation-section {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .organisation-text,
    .organisation-image {
        width: 100%;
        height: auto;
    }

    .organisation-image img {
        height: auto;
    }
}

/* Coller le footer à la section précédente sur la page Organisation */
body.page-template-organisation .site-footer {
    margin-top: 0; /* plus d'espace au-dessus du footer */
}

body.page-template-organisation .site-main {
    padding-bottom: 0; /* plus de padding sous le contenu */
}

/* === SECTION FAQ === */
.faq-section {
  width: 100%;
  max-width: 1440px;
  margin: 100px auto 0;
  background-color: #0B0A0A;
  transition: background-color 0.5s ease;
  padding: 60px 20px;
  box-sizing: border-box;
}

.faq-section.active {
  background-color: #111; /* plus clair quand une FAQ est ouverte */
}

.faq-title {
  text-align: center;
  font-family: 'Watchtower', sans-serif;
  font-size: 75px;
  color: #fff;
  margin-bottom: 50px;
  word-wrap: break-word;
}

.faq-items {
  width: 100%;
  max-width: 835px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 25px; /* padding un peu plus grand pour respirer */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background-color 0.3s;
  box-sizing: border-box;
  margin-bottom: 20px; /* espace entre chaque item */
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px; /* espace sous le titre */
}

.faq-toggle {
  width: 32px;
  height: 32px;
  background-color: #0B0A0A;
  color: #05D9C4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  transition: transform 0.3s ease;
}

/* Suppression de la limite de texte */
.faq-answer {
  display: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-align: justify;
  margin-top: 10px;
  padding-left: 20px;
}

.faq-item.open .faq-answer {
  display: block;
}

/* === Responsive === */
@media (max-width: 1024px) {
  .faq-section {
    padding: 50px 20px;
    margin-top: 100px;
  }

  .faq-title {
    font-size: 55px;
  }
}

@media (max-width: 768px) {
  .faq-section {
    margin-top: 80px;
  }

  .faq-title {
    font-size: 45px;
  }

  .faq-text {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .faq-section {
    margin-top: 60px;
  }

  .faq-title {
    font-size: 35px;
  }

  .faq-text {
    font-size: 16px;
  }

  .faq-toggle {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}