.site-main {
  max-width: 100%; /* override du layout.css pour autoriser le full-width */
}

/*==== HERO BANNER ===*/
.home-hero {
    position: relative;
    background-color: var(--color-text);
    padding: 4rem 0 0 0;
    text-align: center; 
    border-radius: 3rem;
  }
  
  .hero-inner {
    margin: 0 auto;
    position: relative;
  }
  
  .hero-title,
  .hero-title span {
    display: block;
    color: var(--color-bg);
    height: auto;
  }
  
  .hero-image {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    z-index: 1;
  }
  
  .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
  }

    /* FLOATING SVG DECOR */
    .hero-decor {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    @keyframes floaty {
      0%   { transform: translateY(0px) rotate(0deg) scale(1.00);}
      50%  { transform: translateY(-8px) rotate(1deg) scale(1.04);}
      100% { transform: translateY(0px) rotate(0deg) scale(1.00); }
    }
    
    .hero-decor svg {
      animation: floaty 6s ease-in-out infinite;
      will-change: transform;
    }

      .hero-decor .moon1 {
        position: absolute;
        bottom: 16%; 
        right: 12rem; 
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 0;
      }
      .hero-decor .moon1 svg {
            width: 10rem;
            height: auto;
            display: block;
            fill: var(--color-primary);
            animation-duration: 7.3s;
            animation-delay: 1.2s; 
      }

      .hero-decor .mountain1 {
        position: absolute;
        bottom: -2%; 
        right: -1rem; 
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 0;
      }
      .hero-decor .mountain1 svg {
            width: 6rem;
            height: auto;
            display: block;
            fill: var(--color-accent-1); 
            animation-duration: 5.8s;
            animation-delay: 0.7s;
      }

      .hero-decor .wheel1 {
        position: absolute;
        top: 48%; 
        left: -2rem; 
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 0;
      }
      .hero-decor .wheel1 svg {
            width: 6rem;
            height: auto;
            display: block;
            fill: var(--color-secondary); 
            animation-duration: 6.5s;
            animation-delay: 2.4s;
      }


  /*==== SERVICES CARDS ====*/
  .home-services {
    position: relative;
    padding: 2rem 0;
    z-index: 10;
  }
  
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    gap: 2rem;
  }
  
  .service-card {
    position: relative;
    background: var(--color-bg-alt);
    border-radius: 3rem;
    padding: 1rem 2rem 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
  }
    .service-card .btn {
        position: absolute;
        inset-inline: 0;
        margin-inline: auto;
        width: max-content;
        bottom: -1.5rem;
    }
  
  .service-title {
    margin-bottom: 1rem;
    color: var(--color-caption);
  }
  
  .service-text {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--color-text);
  }
  
  .service-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5rem;
  }
  
  .service-list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.5rem;
  }
  
  .service-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-secondary);
  }
  
  /* Visually hidden title for a11y */
  .visually-hidden {
    position: absolute;
    left: -9999px;
  }
  

  /*==== APPROCHE SYSTEMIQUE ====*/
  .home-systemic {
    color: var(--color-bg);
    padding: 6rem 0 20rem 0;
    position: relative;
  }
 
  .systemic-inner {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 3rem;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 1;
  }

  .systemic-text h2 {
    color: var(--color-bg);
    margin-bottom: 1rem;
  }
  
  .systemic-text p {
    margin-bottom: 1.5rem;
  }
  
  .btn-dark {
    display: inline-block;
  }

  .systemic-visual {
    max-width: 240px;
  }
  .systemic-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2rem;
    border: 8px solid var(--color-bg);
  }

        /* DECOR SVG ELEMENTS */
        /* bg-full défini dans main.css */
        .wave-top {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: auto;
          transform: scaleX(-1) scaleY(1.2) translateY(-89%);
          z-index: 1; 
        }
          .wave-top svg {
              display: block;
              width: 100%;
              height: auto;
          }
          .wave-top svg path {
              fill: var(--color-text);
          }
          
        .wave-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: auto;
            transform: scaleY(1);
            z-index: 1;
        }
        .wave-bottom svg {
            display: block;
            width: 100%;
            height: auto;
        }
        .wave-bottom svg path {
            fill: var(--color-accent-2);
        }
        .mountains-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: auto;
            transform: scaleY(1);
            z-index: 1;
        }
        .mountains-bottom svg {
            display: block;
            width: 100%;
            height: auto;
        }
        .mountains-bottom svg path {
            fill: var(--color-accent-1);
        }
        .landscape-transition {
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: auto;
            transform: scaleY(1);
            z-index: 1;
        }
        .landscape-transition svg {
            display: block;
            width: 100%;
            height: auto;
        }
        .landscape-transition svg path {
            fill: var(--color-bg);
        }
   
        /* FLOATING SVG IN BACKGROUND */
        .systemic-decor {
          position: absolute;
          inset: 0;
          pointer-events: none;

        }
        .systemic-decor .wheel1 {
          position: absolute;
          top: 20%; 
          left: -15rem; 
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .systemic-decor .wheel1 svg {
              width: 6rem;
              height: auto;
              display: block;
              fill: var(--color-bg); 
              z-index: 1;
          }
          .systemic-decor .wheel1 .line {
              width: 2px;
              background: var(--color-bg);
              height: 20rem; 
              margin-top: 0;
            }

      .systemic-decor .wheel2 {
          position: absolute;
          top: 110%; 
          left: 15rem; 
          display: flex;
          flex-direction: column;
          align-items: center;
      }
            .systemic-decor .wheel2 svg {
              width: 2rem;
              height: auto;
              display: block;
              fill: var(--color-bg); 
              z-index: 1;
          }
            .systemic-decor .wheel2 .line {
              width: 2px;
              background: var(--color-bg);
              height: 10rem; 
              margin-top: 0;
              }

      .systemic-decor .wheel3 {
          position: absolute;
          top: 30%; 
          right: 0; 
          display: flex;
          flex-direction: column;
          align-items: center;
      }
            .systemic-decor .wheel3 svg {
              width: 2.4rem;
              height: auto;
              display: block;
              fill: var(--color-bg); 
              z-index: 1;
          }
            .systemic-decor .wheel3 .line {
              width: 2px;
              background: var(--color-bg);
              height: 30rem; 
              margin-top: 0;
              }

      .systemic-decor .mountain1 {
        position: absolute;
        top: 72%; 
        right: -20%; 
        display: flex;
        flex-direction: column;
        align-items: center;
      }
          .systemic-decor .mountain1 svg {
            width: 3rem;
            height: auto;
            display: block;
            fill: var(--color-bg); 
            z-index: 1;
          }
          .systemic-decor .mountain1 .line {
            width: 2px;
            background: var(--color-bg);
            height: 20rem; 
            margin-top: 0;
          }

      .systemic-decor .rectangle1 {
        position: absolute;
        top: 100%; 
        left: -36%; 
        display: flex;
        flex-direction: column;
        align-items: center;
      }
          .systemic-decor .rectangle1 svg {
            width: 2rem;
            height: auto;
            display: block;
            fill: var(--color-bg); 
            z-index: 1;
        }
          .systemic-decor .rectangle1 .line {
            width: 2px;
            background: var(--color-bg);
            height: 16rem; 
            margin-top: 0;
        }

/*==== SECTION PROJECTS ====*/
/* Définie via template-parts/section-projects.php, CSS via main.css */

/*==== SECTION CONTACT ====*/
/* Définie via template-parts/section-contact.php, CSS via main.css */