/* Accueil : bannière, présentation, prestations phares, aperçu de la galerie, appel à l'action. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 760px);
  padding-block: calc(var(--header-height-v2026) + 3rem) 4rem;
  background: #0c0c0c;
  color: #f7f1e6;
  overflow: hidden;
}
/* Photo de la bannière : les ongles occupent le haut de l'image (entre 10 % et 58 % de sa hauteur).
   Sur grand écran la photo est affichée à la hauteur de la bannière (jamais rognée) et fondue vers le noir côté texte ;
   sur mobile elle remplit la bannière, recadrée sur les ongles. */
.hero__bg { position: absolute; inset: 0; background: #0c0c0c; }
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/background-large.jpg') 95% 18% / cover no-repeat;
}
.hero__bg::after { /* voile : le texte reste lisible quelle que soit la photo */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0c0c0c 12%, rgba(12, 12, 12, .55) 70%, rgba(12, 12, 12, .35));
}

@media (min-width: 861px) {
  .hero__bg::before {
    inset: 0 0 0 auto;
    aspect-ratio: 1000 / 903; /* proportions de la photo : sa largeur suit la hauteur de la bannière */
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
    mask-image: linear-gradient(90deg, transparent, #000 38%);
  }
  .hero__bg::after { background: linear-gradient(90deg, rgba(12, 12, 12, .6) 0, rgba(12, 12, 12, 0) 55%); }
}

.hero__content { position: relative; }
.hero h1 { max-width: 12ch; color: #f7f1e6; }
.hero h1 em { color: var(--gold-v2026); }
.hero__text { max-width: 30rem; margin-bottom: 2rem; font-size: 1.05rem; opacity: .88; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Largeurs intermédiaires : la photo occupe presque toute la bannière, le voile est renforcé derrière le texte */
@media (min-width: 861px) and (max-width: 1150px) {
  .hero__bg::after { background: linear-gradient(90deg, rgba(12, 12, 12, .92) 0, rgba(12, 12, 12, .6) 55%, rgba(12, 12, 12, 0) 90%); }
}

@media (max-width: 640px) {
  .hero { align-items: flex-end; }
}

/* Présentation */
.about__grid { display: grid; gap: 2.5rem; align-items: center; }
.about__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-v2026); }
.about__stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.about__stats strong { display: block; font: 500 2.2rem/1.1 var(--font-title-v2026); color: var(--gold-dark-v2026); }
.about__stats span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-v2026); }

@media (min-width: 860px) { .about__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Prestations phares */
.featured__grid { display: grid; gap: 1.1rem; margin-top: 2rem; grid-template-columns: 1fr; }
.featured-card { display: flex; flex-direction: column; padding: 1.6rem 1.4rem; border: 1px solid #3a3320; background: var(--ink-soft-v2026); }
.featured-card h3 { margin-bottom: .5rem; font-size: 1.5rem; }
.featured-card p { flex: 1; font-size: .9rem; opacity: .7; }
.featured-card .featured-card__price { flex: 0; margin: .8rem 0 0; font: 500 2.1rem/1 var(--font-title-v2026); color: var(--gold-v2026); opacity: 1; }

@media (min-width: 640px) { .featured__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .featured__grid { grid-template-columns: repeat(4, 1fr); } }

/* Appel à l'action */
.cta-band { padding-block: clamp(3rem, 8vw, 4.5rem); text-align: center; background: linear-gradient(135deg, #b8941e, #d4af37 50%, #b8941e); color: var(--ink-v2026); }
.cta-band h2 { color: var(--ink-v2026); }
.cta-band a:not(.button) { font-weight: 500; }