.button-dropdown button {
    width: 12em;
}
.button-dropdown.is-open .button-dropdown__options, .button-dropdown:hover .button-dropdown__options {
    max-height: 38em;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.09),
        0 16px 32px rgba(0, 0, 0, 0.10),
        0 32px 64px rgba(0, 0, 0, 0.12);
}

.button-dropdown__options {
    z-index: 999;
    background-color: #fff;
    border-radius: 0 0 25px 25px;
}

.button-dropdown__options li {
    border-bottom: none!important;
}

.button-dropdown__options a {
    margin: auto;
    margin-block: 0.2em;
    width: 95%!important;
    font-weight: normal;
    border-radius: 20px;
}

li.sauvageclass-button-dropdown__options__category {
    padding-top: 0.5em;
    text-align: center;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: gray;
}

li.sauvageclass-button-dropdown__options__separator {
    border-bottom: 2px solid silver!important;
}

.heartbeat {
    display: inline-block; 
    color: crimson; 
    font-size: 1.3rem; 
    animation: heartbeat 3s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  40% { transform: scale(1); }
  60% { transform: scale(1.15); }
}



.alt-container {
    color: #4a4a4a;
    background-color: #FFF;
    border-radius: 10px;
    overflow: hidden;
}

.alt-container h2 {
    padding-top: 0.5em;
    padding-bottom: 0.3em;
    margin-bottom: 0;

    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5rem;

    color: #fff;
    background: #212f46;
}

.alt-container h2 small {
  font-size: 1rem;
  font-weight: normal;
  text-transform: uppercase;
}

.alt-container h2 img {
    display: block;
    margin: auto;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    max-height: 20px;
}

.alt-container .alt-container__container {
  padding: 0.5em 1em 0.75em;
}

.alt-container .heartbeat {
  position: absolute;
  right: 10%;
  top: 10%;
  font-size: 3rem;
}

.alt-container p {
  height: 3em;
  color: #757575;
  font-size: 1.2rem;
}

.alt-container ul {
    padding-left: 0;
    margin-bottom: 0;
}

.alt-container ul li {
    display: block;
    margin-bottom: 0.5em;
} 

.alt-container ul li:last-child {
  margin-bottom: 0;
}

.alt-container ul a {
  display: inline-block;
  width: 100%;
  padding: 0.4em;
  text-decoration: none;
  text-align: center;
  border: 1px solid #888;
  border-radius: 13px;
}

.alt-container ul a:hover {
  color: #fff;
  background: #d50b52;
  border-color: #d50b52;
}

.alt-container__main-container {
  grid-column: 2;        
  grid-row: 1 / span 2;  
  align-self: stretch;
}

@media (max-width: 604px) {
  .alt-container {
    width: 80%;
    margin: auto;
    margin-bottom: 1em;
  }
}




/*
 * Mise en valeur ponctuelle du bloc Patreon.
 * Reflet satiné suivi d'un double battement.
 */

.alt-container--patreon {
    --patreon-ease-in-out:
        cubic-bezier(0.77, 0, 0.175, 1);

    --patreon-ease-out:
        cubic-bezier(0.23, 1, 0.32, 1);

    position: relative;
}

/*
 * Le reflet reste strictement contenu
 * dans le bandeau bleu.
 */

.patreon-highlight__heading {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #253c61!important;
}

/*
 * Large reflet doux :
 * le centre est lumineux tandis que
 * les extrémités restent transparentes.
 */

.patreon-highlight__heading::after {
    position: absolute;
    z-index: 2;
    top: -40%;
    left: -52%;

    width: 48%;
    height: 180%;

    content: "";
    pointer-events: none;

    opacity: 0;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.02) 14%,
        rgba(255, 255, 255, 0.12) 36%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0.13) 64%,
        rgba(255, 255, 255, 0.02) 86%,
        rgba(255, 255, 255, 0) 100%
    );

    transform:
        translate3d(-110%, 0, 0)
        skewX(-18deg);
}

/*
 * Le JS ajoute temporairement
 * la classe .is-highlighted.
 */

.alt-container--patreon.is-highlighted
.patreon-highlight__heading::after {
    will-change: transform, opacity;

    animation:
        patreon-highlight-sheen
        1050ms
        var(--patreon-ease-in-out)
        120ms
        1
        both;
}

@keyframes patreon-highlight-sheen {
    0% {
        opacity: 0;

        transform:
            translate3d(-110%, 0, 0)
            skewX(-18deg);
    }

    14% {
        opacity: 0.82;
    }

    78% {
        opacity: 0.82;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(340%, 0, 0)
            skewX(-18deg);
    }
}

/*
 * Remplace l'ancien battement infini
 * pour ce cœur uniquement.
 */

.alt-container--patreon
.patreon-highlight__heart {
    position: absolute;
    z-index: 3;

    line-height: 1;

    opacity: 0.95;
    transform: scale(1);
    transform-origin: center;

    animation: none;
}

.alt-container--patreon.is-highlighted
.patreon-highlight__heart {
    will-change: transform, opacity;

    animation:
        patreon-highlight-heartbeat
        520ms
        var(--patreon-ease-out)
        820ms
        1
        both;
}

