/* ===== SOIREES POKER PAGE STYLES ===== */

/* Section containers */
.soirees-intro,
.soirees-ambiance,
.soirees-deroulement,
.soirees-regles,
.soirees-dates,
.soirees-temoignages,
.soirees-galerie,
.soirees-cta {
  padding-block: var(--space-xl);
}

.soirees-intro__container,
.soirees-ambiance__container,
.soirees-deroulement__container,
.soirees-regles__container,
.soirees-dates__container,
.soirees-temoignages__container,
.soirees-galerie__container,
.soirees-cta__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .soirees-intro__container,
  .soirees-ambiance__container,
  .soirees-deroulement__container,
  .soirees-regles__container,
  .soirees-dates__container,
  .soirees-temoignages__container,
  .soirees-galerie__container,
  .soirees-cta__container {
    padding-inline: var(--gutter-desktop);
  }
}

/* ===== 1. Introduction ===== */
.soirees-intro {
  background-color: var(--color-paper);
}

.soirees-intro__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.soirees-intro__title {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  margin-block-end: 0;
  max-width: 100%;
}

.soirees-intro__lead {
  max-width: 65ch;
  margin-inline: auto;
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.soirees-intro__note {
  width: 80%;
  max-width: 65ch;
  margin-inline: auto;
  transform: rotate(0.5deg);
  padding: var(--space-lg);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.soirees-intro__note-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--weight-heading);
  margin-block-end: 0;
}

.soirees-intro__note-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.soirees-intro__note-list li {
  position: relative;
  padding-inline-start: var(--space-lg);
  line-height: var(--leading-body);
}

.soirees-intro__note-list li::before {
  content: "♠";
  position: absolute;
  left: 0;
  color: var(--color-sketch);
  font-weight: 700;
}

/* ===== 2. Ambiance ===== */
.soirees-ambiance {
  background-color: var(--color-paper-dark);
}

.soirees-ambiance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.soirees-ambiance__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.soirees-ambiance__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block-end: 0;
}

.soirees-ambiance__paragraph {
  max-width: 55ch;
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.soirees-ambiance__figure {
  margin-block-end: 0;
  min-width: 0;
  max-width: 100%;
  transform: rotate(1deg);
}

.soirees-ambiance__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 4px solid var(--color-paper);
  box-shadow: var(--shadow-lifted);
  border-radius: var(--radius-small);
}

.soirees-ambiance__caption {
  margin-block-start: var(--space-sm);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-ink-soft);
  text-align: center;
  font-style: italic;
}

@media (min-width: 768px) {
  .soirees-ambiance__grid {
    grid-template-columns: 60% 40%;
    gap: var(--space-xl);
  }
}

/* ===== 3. Déroulement ===== */
.soirees-deroulement {
  background-color: var(--color-paper);
}

.soirees-deroulement__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block-end: var(--space-lg);
}

.soirees-deroulement__steps {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.soirees-deroulement__step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  min-width: 0;
}

.soirees-deroulement__step-number {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-paper);
  background-color: var(--color-sketch);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
}

.soirees-deroulement__step-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.soirees-deroulement__step-title {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  margin-block-end: 0;
}

.soirees-deroulement__step-text {
  max-width: 70ch;
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.soirees-deroulement__note {
  width: 100%;
  max-width: 50%;
  margin-inline-start: auto;
  margin-inline-end: 0;
  transform: rotate(0.5deg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.soirees-deroulement__note-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--weight-heading);
  margin-block-end: 0;
}

.soirees-deroulement__note-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.soirees-deroulement__note-list li {
  line-height: var(--leading-body);
}

@media (max-width: 600px) {
  .soirees-deroulement__note {
    max-width: 100%;
    margin-inline-start: 0;
  }
}

/* ===== 4. Règles ===== */
.soirees-regles {
  background-color: var(--color-paper-dark);
}

.soirees-regles__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block-end: var(--space-lg);
}

.soirees-regles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-end: var(--space-xl);
}

.soirees-regles__column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.soirees-regles__column-title {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  margin-block-end: 0;
}

.soirees-regles__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.soirees-regles__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
  line-height: var(--leading-body);
  max-width: 50ch;
}

.soirees-regles__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-sketch);
  font-weight: 700;
}

.soirees-regles__note {
  width: 100%;
  transform: rotate(0.5deg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.soirees-regles__note-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--weight-heading);
  margin-block-end: 0;
}

.soirees-regles__note-text {
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

@media (min-width: 768px) {
  .soirees-regles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

/* ===== 5. Dates ===== */
.soirees-dates {
  background-color: var(--color-paper);
}

.soirees-dates__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.soirees-dates__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block-end: 0;
  text-align: center;
}

.soirees-dates__intro {
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: 0;
  text-align: center;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.soirees-dates__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.soirees-dates__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  transform: rotate(-0.5deg);
}

.soirees-dates__card:nth-child(2) {
  transform: rotate(0.5deg);
}

.soirees-dates__date {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--weight-heading);
  margin-block-end: 0;
}

