/* Page-owned styles for Du jeu au studio */

.dujeu-page {
  width: 100%;
  overflow-x: hidden;
}

/* Introduction */
.dujeu-intro {
  background-color: var(--encre-nuit);
  padding-block: var(--space-9) var(--space-8);
}

.dujeu-intro__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.dujeu-intro h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  max-width: var(--container-reading);
  margin-block-end: 0;
}

.dujeu-intro h1 span {
  color: var(--rose-ceremonie);
}

.dujeu-intro__lead,
.dujeu-intro__sub {
  max-width: var(--container-reading);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  margin-block-end: 0;
}

.dujeu-intro__sub {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--cendre);
}

.dujeu-intro__cta {
  margin-block-start: var(--space-2);
}

/* Premiers pas */
.dujeu-premiers-pas {
  background-color: var(--velours);
  padding-block: var(--space-8);
}

.dujeu-premiers-pas__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-premiers-pas h2 {
  margin-block-end: 0;
}

.dujeu-steps {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--container-reading);
}

.dujeu-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background-color: var(--encre-nuit);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.dujeu-step__number {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--or-champagne);
  color: var(--encre-nuit);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
}

.dujeu-step__content {
  min-width: 0;
}

.dujeu-step__content h3 {
  margin-block-end: var(--space-2);
}

.dujeu-step__content p {
  margin-block-end: 0;
  color: var(--cendre);
}

.dujeu-callout {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-subtle);
  max-width: var(--container-reading);
}

.dujeu-callout--positive {
  background-color: rgba(127, 200, 169, 0.12);
  border-inline-start: 3px solid var(--vert-sauge);
}

.dujeu-callout--alert {
  background-color: rgba(224, 106, 106, 0.12);
  border-inline-start: 3px solid var(--bordeaux-alerte);
}

.dujeu-callout p {
  margin-block-end: 0;
}

.dujeu-callout h3 {
  margin-block-end: var(--space-2);
}

/* Gestion financière */
.dujeu-finances {
  background-color: var(--encre-nuit);
  padding-block: var(--space-8);
}

.dujeu-finances__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-finances h2 {
  margin-block-end: 0;
}

.dujeu-finances__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.dujeu-finances__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dujeu-finances__text h3 {
  margin-block-end: var(--space-2);
}

.dujeu-finances__text p {
  margin-block-end: 0;
}

.dujeu-table-wrapper {
  min-width: 0;
  overflow-x: auto;
}

.dujeu-table {
  width: 100%;
  min-width: 300px;
  margin-block-end: 0;
}

/* Gestion du personnel */
.dujeu-personnel {
  background-color: var(--velours);
  padding-block: var(--space-8);
}

.dujeu-personnel__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-personnel h2 {
  margin-block-end: 0;
}

.dujeu-personnel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.dujeu-role-card {
  background-color: var(--encre-nuit);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.dujeu-role-card__icon {
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--or-champagne);
}

.dujeu-role-card h3 {
  margin-block-end: 0;
}

.dujeu-role-card p {
  margin-block-end: 0;
  color: var(--cendre);
}

.dujeu-personnel__conseils {
  max-width: var(--container-reading);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dujeu-personnel__conseils h3 {
  margin-block-end: var(--space-2);
}

.dujeu-personnel__conseils p {
  margin-block-end: 0;
}

/* Optimisation des séances photo */
.dujeu-seances {
  background-color: var(--encre-nuit);
  padding-block: var(--space-8);
}

.dujeu-seances__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-seances h2 {
  margin-block-end: 0;
}

.dujeu-seances__figure {
  margin-block-end: 0;
  width: 100%;
}

.dujeu-seances__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--brume);
  display: block;
}

.dujeu-seances__figure figcaption {
  margin-block-start: var(--space-2);
}

.dujeu-seances__text {
  max-width: var(--container-reading);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dujeu-seances__text h3 {
  margin-block-end: var(--space-2);
}

.dujeu-seances__text p {
  margin-block-end: 0;
}

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

.dujeu-list li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--cendre);
}

.dujeu-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--rose-ceremonie);
}

.dujeu-list--alert li::before {
  background-color: var(--bordeaux-alerte);
}

.dujeu-list--positive li::before {
  background-color: var(--vert-sauge);
}

/* Aménagement de la salle */
.dujeu-amenagement {
  background-color: var(--velours);
  padding-block: var(--space-8);
}

.dujeu-amenagement__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-amenagement h2 {
  margin-block-end: 0;
}

.dujeu-amenagement__text {
  max-width: var(--container-reading);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dujeu-amenagement__text h3 {
  margin-block-end: var(--space-2);
}

.dujeu-amenagement__text p {
  margin-block-end: 0;
}

.dujeu-amenagement__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.dujeu-amenagement__tip {
  background-color: var(--encre-nuit);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.dujeu-amenagement__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background-color: var(--or-champagne);
  flex-shrink: 0;
}

.dujeu-amenagement__tip p {
  margin-block-end: 0;
  color: var(--cendre);
}

/* Planification de mariage */
.dujeu-planification {
  background-color: var(--encre-nuit);
  padding-block: var(--space-8);
}

.dujeu-planification__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-planification h2 {
  margin-block-end: 0;
}

.dujeu-planification__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.dujeu-planification__steps {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dujeu-planification__steps h3 {
  margin-block-end: var(--space-2);
}

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

.dujeu-planification__list li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--cendre);
}