@keyframes patreon-highlight-heartbeat {
    0%,
    100% {
        opacity: 0.95;
        transform: scale(1);
    }

    22% {
        opacity: 1;
        transform: scale(1.24);
    }

    40% {
        transform: scale(0.97);
    }

    64% {
        transform: scale(1.15);
    }

    80% {
        transform: scale(0.99);
    }
}

/*
 * Le site contient déjà une règle globale
 * pour prefers-reduced-motion.
 * Cette règle locale garantit aussi l'arrêt.
 */

@media (prefers-reduced-motion: reduce) {
    .alt-container--patreon.is-highlighted
    .patreon-highlight__heading::after,

    .alt-container--patreon.is-highlighted
    .patreon-highlight__heart {
        animation: none;
    }
}






.star-wrap {
    width: 22px;
    position: relative;
    top: 0.5em;
    left: -1.35em;
    display: inline-block;
}
 
.star {
    width: 18px;
    height: 18px;
    background: #FFD400;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    position: absolute;
    left: 4px;
    bottom: 8px;
    transform-origin: bottom center;
    animation: bounceSmall 1.3s cubic-bezier(.4,0,.2,1) infinite;
}
 
.shadow {
    width: 12px;
    height: 3px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    position: absolute;
    left: 5px;
    bottom: 4px;
    animation: shadowPulseSmall 1.3s cubic-bezier(.4,0,.2,1) infinite;
}
 
@keyframes bounceSmall {
    0%   { transform: translateY(0) scale(1,1); }
    15%  { transform: translateY(0) scale(1.15,0.8); }
    40%  { transform: translateY(-8px) scale(0.92,1.1) rotate(-6deg); }
    55%  { transform: translateY(-8px) scale(0.92,1.1) rotate(6deg); }
    75%  { transform: translateY(0) scale(1.12,0.88); }
    85%  { transform: translateY(0) scale(0.97,1.03); }
    100% { transform: translateY(0) scale(1,1); }
}
 
@keyframes shadowPulseSmall {
    0%       { transform: scale(1); opacity: 0.18; }
    40%,55%  { transform: scale(0.55); opacity: 0.08; }
    100%     { transform: scale(1); opacity: 0.18; }
}

  @media (max-width: 604px) {
    .button-dropdown button {
        width: 20em;
    }

    .button-dropdown.is-open .button-dropdown__options, .button-dropdown:hover .button-dropdown__options {
        top: -24.5em;
        border-radius: 25px 25px 0 0;
    }

    .header nav ul a {
        padding-top: 1em;
    }

    .star-wrap {
        left: 3em;
    }
}

/*
 * dropdown calendrier
 */
  
.cal-widget {
    position: relative;
    display: inline;
    z-index: 999;
}

.cal-btn {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cal-btn:active { transform: scale(0.98); }
.cal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cal-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(28,43,45,0.32);
    padding: 6px;
    display: none;
    z-index: 9999100;
}

.cal-menu.open { display: block; }

.cal-menu button {
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
}

.cal-menu button:hover {
    color: #FFF; 
    background: rgba(213, 11, 82, 0.9); 
}

@media (max-width: 604px) {
    .cal-menu.open {
        margin-left: -5em;
    }
}


/*
 * Bandeau billetterie — 20 ans de podcasts
 * HTML + CSS uniquement, aucune dépendance.
 */

.anniversary-ticket,
.anniversary-ticket * {
  box-sizing: border-box;
}