.soirees-dates__time,
.soirees-dates__status {
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.soirees-dates__status {
  color: var(--color-ink-soft);
  font-style: italic;
}

.soirees-dates__action {
  display: flex;
  justify-content: center;
  width: 100%;
}

.soirees-dates__button {
  min-width: 200px;
}

@media (min-width: 768px) {
  .soirees-dates__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

/* ===== 6. Témoignages ===== */
.soirees-temoignages {
  background-color: var(--color-paper-dark);
}

.soirees-temoignages__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.soirees-temoignages__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block-end: 0;
  text-align: center;
}

.soirees-temoignages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.soirees-temoignages__quote {
  min-width: 0;
  margin-block-end: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transform: rotate(-0.5deg);
  border-inline-start: 3px solid var(--color-sketch);
}

.soirees-temoignages__quote:nth-child(2) {
  transform: rotate(0.5deg);
}

.soirees-temoignages__quote:nth-child(3) {
  transform: rotate(-0.3deg);
}

.soirees-temoignages__text {
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-style: italic;
  max-width: 40ch;
}

.soirees-temoignages__author {
  margin-block-start: auto;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-ink-soft);
  font-style: italic;
}

@media (min-width: 768px) {
  .soirees-temoignages__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

/* ===== 7. Galerie ===== */
.soirees-galerie {
  background-color: var(--color-paper);
}

.soirees-galerie__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.soirees-galerie__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block-end: 0;
  text-align: center;
}

.soirees-galerie__intro {
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: 0;
  text-align: center;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.soirees-galerie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.soirees-galerie__figure {
  margin-block-end: 0;
  min-width: 0;
  max-width: 100%;
  transform: rotate(-1deg);
}

.soirees-galerie__figure:nth-child(2) {
  transform: rotate(1deg);
}

.soirees-galerie__figure:nth-child(3) {
  transform: rotate(-0.5deg);
}

.soirees-galerie__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 4px solid var(--color-paper);
  box-shadow: var(--shadow-lifted);
  border-radius: var(--radius-small);
}

.soirees-galerie__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-paper-dark);
  border: 4px solid var(--color-paper);
  box-shadow: var(--shadow-lifted);
  border-radius: var(--radius-small);
}

.soirees-galerie__caption {
  margin-block-start: var(--space-sm);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-ink-soft);
  text-align: center;
  font-style: italic;
}

@media (min-width: 768px) {
  .soirees-galerie__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

/* ===== 8. CTA final ===== */
.soirees-cta {
  background-color: var(--color-paper-dark);
}

.soirees-cta__container {
  display: flex;
  justify-content: center;
}

.soirees-cta__block {
  width: 80%;
  max-width: 55ch;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  transform: rotate(0.5deg);
}

.soirees-cta__title {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block-end: 0;
}

.soirees-cta__text {
  margin-block-end: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 55ch;
}

.soirees-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  width: 100%;
}

.soirees-cta__button {
  min-width: 160px;
}

.soirees-cta__button--secondary {
  background-color: var(--color-ink);
}

.soirees-cta__button--secondary:hover {
  background-color: var(--color-ink-soft);
}

.soirees-cta__contact {
  margin-block-end: 0;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-ink-soft);
}

.soirees-cta__contact a {
  color: var(--color-sketch);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.soirees-cta__contact a:hover {
  color: var(--color-ink);
}

@media (max-width: 600px) {
  .soirees-cta__block {
    width: 100%;
    padding: var(--space-lg);
  }

  .soirees-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .soirees-cta__button {
    width: 100%;
  }
}

/* ===== Responsive adjustments ===== */
@media (max-width: 900px) {
  .soirees-intro__note {
    width: 100%;
    max-width: 100%;
  }

  .soirees-deroulement__note {
    max-width: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 600px) {
  .soirees-intro,
  .soirees-ambiance,
  .soirees-deroulement,
  .soirees-regles,
  .soirees-dates,
  .soirees-temoignages,
  .soirees-galerie,
  .soirees-cta {
    padding-block: var(--space-lg);
  }

  .soirees-intro__title {
    font-size: var(--text-h1);
  }

  .soirees-ambiance__grid,
  .soirees-regles__grid,
  .soirees-dates__grid,
  .soirees-temoignages__grid,
  .soirees-galerie__grid {
    grid-template-columns: 1fr;
  }

  .soirees-ambiance__figure,
  .soirees-galerie__figure {
    transform: rotate(0.5deg);
  }

  .soirees-deroulement__step {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .soirees-deroulement__step-number {
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
  }

  .soirees-dates__card,
  .soirees-temoignages__quote {
    transform: rotate(0deg);
  }
}

/* Ensure all grid/flex children have min-width: 0 */
.soirees-ambiance__grid > *,
.soirees-regles__grid > *,
.soirees-dates__grid > *,
.soirees-temoignages__grid > *,
.soirees-galerie__grid > *,
.soirees-intro__content > *,
.soirees-deroulement__steps > *,
.soirees-cta__block > * {
  min-width: 0;
}