@tailwind base;
@tailwind components;
@tailwind utilities;

body{
  background-color: #FFFFFF;
}
/*********** Global ***************************************************/
/*
Main Colors :
black : #1D1D1B;
white : #FFFFFF;
pink : #D16D7E;
beige : #ECC7B4;
*/
.text-black {
    color: #1D1D1B;
  }
  .text-white {
    color: #FFFFFF;
  }
  .text-pink {
    color: #D16D7E;
  }
  .text-beige {
    color: #ECC7B4;
  }
  .bg-pink {
    background-color: #D16D7E;
  }
  .bg-beige {
    background-color: #ECC7B4;
  }
  .bg-white {
    background-color: #FFFFFF;
  }
  html {
      scroll-behavior: smooth;
  }
  
  body {
      font-family: "Roboto Condensed", serif;
      font-optical-sizing: auto;
      font-style: normal;
  }
  h1, h2, h3, h4, h5{
     font-family: "Playfair Display", serif;
     font-optical-sizing: auto;
     font-style: normal;
  }
  p{
      font-size: 1rem;
      color: #1D1D1B;
      font-style: normal;
      font-weight: normal;
  }
  .scroll-to-top{
      position: fixed;
      bottom: 0;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      right: 20px;
      color: white;
      background-color: rgba(29, 29, 27, 0.4);
      padding: 5px 10px;
  }
  .scroll-to-top:hover{
     color: #D16D7E;
  }

  .wrap{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  /*********** Menu ***************************************************/
  .main-navigation{
      position: absolute;
      padding-top: 50px;
      width: 100%;
      z-index: 100;
  }
  .wrap-navigation{ 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .nav-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    transition: color 0.2s ease;
  }
  .burger-btn:hover {
    color: #D16D7E;
  }
  .burger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .main-navigation.is-open .burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .main-navigation.is-open .burger-line:nth-child(2) {
    opacity: 0;
  }
  .main-navigation.is-open .burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .nav-menu {
    display: block;
  }
  .menu-items{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  
  .menu-item{
      margin-right: 30px;
      font-size: 17px;
  }
  .menu-item:last-child {
    margin-right: 0;
  }
  .a-main-menu{
      color: white;
      transition: 0.2s ease;
  }
  .a-main-menu:hover{
      color: #D16D7E;
      border-bottom: 2px solid #D16D7E;
  }
  .a-menu-contact{
      color: white;
      background-color: #D16D7E;
      padding: 10px 20px;
      border-radius: 25px;
      transition: 0.2s ease;
  }
  .a-menu-contact:hover{
      color: #1D1D1B;
  }

  /* Menu responsive : mode burger en dessous de 768px */
  @media (max-width: 768px) {
    .wrap-navigation {
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 20px;
    }
    .nav-header {
      width: 100%;
      position: relative;
      z-index: 101;
    }
    .burger-btn {
      display: flex;
    }
    .nav-menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(29, 29, 27, 0.98);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 99;
    }
    .main-navigation.is-open .nav-menu {
      opacity: 1;
      visibility: visible;
    }
    .nav-menu .menu-items {
      flex-direction: column;
      gap: 24px;
      padding: 80px 24px 40px;
    }
    .nav-menu .menu-item {
      margin-right: 0;
      font-size: 20px;
    }
    .nav-menu .a-main-menu,
    .nav-menu .a-menu-contact {
      display: inline-block;
      padding: 8px 0;
    }
  }
  .submit-button-contact{
      background-color: #D16D7E;
      color: white;
      padding: 10px 20px;
      border-radius: 25px;
      transition: 0.2s ease;
  }
  .submit-button-contact:hover{
      color: #1D1D1B;
      background-color: #b85a6b;
  }
  /*********** Home ***************************************************/
  #home-section{
      min-height: 100vh;
      background-image: url("../home-Awc71JI.jpg");
  
      box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.1);
  
      background-size: cover;
      position: relative;
      .wrap-home-title{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          padding-top: 300px;
          padding-bottom: 50px;
      }
      .home-link{
          text-align: right;
          a{
              display: inline-flex;
              flex-direction: row;
              align-items: center;
              span{
                  padding-right: 5px;
              }
              color: white;
              background-color: #D16D7E;
              padding: 10px 20px;
              border-radius: 25px;
              transition: 0.2s ease;
          }
          a:hover{
              color: #1D1D1B;
          }
      }
      h2{
          font-size: 4rem;
          font-weight: 700;
          color: white;
      }
  }
  .shape-white{
      position: absolute;
      bottom: 0;
      width: 100%;
  }
  .icon-down-link{
    width: 1.5rem;
  }

  /*********** About ***************************************************/
  #about-section{
  
      .wrap-about{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          padding-top: 50px;
          padding-bottom: 50px;
      }
      img{
          width: 30%;
      }
      h1{
          font-size: 4rem;
          font-weight: 700;
          color: #ECC7B4;
      }
      .about-text{
          margin-right: 30px;
      }
      .about-image{
          width: 300px;
          height: 300px;
          /* object-fit: cover; */
          border-radius: 10px;
      }
  }
  @media (max-width: 768px) {
    #about-section{
      .wrap-about{
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
  /*********** Products ***************************************************/
  #products-section{
      background-color: #ECC7B4;
      color: white;
      text-align: center;
      position: relative;
      padding-bottom: 200px;
      padding-top: 50px;
      h2{
          font-size: 4rem;
          font-weight: 700;
          margin-bottom: 20px;
      }
      .products-content{
          color: white;
      }
      .shape-white-reverse{
          position: absolute;
          bottom: 0;
          width: 100%;
      }
  }
  .partners-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      margin-top: 50px;
      padding: 0 20px;
  }
  
  .partner-wrap {
      display: flex;
      justify-content: center;
  }
  
  .partner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background-color: white;
      padding: 30px 25px;
      border-radius: 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      max-width: 300px;
      width: 100%;
      border: 2px solid transparent;
      position: relative;
  }
  
  .partner:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      border-color: #D16D7E;
  }
  
  .partner-link {
      text-decoration: none;
      color: inherit;
      cursor: pointer;
  }
  
  .partner-link:hover {
      text-decoration: none;
      color: inherit;
  }
  
  .partner-link::after {
      content: "🔗";
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 0.8rem;
      opacity: 0.6;
      transition: opacity 0.3s ease;
  }
  
  .partner-link:hover::after {
      opacity: 1;
  }
  
  .partner img {
      width: 80px;
      height: 80px;
      object-fit: contain;
      border-radius: 50%;
      margin-bottom: 20px;
      background-color: #f8f9fa;
      padding: 10px;
  }
  
  .partner h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: #1D1D1B;
      line-height: 1.2;
  }
  
  .partner-content {
      color: #666;
      font-size: 0.95rem;
      line-height: 1.5;
      margin: 0;
  }
  
  @media (max-width: 768px) {
      .partners-grid {
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
          padding: 0 10px;
      }
      
      .partner {
          padding: 25px 20px;
      }
      
      .partner img {
          width: 70px;
          height: 70px;
      }
      
      .partner h3 {
          font-size: 1.3rem;
      }
  }
  
  @media (max-width: 480px) {
      .partners-grid {
          grid-template-columns: 1fr;
          gap: 15px;
      }
  }
  
  /*********** Scroll to top button ***************************************************/
  .scroll-to-top-btn {
      position: fixed;
      bottom: 60px;
      right: 30px;
      width: 50px;
      height: 50px;
      background-color: #D16D7E;
      border: none;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(209, 109, 126, 0.3);
      transition: all 0.3s ease;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      z-index: 1000;
  }
  
  .scroll-to-top-btn.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }
  
  .scroll-to-top-btn:hover {
      background-color: #b85a6b;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(209, 109, 126, 0.4);
  }
  
  .scroll-to-top-btn:active {
      transform: translateY(0);
  }
  
  .scroll-to-top-btn svg {
      transition: transform 0.3s ease;
  }
  
  .scroll-to-top-btn:hover svg {
      transform: translateY(-2px);
  }
  
  @media (max-width: 768px) {
      .scroll-to-top-btn {
          bottom: 50px;
          right: 20px;
          width: 45px;
          height: 45px;
      }
  }
  
  /*********** how ***************************************************/
  #how-section{
      background-color: white;
      color: #1D1D1B;
      text-align: center;
      h2{
          font-size: 4rem;
          font-weight: 700;
          margin-bottom: 20px;
      }

  }
  
  .how-items-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      margin-top: 50px;
      padding: 0 20px;
  }
  
  .how-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 30px 20px;
      background-color: #f8f9fa;
      border-radius: 15px;
      transition: all 0.3s ease;
      border: 2px solid transparent;
  }
  
  .how-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      /* border-color: #D16D7E; */
      background-color: white;
  }
  
  .how-item-icon {
      width: 80px;
      height: 80px;
      background-color: #D16D7E;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      transition: all 0.3s ease;
  }
  
  .how-item:hover .how-item-icon {
      background-color: #b85a6b;
      transform: scale(1.1);
  }
  
  .how-item-icon i {
      font-size: 2rem;
      color: white;
  }
  
  .how-item h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: #1D1D1B;
      line-height: 1.2;
  }
  
  .how-item p {
      color: #666;
      font-size: 1rem;
      line-height: 1.6;
      margin: 0;
  }
  
  @media (max-width: 768px) {
      .how-items-grid {
          grid-template-columns: 1fr;
          gap: 30px;
          padding: 0 10px;
      }
      
      .how-item {
          padding: 25px 15px;
      }
      
      .how-item-icon {
          width: 70px;
          height: 70px;
      }
      
      .how-item-icon i {
          font-size: 1.8rem;
      }
      
      .how-item h3 {
          font-size: 1.3rem;
      }
  }
  /*********** Why ***************************************************/
  #why-section{
      background-color: #D16D7E;
      color: white;
      text-align: center;
      position: relative;
      padding-bottom: 200px;
      h2{
          font-size: 4rem;
          font-weight: 700;
          margin-bottom: 20px;
      }
      .shape-red{
          position: absolute;
          bottom: 0;
          width: 100%;
      }
  }
  /*********** Why ***************************************************/
  #why-section{
      background-color: #D16D7E;
      color: white;
      text-align: center;
      h2{
          margin-bottom: 20px;
      }
      h3{
          font-size: 4rem;
          font-weight: 700;
          margin-bottom: 20px;
      }
  }

  .why-items-container{
    width: 100%;
  }
  /*********** Contact ***************************************************/