.anniversary-ticket {
  --anniversary-pink: #d50b52;
  --anniversary-pink-hover: #b80946;
  --anniversary-navy: #19314d;
  --anniversary-ease-out:
    cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  z-index: 99;
  isolation: isolate;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.8rem;

  width: 100%;
  padding: 1.3rem 1.4rem;

  color: #fff;
  background-color: rgba(213, 11, 82, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;

  box-shadow:
    0 12px 32px rgba(5, 18, 32, 0.5);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/*
 * Bloc-date : c'est le seul élément
 * volontairement très coloré.
 */

.anniversary-ticket__date {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 6.2rem;
  height: 6.2rem;
  flex: 0 0 auto;

  color: #fff;
  background-color: var(--anniversary-navy);

  border-radius: 14px;

  font-family:
    "montserrat-sb",
    "montserrat",
    Helvetica,
    Arial,
    sans-serif;

  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Petite perforation visuelle du billet. */

.anniversary-ticket__date::after {
  position: absolute;
  top: 50%;
  right: -0.95rem;

  width: 1px;
  height: 4.4rem;

  content: "";
  transform: translateY(-50%);

  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.82) 0,
    rgba(255, 255, 255, 0.82) 4px,
    transparent 4px,
    transparent 8px
  );
}

.anniversary-ticket__day {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 0.9;
}

.anniversary-ticket__month {
  margin-top: 0.45rem;

  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.anniversary-ticket__content {
  min-width: 0;
}

.anniversary-ticket__title {
  margin: 0 0 0.35rem;

  color: #fff;

  font-family:
    "montserrat-sb",
    "montserrat",
    Helvetica,
    Arial,
    sans-serif;

  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
}

.anniversary-ticket__meta {
    display: inline;
    margin: 0;

      color: rgba(255, 255, 255, 0.9);

      font-size: 1.3rem;
      line-height: 1.35;
}

.anniversary-ticket__meta a {
    color: #fff;
}

/*
 * CTA : seul mouvement du composant.
 */

.anniversary-ticket__cta,
.anniversary-ticket__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 4.4rem;
  padding: 0.8rem 1.8rem 0.6rem;

  color: #fff;
  background-color: var(--anniversary-pink);

  border: 1px solid transparent;
  border-radius: 999px;

  font-family:
    "montserrat-sb",
    "montserrat",
    Helvetica,
    Arial,
    sans-serif;

  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 140ms var(--anniversary-ease-out),
    background-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .anniversary-ticket__cta:hover {
    color: #fff;
    background-color: var(--anniversary-pink-hover);

    text-decoration: none;
    transform: translateY(-1px);
  }
}

.anniversary-ticket__cta:active {
  color: #fff;
  transform: scale(0.97);
}

.anniversary-ticket__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/*
 * Réduit l'espace supérieur de la grille existante.
 * Cette règle devient inactive dès que le bandeau
 * est retiré du HTML.
 */

.anniversary-ticket
  + .accordion
  > .grid-2-small-1:first-child {
  padding-top: 2em !important;
}

/* Responsive aligné sur le breakpoint du site. */

@media (max-width: 604px) {
  .anniversary-ticket {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem 1.4rem;

    padding: 1.2rem;

    border-radius: 16px;
  }

  .anniversary-ticket__date {
    width: 5.4rem;
    height: 5.4rem;

    border-radius: 12px;
  }

  .anniversary-ticket__date::after {
    right: -0.75rem;
    height: 3.8rem;
  }

  .anniversary-ticket__day {
    font-size: 2.3rem;
  }


  .anniversary-ticket__meta {
    font-size: 1.2rem;
  }

  .anniversary-ticket__cta {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anniversary-ticket__cta {
    transition:
      background-color 140ms ease;
  }

  .anniversary-ticket__cta:hover,
  .anniversary-ticket__cta:active {
    transform: none;
  }
}




/*
 * Animation "20 ans" du bouton Me soutenir.
 * Version sans étoile : uniquement une traînée lumineuse.
 */

.support-anniversary-host {
  overflow: visible;
}

.support-anniversary {
  --sa-pink: #d50b52;
  --sa-white: #fff;
  --sa-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  position: absolute;
  inset: 0;
  z-index: 1001;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms var(--sa-ease-out),
    visibility 0s linear 180ms;
}

.support-anniversary.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms var(--sa-ease-out);
}

.support-anniversary__particles {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.support-anniversary__particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  box-shadow:
    0 0 6px currentColor,
    0 0 14px currentColor;
  transform-origin: center;
  will-change: transform, opacity;
}

.support-anniversary__particle:nth-child(4n) {
  border-radius: 0;
  clip-path: polygon(
    50% 0,
    62% 38%,
    100% 50%,
    62% 62%,
    50% 100%,
    38% 62%,
    0 50%,
    38% 38%
  );
}

.support-anniversary__label {
  position: absolute;
  left: 50%;
  top: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 82px;
  color: var(--sa-white);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 9px rgba(213, 11, 82, 0.75),
    0 0 15px rgba(213, 11, 82, 0.5);
  opacity: 0;
  transform:
    translateX(-50%)
    translateY(4px)
    scale(0.96);
}

.support-anniversary.is-label-visible
  .support-anniversary__label {
  animation:
    support-anniversary-label-presence
    2100ms
    var(--sa-ease-out)
    both;
}

.support-anniversary__label::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--sa-white),
    var(--sa-pink),
    var(--sa-white),
    transparent
  );
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.7),
    0 0 10px rgba(213, 11, 82, 0.7);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.support-anniversary__label-letter {
  display: inline-block;
  opacity: 0;
  transform:
    translateY(4px)
    scale(0.96);
}

.support-anniversary.is-label-visible
  .support-anniversary__label-letter {
  animation:
    support-anniversary-letter
    320ms
    var(--sa-ease-out)
    both;
  animation-delay: var(--sa-letter-delay, 0ms);
}

.support-anniversary.is-label-visible
  .support-anniversary__label::after {
  animation:
    support-anniversary-underline
    1600ms
    80ms
    var(--sa-ease-out)
    both;
}

@keyframes support-anniversary-label-presence {
  0% {
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(4px)
      scale(0.96);
  }

  14%,
  78% {
    opacity: 1;
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(-2px)
      scale(0.99);
  }
}

@keyframes support-anniversary-letter {
  0% {
    opacity: 0;
    transform:
      translateY(4px)
      scale(0.96);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes support-anniversary-underline {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  18% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }

  40%,
  76% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 604px) {
  .support-anniversary__label {
    top: -28px;
  }
}