.card{padding:2rem 2.5rem;border-radius:1rem;background:rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.35);text-align:center}
.blink{font-size:clamp(1.1rem,2.5vw,1.6rem);font-weight:700;letter-spacing:.3px;text-transform:none;animation:blink 3s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.blink{animation:none}}
.sub{margin-top:.75rem;font-size:.9rem;opacity:.75}
:root{--bg:#0a0a0a;--fg:#f1f1f1;--muted:#cfcfcf;--box:#e8e8e8;--menu:#1e90ff;--icon:#1e90ff}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-align:center}
a{color:var(--fg);text-decoration:none}
a:hover{opacity:.9}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
.wrap{max-width:980px;margin:0 auto;padding:28px 20px 60px;min-height:100vh;display:flex;flex-direction:column;align-items:center}
header .brand{font-size:56px;letter-spacing:.07em;font-weight:900;margin:0;text-transform:uppercase}
.subtitle{font-size:22px;margin:8px 0 18px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
nav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
nav a{font-size:24px;color:var(--menu)}
.cta h1{font-size:46px;margin:0 0 8px;font-weight:900}
.cta p{font-size:20px;color:var(--muted);margin:0}
blockquote{margin:0 auto 22px;max-width:720px;font-size:20px;line-height:1.5;color:var(--muted)}
blockquote footer{margin-top:8px;font-size:16px;opacity:.9}
.hero-img img{width:100%;max-width:460px;height:auto;display:block;margin:26px auto;border-radius:2px}
.panel{margin:24px auto 0;max-width:600px;border:3px solid var(--box);padding:22px 18px;border-radius:12px;background:rgba(255,255,255,.02)}
.panel h3{font-size:30px;margin:0 0 14px}
.socials{display:flex;gap:18px;justify-content:center;margin:8px 0 16px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:10px;border:2px solid var(--box)}
.socials svg{width:28px;height:28px;fill:var(--icon)}
.handle{font-size:22px;margin-top:4px}
footer{margin-top:auto;padding-top:38px;opacity:.8}
.title-highlight{color:#fc0;font-weight:700;text-shadow:0 0 6px #f60,0 0 12px #f30}
.story{max-width:720px;margin:60px auto;text-align:left;line-height:1.6;color:var(--fg)}
.story h2{font-size:34px;text-align:center;margin-bottom:28px;color:var(--menu);text-transform:uppercase;letter-spacing:.06em}
.story p{margin:16px 0;font-size:18px}
.story em{color:var(--muted)}
.story .accent{color:var(--menu);font-weight:700}
.story .declaration{list-style:none;padding:0;margin:30px 0;text-align:center;font-size:22px;font-weight:700;color:var(--menu)}
.story .declaration li{margin:8px 0}

/* Lien YouTube en bleu + icône rouge */
.playlists a[href*="youtube.com"],
.playlists a[href*="youtu.be"] {
  color: #1e90ff !important;        /* bleu */
  font-weight: 600;
  position: relative;
  padding-left: 26px;               /* espace pour l’icône */
  text-decoration: none;
}

/* Icône YouTube (rouge ▶︎) ajoutée avant le texte */
.playlists a[href*="youtube.com"]::before,
.playlists a[href*="youtu.be"]::before {
  content: "▶";                     /* petit triangle */
  color: #ff0000;                   /* rouge YouTube */
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Changement de couleur au survol */
.playlists a[href*="youtube.com"]:hover,
.playlists a[href*="youtu.be"]:hover {
  color: #3399ff !important;        /* bleu clair au hover */
}


      /* === Event List Styles === */
.event-list {
  list-style: none;
  padding: 0;
}

.event-item {
  background: #ffffff;
  margin: 15px 0;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.event-item:hover {
  transform: translateY(-5px);
}

.event-item h3 {
  margin: 0;
  font-size: 1.4em;
  color: #0056b3;
}

.event-item .date {
  font-size: 1em;
  color: #555;
  margin-top: 8px;
}



/*
    :root{
      --bg: #0b0f14;
      --card: #121923;
      --muted: #9bb0c3;
      --text: #e7f1fb;
      --accent: #ff7a18;
      --accent-2: #1fd1ff;
      --radius: 16px;
    }
    * { box-sizing: border-box }
    html, body { height: 100% }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 10% -10%, #1b2635 0%, transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, #101a27 0%, transparent 60%),
        linear-gradient(180deg, #0a0e13 0%, #0b0f14 100%);
      background-color: var(--bg);
      line-height: 1.6;
    }
    .wrapper{
      max-width: 980px;
      margin: 0 auto;
      padding: 40px 20px 80px;
    }
    header.page{
      display: grid;
      gap: 14px;
      padding: 28px 24px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(31,209,255,0.12), rgba(255,122,24,0.10));
      border: 1px solid rgba(159,193,220,0.15);
      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    }
    .badge{
      display:inline-flex; align-items:center; gap:.5rem;
      padding: 6px 10px;
      font-size: 12px; letter-spacing: .3px; text-transform: uppercase;
      border-radius: 999px;
      color: #072029;
      background: linear-gradient(90deg, var(--accent-2), #7df2ff);
      font-weight:700;
    }
    h1{
      margin:0;
      font-size: clamp(28px, 5vw, 42px);
      line-height: 1.1;
    }
    p.lead{
      margin: 2px 0 0 0;
      color: var(--muted);
      font-size: clamp(16px, 2.2vw, 18px);
    }
    main{
      display: grid;
      gap: 18px;
      margin-top: 22px;
    }
    section.card{
      padding: 22px 24px;
      border-radius: var(--radius);
      background: color-mix(in oklab, var(--card) 88%, black);
      border: 1px solid rgba(159,193,220,0.14);
      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    }
    section.card h2{
      margin: 0 0 6px 0;
      font-size: clamp(18px, 2.4vw, 22px);
    }
    .sub{
      margin: 0 0 14px 0;
      color: var(--muted);
      font-size: 15px;
    }
    ul.clean{
      list-style: none; padding: 0; margin: 0;
      display: grid; gap: 10px;
    }
    ul.clean li{
      display: grid; gap: 4px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      border: 1px dashed rgba(159,193,220,0.18);
    }
  */
  .tagSML{
      display:inline-block;
      padding: 2px 8px;
      font-size: 30px; border-radius: 999px;
      background: rgba(255,122,24,0.16);
      color: #ffd8bd;
    }
 
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 44px;
  border-radius: 1172px;
  background: rgba(255, 108, 0, 0.16);
  color: #ff6900;
}


/*

  .cta{
      display:flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
    }
    .btn{
      appearance: none; border: none; cursor: pointer;
      padding: 12px 16px; border-radius: 12px;
      font-weight: 700; letter-spacing:.2px;
      transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn-primary{
      background: linear-gradient(90deg, var(--accent), #ffb24b);
      color: #1b0d00;
      box-shadow: 0 10px 24px rgba(255,122,24,.28);
    }
    .btn-primary:active{ transform: translateY(1px) scale(.99) }
    .btn-ghost{
      background: rgba(255,255,255,0.06);
      color: var(--text);
      border: 1px solid rgba(159,193,220,0.18);
    }
    .foot{
      margin-top: 22px; color: var(--muted); font-size: 14px;
    }
    .flame{
      display:inline-block; translate: 0 .05em; filter: drop-shadow(0 2px 6px rgba(255,122,24,.35));
    }
    @media (min-width: 760px){
      main{
        grid-template-columns: 1fr 1fr;
      }
      section.card.span-2{
        grid-column: 1 / -1;
      }
    }
  










html, body { overflow-x: hidden; }



*/
/* === Events Section === */
.event-list {
  list-style: none;   /* Supprime le point ou cercle devant */
  padding: 0;
  margin: 0;
}

.event-item {
  background: #111;          /* Fond légèrement contrasté avec ton site noir */
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  transition: transform 0.2s ease;
}

.event-item:hover {
  transform: translateY(-5px);
}

.event-item h3 {
  margin: 0 0 10px;
  font-size: 1.3em;
  color: #fff;
}

.event-item .date {
  font-size: 1em;
  color: #ccc;
}