:root{--bg:#b3b7bd;--card:#fff;--accent:#0b5cff;--muted:#5a6570;--dark:#0b1b2b;--radius:12px;--shadow:0 8px 24px rgba(11,27,43,0.06);font-family:Inter, Arial, sans-serif}
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--dark);-webkit-font-smoothing:antialiased}
     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 {
        color:rgba(255,255,255,0.95);
        text-decoration:none;
        margin-left:300px;
        font-weight:bold;
        font-size: xx-large;
    }
    .container{max-width:1100px;margin:0 auto;padding:20px}
    h1{margin:0;font-size:1.6rem}
    .intro{background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);margin-top:18px}
    .grid{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-top:18px}
    .card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
    .timeline{list-style:none;padding:0;margin:0}
    .timeline li{padding:12px 0;border-bottom:1px solid #eef3fb}
    .timeline li .year{font-weight:700;color:var(--accent);margin-bottom:6px}
    .facts{margin-top:12px}
    .facts ul{margin:0;padding-left:18px;color:var(--muted)}
    .cta{display:inline-block;margin-top:14px;padding:10px 14px;background:var(--accent);color:#fff;border-radius:10px;text-decoration:none}
    img.illu{
      width:80%;
      height:auto;
      border-radius:10px;
      object-fit:cover;
      margin: 40px;
    }
    /* --- 6. SECTION GALERIE D'IMAGES --- */


    img {
      width: 250px;
      height: auto;
      object-fit: cover;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .img2{
      width: 100%;
      height: 74;
      object-fit: cover;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    img:hover {
      transform: scale(1.9);
    }

.legende {
  text-align: center;
  background: #485663;
  color: white;
  padding: 6px;
  font-size: 0.9em;
  border-radius: 0 0 8px 8px;
}
/* --- Lightbox --- */
    .lightbox {
      display: none; /* cachée par défaut */
      position: fixed;
      z-index: 1000;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      justify-content: center;
      align-items: center;
    }

    .lightbox img {
      width: 90%;
      height: 90%;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(255,255,255,0.3);
    }
    .lightbox:target {
      display: flex;
    }
    @media(max-width:900px){.grid{grid-template-columns:1fr}.intro{margin-bottom:8px}}