/* ══════════════════════════════════════════════════
   MiarTek — css/pages.css
   Hero · Page heroes · Sections spécifiques
   ══════════════════════════════════════════════════ */

/* ────── HERO ACCUEIL ────── */
.home-hero {
  min-height:92vh; padding-top:var(--nav-h);
  position:relative; overflow:hidden;
  display:flex; align-items:center;
}
.home-hero__bg {
  position:absolute; inset:0; z-index:0;
  background-image:url('../assets/hero-engineering.jpg');
  background-size:cover; background-position:center;
  transition:transform 8s ease;
}
.home-hero:hover .home-hero__bg { transform:scale(1.02); }
.home-hero__ov {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    105deg,
    rgba(9,18,38,.95)  0%,
    rgba(9,18,38,.88)  35%,
    rgba(9,18,38,.65)  60%,
    rgba(9,18,38,.25)  85%,
    rgba(9,18,38,.1)   100%
  );
}
.home-hero__particles {
  position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
}
.home-hero__particles::before, .home-hero__particles::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.home-hero__particles::before {
  width:600px; height:600px; top:-150px; right:-100px;
  background:radial-gradient(circle,rgba(58,176,58,.12),transparent 68%);
  animation:heroFloat 12s ease-in-out infinite;
}
.home-hero__particles::after {
  width:350px; height:350px; bottom:40px; left:4%;
  background:radial-gradient(circle,rgba(26,53,200,.15),transparent 68%);
  animation:heroFloat 9s ease-in-out infinite 4s;
}
@keyframes heroFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-28px) scale(1.04); }
}