.dujeu-planification__list li::before {
  content: counter(dujeu-planification-counter);
  counter-increment: dujeu-planification-counter;
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background-color: var(--rose-ceremonie);
  color: var(--encre-nuit);
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dujeu-planification__list {
  counter-reset: dujeu-planification-counter;
}

.dujeu-planification .dujeu-callout {
  max-width: none;
}

/* Stylisme des mariés */
.dujeu-stylisme {
  background-color: var(--velours);
  padding-block: var(--space-8);
}

.dujeu-stylisme__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-stylisme h2 {
  margin-block-end: 0;
}

.dujeu-stylisme__text {
  max-width: var(--container-reading);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dujeu-stylisme__text h3 {
  margin-block-end: var(--space-2);
}

.dujeu-stylisme__text p {
  margin-block-end: 0;
}

.dujeu-stylisme__figure {
  margin-block-end: 0;
  width: 100%;
  max-width: 420px;
}

.dujeu-stylisme__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(246, 241, 234, 0.10);
  background-color: var(--brume);
  display: block;
}

.dujeu-stylisme__figure figcaption {
  margin-block-start: var(--space-2);
}

/* Erreurs à éviter */
.dujeu-erreurs {
  background-color: var(--encre-nuit);
  padding-block: var(--space-8);
}

.dujeu-erreurs__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-erreurs h2 {
  margin-block-end: 0;
}

.dujeu-erreurs__content {
  max-width: var(--container-reading);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.dujeu-erreurs__content h3 {
  margin-block-end: var(--space-2);
}

.dujeu-erreurs__content .dujeu-callout {
  max-width: none;
}

/* Astuces avancées */
.dujeu-astuces {
  background-color: var(--velours);
  padding-block: var(--space-8);
}

.dujeu-astuces__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dujeu-astuces h2 {
  margin-block-end: 0;
}

.dujeu-astuces__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.dujeu-astuces__list {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dujeu-astuces__list h3 {
  margin-block-end: var(--space-2);
}

.dujeu-quote {
  margin-block-end: 0;
  background-color: var(--brume);
  border-inline-start: 3px solid var(--rose-ceremonie);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  color: var(--ivoire);
  max-width: 500px;
}

.dujeu-quote p {
  margin-block-end: 0;
}

/* Télécharger */
.dujeu-telecharger {
  background-color: var(--encre-nuit);
  padding-block: var(--space-8);
}

.dujeu-telecharger__inner {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  background-color: var(--brume);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}

.dujeu-telecharger h2 {
  margin-block-end: 0;
}

.dujeu-telecharger p {
  margin-block-end: 0;
  max-width: 480px;
}

.dujeu-telecharger__cta {
  margin-block-start: var(--space-2);
}

.dujeu-telecharger__note {
  font-size: var(--text-xs);
  color: var(--cendre);
}

/* Responsive */
@media (min-width: 768px) {
  .dujeu-intro__inner,
  .dujeu-premiers-pas__inner,
  .dujeu-finances__inner,
  .dujeu-personnel__inner,
  .dujeu-seances__inner,
  .dujeu-amenagement__inner,
  .dujeu-planification__inner,
  .dujeu-stylisme__inner,
  .dujeu-erreurs__inner,
  .dujeu-astuces__inner,
  .dujeu-telecharger__inner {
    padding-inline: var(--gutter-tablet);
  }

  .dujeu-intro h1 {
    font-size: var(--text-5xl);
    line-height: var(--leading-5xl);
  }

  .dujeu-personnel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dujeu-amenagement__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dujeu-planification__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .dujeu-astuces__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  }
}

@media (min-width: 1120px) {
  .dujeu-intro__inner,
  .dujeu-premiers-pas__inner,
  .dujeu-finances__inner,
  .dujeu-personnel__inner,
  .dujeu-seances__inner,
  .dujeu-amenagement__inner,
  .dujeu-planification__inner,
  .dujeu-stylisme__inner,
  .dujeu-erreurs__inner,
  .dujeu-astuces__inner,
  .dujeu-telecharger__inner {
    padding-inline: var(--gutter-desktop);
  }

  .dujeu-finances__grid {
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
  }

  .dujeu-personnel__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dujeu-stylisme__inner {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .dujeu-stylisme h2 {
    grid-column: 1 / -1;
  }

  .dujeu-stylisme__figure {
    justify-self: start;
  }
}

@media (max-width: 767px) {
  .dujeu-intro h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
  }

  .dujeu-intro__lead,
  .dujeu-intro__sub {
    font-size: var(--text-md);
    line-height: var(--leading-md);
  }

  .dujeu-step {
    flex-direction: column;
    gap: var(--space-3);
  }

  .dujeu-step__number {
    flex: 0 0 auto;
  }

  .dujeu-table {
    min-width: 100%;
  }

  .dujeu-table th,
  .dujeu-table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }

  .dujeu-quote {
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
    padding: var(--space-4);
  }

  .dujeu-telecharger__inner {
    padding: var(--space-5);
  }
}