body {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #35133a;
    background: #fff;
    min-height: 100vh;
    box-sizing: border-box;
  }
  
  h1, h2, h3 { font-family: 'Montserrat', Arial, sans-serif; font-weight: bold; }
  
  .hero {
    min-height: 70vh;
    background: linear-gradient(135deg, #fed7aa 0%, #fbcfe8 70%, #c4b5fd 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.2rem 2rem 1.2rem;
    position: relative;
    border-radius: 0 0 2.5rem 2.5rem;
    overflow: hidden;
    z-index: 1;
  }
  @media(min-width: 900px){
    .hero {
      flex-direction: row;
      gap: 32px;
      padding-right: 60px;
      min-height: 70vh;
    }
  }
  
  /* Decorative background "bubbles" */
  .hero-bg1 {
    position: absolute; top: 20px; left: 20px;
    width: 130px; height: 130px;
    background: linear-gradient(120deg, #8b5cf6 40%, #fdba74 100%);
    filter: blur(32px) brightness(1.1);
    border-radius: 50%;
    opacity: 0.19;
    z-index: 0;
  }
  .hero-bg2 {
    position: absolute; bottom: 0; right: 0;
    width: 320px; height: 320px;
    background: linear-gradient(120deg, #a78bfa, #f472b6, #fdba74);
    filter: blur(56px);
    border-radius: 50%;
    opacity: 0.26;
    z-index: 0;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    z-index: 2;
    max-width: 520px;
  }
  
  .hero-logo {
    width: 130px;
    height: 130px;
    object-fit: contain;
    margin-bottom: 0.3rem;
    filter: drop-shadow(0 4px 16px #fbbf24);
    background: transparent;
  }
  
  .hero h1 {
    font-size: 2.35rem;
    color: #ea580c;
    margin: 0;
    text-shadow: 0 1.5px 0 #fff6, 0 4px 8px #f59e42a3;
    line-height: 1.16;
  }
  .hero h1 span { color: #c026d3; }
  
  .hero p {
    font-size: 1.18rem;
    color: #5d4066;
    font-weight: 600;
    margin-top: 0.2rem;
    margin-bottom: 0rem;
    max-width: 410px;
  }
  .highlight {
    color: #a21caf;
    font-weight: bold;
  }
  .btn-cta {
    display: inline-block;
    background: linear-gradient(90deg, #fdba74 0%, #f472b6 50%, #a78bfa 100%);
    color: #fff;
    padding: 16px 40px;
    border-radius: 40px;
    font-weight: bold;
    box-shadow: 0 6px 22px #c084fc42;
    font-size: 1.05rem;
    margin-top: 0.9rem;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s;
    animation: fade-in 1s;
  }
  .btn-cta:hover, .btn-cta:focus{
    transform: scale(1.045);
    box-shadow: 0 12px 32px #f472b610;
  }
  
  .hero-sideimg-container {
    display: none;
  }
  @media(min-width: 900px){
    .hero-content{ margin-left: 1rem; }
    .hero-sideimg-container { display: block; z-index: 1;}
    .hero-sideimg{
      border-radius: 27px;
      border: 4px solid #fff;
      box-shadow: 0 12px 52px #c084fc32;
      width: 360px;
      aspect-ratio: 4/5;
      object-fit: cover;
      animation: fade-in 1.4s;
      background: #fff;
    }
  }
  
  
  .activites {
    background: linear-gradient(120deg, #fdf4ff 5%, #ffe4e6 70%, #fff 100%);
    padding: 64px 1rem 40px 1rem;
  }
  .activites h2 {
    font-size: 2.04rem;
    color: #7c3aed;
    text-align: center;
    margin-bottom: 34px;
  }
  .activites-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 950px;
    margin: 0 auto;
  }
  @media(min-width: 700px){
    .activites-grid {
      grid-template-columns: 1fr 1fr;
      gap: 38px;
    }
  }
  .activite-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255,255,255,0.75);
    border-radius: 1.4rem;
    box-shadow: 0 4px 40px #a21caf14;
    border: 1.5px solid #f3e8ff;
    padding: 25px 18px;
    transition: transform 0.18s, box-shadow 0.25s;
    backdrop-filter: blur(2px);
    animation: fade-in 1.3s;
  }
  .activite-card:hover {
    transform: scale(1.035);
    box-shadow: 0 12px 36px #f472b625;
  }
  .activite-card img{
    width: 84px;
    height: 84px;
    border-radius: 16px;
    object-fit: cover;
    border: 2.6px solid #f3e8ff;
    box-shadow: 0 2.4px 8px #f3e8ff80;
  }
  .activite-card h3 {
    font-size: 1.18rem;
    color: #c026d3;
    margin-bottom: 0.38rem;
    margin-top: 0.09rem;
  }
  .activite-card p {
    color: #5a4471;
    font-size: 1.04rem;
    font-weight: 500;
  }
  
  .a-propos {
    background: linear-gradient(120deg, #fff 25%, #fdf2f8 56%, #f3e8ff 100%);
    padding: 70px 1.2rem;
  }
  .a-propos-content {
    display: flex;
    flex-direction: column-reverse;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
    gap: 2.3rem;
  }
  @media(min-width: 1060px){
    .a-propos-content {
      flex-direction: row;
      gap: 64px;
      align-items: stretch;
    }
  }
  .a-propos-block{
    flex: 1.35;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .a-propos-block h2 {
    font-size: 2.08rem;
    color: #5b21b6;
    line-height: 1.13;
    margin-bottom: 10px;
  }
  .apropos-highlight { color: #db2777; }
  .a-propos-block p { color: #5c4d67; font-size: 1.13rem; margin-bottom: 0.2rem; }
  .apropos-founder { color: #ea580c; font-weight: bold; }
  .a-propos-block ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 1.1rem 0 0 0;
    padding: 0;
    list-style: none;
  }
  @media(min-width: 700px){
    .a-propos-block ul { grid-template-columns: 1fr 1fr; }
  }
  .a-propos-block ul li {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(255,255,255,0.72);
    border-radius: 14px;
    box-shadow: 0 2.5px 14px #a21caf11;
    padding: 13px 12px;
    animation: fade-in 1s;
  }
  .a-propos-block ul li strong {
    color: #db2777;
    font-weight: bold;
    font-size: 1.04rem;
    margin-bottom: 3.5px;
    display: inline-block;
  }
  .a-propos-block ul li p { color: #674971; font-size: 0.98rem; margin: 0.1rem 0 0 0; }
  .a-propos-photo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 220px;
    max-width: 300px;
  }
  .a-propos-photo img{
    width: 240px; height: 240px;
    border-radius: 18px;
    border: 4px solid #fae8ff;
    object-fit: cover;
    margin-bottom: 9px;
    box-shadow: 0 6px 30px #a21caf2c;
  }
  .a-propos-legend {
    background: rgba(255,255,255,0.93);
    border-radius: 100px;
    padding: 6px 17px;
    font-weight: bold;
    color: #5b21b6;
    margin-bottom: 2px;
    box-shadow: 0 2px 8px #6431ad13;
  }
  .a-propos-role { color: #746692; font-size: 0.97rem; font-style: italic; }
  
  
  /* Icons (lucide like, minimal SVG BG) */
  .icon-recycle, .icon-palette, .icon-award, .icon-users {
    width: 34px; height: 34px; display: inline-block;
    border-radius: 8px; margin-right: 2px;
  }
  .icon-recycle {
    background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="green" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13v3a3 3 0 01-2.975 3H12"/><path d="M16 16l2 2 2-2"/><path d="M7.949 11.949l.707-2.122-2.12-.707"/><path d="M12 8V4.5A3.5 3.5 0 017.5 8H12zm7.213 2.368A3 3 0 0015 5h-3"/><path d="M3 17v-2a4 4 0 014-4h8"/><path d="M8 9l-2-2-2 2"/></svg>') center / 28px 28px no-repeat;
    background-color: #f0fdf4;
  }
  .icon-palette {
    background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="purple" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="8" cy="10" r="1"/><circle cx="16" cy="10" r="1"/><circle cx="11" cy="14" r="1"/><circle cx="13" cy="14" r="1"/></svg>') center/25px 25px no-repeat;
    background-color: #faf5ff;
  }
  .icon-award {
    background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="orange" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="8" r="6"/><path d="M15.5 14.5l1 6.5-4.5-3-4.5 3 1-6.5"/></svg>') center/25px 25px no-repeat;
    background-color: #fff7ed;
  }
  .icon-users {
    background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="mediumslateblue" stroke-width="2.3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="16" cy="8" r="4"/><circle cx="8" cy="8" r="4"/><path d="M2 22v-1a6 6 0 016-6h8a6 6 0 016 6v1"/></svg>') center/25px 25px no-repeat;
    background-color: #f5f3ff;
  }
  
  
  
  .gallery {
    padding: 56px 1rem 62px 1rem;
    background: linear-gradient(180deg, #f3e8ff 0%, #fffdfa 44%, #fff7ed 100%);
  }
  .gallery h2 {
    text-align: center;
    font-size: 2.02rem;
    color: #db2777;
    margin-bottom: 36px;
    font-weight: bold;
  }
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
  }
  .gallery-grid img {
    width: 100%; aspect-ratio: 1/1;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 4px 26px #f472b610;
    border: 1.8px solid #fff;
    background: #fff;
    transition: transform 0.18s, box-shadow 0.19s;
    cursor: pointer;
  }
  
  .gallery-grid img:hover {
    transform: scale(1.052);
    z-index: 10;
    box-shadow: 0 8px 44px #fdba7444, 0 8px 44px #f472b610;
    filter: brightness(1.06) contrast(1.09);
  }
  @media(min-width: 700px){
    .gallery-grid { grid-template-columns: repeat(4, 1fr);}
  }
  @media(max-width: 580px){
    .gallery-grid { gap: 10px;}
  }
  
  .footer {
    background: linear-gradient(90deg, #fdba74 0%, #f472b6 60%, #a78bfa 100%);
    color: #fff;
    text-align: center;
    padding: 38px 1rem 28px 1rem;
    border-radius: 40px 40px 0 0;
    margin-top: 68px;
    box-shadow: 0 -8px 32px #8b5cf69c inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
  }
  .footer img{
    width: 64px; height: 64px;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 8px #fff6);
  }
  .footer-sub {
    font-size: 0.89rem;
    font-weight: 300;
    padding-top: 3px;
  }
  .footer-top {
    margin-top: 11px;
  }
  .footer-top a {
    color: #fff;
    text-decoration: underline;
    font-size: 0.99rem;
    transition: color 0.13s;
  }
  .footer-top a:hover { color: #fffbe7; }
  
  
  /* Animations */
  @keyframes fade-in {
    0% { opacity:0; transform:translateY(18px);}
    100% { opacity:1; transform:translateY(0);}
  }