/* ============================================================
   SERVICES.CSS — Service R&D et Service Administratif
   Layout : organigramme fonctionnel + missions + équipe
   ============================================================ */
.ur-color-amelioration  { --ur-accent: #2D5A3D; --ur-light: #8FC49E; --ur-pale: #EEF5F1 }
.ur-color-agronomie     { --ur-accent: #2E5E6A; --ur-light: #7BC4D0; --ur-pale: #EDF6F8 }
.ur-color-ressources    { --ur-accent: #5A4220; --ur-light: #C4A06E; --ur-pale: #F8F1E8 }
.ur-color-protection    { --ur-accent: #5A2020; --ur-light: #C47070; --ur-pale: #F8ECEC }

/* ── HERO SERVICE ─────────────────────────────────────────── */
.service-hero {
  border-bottom: 2px solid var(--slate-200);
  padding: var(--s10) 0 var(--s8);
  position: relative;
  overflow: hidden;
}
.service-hero.ur-color-amelioration {
    --ur-accent: #2b7a06;
    --ur-light: #6ee28f;
    --ur-pale: #EEF5F1;
}
.service-hero.ur-color-amelioration_2 {
    --ur-accent: #006b66;
    --ur-light: #cffa6b;
    --ur-pale: #EEF5F1;
}


.service-hero .ur-hero-bg{
  content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, var(--ur-accent) 0%, color-mix(in srgb, var(--ur-accent) 70%, #000) 100%);
}


.service-hero .ur-hero-bg::before{    
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.034) 0, rgba(255, 255, 255, 0.055) 1px, transparent 1px, transparent 40px);
}
.service-hero .ur-hero-bg::after {
    content: '';
    position: absolute;
    right: -10%;
    top: -40%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 70px solid rgba(255, 255, 255, .05);
    pointer-events: none; 
  }


.service-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s8);
}

.service-hero-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--green-900), var(--green-800));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(30,61,42,.2);
}

.service-hero-text {}

.service-hero-text .sec-eyebrow { margin-bottom: var(--s2) }

.service-hero-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: var(--s3);
}

.service-hero-desc {
  font-size: var(--t-md);
  color: var(--parchment);
  font-weight: 300;
  max-width: 640px;
  line-height: 1.7;
  margin: 0;
}

/* ── MISSIONS ─────────────────────────────────────────────── */
.service-missions {
  background: var(--parchment);
  padding: var(--s12) 0;
  border-bottom: 1px solid var(--slate-200);
}

.service-missions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: var(--s8);
}

.mission-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  position: relative;
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}

.mission-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: #c6a640;
  transition: background var(--dur) var(--ease);
}

.mission-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: var(--slate-300);
}

.mission-card:hover::before { background: #1e3d2a }

.mission-num {
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-weight: 700;
  color: var(--slate-100);
  line-height: 1;
  margin-bottom: var(--s2);
  transition: color var(--dur) var(--ease);
}

.mission-card:hover .mission-num { color: var(--gold-500) }

.mission-title {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.mission-desc {
  font-size: var(--t-sm);
  color: var(--slate-500);
  line-height: 1.68;
  margin: 0;
}

/* ── ÉQUIPE DU SERVICE ────────────────────────────────────── */
.service-team {
  background: var(--white);
  padding: var(--s12) 0;
  border-bottom: 1px solid var(--slate-200);
}

.service-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: var(--s8);
}

.service-member {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--parchment);
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
  transition: all var(--dur) var(--ease);
}

.service-member:hover {
  background: var(--white);
  box-shadow: var(--sh-sm);
  border-color: var(--slate-300);
}

.service-member-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 700;
  color: #c6a64c;
  flex-shrink: 0;
}

.service-member-name {
  font-family: var(--serif);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.service-member-role {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--gold-600);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ── ACTIVITÉS CLÉS ───────────────────────────────────────── */
.service-activities {
  background: var(--parchment-2);
  padding: var(--s10) 0;
}

.service-act-list {
  margin-top: var(--s8);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--slate-200);
  border-radius: var(--r);
  overflow: hidden;
}

.service-act-item {
  background: var(--white);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: var(--s4);
  transition: background var(--dur) var(--ease);
}

.service-act-item:hover { background: var(--green-50) }

.service-act-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.service-act-title {
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.service-act-desc {
  font-size: var(--t-sm);
  color: var(--slate-500);
  line-height: 1.6;
  margin: 0;
}
.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #1E3D2A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 5px;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .service-missions-grid { grid-template-columns: repeat(2, 1fr) }
  .service-team-grid      { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 768px) {
  .service-hero .container { flex-direction: column; align-items: flex-start }
  .service-missions-grid   { grid-template-columns: 1fr }
  .service-team-grid       { grid-template-columns: 1fr }
}