/* ═══════════════════════════════════════════════════
   service-page.css — styles partagés pages de service
   ═══════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────── */
.sp-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-20);
  overflow: hidden;
}
.sp-hero__bg {
  position: absolute;
  top: -20%; right: -10%;
  width: 55vw; max-width: 800px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--color-yellow-light) 0%, transparent 65%);
  opacity: .6;
  pointer-events: none;
}
.sp-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.sp-breadcrumb {
  display: inline-block;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-gray-400);
  margin-bottom: var(--space-5);
  transition: color var(--duration-fast);
}
.sp-breadcrumb:hover { color: var(--color-yellow-dark); }
.sp-hero__text h1  { margin-bottom: var(--space-5); }
.sp-hero__text > p { font-size: var(--text-lg); max-width: 480px; margin-bottom: var(--space-8); }
.sp-hero__cta      { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); }
.sp-hero__stats {
  display: flex; align-items: center; gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(0,0,0,.08);
}
.sp-stat           { display: flex; flex-direction: column; gap: 2px; }
.sp-stat strong    { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; color: var(--color-black); letter-spacing: -0.03em; }
.sp-stat span      { font-size: var(--text-xs); color: var(--color-gray-400); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.sp-stat__sep      { width: 1px; height: 36px; background: rgba(0,0,0,.1); }

/* Hero visual */
.sp-hero__visual   { position: relative; }
.sp-hero__img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  border: 2px dashed #D0D0CC;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 4rem;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-gray-400);
}

/* ── WHY ───────────────────────────────────────── */
.sp-why           { background: var(--color-gray-100); }
.sp-why__grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.sp-why__card     { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); border: 1px solid rgba(0,0,0,.05); transition: transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
.sp-why__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sp-why__icon     { font-size: 1.8rem; margin-bottom: var(--space-4); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--color-yellow-light); border-radius: var(--radius-md); }
.sp-why__card h3  { font-size: var(--text-base); margin-bottom: var(--space-3); }
.sp-why__card p   { font-size: var(--text-sm); }

/* ── PACKS ─────────────────────────────────────── */
.sp-packs         { background: var(--color-bg); }
.sp-packs__grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
.sp-pack          { background: var(--color-white-pure); border-radius: var(--radius-lg); border: 1.5px solid rgba(0,0,0,.08); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); position: relative; transition: transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
.sp-pack:hover    { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sp-pack--featured { border-color: var(--color-yellow); box-shadow: 0 0 0 4px rgba(245,180,0,.12), var(--shadow-md); transform: translateY(-8px); }
.sp-pack--featured:hover { transform: translateY(-12px); box-shadow: 0 0 0 4px rgba(245,180,0,.2), var(--shadow-xl); }
.sp-pack__badge   { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--color-yellow); color: var(--color-black); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); white-space: nowrap; box-shadow: var(--shadow-md); }
.sp-pack__label   { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-yellow-dark); }
.sp-pack__desc    { font-size: var(--text-sm); color: var(--color-gray-700); margin-top: var(--space-2); }
.sp-pack__price   { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(0,0,0,.07); }
.sp-pack__from    { font-size: var(--text-xs); color: var(--color-gray-400); }
.sp-pack__price strong { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 900; color: var(--color-black); letter-spacing: -0.04em; }
.sp-pack__ht      { font-size: var(--text-xs); color: var(--color-gray-400); }
.sp-pack__features { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.sp-pack__features li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-dark); line-height: 1.5; }
.sp-feat--off     { opacity: .35; }
.sp-check         { color: var(--color-yellow-dark); font-weight: 900; flex-shrink: 0; margin-top: 1px; }
.sp-cross         { color: var(--color-gray-400); flex-shrink: 0; margin-top: 1px; }
.sp-tag-tech      { display: inline-block; background: var(--color-yellow-light); color: var(--color-yellow-dark); font-size: var(--text-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); margin: 0 2px; }
.sp-pack__btn     { width: 100%; justify-content: center; margin-top: auto; }
.sp-packs__note   { text-align: center; margin-top: var(--space-10); font-size: var(--text-sm); color: var(--color-gray-700); }
.sp-packs__note a { color: var(--color-yellow-dark); font-weight: 700; text-decoration: underline; }

