:root{
      --gap: 12px;
      --bg: #0f1115;
      --card: #171a21;
      --text: #33aeff;
      --accent: #5aa9ff;
      --radius: 10px;
    }
    * { box-sizing: border-box; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, #0c1018, #0f1115);
    }
    header{
      max-width: 1100px;
      margin: 32px auto 10px;
      padding: 0 16px;
    }
    h1{
      margin:0 0 6px 0;
      font-size: clamp(24px, 3vw, 34px);
      letter-spacing: 0.3px;
    }
    .subtitle{
      color:#9fb2cc;
      margin:0 0 18px;
    }

    /* Grille responsive */
    .gallery{
      max-width: 1100px;
      margin: 0 auto 40px;
      padding: 0 16px 8px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: var(--gap);
    }

    /* Carte d’image */
    .card{
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: 0 8px 24px rgba(0,0,0,0.28);
      isolation: isolate;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(0,0,0,0.35);
    }
    .card img{
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      transition: transform .5s ease;
    }
    .card:hover img{
      transform: scale(1.04);
    }

    /* Légende */
    .caption{
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 10px 12px;
      background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
      font-size: 14px;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .badge{
      background: rgba(90,169,255,0.18);
      color: #cde5ff;
      border: 1px solid rgba(90,169,255,0.35);
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
    }

    /* Lightbox */
    .lightbox{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.72);
      backdrop-filter: blur(2px);
      z-index: 50;
      padding: 24px;
    }
    .lightbox.open{ display: flex; }
    .lightbox-content{
      position: relative;
      max-width: min(92vw, 1000px);
      max-height: 86vh;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,0.45);
      background: #0b0e14;
    }
    .lightbox img{
      display:block;
      max-width: 100%;
      max-height: 86vh;
      object-fit: contain;
      background: #0b0e14;
    }
    .lightbox .close{
      position:absolute;
      top:8px; right:10px;
      background: rgba(0,0,0,0.5);
      color:#fff;
      border:1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      padding: 6px 10px;
      cursor:pointer;
      font-size: 14px;
    }
    .nav{
      position:absolute;
      top:50%;
      translate: 0 -50%;
      width:100%;
      display:flex;
      justify-content:space-between;
      pointer-events: none;
    }
    .nav button{
      pointer-events: all;
      background: rgba(0,0,0,0.5);
      color:#fff;
      border:1px solid rgba(255,255,255,0.25);
      padding:10px 12px;
      margin: 0 8px;
      border-radius:8px;
      cursor:pointer;
      font-size:16px;
    }
	.profile-picture {
	  display: block;
      margin-left: auto;
	  margin-right: auto;
	  margin-top: 10%;
	  height: auto;
	  max-width: 150px;
	  border-radius: 50%;
}
    .profile-name {
    text-align: center;
    padding: 15px;
	color: #FFFFFF;
}
    /* Accessibilité focus */
    button:focus-visible, a:focus-visible, .card:focus-visible{
      outline: 3px solid var(--accent);
      outline-offset: 2px;
    }

    footer{
      max-width:1100px;
      margin: 10px auto 40px;
      padding: 0 16px;
      color:#9fb2cc;
      font-size: 14px;
    }