/* Styles de responsivité pour les grands écrans (xl, 2xl, 3xl) */

/* Écrans XL (1200px - 1536px) */
@media (min-width: 1200px) {
  /* About Banner */
  .about-banner-content, .services-banner-content, .ressources-banner-content, .programs-banner-content {
    margin-top: 18vh;
  }

  .about-banner-content h1, .services-banner-content h1, .ressources-banner-content h1, .programs-banner-content h1 {
    font-size: 3.5rem;
  }

  .about-banner-subtitle, .services-banner-subtitle, .ressources-banner-subtitle, .programs-banner-subtitle {
    font-size: 1.8rem;
  }

  .about-banner-description, .services-banner-description, .ressources-banner-description, .programs-banner-description {
    font-size: 1.2rem;
    max-width: 60%;
    line-height: 1.6;
  }

  .region-about-banner, .region-services-banner, .region-ressources-banner, .region-programs-banner {
    height: auto;
  }

  /* Vision Mission */
  .vision-mission-section {
    padding: 5vw 3vw;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .vision-title,
  .mission-title {
    font-size: 2.8rem;
  }
  
  .vision-description,
  .mission-description,
  .vision-footer-text {
    font-size: 1.2rem;
    line-height: 1.7;
  }
  
  .vision-point {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }
  
  .mission-point-box {
    min-height: 140px;
    padding: 36px 20px 32px 20px;
  }
  
  .mission-point-number {
    font-size: 2rem;
  }
  
  .mission-point-description {
    font-size: 1.2rem;
  }
  
  .mission-img {
    height: 35vh;
  }

  /* Message Directeur */
  .message-directeur-section {
    padding: 6vw 12vw;
  }
  
  .message-content-centered {
    max-width: 900px;
  }
  
  .message-title {
    font-size: 2.3rem;
    margin-bottom: 30px;
  }
  
  .message-text {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 40px;
  }
  
  .message-image {
    max-width: 800px;
  }
  
  .play-button {
    width: 80px;
    height: 80px;
  }
}

/* Écrans 2XL (1536px - 1920px) */
@media (min-width: 1536px) {
  /* About Banner */
  .about-banner-content, .services-banner-content, .ressources-banner-content, .programs-banner-content {
    margin-top: 20vh;
  }

  .about-banner-content h1, .services-banner-content h1, .ressources-banner-content h1, .programs-banner-content h1 {
    font-size: 4rem;
  }

  .about-banner-subtitle, .services-banner-subtitle, .ressources-banner-subtitle, .programs-banner-subtitle {
    font-size: 2rem;
  }

  .about-banner-description, .services-banner-description, .ressources-banner-description, .programs-banner-description {
    font-size: 1.3rem;
    max-width: 55%;
  }

  .region-about-banner, .region-services-banner, .region-ressources-banner, .region-programs-banner {
    height: auto;
  }

  /* Vision Mission */
  .vision-mission-section {
    padding: 6vw 3vw;
    max-width: 1600px;
  }
  
  .vision-title,
  .mission-title {
    font-size: 3.2rem;
  }
  
  .vision-description,
  .mission-description,
  .vision-footer-text {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 25px;
  }
  
  .vision-point {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  
  .vision-point-icon {
    width: 32px;
    height: 32px;
    font-size: 1.3rem;
  }
  
  .mission-point-box {
    min-height: 160px;
    padding: 40px 24px 36px 24px;
  }
  
  .mission-point-number {
    font-size: 2.2rem;
  }
  
  .mission-point-description {
    font-size: 1.3rem;
  }
  
  .mission-img {
    height: 40vh;
  }

  /* Message Directeur */
  .message-directeur-section {
    padding: 7vw 3vw;
  }
  
  .message-content-centered {
    max-width: 1000px;
  }
  
  .message-title {
    font-size: 2.6rem;
    margin-bottom: 35px;
  }
  
  .message-text {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 45px;
  }
  
  .message-image {
    max-width: 900px;
  }
  
  .play-button {
    width: 90px;
    height: 90px;
  }
}

/* Écrans 3XL (1920px et plus) */
@media (min-width: 1920px) {
  /* About Banner */
  .about-banner-content, .services-banner-content, .ressources-banner-content, .programs-banner-content {
    margin-top: 22vh;
  }

  .about-banner-content h1, .services-banner-content h1, .ressources-banner-content h1, .programs-banner-content h1 {
    font-size: 4.5rem;
  }

  .about-banner-subtitle, .services-banner-subtitle, .ressources-banner-subtitle, .programs-banner-subtitle {
    font-size: 2.2rem;
  }

  .about-banner-description, .services-banner-description, .ressources-banner-description, .programs-banner-description {
    font-size: 1.4rem;
    max-width: 50%;
    line-height: 1.8;
  }

  .region-about-banner, .region-services-banner, .region-ressources-banner, .region-programs-banner {
    height: auto;
  }

  /* Vision Mission */
  .vision-mission-section {
    padding: 7vw 3vw;
    max-width: 1800px;
  }
  
  .vision-container,
  .mission-container {
    gap: 60px;
  }
  
  .vision-title,
  .mission-title {
    font-size: 3.5rem;
    margin-bottom: 25px;
  }
  
  .vision-description,
  .mission-description,
  .vision-footer-text {
    font-size: 1.4rem;
    line-height: 1.9;
    margin-bottom: 30px;
  }
  
  .vision-point {
    font-size: 1.3rem;
    margin-bottom: 24px;
  }
  
  .vision-point-icon {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
  
  .mission-points-container {
    gap: 40px;
  }
  
  .mission-point-box {
    min-height: 180px;
    padding: 45px 28px 40px 28px;
  }
  
  .mission-point-number {
    font-size: 2.5rem;
    margin-bottom: 12px;
  }
  
  .mission-point-description {
    font-size: 1.4rem;
  }
  
  .mission-img {
    height: 40vh;
  }

  /* Message Directeur */
  .message-directeur-section {
    padding: 8vw 20vw;
  }
  
  .message-content-centered {
    max-width: 1200px;
  }
  
  .message-title {
    font-size: 3rem;
    margin-bottom: 40px;
  }
  
  .message-text {
    font-size: 1.4rem;
    line-height: 1.9;
    margin-bottom: 50px;
  }
  
  .message-image {
    max-width: 1000px;
  }
  
  .play-button {
    width: 100px;
    height: 100px;
  }
  
  .play-button svg {
    width: 30px;
    height: 30px;
  }
}