/* ═══════════════════════════════════════════════════════════════════
   EmploiServices — SUB-PAGES 2026 DESIGN SYSTEM (UPGRADED SCALE & LUXURY)
   Palette: Sovereign Navy #0f2a5c · Navy #00387C · Teal #03989e · Gold #C9A227
   Typo: Cairo / Inter (Google Fonts)
   Usage: /recherche · /Entreprises · /qui-sommes-nous · /Contacts · /Offre/{id}
   ═══════════════════════════════════════════════════════════════════ */

.sp-page { 
  --sp-navy:#0f2a5c; --sp-navy2:#00387C; --sp-teal:#03989e; --sp-teal-b:#2cbfd9;
  --sp-gold:#C9A227; --sp-bg:#f4f7fb; --sp-line:#e3e9f2; --sp-ink:#1a2440; --sp-muted:#5b6b81;
  --sp-radius:22px; --sp-shadow:0 12px 38px -8px rgba(15,42,92,.12);
  font-family:'Inter','Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  color:var(--sp-ink); background:var(--sp-bg); 
  font-size:1.02rem;
  padding:0 0 72px;
}

.sp-page *,.sp-page *::before,.sp-page *::after{ box-sizing:border-box; }
.sp-page h1,.sp-page h2,.sp-page h3,.sp-page h4{ font-family:'Cairo','Inter',sans-serif; font-weight:800; }
.sp-page p{ font-size:1.06rem; line-height:1.75; }

/* ── Hero band (navy gradient + glow) ── */
.sp-hero{ position:relative; background:linear-gradient(135deg,#0f2a5c 0%,#00387C 55%,#0b3a4a 115%);
  color:#fff; padding:64px 24px 72px; text-align:center; overflow:hidden; }
.sp-hero::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(700px 260px at 15% 10%, rgba(44,191,217,.22), transparent 60%),
             radial-gradient(600px 280px at 85% 90%, rgba(201,162,39,.18), transparent 60%); }
.sp-hero::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:5px;
  background:linear-gradient(90deg,var(--sp-teal) 0%,var(--sp-teal-b) 50%,var(--sp-gold) 100%); }
