:root{
      --vert:#1f6b52;
      --vert2:#2f8a67;
      --or:#f2c94c;
      --clair:#fffaf0;
      --texte:#173b30;
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(135deg, #f8fff9 0%, #fff8df 45%, #e8fff4 100%);
      color:var(--texte);
    }

    header{
      min-height: 78vh;
      padding: 40px 20px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      background:
        radial-gradient(circle at top left, rgba(242,201,76,.35), transparent 30%),
        linear-gradient(135deg, var(--vert), var(--vert2));
      color:white;
      position:relative;
      overflow:hidden;
    }

    header::after{
      content:"";
      position:absolute;
      inset:auto -80px -120px auto;
      width:360px;
      height:360px;
      border-radius:50%;
      background:rgba(242,201,76,.25);
      filter:blur(6px);
    }

    .hero{
      position:relative;
      z-index:2;
      max-width:1000px;
    }

    .logo{
      width:150px;
      height:150px;
      object-fit:contain;
      margin-bottom:22px;
      filter: drop-shadow(0 18px 20px rgba(0,0,0,.35));
      transform: perspective(800px) rotateY(-12deg) rotateX(8deg);
    }

    h1{
      margin:0;
      font-size: clamp(2.4rem, 6vw, 5.2rem);
      text-transform:uppercase;
      letter-spacing:2px;
      text-shadow:
        1px 1px 0 #d7b33f,
        2px 2px 0 #d7b33f,
        3px 3px 0 #b48b20,
        8px 12px 25px rgba(0,0,0,.45);
    }

    .slogan{
      margin-top:18px;
      color:var(--or);
      font-size: clamp(1.2rem, 2.5vw, 1.8rem);
      font-style:italic;
      font-weight:bold;
    }

    .intro{
      max-width:860px;
      margin:28px auto 0;
      font-size:1.15rem;
      line-height:1.8;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.25);
      border-radius:24px;
      padding:24px;
      backdrop-filter: blur(8px);
    }

    nav{
      position:sticky;
      top:0;
      z-index:10;
      background:white;
      box-shadow:0 6px 25px rgba(0,0,0,.08);
      padding:14px 20px;
      text-align:center;
    }

    nav a{
      color:var(--vert);
      text-decoration:none;
      font-weight:bold;
      margin:0 12px;
    }

    main{
      max-width:1180px;
      margin:auto;
      padding:50px 18px 64px;
    }

    h2{
      text-align:center;
      color:var(--vert);
      font-size:2.1rem;
      margin:20px 0 12px;
    }

    .subtitle{
      text-align:center;
      max-width:820px;
      margin:0 auto 34px;
      line-height:1.7;
      color:#4f5f58;
    }

    .calendar-card{
      background:white;
      border-radius:26px;
      padding:22px;
      box-shadow:0 14px 35px rgba(0,0,0,.12);
      border:1px solid rgba(31,107,82,.10);
      margin-bottom:50px;
    }

    #calendar{min-height:720px}

    .fc .fc-toolbar-title{
      color:var(--vert);
      font-weight:900;
      text-transform:capitalize;
    }

    .fc .fc-button-primary{
      background:var(--vert);
      border-color:var(--vert);
      font-weight:700;
      box-shadow:none;
    }

    .fc .fc-button-primary:hover,
    .fc .fc-button-primary:focus{
      background:var(--vert2);
      border-color:var(--vert2);
    }

    .fc .fc-day-today{
      background:rgba(242,201,76,.18)!important;
    }

    .fc-event{
      border-radius:10px;
      border:none;
      padding:3px 5px;
      font-weight:700;
    }

    .events-list{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
      gap:24px;
      margin-top:28px;
    }

    .event-card{
      position:relative;
      background:white;
      border-radius:22px;
      padding:24px;
      box-shadow:0 14px 35px rgba(0,0,0,.12);
      border-top:7px solid var(--or);
      transition:transform .25s ease, box-shadow .25s ease;
      overflow:hidden;
    }

    .event-card:hover{
      transform:translateY(-8px);
      box-shadow:0 20px 45px rgba(0,0,0,.18);
    }

    .new-badge{
      position:absolute;
      top:14px;
      right:14px;
      background:#e53935;
      color:white;
      border-radius:999px;
      padding:7px 12px;
      font-size:.78rem;
      font-weight:900;
      letter-spacing:1px;
      animation: blinkNew 1s infinite;
      box-shadow:0 0 0 rgba(229,57,53,.7);
    }

    @keyframes blinkNew{
      0%, 100%{
        opacity:1;
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(229,57,53,.55);
      }
      50%{
        opacity:.35;
        transform:scale(1.08);
        box-shadow:0 0 0 8px rgba(229,57,53,0);
      }
    }

    .event-date{
      display:inline-block;
      padding:8px 13px;
      background:var(--or);
      color:#3b3320;
      border-radius:999px;
      font-weight:900;
      font-size:.92rem;
      margin-bottom:14px;
      max-width:calc(100% - 64px);
    }

    .event-card h3{
      margin:4px 0 12px;
      color:var(--vert);
      font-size:1.32rem;
    }

    .event-card p{
      margin:0 0 10px;
      line-height:1.6;
      color:#4f5f58;
    }

    .event-card strong{color:var(--vert)}

    .side-home-button{
      position:fixed;
      left:18px;
      top:50%;
      transform:translateY(-50%);
      z-index:999;
      width:92px;
      min-height:118px;
      padding:10px 8px;
      border-radius:22px;
      background:rgba(255,255,255,0.94);
      color:#1f6b52;
      text-decoration:none;
      text-align:center;
      font-weight:900;
      box-shadow:0 12px 30px rgba(0,0,0,0.24);
      border:2px solid #f2c94c;
      transition:transform .2s ease, box-shadow .2s ease;
    }

    .side-home-button:hover{
      transform:translateY(-50%) scale(1.05);
      box-shadow:0 16px 38px rgba(0,0,0,0.30);
    }

    .side-home-button .home-icon{
      width:66px;
      height:66px;
      border-radius:50%;
      background:#1f6b52;
      color:white;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 8px;
      border:3px solid #f2c94c;
      font-size:2rem;
      line-height:1;
    }

    .side-home-button span{
      display:block;
      font-size:.82rem;
      line-height:1.1;
    }

    footer{
      text-align:center;
      padding:28px 20px;
      background:#173b30;
      color:white;
    }

    @media(max-width:800px){
      #calendar{min-height:620px}
      .calendar-card{padding:12px}
      .fc .fc-toolbar{flex-direction:column;gap:10px}
    }

    @media(max-width:700px){
      .side-home-button{
        left:10px;
        width:76px;
        min-height:98px;
        border-radius:18px;
      }

      .side-home-button .home-icon{
        width:52px;
        height:52px;
        font-size:1.55rem;
      }

      .side-home-button span{font-size:.72rem}
    }

    @media(max-width:600px){
      nav a{display:inline-block;margin:6px 8px}
    }



