/**
 * Étapes Print — Pages « Nos services »
 * Mêmes couleurs que la fiche produit, le panier et l'espace client.
 */

.ep-srv {
  max-width: 1240px;
  margin: 0 auto;
  --s-dark: #3f4630;
  --s-accent: #6a7350;
  --s-accent-bg: #f2f3ec;
  --s-sand: #faf7f2;
  --s-line: #e4e4e0;
  --s-text: #1c1f16;
  --s-muted: #6b6b6b;
  --s-buy: #2aaf52;
  color: var(--s-text);
  font-size: 16px;
  line-height: 1.6;
}

/* Le titre de page d'Avada fait doublon avec notre en-tête. */
.ep-srv-page .fusion-page-title-bar,
.ep-srv-page .fusion-tb-page-title-bar { display: none !important; }
.ep-srv-page #main { padding-top: 24px !important; padding-bottom: 56px !important; }
.ep-srv-page .post-content > .fusion-fullwidth { padding: 0 !important; }

.ep-srv p { margin: 0 0 12px; }
.ep-srv h1, .ep-srv h2, .ep-srv h3 { color: var(--s-text) !important; letter-spacing: -.01em; }
.ep-srv a { color: var(--s-dark); }

.ep-srv__ico { width: 22px; height: 22px; flex: 0 0 auto; }

