@font-face {
   font-family: 'Lush Garden';
   src: url('./fonts/LushGarden-5yvra.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }


 body {
   font-family: 'Plus Jakarta Sans', sans-serif;
   background-color: #e8ead3;
   color: #1a1a1a;
 }

 /* ── NAV ── */
 nav {
   position: sticky;
   top: 0;
   z-index: 100;
   background: #97AE50;
   backdrop-filter: blur(8px);
   display: flex;
   justify-content: center;
   gap: 48px;
   padding: 18px 24px;
 }

 nav a {
   text-decoration: none;
   color: #394032;
   font-size: 15px;
   font-weight: 800;
   font-family: 'Plus Jakarta Sans', sans-serif;
   transition: opacity 0.2s;
 }

 nav a:hover {
   opacity: 0.6;
 }


 .hero {
   background: linear-gradient(180deg, #97AE50 0%, #e8ead3 100%);
   text-align: center;
   padding: 80px 24px 80px;
   min-height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .hero::before {
   content: '';
   position: absolute;
   top: 0px;
   left: 51%;
   transform: translateX(-50%);
   width: 780px;
   height: 120%;
   background: url('./img/hero_arbre.png') center top / contain no-repeat;
   pointer-events: none;
 }

 .hero h1 {
   position: relative;
   z-index: 1;
   font-family: 'Lush Garden', serif;
   font-size: clamp(48px, 10vw, 100px);
   font-weight: 400;
   color: #394032;
   letter-spacing: 0.02em;
 }


 section {
   max-width: 780px;
   margin: 0 auto;
   padding: 32px 0px;
 }

 section h2 {
   font-family: 'Lush Garden', serif;
   font-size: 36px;
   font-weight: 400;
   text-align: center;
   margin-bottom: 32px;
   color: #394032;
 }

 section {
   font-size: 14px;
   line-height: 1.8;
   color: #000000;
   text-align: justify;
   margin-bottom: 16px;
 } 

#description h3{
  font-family: 'Lush Garden', serif;
   font-size: 26px;
   font-weight: 400;
   color: #394032;
   text-align: center;
 }


 #fonctionnement {
   min-height: 120px;
 }

 .fonctionnement-img {
   width: 100%;

   display: block;
   margin: 0 auto;
   border-radius: 8px;
 }


 #theorie {
   min-height: 200px;
 }

  #theorie h3 {
   font-family: 'Lush Garden', serif;
   font-size: 26px;
   font-weight: 400;
   margin-bottom: 16px;
   color:  #394032;
   text-align: center;
 }

   #theorie a {
   color: #000000;
   text-decoration: underline;
 }

  #theorie a:hover {
   text-decoration: underline;
 }

 #credits {
   max-width: 780px;
   margin: 0 auto;
   padding: 64px 24px 32px;
 }

 #credits h2 {
   font-family: 'Lush Garden', serif;
   font-size: 36px;
   font-weight: 400;
   text-align: center;
   margin-bottom: 32px;
   color: #394032;
 }

 .credits-grid {
   display: flex;
   justify-content: space-between;
   gap: 32px;
   flex-wrap: wrap;
   margin-bottom: 56px;
 }

 .credits-col h3 {
   font-family: 'Lush Garden', serif;
   font-size: 26px;
   font-weight: 400;
   margin-bottom: 16px;
   color: #394032;
   text-align: center;
 }

 .credits-col p {
   font-size: 13px;
   line-height: 2;
   color: #000000;
   text-align: left;
 }

  #description a {
   color: #000000;
   text-decoration: underline;
 }

 #contact a {
   color: #000000;
   text-decoration: underline;
 }

 #contact a:hover {
   text-decoration: underline;
 }


 .logos {
   display: flex;
   justify-content: space-around;
   align-items: center;
   gap: 38px;
   flex-wrap: wrap;
   padding: 32px 0 48px;
 }

 .logo-tim img {
   height: 70px;
   width: auto;
 }

 .logo-montmorency img {
   height: 70px;
   width: auto;
 }


 footer {
   background: linear-gradient(180deg, #e8ead3 0%, #97AE50 70%);
   text-align: center;
   padding: 36px 24px 20px;
   font-size: 13px;
   color: #3a3a2e;
 }