/* ── COMPARE ───────────────────────────────────── */
.sp-compare          { background: var(--color-gray-100); }
.sp-compare__grid    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); max-width: 860px; margin-inline: auto; }
.sp-compare__card    { background: var(--color-white-pure); border-radius: var(--radius-lg); padding: var(--space-8); border: 1.5px solid rgba(0,0,0,.07); transition: box-shadow var(--duration-base); }
.sp-compare__card:hover { box-shadow: var(--shadow-lg); }
.sp-compare__head    { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(0,0,0,.07); }
.sp-compare__icon    { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
.sp-compare__icon--a { background: var(--color-yellow); color: var(--color-black); }
.sp-compare__icon--b { background: var(--color-black); color: var(--color-yellow); font-size: var(--text-xs); letter-spacing: -1px; }
.sp-compare__icon--wp   { background: #1d7baa; color: #fff; }
.sp-compare__icon--code { background: var(--color-black); color: var(--color-yellow); font-size: var(--text-xs); }
.sp-compare__list    { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.sp-compare__list li { font-size: var(--text-sm); }
.sp-compare__list .pro { color: var(--color-dark); }
.sp-compare__list .con { color: var(--color-gray-400); }
.sp-compare__ideal   { font-size: var(--text-xs); font-weight: 700; color: var(--color-yellow-dark); background: var(--color-yellow-light); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); line-height: 1.5; }

/* ── PROCESS ───────────────────────────────────── */
.sp-process          { background: var(--color-bg); }
.sp-process__steps   { display: flex; align-items: flex-start; gap: var(--space-4); }
.sp-step             { flex: 1; background: var(--color-white-pure); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); border: 1px solid rgba(0,0,0,.06); transition: box-shadow var(--duration-base), transform var(--duration-base); }
.sp-step:hover       { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sp-step__num        { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 900; color: var(--color-yellow); letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--space-4); }
.sp-step h3          { font-size: var(--text-base); margin-bottom: var(--space-3); }
.sp-step p           { font-size: var(--text-sm); }
.sp-step__arrow      { font-size: var(--text-xl); color: var(--color-gray-400); padding-top: var(--space-8); flex-shrink: 0; }

/* ── FAQ ───────────────────────────────────────── */
.sp-faq              { background: var(--color-gray-100); }
.sp-faq__list        { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.sp-faq__item        { background: var(--color-white-pure); border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,.07); overflow: hidden; transition: box-shadow var(--duration-fast); }
.sp-faq__item[open]  { box-shadow: var(--shadow-md); }
.sp-faq__item summary { padding: var(--space-5) var(--space-6); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); color: var(--color-black); }
.sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-faq__item summary::after { content: '+'; font-size: var(--text-xl); font-weight: 300; color: var(--color-yellow-dark); transition: transform var(--duration-base) var(--ease-default); flex-shrink: 0; }
.sp-faq__item[open] summary::after { transform: rotate(45deg); }
.sp-faq__item p      { padding: 0 var(--space-6) var(--space-5); font-size: var(--text-sm); line-height: 1.75; }

/* ── CONTACT ───────────────────────────────────── */
.sp-contact             { background: var(--color-bg); }
.sp-contact__text h2    { margin-bottom: var(--space-5); }
.sp-contact__text > p   { margin-bottom: var(--space-8); }
.sp-contact__reassure   { display: flex; flex-direction: column; gap: var(--space-3); }
.sp-contact__reassure li { font-size: var(--text-sm); font-weight: 600; color: var(--color-dark); }

/* ── MAINTENANCE / ABONNEMENTS ─────────────────── */
.sp-maintenance  { background: var(--color-bg); }
.sp-subs__grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); max-width: 760px; margin-inline: auto; align-items: start; }
.sp-subs__note   { text-align: center; margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-gray-400); }

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 599px) {
  .sp-hero__inner    { grid-template-columns: 1fr; }
  .sp-hero__visual   { display: none; }
  .sp-why__grid      { grid-template-columns: 1fr; }
  .sp-packs__grid    { grid-template-columns: 1fr; }
  .sp-pack--featured { transform: none; }
  .sp-compare__grid  { grid-template-columns: 1fr; }
  .sp-process__steps { flex-direction: column; }
  .sp-step__arrow    { display: none; }
  .sp-hero__stats    { flex-wrap: wrap; gap: var(--space-4); }
  .sp-subs__grid     { grid-template-columns: 1fr; }

  .sp-contact .contact__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .sp-contact__text          { padding-bottom: var(--space-2); }
  .sp-contact__reassure      { gap: var(--space-4); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .sp-hero__inner    { grid-template-columns: 1fr; }
  .sp-hero__visual   { display: none; }
  .sp-why__grid      { grid-template-columns: repeat(2, 1fr); }
  .sp-packs__grid    { grid-template-columns: 1fr; max-width: 500px; margin-inline: auto; }
  .sp-pack--featured { transform: none; }
  .sp-process__steps { flex-wrap: wrap; }
  .sp-step__arrow    { display: none; }
  .sp-step           { flex: 0 0 calc(50% - var(--space-4)); }

  .sp-contact .contact__grid { grid-template-columns: 1fr; gap: var(--space-12); max-width: 640px; margin-inline: auto; }
  .sp-contact__text          { padding-bottom: var(--space-2); }
}

/* ── BOTS & MESSAGERIE ─────────────────────────── */
.sp-bots__channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.sp-bot-channel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}
.sp-bot-channel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-yellow);
}
.sp-bot-channel__icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-yellow-light);
  border-radius: var(--radius-md);
}
.sp-bot-channel strong {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-black);
}
.sp-bot-channel p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-gray-700);
}
.sp-bots__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  background: var(--color-white);
  border: 2px solid var(--color-yellow);
  border-radius: var(--radius-lg);
  max-width: 600px;
  margin-inline: auto;
}
.sp-bots__price {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sp-bots__price span {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-black);
}
.sp-bots__price em {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

@media (max-width: 599px) {
  .sp-bots__channels { grid-template-columns: 1fr; }
  .sp-bots__cta      { flex-direction: column; text-align: center; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .sp-bots__channels { grid-template-columns: repeat(2, 1fr); }
}