.sp-hero > *{ position:relative; z-index:1; }
.sp-hero-kicker{ display:inline-flex; align-items:center; gap:8px; padding:7px 18px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); font-size:.84rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#dff3f5; margin-bottom:18px; }
.sp-hero h1{ font-size:2.85rem; font-weight:900; margin:0 0 14px; letter-spacing:-.01em; color:#fff; line-height:1.25; }
.sp-hero p{ max-width:860px; margin:0 auto; font-size:1.16rem; line-height:1.7; color:rgba(255,255,255,.88); }
.sp-hero .sp-hero-actions{ margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ── Boutons 2026 ── */
.sp-btn{ display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; text-decoration:none;
  border-radius:999px; padding:13px 30px; font-weight:800; font-size:1rem; font-family:inherit;
  background:linear-gradient(135deg,#0f2a5c,#00387C); color:#fff;
  box-shadow:0 8px 22px rgba(15,42,92,.28); transition:transform .2s ease, box-shadow .2s ease; }
.sp-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(3,152,158,.38); text-decoration:none; color:#fff; }
.sp-btn-gold{ background:linear-gradient(135deg,#C9A227,#b88A1E); box-shadow:0 8px 22px rgba(201,162,39,.35); color:#fff !important; }
.sp-btn-ghost{ background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.35); box-shadow:none; }
.sp-btn-ghost:hover{ background:rgba(255,255,255,.26); color:#fff; }
.sp-btn-block{ width:100%; justify-content:center; }

/* ── Layout conteneur principal (Large Luxury Scale) ── */
.sp-shell{ max-width:1340px; margin:0 auto; padding:40px clamp(20px, 3.5vw, 48px) 16px; }
.sp-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:992px){ .sp-grid-recherche{ grid-template-columns:1fr; } }

/* ── Carte verre / glassmorphism ── */
.sp-card{ background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.95); outline:1px solid rgba(227,233,242,.75); border-radius:var(--sp-radius);
  box-shadow:var(--sp-shadow); padding:34px 38px; }
.sp-card + .sp-card{ margin-top:24px; }
.sp-kicker{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sp-teal); margin-bottom:8px; }
.sp-section-title{ font-size:1.85rem; color:var(--sp-navy); margin:0 0 14px; font-weight:800; line-height:1.3; }

/* ── Barre de recherche moderne ── */
.sp-searchbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  background:#fff; border:1.5px solid var(--sp-line); border-radius:18px; padding:12px 14px; box-shadow:var(--sp-shadow); }
.sp-searchbar input[type=text]{ flex:1 1 320px; border:0; outline:0; padding:14px 18px; font-size:1.06rem; font-family:inherit;
  background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:14px; color:var(--sp-ink); font-weight:500; }
.sp-searchbar input[type=text]:focus{ border-color:var(--sp-teal); box-shadow:0 0 0 4px rgba(3,152,158,.14); background:#fff; }
.sp-searchbar .sp-btn{ padding:14px 32px; font-size:1.05rem; }

/* ── Chips filtres ── */
.sp-filters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;
  background:#fff; border:1.5px solid var(--sp-line); border-radius:18px; padding:22px; margin-top:18px; box-shadow:0 6px 20px rgba(15,42,92,.04); }
.sp-filter label{ display:block; font-size:.84rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--sp-muted); margin:0 0 6px 2px; }
.sp-filter select{ width:100%; height:50px; border:1.5px solid #e2e8f0; border-radius:14px; background:#f8fafc;
  padding:0 16px; font-size:.98rem; font-family:inherit; color:var(--sp-ink); font-weight:600;
  appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.sp-filter select:focus{ outline:none; border-color:var(--sp-teal); box-shadow:0 0 0 4px rgba(3,152,158,.14); background-color:#fff; }
.sp-filters-actions{ grid-column:1/-1; display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:6px; }

/* ── Cartes d'offres ── */
.sp-offers{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:26px; }
@media (min-width:768px){ .sp-offers{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .sp-offers{ grid-template-columns:repeat(3,1fr); } }
.sp-offer{ display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--sp-line);
  border-radius:var(--sp-radius); box-shadow:var(--sp-shadow); overflow:hidden;
  transition:transform .24s ease, box-shadow .24s ease; }
.sp-offer:hover{ transform:translateY(-5px); box-shadow:0 22px 48px -10px rgba(15,42,92,.24); }
.sp-offer-top{ display:flex; gap:16px; align-items:center; padding:24px 24px 16px; }
.sp-offer-logo{ flex:0 0 auto; width:60px; height:60px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#0f2a5c,#00387C); display:grid; place-items:center; color:#fff; }
.sp-offer-logo img{ width:100%; height:100%; object-fit:cover; }
.sp-offer-logo .sp-initials{ font-family:'Cairo',sans-serif; font-weight:800; font-size:1.35rem; }
.sp-offer-title{ min-width:0; }
.sp-offer-title h3{ margin:0 0 4px; font-size:1.25rem; font-weight:800; color:var(--sp-navy); line-height:1.32; }
.sp-offer-title .sp-company{ font-size:.95rem; color:var(--sp-muted); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-offer-badges{ display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 16px; }
.sp-badge{ display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px;
  font-size:.88rem; font-weight:700; background:#eef4f7; color:#2c4a68; border:1px solid #dbe6ee; }
.sp-badge-teal{ background:#e0f4f4; color:#026f74; border-color:#b3e0e1; }
.sp-badge-gold{ background:#fbf1d3; color:#8a6d0f; border-color:#f0dc9c; }
.sp-badge-navy{ background:#e9effa; color:#0f2a5c; border-color:#c8d6ee; }
.sp-offer-meta{ padding:0 24px 10px; font-size:.92rem; color:var(--sp-muted); display:flex; gap:18px; flex-wrap:wrap; }
.sp-offer-meta span{ display:inline-flex; align-items:center; gap:6px; }
.sp-offer-meta svg.ic{ width:16px; height:16px; flex:0 0 auto; }
.sp-offer-meta .ic-loc{ color:var(--sp-teal); }
.sp-offer-meta .ic-ppl{ color:var(--sp-gold); }
.sp-offer-foot{ margin-top:auto; display:flex; gap:12px; padding:16px 24px 24px; border-top:1px dashed var(--sp-line); }
.sp-offer-foot .sp-btn{ flex:1; justify-content:center; min-height:48px; padding:12px 18px; font-size:1rem; }

/* ── Chiffres clés (Stats grid) ── */
.sp-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:24px 0; }
.sp-stat{ background:#fff; border:1.5px solid var(--sp-line); border-radius:18px; padding:26px 20px;
  text-align:center; box-shadow:var(--sp-shadow); }
.sp-stat b{ display:block; font-size:2.6rem; font-weight:900; color:var(--sp-navy); line-height:1.15; margin-bottom:6px; font-family:'Cairo',sans-serif; }
.sp-stat span{ font-size:1.02rem; font-weight:700; color:var(--sp-muted); text-transform:uppercase; letter-spacing:.04em; }

/* ── Piliers & Missions ── */
.sp-pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:18px; }
.sp-pillar{ display:flex; gap:16px; align-items:flex-start; background:#f8fafc; border:1.5px solid #e2e8f0;
  border-radius:16px; padding:20px; }
.sp-pillar-ico{ width:48px; height:48px; border-radius:12px; background:rgba(3,152,158,.12);
  display:grid; place-items:center; font-size:1.5rem; flex:0 0 auto; }
.sp-pillar b{ display:block; font-size:1.08rem; font-weight:800; color:var(--sp-navy); margin-bottom:4px; font-family:'Cairo',sans-serif; }
.sp-pillar span{ font-size:.95rem; color:var(--sp-muted); line-height:1.55; }

/* ── Grille Entreprises Partenaires ── */
.sp-companies-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; margin-top:26px; }
.sp-company-card{ background:#fff; border:1.5px solid var(--sp-line); border-radius:20px; padding:26px 20px;
  text-align:center; box-shadow:var(--sp-shadow); display:flex; flex-direction:column; align-items:center;
  transition:transform .22s ease, box-shadow .22s ease; }
.sp-company-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,42,92,.18); }
.sp-company-card .sp-avatar{ width:72px; height:72px; border-radius:20px; background:linear-gradient(135deg,#0f2a5c,#00387C);
  display:grid; place-items:center; color:#fff; font-size:1.4rem; font-weight:800; font-family:'Cairo',sans-serif; margin-bottom:14px; }
.sp-company-card h3{ font-size:1.15rem; color:var(--sp-navy); margin:0 0 6px; font-weight:800; }
.sp-company-card .sp-industry{ font-size:.88rem; color:var(--sp-muted); font-weight:600; margin-bottom:14px; }

/* ── Contact Layout ── */
.sp-contact{ display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:992px){ .sp-contact{ grid-template-columns:1fr 1.15fr; } }
.sp-info-row{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; font-size:1.02rem; }
.sp-info-ico{ width:44px; height:44px; border-radius:12px; background:#e0f4f4; color:#026f74; display:grid; place-items:center; flex:0 0 auto; }
.sp-info-row b{ display:block; font-size:.82rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--sp-muted); margin-bottom:2px; }
.sp-info-row span{ font-weight:700; color:var(--sp-navy); font-size:1.02rem; }
.sp-map{ position:relative; width:100%; height:320px; border-radius:18px; overflow:hidden; border:1.5px solid var(--sp-line); margin-top:20px; }
.sp-map iframe{ width:100%; height:100%; border:0; }
.sp-field{ margin-bottom:18px; }
.sp-field label{ display:block; font-size:.86rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--sp-muted); margin-bottom:6px; }
.sp-field input,.sp-field textarea{ width:100%; border:1.5px solid #e2e8f0; border-radius:14px; padding:14px 16px; font-size:1.02rem; font-family:inherit; background:#f8fafc; color:var(--sp-ink); font-weight:500; }
.sp-field input:focus,.sp-field textarea:focus{ border-color:var(--sp-teal); box-shadow:0 0 0 4px rgba(3,152,158,.14); background:#fff; outline:none; }

/* ── Badges Conformité ── */
.sp-compliance{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:32px; }

@media (max-width:768px){
  .sp-hero h1{ font-size:2.1rem; }
  .sp-card{ padding:24px 20px; }
  .sp-stat b{ font-size:2.1rem; }
}