/* ============================================================
   Y&A Solutions : blocs d'accueil
   Tout est préfixé « ya- » pour ne pas entrer en conflit avec
   le CSS existant. La police hérite de celle de votre site.
   ============================================================ */
:root {
  --ya-marine: #0a2638;      /* couleur déjà utilisée sur le site */
  --ya-marine-2: #123a54;
  --ya-sable: #f4f1ec;
  --ya-blanc: #ffffff;
  --ya-texte: #16222b;
  --ya-doux: #5d6b75;
  --ya-accent: #c9a24b;      /* doré discret, pour les coches et les traits */
}


/* ---------- 1. HÉROS ---------- */
.ya-hero {
  position: relative;
  color: var(--ya-blanc);
  background:
    linear-gradient(100deg, rgba(10,38,56,.94) 0%, rgba(10,38,56,.78) 55%, rgba(10,38,56,.45) 100%),
    url("https://www.yasolutions.ma/assets/residence-geree.jpg") center / cover no-repeat,
    var(--ya-marine);
  padding: clamp(72px, 12vw, 150px) clamp(20px, 6vw, 80px) clamp(64px, 9vw, 110px);
}
.ya-hero__in { max-width: 1100px; margin: 0 auto; }
.ya-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  max-width: 17em;
  margin: 0 0 .6em;
}
.ya-hero p.ya-sub {
  font-size: clamp(1.02rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  max-width: 36em;
  margin: 0 0 2em;
  color: rgba(255,255,255,.88);
}
.ya-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.ya-btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.ya-btn--plein { background: var(--ya-accent); color: var(--ya-marine); }
.ya-btn--plein:hover { background: #dbb765; }
.ya-btn--ligne { border-color: rgba(255,255,255,.75); color: var(--ya-blanc); }
.ya-btn--ligne:hover { background: rgba(255,255,255,.12); }
.ya-btn:focus-visible { outline: 3px solid var(--ya-blanc); outline-offset: 3px; }
.ya-hero__signature { margin: 3em 0 0; font-size: .95rem; color: rgba(255,255,255,.7); font-style: italic; }

/* ---------- 2. CHIFFRES CLÉS ---------- */
.ya-chiffres { background: var(--ya-sable); padding: clamp(36px, 6vw, 64px) clamp(20px, 6vw, 80px); }
.ya-chiffres__in { max-width: 1100px; margin: 0 auto; }
.ya-chiffres ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.ya-chiffres li { padding: 6px 24px; border-left: 2px solid var(--ya-accent); }
.ya-chiffres li:first-child { margin-left: 0; }
.ya-chiffres strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--ya-marine);
}
.ya-chiffres span { display: block; margin-top: .35em; color: var(--ya-doux); font-size: .98rem; line-height: 1.35; }
.ya-chiffres__phrase { margin: 2em 0 0; color: var(--ya-marine); font-size: 1.05rem; }

/* ---------- 3. ENGAGEMENTS (près du formulaire) ---------- */
.ya-engagements {
  list-style: none; margin: 0 0 1.5em; padding: 0;
  display: grid; gap: .6em;
}
.ya-engagements li { position: relative; padding-left: 1.9em; line-height: 1.4; color: var(--ya-texte); }
.ya-engagements li::before {
  content: "";
  position: absolute; left: 0; top: .25em;
  width: 1.15em; height: 1.15em;
  border-radius: 50%;
  background: var(--ya-accent);
}
.ya-engagements li::after {
  content: "";
  position: absolute; left: .36em; top: .43em;
  width: .3em; height: .55em;
  border: solid var(--ya-marine); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 760px) {
  .ya-chiffres ul { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .ya-chiffres li { padding: 6px 16px; }
  .ya-hero__cta .ya-btn { width: 100%; text-align: center; }
}

.ya-hero,.ya-chiffres,.ya-engagements{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.ya-engagements{margin-top:26px}.ya-hero{scroll-margin-top:95px}