/* ============================================================
   HOME PAGE STYLES — Agence Instants
   Scoped to page-owned components only.
   ============================================================ */

/* ---------- Hero ---------- */
.home-hero {
  padding-block: var(--space-64) var(--space-48);
  background-color: var(--color-creme-chaude);
  overflow: hidden;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}

.home-hero__texte {
  min-width: 0;
}

.home-hero__titre {
  max-width: 60%;
  margin-block-end: var(--space-24);
}

.home-hero__sous-titre {
  max-width: 60%;
  margin-block-end: var(--space-32);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

.home-hero__visuel {
  position: relative;
  min-width: 0;
  width: 100%;
}

.home-hero__image-principale {
  margin: 0;
  width: 100%;
  border-radius: var(--radius-24);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.home-hero__image-principale img {
  width: 100%;
  height: auto;
  display: block;
}

.home-hero__capsules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-block-start: var(--space-24);
  justify-content: flex-start;
}

.home-hero__capsule {
  margin: 0;
  width: calc(50% - var(--space-8));
  max-width: 200px;
  border-radius: 50% / 50% 50% 50% 50% / 40% 60% 60% 40%;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-hero__capsule:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(15, 26, 61, 0.12);
}

.home-hero__capsule img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero__capsule figcaption {
  position: absolute;
  bottom: var(--space-8);
  left: var(--space-8);
  background-color: var(--color-creme-clair);
  color: var(--color-bleu-klein);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-4);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  margin: 0;
}

/* ---------- Approche ---------- */
.home-approche {
  background-color: var(--color-creme-chaude);
}

.home-approche__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: start;
}

.home-approche__principal {
  min-width: 0;
}

.home-approche__principal p {
  max-width: 68ch;
}

.home-approche__valeurs {
  min-width: 0;
  background-color: var(--color-vert-eucalyptus-15);
  border-radius: var(--radius-24) var(--radius-12) var(--radius-12) var(--radius-12);
  padding: var(--space-24);
}

.home-approche__liste {
  margin: 0;
}

.home-approche__liste li {
  margin-block-end: var(--space-12);
}

.home-approche__liste li:last-child {
  margin-block-end: 0;
}

/* ---------- Processus ---------- */
.home-processus {
  background-color: var(--color-vert-eucalyptus-15);
}

.home-processus__entete {
  max-width: 68ch;
  margin-block-end: var(--space-48);
}

.home-processus__etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-processus__etape {
  min-width: 0;
  position: relative;
  padding-inline-start: var(--space-48);
}

.home-processus__numero {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: 600;
  color: var(--color-bleu-klein);
  line-height: 1;
}

.home-processus__etape p {
  max-width: 60ch;
}

/* ---------- Expériences ---------- */
.home-experiences {
  background-color: var(--color-creme-chaude);
}

.home-experiences__entete {
  max-width: 68ch;
  margin-block-end: var(--space-48);
}

