/* ═══════════════════════════════════════════════════
   service-vitrine-add.css
   CSS à intégrer dans ton fichier de base
   ═══════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────── */
.sv-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-20);
  overflow: hidden;
}
.sv-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;
}
.sv-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.sv-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);
}
.sv-breadcrumb:hover { color: var(--color-yellow-dark); }
.sv-hero__text h1    { margin-bottom: var(--space-5); }
.sv-hero__text > p   { font-size: var(--text-lg); max-width: 480px; margin-bottom: var(--space-8); }
.sv-hero__cta        { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); }
.sv-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);
}
.sv-stat             { display: flex; flex-direction: column; gap: 2px; }
.sv-stat strong      { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; color: var(--color-black); letter-spacing: -0.03em; }
.sv-stat span        { font-size: var(--text-xs); color: var(--color-gray-400); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.sv-stat__sep        { width: 1px; height: 36px; background: rgba(0,0,0,.1); }

/* Browser mockup */
.sv-mockup           { background: var(--color-white-pure); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; border: 1px solid rgba(0,0,0,.07); }
.sv-mockup__bar      { background: var(--color-gray-100); padding: var(--space-3) var(--space-4); display: flex; gap: 6px; align-items: center; border-bottom: 1px solid rgba(0,0,0,.06); }
.sv-mockup__bar span { width: 10px; height: 10px; border-radius: 50%; }
.sv-mockup__bar span:nth-child(1) { background: #ff5f57; }
.sv-mockup__bar span:nth-child(2) { background: #febc2e; }
.sv-mockup__bar span:nth-child(3) { background: #28c840; }
.sv-mockup__screen   { position: relative; aspect-ratio: 16/10; background: var(--color-gray-100); overflow: hidden; }
.sv-mockup__screen img { width: 100%; height: 100%; object-fit: cover; }

/* ── WHY ───────────────────────────────────────── */
.sv-why              { background: var(--color-gray-100); }
.sv-why__grid        { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.sv-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); }
.sv-why__card:hover  { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sv-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); }
.sv-why__card h3     { font-size: var(--text-base); margin-bottom: var(--space-3); }
.sv-why__card p      { font-size: var(--text-sm); }

/* ── PACKS ─────────────────────────────────────── */
.sv-packs            { background: var(--color-bg); }
.sv-packs__grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
.sv-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); }
.sv-pack:hover       { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sv-pack--featured   { border-color: var(--color-yellow); box-shadow: 0 0 0 4px rgba(245,180,0,.12), var(--shadow-md); transform: translateY(-8px); }
.sv-pack--featured:hover { transform: translateY(-12px); box-shadow: 0 0 0 4px rgba(245,180,0,.2), var(--shadow-xl); }
.sv-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); }
.sv-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); }
.sv-pack__desc       { font-size: var(--text-sm); color: var(--color-gray-700); margin-top: var(--space-2); }
.sv-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); }
.sv-pack__from       { font-size: var(--text-xs); color: var(--color-gray-400); }
.sv-pack__price strong { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 900; color: var(--color-black); letter-spacing: -0.04em; }
.sv-pack__ht         { font-size: var(--text-xs); color: var(--color-gray-400); }
.sv-pack__features   { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.sv-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; }
.sv-feat--off        { opacity: .35; }
.sv-check            { color: var(--color-yellow-dark); font-weight: 900; flex-shrink: 0; margin-top: 1px; }
.sv-cross            { color: var(--color-gray-400); flex-shrink: 0; margin-top: 1px; }
.sv-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; }
.sv-pack__btn        { width: 100%; justify-content: center; margin-top: auto; }
.sv-packs__note      { text-align: center; margin-top: var(--space-10); font-size: var(--text-sm); color: var(--color-gray-700); }
.sv-packs__note a    { color: var(--color-yellow-dark); font-weight: 700; text-decoration: underline; }

/* ── COMPARE ───────────────────────────────────── */
.sv-compare          { background: var(--color-gray-100); }
.sv-compare__grid    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); max-width: 860px; margin-inline: auto; }
.sv-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); }
.sv-compare__card:hover { box-shadow: var(--shadow-lg); }
.sv-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); }
.sv-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; }
.sv-compare__icon--wp   { background: #1d7baa; color: #fff; font-size: var(--text-lg); }
.sv-compare__icon--code { background: var(--color-black); color: var(--color-yellow); font-size: var(--text-xs); letter-spacing: -1px; }
.sv-compare__list    { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.sv-compare__list li { font-size: var(--text-sm); }
.sv-compare__list .pro { color: var(--color-dark); }
.sv-compare__list .con { color: var(--color-gray-400); }
.sv-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 ───────────────────────────────────── */
.sv-process          { background: var(--color-bg); }
.sv-process__steps   { display: flex; align-items: flex-start; gap: var(--space-4); }
.sv-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); }
.sv-step:hover       { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sv-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); }
.sv-step h3          { font-size: var(--text-base); margin-bottom: var(--space-3); }
.sv-step p           { font-size: var(--text-sm); }
.sv-step__arrow      { font-size: var(--text-xl); color: var(--color-gray-400); padding-top: var(--space-8); flex-shrink: 0; }

/* ── FAQ ───────────────────────────────────────── */
.sv-faq              { background: var(--color-gray-100); }
.sv-faq__list        { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.sv-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); }
.sv-faq__item[open]  { box-shadow: var(--shadow-md); }
.sv-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); }
.sv-faq__item summary::-webkit-details-marker { display: none; }
.sv-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; }
.sv-faq__item[open] summary::after { transform: rotate(45deg); }
.sv-faq__item p      { padding: 0 var(--space-6) var(--space-5); font-size: var(--text-sm); line-height: 1.75; }

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

/* ── MAINTENANCE / ABONNEMENTS ─────────────────── */
.sv-maintenance  { background: var(--color-bg); }
.sv-subs__grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); max-width: 760px; margin-inline: auto; align-items: start; }
.sv-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) {
  .sv-hero__inner    { grid-template-columns: 1fr; }
  .sv-hero__visual   { display: none; }
  .sv-why__grid      { grid-template-columns: 1fr; }
  .sv-packs__grid    { grid-template-columns: 1fr; }
  .sv-pack--featured { transform: none; }
  .sv-compare__grid  { grid-template-columns: 1fr; }
  .sv-process__steps { flex-direction: column; }
  .sv-step__arrow    { display: none; }
  .sv-hero__stats    { flex-wrap: wrap; gap: var(--space-4); }
  .sv-subs__grid     { grid-template-columns: 1fr; }

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

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