.ep-srv-eyebrow {
  margin: 0 0 8px !important;
  color: var(--s-accent) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- En-tête ---------- */

.ep-srv-hero {
  display: grid;
  gap: 36px;
  align-items: center;
  padding: 48px 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--s-sand) 0%, var(--s-accent-bg) 100%);
}
.ep-srv-hero.has-img { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.ep-srv-hero__t {
  margin: 0 0 14px !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}
.ep-srv-hero__lead { max-width: 640px; font-size: 18px; color: #3a3d33; }
.ep-srv-hero__img img { display: block; width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 40px rgba(28, 31, 22, .12); }

/* ---------- Boutons ---------- */

.ep-srv-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0 !important; }
.ep-srv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none !important;
  transition: transform .15s, background .15s, border-color .15s;
}
.ep-srv-btn:hover { transform: translateY(-1px); }
.ep-srv-btn .ep-srv__ico { width: 18px; height: 18px; }
.ep-srv-btn--main { background: var(--s-buy); color: #fff !important; }
.ep-srv-btn--main:hover { background: #229345; }
.ep-srv-btn--ghost { background: #fff; border-color: var(--s-line); color: var(--s-text) !important; }
.ep-srv-btn--ghost:hover { border-color: var(--s-accent); }
.ep-srv-btn--light { background: #fff; color: var(--s-dark) !important; }
.ep-srv-btn--outline { border-color: rgba(255, 255, 255, .6); color: #fff !important; }
.ep-srv-btn--outline:hover { border-color: #fff; }

/* ---------- Preuves (bandeau de chiffres) ---------- */

.ep-srv-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.ep-srv-proof li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  margin: 0 !important;
  padding: 16px 18px;
  border: 1px solid var(--s-line);
  border-radius: 14px;
  background: #fff;
}
.ep-srv-proof .ep-srv__ico { grid-row: span 2; width: 30px; height: 30px; color: var(--s-accent); }
.ep-srv-proof strong { font-size: 16px; line-height: 1.25; }
.ep-srv-proof span { font-size: 13px; color: var(--s-muted); line-height: 1.3; }

/* ---------- Sections ---------- */

.ep-srv-sec { margin: 56px 0 0; }
.ep-srv-sec--sand { padding: 44px 40px; border-radius: 24px; background: var(--s-sand); }
.ep-srv-head { max-width: 720px; margin: 0 0 26px; }
.ep-srv-head h2 { margin: 0 0 8px !important; font-size: clamp(24px, 2.6vw, 32px) !important; line-height: 1.2 !important; font-weight: 700 !important; }
.ep-srv-head__lead { color: var(--s-muted); font-size: 17px; }

/* Cartes */
.ep-srv-cards { display: grid; gap: 16px; }
.ep-srv-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ep-srv-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ep-srv-card {
  padding: 24px;
  border: 1px solid var(--s-line);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
}
.ep-srv-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(28, 31, 22, .08); }
.ep-srv-card .ep-srv__ico {
  width: 44px; height: 44px; padding: 10px; margin-bottom: 14px;
  border-radius: 12px; background: var(--s-accent-bg); color: var(--s-dark);
}
.ep-srv-card h3 { margin: 0 0 6px !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.ep-srv-card p { margin: 0 !important; color: #4a4d44; font-size: 15px; }

/* Étapes */
.ep-srv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: none; }
.ep-srv-steps li { position: relative; margin: 0 !important; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--s-line); }
.ep-srv-steps__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 12px;
  border-radius: 50%; background: var(--s-dark); color: #fff; font-weight: 700;
}
.ep-srv-steps h3 { margin: 0 0 6px !important; font-size: 17px !important; font-weight: 700 !important; }
.ep-srv-steps p { margin: 0 !important; color: #4a4d44; font-size: 15px; }

/* Texte + image */
.ep-srv-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.ep-srv-split h2 { margin: 0 0 12px !important; font-size: clamp(24px, 2.6vw, 32px) !important; line-height: 1.2 !important; font-weight: 700 !important; }
.ep-srv-split__img img { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 18px; }
.ep-srv-split__img.is-illu img { max-height: 400px; object-fit: contain; }

/* Listes cochées */
.ep-srv-list { margin: 10px 0 16px !important; padding: 0 !important; list-style: none; }
.ep-srv-list li { position: relative; margin: 0 0 8px !important; padding-left: 28px; }
.ep-srv-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--s-accent-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f4630' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Formules */
.ep-srv-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ep-srv-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--s-line); border-radius: 18px; background: #fff; }
.ep-srv-plan.is-best { border: 2px solid var(--s-dark); box-shadow: 0 18px 36px rgba(28, 31, 22, .1); }
.ep-srv-plan__badge { position: absolute; top: -13px; left: 24px; margin: 0 !important; padding: 3px 12px; border-radius: 999px; background: var(--s-dark); color: #fff; font-size: 12px; font-weight: 700; }
.ep-srv-plan__name { margin: 0 !important; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--s-accent); }
.ep-srv-plan__price { margin: 6px 0 0 !important; font-size: 34px; font-weight: 700; line-height: 1.1; }
.ep-srv-plan__price small { font-size: 15px; font-weight: 400; color: var(--s-muted); }
.ep-srv-plan__setup { color: var(--s-muted); font-size: 14px; }
.ep-srv-plan .ep-srv-list { flex: 1; font-size: 15px; }
.ep-srv-plan .ep-srv-btn { justify-content: center; }

/* Cashback */
.ep-srv-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ep-srv-tier { padding: 26px 18px; border-radius: 18px; text-align: center; color: #fff; }
.ep-srv-tier--0 { background: #c9a27e; }
.ep-srv-tier--1 { background: #8f9b6c; }
.ep-srv-tier--2 { background: #6a7350; }
.ep-srv-tier--3 { background: #3f4630; }
.ep-srv-tier__pct { margin: 0 !important; font-size: 40px; font-weight: 700; line-height: 1.1; }
.ep-srv-tier__from { margin: 6px 0 0 !important; font-size: 14px; opacity: .92; }
.ep-srv-note { margin-top: 16px !important; padding: 14px 18px; border-radius: 12px; background: var(--s-accent-bg); }
.ep-srv-sim { max-width: 640px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--s-line); }
.ep-srv-sim label { font-weight: 700; }
.ep-srv-sim__row { display: flex; align-items: center; gap: 16px; margin: 10px 0 14px; }
.ep-srv-sim input[type="range"] { flex: 1; accent-color: var(--s-dark); }
.ep-srv-sim output { min-width: 90px; font-size: 20px; font-weight: 700; text-align: right; }
.ep-srv-sim__res { margin: 0 !important; font-size: 17px; }

/* Devis / contact : formulaire + colonne */
.ep-srv-devis { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.ep-srv-devis__form { padding: 28px; border: 1px solid var(--s-line); border-radius: 18px; background: #fff; }
.ep-srv-form__t { margin: 0 0 16px !important; font-size: 22px !important; font-weight: 700 !important; }
.ep-srv-devis__aside { display: grid; gap: 14px; }
.ep-srv-box { padding: 20px 22px; border: 1px solid var(--s-line); border-radius: 16px; background: var(--s-sand); }
.ep-srv-box--green { background: var(--s-accent-bg); }
.ep-srv-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font-size: 17px !important; font-weight: 700 !important; }
.ep-srv-box a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ep-srv-muted { color: var(--s-muted); font-size: 14px; }
.ep-srv-form__box { max-width: 820px; padding: 28px; border: 1px solid var(--s-line); border-radius: 18px; background: #fff; }

.ep-srv-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.ep-srv-contact__card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px; border: 1px solid var(--s-line); border-radius: 16px; background: #fff;
  color: var(--s-text) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s;
}
.ep-srv-contact__card:hover { border-color: var(--s-accent); box-shadow: 0 12px 26px rgba(28, 31, 22, .08); }
.ep-srv-contact__card .ep-srv__ico { width: 28px; height: 28px; margin-bottom: 6px; color: var(--s-accent); }
.ep-srv-contact__card strong { font-size: 17px; }
.ep-srv-contact__card span { color: var(--s-muted); font-size: 14px; }

/* Bandeau final */
.ep-srv-final {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 56px; padding: 36px 40px; border-radius: 24px; background: var(--s-dark); color: #fff;
}
.ep-srv-final h2 { margin: 0 0 6px !important; color: #fff !important; font-size: 26px !important; font-weight: 700 !important; }
.ep-srv-final p { margin: 0 !important; color: rgba(255, 255, 255, .85); }
.ep-srv-final .ep-srv-btns { margin: 0 !important; }

/* ---------- Tablette et téléphone ---------- */

@media (max-width: 1024px) {
  .ep-srv-cards--3, .ep-srv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-srv-proof, .ep-srv-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ep-srv { font-size: 15px; }
  .ep-srv-hero, .ep-srv-hero.has-img { grid-template-columns: 1fr; padding: 28px 20px; border-radius: 18px; gap: 20px; }
  .ep-srv-hero__lead { font-size: 16px; }
  .ep-srv-btn { flex: 1 1 auto; justify-content: center; }
  .ep-srv-sec { margin-top: 40px; }
  .ep-srv-sec--sand { padding: 28px 18px; border-radius: 18px; }
  .ep-srv-cards--3, .ep-srv-cards--2, .ep-srv-plans, .ep-srv-split, .ep-srv-devis, .ep-srv-contact { grid-template-columns: 1fr; }
  .ep-srv-split__img { order: -1; }
  .ep-srv-devis__form, .ep-srv-form__box { padding: 18px; }
  .ep-srv-final { padding: 28px 20px; border-radius: 18px; }
  .ep-srv-plan.is-best { margin-top: 10px; }

  /* Chiffres : une ligne chacun. Cartes : icône à gauche, plus compactes. */
  .ep-srv-proof { grid-template-columns: 1fr; gap: 8px; }
  .ep-srv-proof li { padding: 12px 14px; }
  .ep-srv-proof .ep-srv__ico { width: 26px; height: 26px; }
  .ep-srv-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; }
  .ep-srv-card .ep-srv__ico { grid-row: span 2; width: 40px; height: 40px; padding: 9px; margin: 0; }
  .ep-srv-card h3 { font-size: 16px !important; }
  .ep-srv-card p { font-size: 14px; }
  .ep-srv-steps li { padding: 16px; }
  .ep-srv-head h2, .ep-srv-split h2 { font-size: 22px !important; }
}

/* FAQ d'une page de service (atelier partenaire des plateformes, 29/09/2026) */
.ep-srv-faq h2 { margin: 0 0 12px; }
.ep-srv-faq details { border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 12px 0; }
.ep-srv-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.ep-srv-faq summary::-webkit-details-marker { display: none; }
.ep-srv-faq summary::after { content: "+"; float: right; font-weight: 400; }
.ep-srv-faq details[open] summary::after { content: "–"; }
.ep-srv-faq details p { margin: 8px 0 0; line-height: 1.55; }