/* ============================================================
   CARTES ÉVÉNEMENTS COMPACTES
   ============================================================ */

.events-list {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 350px)
    );

  justify-content: center;
  align-items: start;

  gap: 28px;

  width: 100%;
  margin-top: 28px;
}

.event-card {
  position: relative;

  width: 100%;
  max-width: 350px;

  padding: 20px;

  box-sizing: border-box;

  border-radius: 24px;
}

.event-card__image {
  display: block;

  width: 100%;
  max-width: 310px;
  max-height: 430px;

  margin: 14px auto 18px;

  object-fit: contain;

  border-radius: 10px;
}

.event-card h3 {
  margin:
    16px 0
    12px;

  font-size: 22px;
  line-height: 1.2;
}

.event-card p {
  margin: 8px 0;

  font-size: 15px;
  line-height: 1.45;
}

.event-card__description {
  margin-top: 14px;
}

.event-date {
  display: inline-block;

  font-size: 15px;
}

@media (max-width: 760px) {
  .events-list {
    grid-template-columns:
      minmax(0, 350px);

    padding:
      0 16px;

    box-sizing:
      border-box;
  }
}



/* ============================================================
   FILTRE ÉVÉNEMENTS
   ============================================================ */

.events-toolbar {
  display: flex;
  justify-content: center;

  margin:
    20px 0
    8px;
}

.events-all-button {
  appearance: none;

  padding:
    11px 22px;

  border:
    2px solid #1f6b52;

  border-radius: 999px;

  background: #ffffff;

  color: #1f6b52;

  font: inherit;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.events-all-button:hover {
  background: #1f6b52;
  color: #ffffff;

  transform:
    translateY(-1px);
}

.events-all-button--active {
  border-color: #f2c94c;
}



/* ============================================================
   PARTICIPATION AUX ÉVÉNEMENTS
   ============================================================ */

.event-card {
  display: flex;
  flex-direction: column;
}

.event-participate-button {
  align-self: center;

  min-width: 145px;

  margin-top: auto;
  padding: 11px 24px;

  border: 0;
  border-radius: 999px;

  background: #2474c6;

  color: #ffffff;

  font: inherit;
  font-size: 15px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 6px 16px
    rgba(36, 116, 198, 0.22);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.event-participate-button:hover {
  background: #185fa8;

  transform:
    translateY(-1px);

  box-shadow:
    0 8px 20px
    rgba(36, 116, 198, 0.30);
}


/* ============================================================
   MODALE
   ============================================================ */

.modal-open {
  overflow: hidden;
}

.participation-modal {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 24px;

  box-sizing: border-box;
}

.participation-modal--open {
  display: flex;
}

.participation-modal__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(10, 33, 25, 0.68);

  backdrop-filter:
    blur(5px);
}

.participation-modal__dialog {
  position: relative;
  z-index: 1;

  width: min(980px, 96vw);
  max-height: 92vh;

  overflow-y: auto;

  padding:
    28px 30px 32px;

  box-sizing: border-box;

  border:
    2px solid #f2c94c;

  border-radius: 24px;

  background: #ffffff;

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.28);
}

.participation-modal__close {
  position: absolute;

  top: 14px;
  right: 16px;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #eff5f2;

  color: #123f2b;

  font-size: 28px;
  line-height: 1;

  cursor: pointer;
}

.participation-modal__close:hover {
  background: #e1ece7;
}

.participation-modal__header {
  padding:
    0 45px
    18px;

  text-align: center;
}

.participation-modal__header small {
  color: #2474c6;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 1.4px;
}

.participation-modal__header h2 {
  margin:
    6px 0
    7px;

  color: #123f2b;

  font-size:
    clamp(24px, 3vw, 34px);
}

#participation-event-title {
  margin: 0;

  color: #5e786d;

  font-weight: 700;
}

.participation-survey {
  width: 100%;

  min-height: 520px;

  overflow-x: auto;

  text-align: center;
}

.participation-survey iframe {
  display: block;

  width: 100% !important;
  max-width: 912px;

  margin: 0 auto;

  border: 0;
}


@media (max-width: 700px) {
  .participation-modal {
    padding: 10px;
  }

  .participation-modal__dialog {
    width: 100%;
    max-height: 96vh;

    padding:
      24px 12px;
  }

  .participation-modal__header {
    padding:
      0 38px
      14px;
  }

  .participation-survey {
    min-height: 460px;
  }
}