/* ═══════════════════════════════════════════════════════════════════
   STYLES PROPRES A SERVICES.html
   ───────────────────────────────────────────────────────────────────
   Ces regles etaient ecrites dans la page. Sorties ici pour etre
   trouvables : 17 Ko de CSS noye dans du HTML ne se relit pas.

   ⚠️ LA POSITION DU <link> DANS LA PAGE EST SIGNIFIANTE. Cette feuille
   est chargee AVANT mobile.css, exactement comme l etaient les blocs
   d origine. Deplacer le lien change qui gagne dans la cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── bloc 1/1 de services.html ── */
/* ══════════════════════════════════════
       SCROLL ANIMATIONS (même système que l'accueil)
    ══════════════════════════════════════ */
    @media (prefers-reduced-motion: no-preference) {
      [data-sa] {
        opacity: 0;
        transition:
          opacity .85s cubic-bezier(.22, 1, .36, 1),
          transform .85s cubic-bezier(.22, 1, .36, 1),
          filter .85s cubic-bezier(.22, 1, .36, 1);
        transition-delay: var(--sa-d, 0s);
        will-change: opacity, transform;
      }
      [data-sa="up"]    { transform: translateY(42px); }
      [data-sa="down"]  { transform: translateY(-30px); }
      [data-sa="left"]  { transform: translateX(-56px); }
      [data-sa="right"] { transform: translateX(56px); }
      [data-sa="zoom"]  { transform: scale(.9); }
      [data-sa="blur"]  { filter: blur(10px); transform: translateY(24px); }
      [data-sa].sa-in {
        opacity: 1;
        transform: none;
        filter: none;
      }
    }

    body { background: #fff; }

    /* ══════════════════════════════════════
       HERO
    ══════════════════════════════════════ */
    .sx-hero-wrap {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 55% 45% at 50% -5%, rgba(180, 24, 36,.07) 0%, transparent 70%),
        #fff;
      padding: 112px 0 0;
    }
    .sx-hero-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(36, 38, 40,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 38, 40,.035) 1px, transparent 1px);
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 0%, rgba(0,0,0,.7) 0%, transparent 75%);
      mask-image: radial-gradient(ellipse 75% 80% at 50% 0%, rgba(0,0,0,.7) 0%, transparent 75%);
    }
    .sx-hero {
      text-align: center;
      max-width: 760px;
      margin-inline: auto;
      position: relative;
    }
    .sx-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      border: 1px solid rgba(180, 24, 36,.22);
      box-shadow: 0 2px 12px rgba(180, 24, 36,.08);
      color: #8d111a;
      padding: 8px 22px;
      border-radius: 4px;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .sx-hero__eyebrow::before {
      content: '';
      width: 7px; height: 7px;
      background: #d72331;
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(215, 35, 49,.25);
      flex-shrink: 0;
    }
    .sx-hero h1 {
      font-size: clamp(2.1rem, 4.2vw, 3.2rem);
      font-weight: 600;
      color: #242628;
      line-height: 1.08;
      letter-spacing: -.03em;
      margin-bottom: 16px;
    }
    .sx-hero h1 em {
      font-style: normal;
      background: linear-gradient(135deg, #b41824 0%, #da6c75 60%, #8d111a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .sx-hero__sub {
      font-size: 1.05rem;
      color: #6e6b66;
      line-height: 1.75;
      max-width: 590px;
      margin: 0 auto;
    }

    /* Stats — ligne minimale, sans cadre */
    .sx-stats {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(24px, 4vw, 52px);
      margin: 44px auto 0;
      padding-bottom: 0;
      position: relative;
      flex-wrap: wrap;
    }
    .sx-stat { text-align: center; }
    .sx-stat__num {
      display: block;
      font-size: 2.1rem;
      font-weight: 600;
      color: #242628;
      line-height: 1;
      margin-bottom: 7px;
      letter-spacing: -.03em;
    }
    .sx-stat__num em { font-style: normal; color: #b41824; }
    .sx-stat__label {
      font-size: .7rem;
      font-weight: 600;
      color: #a6a19a;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .sx-stat__sep { width: 1px; height: 40px; background: #e6e1d8; }
    @media (max-width: 640px) {
      .sx-stats { gap: 20px; }
      .sx-stat__sep { display: none; }
      .sx-stat { min-width: 38%; }
    }

    /* ══════════════════════════════════════
       SERVICES — onglets interactifs
    ══════════════════════════════════════ */
    .sxtab-section {
      padding: 56px 0 80px;
      background: #faf8f5;
      position: relative;
      overflow: hidden;
    }
    .sxtab-section::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(180, 24, 36,.04) 0%, transparent 65%);
    }
    .sxtab-head { text-align: center; margin-bottom: 30px; position: relative; z-index: 1; }
    .sxtab-head .eyebrow { justify-content: center; }
    .sxtab-head h2 { margin-bottom: 14px; }
    .sxtab-head p { font-size: .98rem; color: #6e6b66; max-width: 480px; margin: 0 auto; line-height: 1.7; }

    /* Cartes — 3 sur la même ligne, section élargie */
    .sxtab-section .container { max-width: 1340px; }
    /* UNE SEULE RANGÉE de quatre. C'est le point de toute cette page : on vient
       ici pour COMPARER, et une grille 2×2 rendait la comparaison impossible —
       il fallait 1 493 px, soit deux écrans, pour voir les quatre offres, dont
       jamais plus de deux à la fois.
       Le prix à payer est la largeur : ~305 px par carte au lieu de 530. Tout
       ce qu'elles contiennent a donc été resserré en conséquence (visuel,
       marges, corps de texte, pied). */
    .sxc-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative;
      z-index: 1;
      max-width: 1320px;
      margin-inline: auto;
    }
    /* Sous 1120px quatre colonnes tombent à 250px et les listes se hachent :
       on repasse à deux, puis à une. */
    @media (max-width: 1120px) {
      .sxc-cards { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
    }
    .sxc-card {
      background: #fff;
      border: 1px solid #e6e1d8;
      border-radius: var(--r-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
    }
    .sxc-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 60px -12px rgba(180, 24, 36,.28), 0 12px 28px rgba(36, 38, 40,.10);
      border-color: rgba(180, 24, 36,.35);
    }

    /* Bandeau visuel avec l'image plein cadre */
    .sxc-card__header {
      position: relative;
      height: 140px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .sxc-card__header--web       { background: linear-gradient(140deg, #fbeff0 0%, #e3a0a5 48%, #b41824 100%); }
    .sxc-card__header--refonte   { background: linear-gradient(140deg, #242628 0%, #2f3134 48%, #b41824 115%); }
    .sxc-card__header--ecommerce { background: linear-gradient(140deg, #fff7ed 0%, #fdba74 48%, #c2410c 100%); }
    .sxc-card__header--resa      { background: linear-gradient(140deg, #fbeff0 0%, #8d111a 55%, #242628 118%); }

    /* La capture de l'application est POSÉE sur le dégradé au lieu de le
       recouvrir, contrairement aux photos des trois autres cartes. Deux
       raisons : c'est une interface claire, sur laquelle le numéro « 04 » en
       blanc deviendrait illisible ; et elle se lit alors comme un écran de
       produit plutôt que comme une photo d'ambiance — ce qu'elle est. */
    .sxc-card__shot {
      position: absolute;
      inset: 26px 26px -14px 26px;
      z-index: 1;
      border-radius: 9px 9px 0 0;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
      transition: transform .65s cubic-bezier(.22, 1, .36, 1);
    }
    .sxc-card:hover .sxc-card__shot { transform: translateY(-6px); }

    /* Le « 04 » est blanc : sur les trois autres cartes il se pose sur une
       photo sombre, ici sur une capture d'interface CLAIRE, et sa moitié
       gauche disparaissait. Un voile d'angle le rattache au dégradé sans
       rétrécir la capture — l'autre solution aurait été de la rogner pour
       dégager le coin, en perdant la moitié de ce qu'elle sert à montrer. */
    .sxc-card__header--resa::after {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 170px; height: 120px;
      z-index: 3;
      pointer-events: none;
      background: radial-gradient(115% 115% at 100% 0%, rgba(28, 20, 21, .62) 0%, rgba(28, 20, 21, .28) 45%, transparent 72%);
    }
    .sxc-card__header--resa .sxc-card__num { z-index: 4; }
    .sxc-card__shot img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Cadré en HAUT : le titre de l'étape et les premiers boutons sont ce
         qui rend la capture compréhensible. Centré, on ne verrait que le
         milieu du formulaire. */
      object-position: top center;
    }

    /* image — couvre tout le cadre + zoom au survol */
    .sxc-card__img {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transform: scale(1.03);
      transition: transform .65s cubic-bezier(.22, 1, .36, 1);
    }
    .sxc-card:hover .sxc-card__img { transform: scale(1.1); }

    /* voile dégradé pour la profondeur et la lisibilité du numéro */
    .sxc-card__header::after {
      content: '';
      position: absolute; inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(36, 38, 40,.12) 0%, transparent 30%, transparent 60%, rgba(36, 38, 40,.18) 100%);
    }

    /* reflet lumineux qui balaie l'image au survol */
    .sxc-card__header::before {
      content: '';
      position: absolute;
      top: 0; left: -80%;
      width: 55%; height: 100%;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
      transform: skewX(-18deg);
      transition: left .75s cubic-bezier(.22, 1, .36, 1);
    }
    .sxc-card:hover .sxc-card__header::before { left: 135%; }

    .sxc-card__num {
      position: absolute;
      top: 12px; right: 18px;
      z-index: 4;
      font-size: 3.4rem;
      font-weight: 600;
      color: rgba(255,255,255,.92);
      line-height: 1;
      letter-spacing: -.04em;
      user-select: none;
      text-shadow: 0 2px 12px rgba(0,0,0,.3);
      transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    }
    .sxc-card:hover .sxc-card__num { transform: scale(1.1); }

    /* Corps */
    .sxc-card__body {
      padding: 22px 22px 0;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .sxc-card__body h3 {
      font-size: 1.25rem;
      font-weight: 600;
      color: #242628;
      letter-spacing: -.015em;
      line-height: 1.25;
      margin: 0 0 10px;
    }
    .sxc-card__desc {
      font-size: .84rem;
      color: #6e6b66;
      line-height: 1.55;
      margin-bottom: 8px;
    }
    .sxc-card__for {
      font-size: .76rem;
      color: #a6a19a;
      line-height: 1.45;
      margin-bottom: 14px;
    }
    .sxc-card__for strong { color: #4c4b49; font-weight: 600; }
    .sxc-card__feats {
      list-style: none;
      margin: 0;
      padding: 14px 0 0;
      border-top: 1px solid #f0ede7;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }
    .sxc-card__feats li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: .82rem;
      font-weight: 500;
      color: #4c4b49;
      line-height: 1.4;
    }
    .sxc-card__feats li::before {
      content: '';
      width: 18px; height: 18px;
      flex-shrink: 0;
      margin-top: 1px;
      border-radius: 50%;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b41824' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat,
        #fbeff0;
    }

    /* Pied */
    .sxc-card__foot {
      padding: 16px 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .sxc-card__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 20px;
      border-radius: 999px;
      font-size: .85rem;
      font-weight: 600;
      background: #b41824;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 4px 18px rgba(180, 24, 36,.28);
      transition: background .2s, transform .2s, box-shadow .2s;
    }
    .sxc-card__btn:hover { background: #8d111a; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(180, 24, 36,.36); }
    .sxc-card__more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: .85rem;
      font-weight: 600;
      color: #6e6b66;
      text-decoration: none;
      transition: color .2s;
    }
    .sxc-card__more:hover { color: #b41824; }
    .sxc-card__more svg { transition: transform .2s; }
    .sxc-card__more:hover svg { transform: translateX(3px); }

    @media (max-width: 1024px) {
      .sxc-cards { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
      .sxc-card__header { height: 215px; }
    }
    @media (max-width: 560px) {
      .sxtab-section { padding: 76px 0 84px; }
      .sxc-card__body { padding: 24px 24px 0; }
      .sxc-card__foot { padding: 20px 24px 26px; }
    }

    /* ══════════════════════════════════════
       INCLUS PARTOUT — bande claire, 6 items
    ══════════════════════════════════════ */
    .sx-included {
      padding: 110px 0;
      background: #fbf9f6;
    }
    .sx-included__head { text-align: center; margin-bottom: 60px; }
    .sx-included__head .eyebrow { justify-content: center; }
    .sx-included__head h2 { margin-bottom: 14px; }
    .sx-included__head p { font-size: .98rem; color: #6e6b66; max-width: 470px; margin: 0 auto; line-height: 1.7; }

    .sx-included__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      max-width: 1060px;
      margin: 0 auto;
    }
    .sx-inc-item {
      background: #fff;
      padding: 36px 32px;
      border-radius: 4px;
      border: 1px solid #e9e5de;
      transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
    }
    .sx-inc-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(36, 38, 40,.08);
      border-color: #e6e1d8;
    }
    .sx-inc-item__icon {
      width: 48px; height: 48px;
      border-radius: 3px;
      background: #fbeff0;
      display: flex; align-items: center; justify-content: center;
      color: #b41824;
      margin-bottom: 22px;
      transition: background .3s, color .3s;
    }
    .sx-inc-item:hover .sx-inc-item__icon { background: #b41824; color: #fff; }
    .sx-inc-item__icon svg { width: 22px; height: 22px; }

    .sx-inc-item__title {
      font-size: 1.02rem; font-weight: 600; color: #242628; margin-bottom: 8px;
      display: flex; align-items: center; gap: 8px;
    }
    .sx-inc-item__title::before {
      content: '✓';
      color: #b41824;
      font-weight: 600;
      font-size: .85rem;
    }
    .sx-inc-item__desc { font-size: .85rem; color: #6e6b66; line-height: 1.65; }

    @media (max-width: 900px) {
      .sx-included { padding: 84px 0; }
      .sx-included__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    }
    @media (max-width: 600px) {
      .sx-included__grid { grid-template-columns: 1fr; gap: 14px; }
      .sx-inc-item { padding: 28px 26px; }
    }

    /* ══════════════════════════════════════
       PROCESS — dark, 4 étapes
    ══════════════════════════════════════ */
    .sx-process {
      background: #242628;
      padding: 100px 0 110px;
      position: relative;
      overflow: hidden;
    }
    .sx-process::before {
      content: '';
      position: absolute;
      width: 800px; height: 800px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(180, 24, 36,.13) 0%, transparent 60%);
      top: -400px; left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }
    .sx-process .container { position: relative; z-index: 1; }
    .sx-process__head { text-align: center; margin-bottom: 64px; }
    .sx-process__head .eyebrow { justify-content: center; color: #da6c75; }
    .sx-process__head .eyebrow::before { background: #da6c75; }
    .sx-process__head h2 { color: #faf8f5; }
    .sx-process__head h2 em {
      font-style: normal;
      background: linear-gradient(135deg, #da6c75, #b41824);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .sx-process__head p { color: #6e6b66; font-size: .95rem; margin-top: 12px; }
    .sx-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      position: relative;
    }
    .sx-step {
      background: rgba(47, 49, 52,.55);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 4px;
      padding: 30px 26px;
      position: relative;
      transition: transform .25s, border-color .25s;
    }
    .sx-step:hover { transform: translateY(-4px); border-color: rgba(180, 24, 36,.35); }
    .sx-step__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .sx-step__num {
      font-size: 1.9rem;
      font-weight: 600;
      color: rgba(180, 24, 36,.45);
      line-height: 1;
      letter-spacing: -.03em;
    }
    .sx-step__delay {
      font-size: .64rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #da6c75;
      background: rgba(180, 24, 36,.13);
      border: 1px solid rgba(218, 108, 117,.25);
      padding: 4px 11px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .sx-step h4 { font-size: 1rem; font-weight: 600; color: #f0ede7; margin: 0 0 8px; }
    .sx-step p { font-size: .82rem; color: #a6a19a; line-height: 1.6; margin: 0; }
    @media (max-width: 960px) {
      .sx-steps { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .sx-process { padding: 78px 0 84px; }
      .sx-steps { grid-template-columns: 1fr; }
    }