.home-hero__content {
  position:relative; z-index:2;
  max-width:660px; padding:70px var(--px) 60px;
  animation:heroIn .9s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes heroIn {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
.home-hero__badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(58,176,58,.17); border:1px solid rgba(58,176,58,.38);
  color:#7aec7a; font-size:.77rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  padding:5px 16px; border-radius:var(--r-full); margin-bottom:20px;
}
.home-hero__h1 {
  font-size:clamp(2.1rem,4.5vw,3.6rem); margin-bottom:14px;
}
.home-hero__h1 .gc { color:#5ce85c; }
.home-hero__h1 .bc { color:#7899ff; }
.home-hero__sub {
  font-size:1.08rem; color:rgba(255,255,255,.72); font-weight:300;
  font-style:italic; margin-bottom:10px;
}
.home-hero__p {
  font-size:.94rem; color:rgba(255,255,255,.62); line-height:1.78; margin-bottom:32px;
}
.home-hero__strip {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  background:rgba(255,255,255,.07); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:15px var(--px); display:flex; align-items:center; gap:24px;
  color:rgba(255,255,255,.78); font-size:.86rem; flex-wrap:wrap;
}
.home-hero__strip a { color:var(--white); transition:color .2s; }
.home-hero__strip a:hover { color:var(--green-light); }
.home-hero__strip .sep { opacity:.3; }

/* ────── PAGE HERO (pages internes) ────── */
.page-hero {
  min-height:380px; padding-top:var(--nav-h);
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
}
.page-hero__bg {
  position:absolute; inset:0; z-index:0;
  background-image:url('../assets/hero-engineering.jpg');
  background-size:cover; background-position:center;
}
.page-hero__ov {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    100deg,
    rgba(9,18,38,.94) 0%, rgba(9,18,38,.82) 42%,
    rgba(9,18,38,.48) 68%, rgba(9,18,38,.15) 100%
  );
}
.page-hero__content {
  position:relative; z-index:2;
  max-width:640px; padding:50px var(--px) 52px;
}
.page-hero__crumb {
  font-size:.8rem; color:rgba(255,255,255,.42);
  margin-bottom:14px; display:flex; align-items:center; gap:6px;
}
.page-hero__crumb a   { color:var(--green-light); }
.page-hero__crumb a:hover { text-decoration:underline; }
.page-hero__h1 {
  font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:16px;
}
.page-hero__h1 em { font-style:normal; color:var(--green-light); }
.page-hero__desc {
  font-size:.95rem; color:rgba(255,255,255,.68); line-height:1.75; margin-bottom:10px;
}
.page-hero__checks { margin-top:14px; }

/* ────── BREADCRUMB BAR ────── */
.breadcrumb-bar {
  background:var(--white); border-bottom:1px solid var(--gray-200);
  padding:11px var(--px); font-size:.8rem; color:var(--text-muted);
  display:flex; align-items:center; gap:7px;
}
.breadcrumb-bar a { color:var(--blue); }
.breadcrumb-bar a:hover { text-decoration:underline; }

/* ────── SERVICE DETAIL BLOCKS ────── */
.svc-block {
  padding:var(--sec-py) 0; border-bottom:1px solid var(--gray-200);
}
.svc-block:last-of-type { border-bottom:none; }
.svc-block__inner {
  display:grid; grid-template-columns:1fr 420px; gap:56px;
  align-items:center; max-width:var(--max-w); margin:0 auto; padding:0 var(--px);
}
.svc-block__inner--rev { direction:rtl; }
.svc-block__inner--rev > * { direction:ltr; }
.svc-block__num { font-family:var(--fd); font-size:2.2rem; font-weight:900; color:var(--green); margin-bottom:4px; }
.svc-block__h2  { font-size:clamp(1.4rem,2.5vw,1.85rem); font-weight:800; margin-bottom:14px; }
.svc-block__p   { font-size:.93rem; color:var(--text-mid); line-height:1.77; margin-bottom:16px; }
.svc-block__cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:18px; }
.svc-block__col h4 { font-size:.83rem; font-weight:700; color:var(--green); margin-bottom:9px; }
.svc-block__img {
  border-radius:var(--r-xl); overflow:hidden; height:270px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.svc-block__img-fx {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:5.5rem; opacity:.3;
}

/* ────── PROJET DETAIL BLOCKS ────── */
.proj-block { padding:var(--sec-py) 0; border-bottom:1px solid var(--gray-200); }
.proj-block:nth-child(even) { background:var(--gray-50); }
.proj-block__inner {
  display:grid; grid-template-columns:340px 1fr; gap:46px;
  align-items:center; max-width:var(--max-w); margin:0 auto; padding:0 var(--px);
}
.proj-block__inner--rev { direction:rtl; }
.proj-block__inner--rev > * { direction:ltr; }
.proj-block__img {
  border-radius:var(--r-lg); overflow:hidden; height:225px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.proj-block__img-fx { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:4.5rem; opacity:.35; }
.proj-block__num { font-family:var(--fd); font-size:1.8rem; font-weight:900; color:var(--green); }
.proj-block__h2  { font-size:clamp(1.25rem,2vw,1.65rem); font-weight:800; margin:6px 0 12px; }
.proj-block__p   { font-size:.92rem; color:var(--text-mid); margin-bottom:18px; }
.proj-block__cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.proj-block__col h4 { font-size:.83rem; font-weight:700; color:var(--green); margin-bottom:8px; }

/* ────── CONTACT LAYOUT ────── */
.contact-layout {
  display:grid; grid-template-columns:360px 1fr; gap:44px;
  max-width:var(--max-w); margin:0 auto; padding:0 var(--px);
}
.contact-info-box {
  background:var(--white); border-radius:var(--r-xl);
  padding:28px 24px; box-shadow:var(--sh-md);
  border:1px solid var(--gray-200); height:fit-content;
}
.contact-info-box h3 { font-size:1.1rem; font-weight:800; margin-bottom:20px; }
.contact-info-box .subtitle {
  color:var(--text-muted); font-style:italic; font-size:.86rem;
  margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid var(--gray-100);
}

/* ────── RESPONSIVE ────── */
@media(max-width:960px) {
  .svc-block__inner { grid-template-columns:1fr; }
  .svc-block__img   { height:210px; width:100%; }
  .proj-block__inner { grid-template-columns:1fr; }
  .proj-block__img   { height:210px; width:100%; }
  .contact-layout    { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .process-steps { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px) {
  :root { --sec-py:52px; --px:4%; }
  .home-hero__bg { background-position:60% center; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .svc-block__cols,.proj-block__cols { grid-template-columns:1fr; }
  .fg-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .process-steps { grid-template-columns:1fr; }
  .cta-band__btns { flex-direction:column; align-items:center; }
  .home-hero__strip { flex-direction:column; gap:8px; align-items:flex-start; }
}