/* ============================================================
   AZURA — Accueil
   Maquette 04 pour le Hero, maquette 05 pour les quatre blocs.
   Une idée par écran de défilement, beaucoup d'air.
   ============================================================ */

/* ---------- Hero ---------- */
.ac-hero {
  min-height: 100vh; display: grid; align-items: center;
  grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 120px 8% 40px; position: relative; overflow: hidden;
}
.ac-hero-txt { position: relative; z-index: 2; }
.ac-accroche {
  font: 400 68px/1.12 var(--serif); letter-spacing: -.015em;
  color: var(--ink-hi); margin: 0; max-width: 9.4em;
}
.ac-signature {
  font: italic 400 20px/1.5 var(--serif); color: var(--ink2);
  margin: 28px 0 0; max-width: 24em;
}

.ac-filigrane {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: min(30vw, 380px); letter-spacing: .06em;
  color: var(--ink-hi); opacity: .045; pointer-events: none;
  user-select: none; white-space: nowrap; z-index: 0;
}

.ac-scene {
  position: relative; display: grid; place-items: center;
  perspective: 1600px; perspective-origin: 50% 44%; z-index: 1;
}
.ac-halo {
  position: absolute; width: min(60vw, 700px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,207,192,.10) 0%, rgba(216,207,192,.03) 40%, transparent 66%);
  pointer-events: none;
}

/* Le sélecteur de finition, sous la montre */
.ac-finitions {
  display: flex; gap: 34px; justify-content: center; margin-top: 28px;
  position: relative; z-index: 2;
}
.ac-pastille {
  background: none; border: 0; cursor: pointer; display: grid;
  justify-items: center; gap: 9px; padding: 5px;
}
.ac-pastille i {
  width: 28px; height: 28px; border-radius: 50%; display: block;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.5);
  transition: box-shadow 400ms;
}
.ac-pastille span {
  font: 500 10px/1 var(--sans); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink2); transition: color 400ms;
}
.ac-pastille[aria-pressed="true"] i {
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--cu), inset 0 1px 2px rgba(255,255,255,.35);
}
.ac-pastille[aria-pressed="true"] span { color: var(--ink-hi); }

.ac-defiler { display: grid; gap: 10px; margin-top: 48px; }
.ac-defiler span {
  font: 500 10px/1 var(--sans); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink2);
}
.ac-trait { width: 1px; height: 38px; background: linear-gradient(var(--ink2), transparent); }

/* ---------- Les quatre blocs ----------
   Chacun occupe un écran de défilement, une seule idée à la fois. */
.ac-bloc {
  min-height: 92vh; display: grid; align-items: center;
  grid-template-columns: 1fr 1fr; gap: 64px; padding: 8vh 8%;
  border-top: 1px solid var(--line);
}
.ac-bloc.inverse > .ac-bloc-txt { order: 2; }
.ac-bloc-txt { max-width: 34ch; }
.ac-bloc-txt h2 {
  font: 400 56px/1.1 var(--serif); letter-spacing: -.01em;
  color: var(--ink-hi); margin: 0;
}
.ac-bloc-txt p { font: 400 16px/1.6 var(--sans); color: var(--ink); margin: 22px 0 0; }
.ac-bloc-txt .az-lien { margin-top: 34px; }

.ac-donnees { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.ac-donnees li {
  font: 500 11px/1 var(--sans); letter-spacing: .20em;
  text-transform: uppercase; color: var(--ink2);
  font-variant-numeric: tabular-nums;
}

/* Le cadre visuel de chaque bloc */
.ac-visuel {
  position: relative; aspect-ratio: 4/3; display: grid; place-items: center;
  background: var(--bg2); border: 1px solid var(--glass-bd); border-radius: 4px;
  overflow: hidden;
}
.ac-visuel .az-montre { max-width: 78%; }

/* Matière d'atelier, construite sans photographie : acier brossé en lumière
   rasante, une arête, un copeau, une ombre longue. */
.ac-matiere {
  position: absolute; inset: 0;
  background:
    linear-gradient(107deg, transparent 0 38%, rgba(216,207,192,.05) 38.5% 39.5%, transparent 40%),
    linear-gradient(107deg, transparent 0 62%, rgba(216,207,192,.07) 62.5% 63.2%, transparent 64%),
    repeating-linear-gradient(104deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse 70% 90% at 18% 4%, rgba(216,207,192,.10), transparent 62%),
    linear-gradient(160deg, #191B1F, #0C0D10 70%);
}
.ac-copeau {
  position: absolute; left: 26%; top: 52%; width: 44%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(216,207,192,.22), transparent);
  transform: rotate(-14deg); filter: blur(.4px);
}
.ac-copeau::after {
  content: ''; position: absolute; left: 8%; top: 14px; width: 70%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.55), transparent);
  filter: blur(3px);
}

/* Le rotor du bloc mouvement, en macro */
.ac-rotor { width: 100%; height: 100%; display: block; }

/* Les trois montres du bloc finitions */
/* minmax(0, 1fr) et non 1fr : le minimum implicite d'une piste est
   "auto", c'est-a-dire la largeur naturelle du contenu. Une montre refuse
   alors de retrecir et pousse la page vers la droite. */
.ac-trois {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  align-items: center; width: 100%;
}
.ac-trois > div { position: relative; }
.ac-trois figcaption {
  font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink2); text-align: center; margin-top: 16px;
}

/* ---------- Bandeau Concierge ---------- */
.ac-concierge {
  padding: 14vh 8%; border-top: 1px solid var(--line);
  display: grid; gap: 28px; justify-items: start;
}
.ac-concierge h2 { font: 400 56px/1.1 var(--serif); color: var(--ink-hi); margin: 0; }
.ac-concierge p { font: 400 16px/1.6 var(--sans); color: var(--ink); margin: 0; max-width: 46ch; }

@media (max-width: 980px) {
  .ac-hero { grid-template-columns: 1fr; padding-top: 104px; }
  .ac-hero-txt { max-width: none; }
  .ac-accroche { font-size: 40px; }
  .ac-signature { font-size: 17px; margin-top: 20px; }
  .ac-bloc { grid-template-columns: 1fr; gap: 32px; min-height: auto; padding: 7vh 5%; }
  .ac-bloc.inverse > .ac-bloc-txt { order: 0; }
  .ac-bloc-txt h2 { font-size: 34px; }
  .ac-defiler { margin-top: 32px; }
  .ac-trois { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ac-concierge { padding: 10vh 5%; }
  .ac-concierge h2 { font-size: 34px; }
  .ac-filigrane { font-size: 44vw; }
}