/* =========================================================
   ACCUEIL · HÉROS
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--night-900);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(21, 22, 28, .9) 0%, rgba(21, 22, 28, .72) 100%);
}
.hero__inner { padding-block: clamp(72px, 9vw, 120px); }
.hero__inner > * { max-width: 640px; }
.hero__eyebrow { display: flex; }
.hero__inner > .hero__title {
  max-width: 780px;
  margin-top: 22px;
  font-size: clamp(2.4rem, 1.2rem + 3.3vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.hero__title .hl { color: var(--pv-blue); }
.hero__text { margin-top: 24px; max-width: 56ch; font-size: var(--fs-lead); color: var(--muted-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* bandeau d'accès rapide en bas du héros */
.hero__quick {
  display: none;
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line-dark);
}
.hero__quick ul { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 20px; }
.hero__quick a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted-dark);
  transition: color var(--t-fast) ease-out;
}
.hero__quick a::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.hero__quick a:hover { color: var(--white); }

@media (min-width: 900px) {
  .hero::after {
    background: linear-gradient(90deg,
      rgba(21, 22, 28, .97) 0%,
      rgba(21, 22, 28, .9) 32%,
      rgba(21, 22, 28, .4) 60%,
      rgba(21, 22, 28, .08) 100%);
  }
  .hero__inner { min-height: min(680px, calc(100vh - var(--header-h))); display: flex; flex-direction: column; justify-content: center; }
  .hero__quick { display: block; max-width: none; }
}

/* =========================================================
   ACCUEIL · DOMAINES D'EXPERTISE
   ========================================================= */
/* (cartes : voir components.css) */

/* =========================================================
   ACCUEIL · MARQUES
   ========================================================= */
.brands-band { padding-block: clamp(56px, 6vw, 88px); }
.brands-band .section-head { margin-bottom: clamp(32px, 4vw, 48px); }

/* =========================================================
   ACCUEIL · À PROPOS
   ========================================================= */
.about { display: grid; gap: 24px; }
@media (min-width: 960px) {
  .about { grid-template-columns: 1.06fr 1fr; align-items: center; gap: 32px; }
}
.about__visual {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  background: var(--night-800);
}
@media (min-width: 960px) { .about__visual { min-height: 540px; } }
.about__visual .frame { position: absolute; inset: 0; z-index: -2; }
.about__visual img { object-position: 50% 30%; }
.about__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(21, 22, 28, 0) 22%, rgba(21, 22, 28, .55) 50%, rgba(21, 22, 28, .95) 100%);
}
.about__content { padding: clamp(26px, 4vw, 40px); }
.about__content h2 { max-width: 17ch; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem); }
.about__content p { max-width: 48ch; margin: 16px 0 26px; color: rgba(255, 255, 255, .84); }

.why {
  padding: clamp(28px, 4vw, 46px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.why h2 { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.1rem); }
.why__list { display: grid; gap: 8px; margin-top: 26px; }
.why__list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  margin-inline: -14px;
  border-radius: var(--radius-sm);
  transition: background-color .3s ease-out;
}
.why__list li:hover { background: var(--white); }
.why__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--c);
  transition: transform .45s var(--ease-out), background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.why__list li:hover .why__icon { transform: scale(1.08); background: var(--c); border-color: var(--c); color: var(--white); }
.why__icon .icon { width: 24px; height: 24px; }
.why__list h3 { font-size: 16.5px; }
.why__list p { margin-top: 2px; font-size: 14.5px; color: var(--muted); }