#contact-section{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ecc7b4 0%, #d16d7e 100%);
    color: #0f172a;
    padding: 80px 0 120px;
    text-align: left;

    .contact-bg{
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 900px at 10% 20%, rgba(255,255,255,0.25), transparent),
                    radial-gradient(600px 600px at 80% 0%, rgba(255,255,255,0.18), transparent),
                    radial-gradient(500px 500px at 50% 80%, rgba(255,255,255,0.15), transparent);
        pointer-events: none;
        opacity: 0.9;
    }

    .contact-wrapper{
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 32px;
        z-index: 1;
    }

    .contact-header{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-header h2{
        font-size: clamp(2rem, 3vw, 2.75rem);
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        text-align: center;
    }

    .contact-header p{
        color: #1f2937;
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.6;
        text-align: center;
    }

    .contact-badge{
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,0.2);
        color: #0f172a;
        font-weight: 600;
        letter-spacing: 0.01em;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    .contact-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 960px;
        margin: 0 auto;
    }

    .contact-card{
        background: rgba(255,255,255,0.86);
        border: 1px solid rgba(255,255,255,0.7);
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        backdrop-filter: blur(6px);
    }

    .contact-info-card{
        display: flex;
        flex-direction: column;
        gap: 14px;
        color: #0f172a;
    }

    .contact-info-card h3{
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0;
    }

    .contact-role{
        margin: 0;
        color: #374151;
    }

    .contact-logo{
        display: flex;
        justify-content: flex-center;
        align-items: center;
        margin: 0 auto;
    }

    .contact-logo img{
        width: 140px;
        filter: drop-shadow(0 10px 24px rgba(0,0,0,0.15));
    }

    .contact-links{
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 4px;
    }

    .contact-link{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255,255,255,0.9);
        color: #0f172a;
        text-decoration: none;
        font-weight: 600;
        transition: transform .15s ease, box-shadow .15s ease;
        box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    }

    .contact-link i{
        color: #d16d7e;
    }

    .contact-link:hover{
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(0,0,0,0.12);
    }

    .social-links{
        display: flex;
        justify-content: center;
        gap: 14px;
        font-size: 2.2rem;
        margin-top: 6px;
    }

    .social-links a{
        color: #0f172a;
        display: inline-flex;

        align-items: center;
        justify-content: center;

        transition: transform .15s ease, box-shadow .15s ease;
    }

    .social-links a:hover{
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(0,0,0,0.12);
    }

    .contact-form-card{
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .contact-form{
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .form-field{
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-label{
        font-weight: 700;
        color: #0f172a;
    }

    .input-with-icon{
        position: relative;
    }

    .input-with-icon i{
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #d16d7e;
        pointer-events: none;
    }

    .input-with-icon.textarea i{
        top: 18px;
    }

    .form-input{
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(15,23,42,0.08);
        padding: 12px 14px 12px 42px;
        background: rgba(255,255,255,0.95);
        color: #0f172a;
        font-size: 1rem;
        outline: none;
        transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    }

    .form-textarea{
        resize: vertical;
        min-height: 140px;
    }

    .form-input:focus{
        border-color: rgba(209,109,126,0.6);
        box-shadow: 0 10px 30px rgba(209,109,126,0.25);
        transform: translateY(-1px);
    }

    .form-actions{
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .btn-gradient{
        border: none;
        padding: 12px 22px;
        border-radius: 12px;
        background: linear-gradient(120deg, #0f172a, #1f2937);
        color: white;
        font-weight: 700;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
        box-shadow: 0 16px 32px rgba(0,0,0,0.18);
    }

    .btn-gradient:hover{
        transform: translateY(-2px);
        box-shadow: 0 20px 36px rgba(0,0,0,0.2);
    }

    .form-note{
        margin: 0;
        color: #374151;
        font-size: 0.95rem;
    }

    .contact-alert{
        width: 100%;
        padding: 12px 14px;
        border-radius: 10px;
        background: rgba(46, 204, 113, 0.12);
        color: #0f5132;
        border: 1px solid rgba(46, 204, 113, 0.3);
        text-align: center;
        font-weight: 700;
    }

    @media (max-width: 768px){
        text-align: left;
        padding: 60px 0 90px;
        .contact-header{
            gap: 8px;
        }
        .contact-card{
            padding: 22px;
        }
        .form-actions{
            align-items: flex-start;
        }
    }
}
  /*********** Footer ***************************************************/
  footer{
      background-color: #D16D7E;
      p{
          color: white;
          font-size: 13px;
          text-align: center;
      }
  }