/* ====== Variables ====== */
    :root{
      --bg:#a8afb5;
      --card:#ffffff;
      --accent:#194aab;
      --muted:#2d3139;
      --dark:#0b1b2b;
      --radius:14px;
      --shadow: 0 8px 24px rgba(11,27,43,0.08);
      font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    }

    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--dark);-webkit-font-smoothing:antialiased}

    /* ====== Header / Nav ====== */
    header{background:linear-gradient(90deg, rgba(2, 66, 195, 0.95), rgba(45,135,255,0.9));color:white;padding:18px 20px;position:sticky;top:0;z-index:40}
    .wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:20px}
    .logo{
      width:60px;
      height:60px;
      background:rgba(2, 66, 195, 0.95);
      padding:10px;
      display:flex
    }
    nav a{
      color:rgba(255,255,255,0.95);
      text-decoration:none;
      margin-left:18px;font-weight:600
    }
    nav a:hover{
      opacity:0.9;
      background-color: bisque;
    padding:5px;
    color:black;
    font-weight: bold;
    border-radius: 20px;
    }
  
    /* ====== Hero ====== */
    .hero{max-width:1200px;margin:28px auto 20px;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:0 20px}
    .hero-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
    .kicker{color:var(--accent);font-weight:700;font-size:0.9rem}
    h1{margin:10px 0 8px;font-size:2rem}
    p.lead{color:var(--muted);margin:0 0 16px}
    .cta{display:inline-block;background:var(--accent);color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}

    .hero-aside{display:flex;flex-direction:column;gap:12px}
    .stat{background:linear-gradient(180deg, #f8fbff, #ffffff);border-radius:12px;padding:14px;text-align:center;box-shadow:0 6px 18px rgba(11,27,43,0.04)}
    .stat .num{font-size:1.4rem;font-weight:800;color:var(--dark)}
    .stat .lbl{color:var(--muted);font-size:0.9rem}

    /* ====== Sections ====== */
    main{max-width:1200px;margin:0 auto;padding:20px}
    section{margin:30px 0}
    .card{background:var(--card);padding:20px;border-radius:12px;box-shadow:var(--shadow)}

    /* Qui sommes-nous */
    .who{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
    .who img{width:100%;border-radius:10px;object-fit:cover;height:220px}
.imag1{
    display: flex;
    justify-content:left;
    width: 320;
    height: 300;
    object-fit: cover;
    border:8px solid #fff ;
    border-radius:20px ;
    cursor:pointer;
}
.imag1:hover{
    transform:scale(1.9)
}
    /* Historique */
    .history p{margin:12px 0;color:var(--muted)}

    /* Groupe */
    .group-list{display:flex;flex-wrap:wrap;gap:12px}
    .member{background:#fff;padding:12px;border-radius:10px;min-width:180px;box-shadow:0 6px 16px rgba(11,27,43,0.04)}
    .member h4{margin:6px 0 4px;font-size:1rem};
    .member p{margin:0;color:var(--muted);font-size:0.9rem}

    /* Albums (gallery) */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block}

    /* Contact */
    .contact-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
    form label{display:block;font-weight:600;margin-top:8px}
    input, textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eefc;margin-top:6px}
    button[type="submit"]{margin-top:12px;padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:white;font-weight:700}

    footer{padding:28px 20px;text-align:center;color:var(--muted);font-size:0.9rem}

    /* Responsive */
    @media (max-width:1000px){
      .hero{grid-template-columns:1fr}
      .who{grid-template-columns:1fr}
      .contact-grid{grid-template-columns:1fr}
      .gallery{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:600px){
      nav a{display:none}
      .logo{width:46px;height:46px}
      .gallery img{height:140px}
    }