.home-experiences__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.home-experience {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-experience__contenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.home-experience__contenu .badge {
  align-self: flex-start;
}

.home-experience__contenu p {
  max-width: 60ch;
  margin: 0;
}

.home-experience__contenu .link-underline {
  align-self: flex-start;
  margin-block-start: var(--space-8);
}

/* ---------- Poker Tables & Card Lounge ---------- */
.home-poker-lounge {
  background-color: var(--color-bleu-nuit);
  color: var(--color-creme-chaude);
}

.home-poker-lounge__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

.home-poker-lounge__entete {
  min-width: 0;
}

.home-poker-lounge__entete h2,
.home-poker-lounge__entete .lead {
  color: var(--color-creme-chaude);
}

.home-poker-lounge__blocs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.home-poker-lounge__bloc {
  min-width: 0;
  background-color: rgba(247, 241, 232, 0.06);
  border: 1px solid rgba(247, 241, 232, 0.15);
  border-radius: var(--radius-12);
  padding: var(--space-24);
}

.home-poker-lounge__bloc h3 {
  color: var(--color-creme-chaude);
}

.home-poker-lounge__bloc p {
  color: var(--color-creme-chaude);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Poker & Team Building ---------- */
.home-poker-team {
  background-color: var(--color-creme-chaude);
}

.home-poker-team__conteneur {
  display: flex;
  justify-content: flex-end;
}

.home-poker-team__bloc {
  min-width: 0;
  width: 100%;
  border-top: 2px solid var(--color-orange-brule);
  padding-block-start: var(--space-32);
}

.home-poker-team__bloc p {
  max-width: 68ch;
}

/* ---------- Scénographie & Food & Dining ---------- */
.home-scenographie {
  background-color: var(--color-vert-eucalyptus-15);
}

.home-scenographie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

.home-scenographie__entete {
  min-width: 0;
}

.home-scenographie__blocs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.home-scenographie__bloc {
  min-width: 0;
  background-color: var(--color-creme-clair);
  border: var(--border-bleu-klein-15);
  border-radius: var(--radius-12);
  padding: var(--space-24);
}

.home-scenographie__bloc p {
  max-width: 60ch;
  margin: 0;
}

/* ---------- Galerie ---------- */
.home-galerie {
  background-color: var(--color-creme-chaude);
}

.home-galerie__entete {
  max-width: 68ch;
  margin-block-end: var(--space-48);
}

.home-galerie__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.home-galerie__item {
  margin: 0;
  min-width: 0;
  border-radius: var(--radius-12);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-galerie__item:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 12px 32px rgba(15, 26, 61, 0.12);
}

.home-galerie__item img {
  width: 100%;
  height: auto;
  display: block;
}

.home-galerie__item figcaption {
  padding: var(--space-8) var(--space-12);
  background-color: var(--color-creme-clair);
  color: var(--color-gris-chaud);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-letter-spacing);
  font-weight: var(--text-caption-weight);
  margin: 0;
}

/* ---------- Contact ---------- */
.home-contact {
  background-color: var(--color-bleu-nuit);
  color: var(--color-creme-chaude);
}

.home-contact__conteneur {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.home-contact__intro {
  text-align: center;
}

.home-contact__intro h2,
.home-contact__intro .lead {
  color: var(--color-creme-chaude);
}

.home-contact__intro .lead {
  max-width: 60ch;
  margin-inline: auto;
}

.home-contact__intro a {
  color: var(--color-creme-chaude);
}

.home-contact__formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  background-color: rgba(247, 241, 232, 0.06);
  border: 1px solid rgba(247, 241, 232, 0.15);
  border-radius: var(--radius-24);
  padding: var(--space-24);
}

.home-contact__champs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.home-contact__formulaire .form-label {
  color: var(--color-creme-chaude);
}

.home-contact__formulaire .form-input,
.home-contact__formulaire .form-textarea,
.home-contact__formulaire .form-select {
  background-color: var(--color-creme-clair);
  color: var(--color-bleu-klein);
  border-color: var(--color-gris-chaud);
}

.home-contact__formulaire .form-input::placeholder,
.home-contact__formulaire .form-textarea::placeholder {
  color: var(--color-gris-chaud);
}

.home-contact__bouton {
  align-self: flex-start;
}

.home-contact__confirmation {
  color: var(--color-creme-chaude);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  margin: 0;
}

/* ---------- Responsive : tablette ---------- */
@media (min-width: 48rem) {
  .home-hero {
    padding-block: var(--space-96) var(--space-64);
  }

  .home-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-48);
  }

  .home-hero__titre,
  .home-hero__sous-titre {
    max-width: 100%;
  }

  .home-hero__capsules {
    margin-block-start: var(--space-32);
  }

  .home-approche__grid {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-48);
  }

  .home-processus__etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-48) var(--space-32);
  }

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

  .home-poker-lounge__blocs,
  .home-scenographie__blocs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-poker-team__bloc {
    width: 75%;
  }

  .home-galerie__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .home-galerie__item--groupe {
    grid-column: 1 / span 5;
  }

  .home-galerie__item--decoration {
    grid-column: 6 / span 3;
  }

  .home-galerie__item--poker {
    grid-column: 9 / span 4;
  }

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

  .home-contact__champs .form-field:nth-child(5),
  .home-contact__champs .form-field:nth-child(6) {
    grid-column: 1 / -1;
  }
}

/* ---------- Responsive : desktop ---------- */
@media (min-width: 64rem) {
  .home-hero {
    padding-block: var(--space-128) var(--space-96);
  }

  .home-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-64);
  }

  .home-hero__visuel {
    margin-inline-end: -15%;
  }

  .home-hero__capsule {
    width: 200px;
  }

  .home-hero__capsule--accueil {
    position: absolute;
    top: -10%;
    left: -5%;
  }

  .home-hero__capsule--dinner {
    position: absolute;
    top: 5%;
    right: -10%;
  }

  .home-hero__capsule--team {
    position: absolute;
    bottom: 15%;
    left: -15%;
  }

  .home-hero__capsule--poker {
    position: absolute;
    bottom: -5%;
    right: 5%;
  }

  .home-hero__capsule--lounge {
    position: absolute;
    bottom: 25%;
    right: -20%;
  }

  .home-processus__etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-32);
  }

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

  .home-poker-lounge__grid,
  .home-scenographie__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
    align-items: start;
  }

  .home-poker-lounge__blocs,
  .home-scenographie__blocs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-galerie__item--groupe {
    grid-column: 1 / span 4;
  }

  .home-galerie__item--decoration {
    grid-column: 5 / span 3;
  }

  .home-galerie__item--poker {
    grid-column: 8 / span 5;
  }
}

/* ---------- Responsive : mobile ---------- */
@media (max-width: 47.9375rem) {
  .home-hero__titre,
  .home-hero__sous-titre {
    max-width: 100%;
  }

  .home-hero__capsule {
    width: calc(50% - var(--space-8));
    max-width: none;
  }

  .home-hero__capsule figcaption {
    position: static;
    background-color: transparent;
    color: var(--color-gris-chaud);
    padding: var(--space-4) 0 0;
    border-radius: 0;
  }

  .home-approche__valeurs {
    margin-inline-start: var(--space-8);
  }

  .home-processus__etape {
    padding-inline-start: var(--space-40);
  }

  .home-poker-team__bloc {
    width: 100%;
    margin-inline-start: var(--space-8);
  }

  .home-galerie__item {
    margin-inline-start: var(--space-8);
  }

  .home-galerie__item:nth-child(even) {
    margin-inline-start: 0;
    margin-inline-end: var(--space-8);
  }

  .home-contact__formulaire {
    padding: var(--space-16);
  }

  .home-contact__bouton {
    align-self: stretch;
  }
}