.services-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 48px;
      flex-wrap: wrap;
      gap: 20px;
    }

    /* Label surtitre */
    .section-label {
      font-family: "Oswald", sans-serif;
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: var(--cg_vert);
      margin-bottom: 10px;
    }

    /* Titre principal */
    .section-title {
      font-family: "Caveat Brush", cursive;
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      line-height: 1.1;
      color: var(--cg_vert_fonce);
    }
    .section-title span { color: var(--cg_vert); }

    /* ── Boutons flèches ── */
    .slider-nav {
      display: flex;
      gap: 10px;
    }
    .slider-nav button {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid var(--cg_vert);
      background: transparent;
      color: var(--vert);
      font-size: 1.1rem;
      cursor: pointer;
      transition: all var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .slider-nav button:hover  { background: var(--cg_vert); color: var(--cg_blanc); }
    .slider-nav button:disabled { cursor: default; }

    /* ══════════════════════════════════════════════════════
       PISTE DU SLIDER
       — overflow:hidden sur le wrapper pour masquer le débord
       — le peek (partie visible de la carte suivante) est
         obtenu en soustrayant PEEK px du calcul de largeur
         des cartes (voir JS). Le wrapper ne déborde donc pas.
    ══════════════════════════════════════════════════════ */
    .services-track-wrapper {
      overflow: hidden;
      position: relative;
    }

    /*
      Dégradé sur le bord droit :
      - visible tant qu'il reste des cartes à droite
      - disparaît quand on atteint la fin (classe .at-end ajoutée par JS)
      La couleur doit correspondre au fond de votre section.
    */
    .services-track-wrapper::after {
      content: "";
      position: absolute;
      top: 0; right: 0;
      width: 100px; height: 100%;
      background: linear-gradient(to right, transparent, var(--cg_blanc) 85%);
      pointer-events: none;
      transition: opacity var(--transition);
    }
    .services-track-wrapper.at-end::after { opacity: 0; }

    /* Flex container des cartes — le JS pilote translateX */
    .services-track {
      display: flex;
      gap: 24px;
      transition: transform .42s cubic-bezier(.55, 0, .1, 1);
      will-change: transform;
			    padding: 10px 0;
    }

    /* ══════════════════════════════════════════════════════
       CARTE DE SERVICE
       — la largeur est injectée dynamiquement par le JS
    ══════════════════════════════════════════════════════ */
    .service-card {
      flex-shrink: 0;
      flex-grow: 0;
      /* width positionné par JS */
      background: var(--cg_blanc);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    }

    /* ── Visuel coloré en haut de la carte ── */
    .card-visual {
      height: 200px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    /* Variantes de couleur — ajoutez/modifiez selon vos catégories */
    .card-visual.verre  { background: linear-gradient(135deg, #1e4020, #6ba230); }
    .card-visual.carton { background: linear-gradient(135deg, #5a3620, #a76b3a); }
    .card-visual.mixte  { background: linear-gradient(135deg, #274520, #3a6e24); }
    .card-visual.pro    { background: linear-gradient(135deg, #1c2f10, #4a7a28); }
    .card-visual.coll   { background: linear-gradient(135deg, #2e1a08, #a76b3a); }
    .card-visual.event  { background: linear-gradient(135deg, #1e3a1a, #f39200); }

    .card-icon {
      font-size: 4.5rem;
      opacity: .9;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
    }

    /* Badge optionnel (ex: "Populaire", "Nouveau") */
    .card-badge {
      position: absolute;
      top: 14px; right: 14px;
      font-family: "Oswald", sans-serif;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      background: var(--cg_orange);
      color: var(--cg_blanc);
      padding: 4px 10px;
      border-radius: 20px;
    }

    /* ── Corps texte de la carte ── */
    .card-body { padding: 26px; }
    .card-body h3 {
      font-family: "Oswald", sans-serif;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--cg_vert_fonce);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .card-body p {
      font-size: .9rem;
      color: var(--cg_gris_moyen);
      line-height: 1.7;
    }

    /* Lien "En savoir plus" avec flèche animée */
    .card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: "Oswald", sans-serif;
      font-size: .85rem;
      color: var(--cg_vert);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-top: 18px;
      transition: gap var(--transition);
    }
    .card-link:hover { gap: 12px; }

    /* ══════════════════════════════════════════════════════
       POINTS DE PAGINATION (dots)
       — générés dynamiquement par le JS
    ══════════════════════════════════════════════════════ */
    .svc-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 28px;
    }
    .svc-dots button {
      width: 10px; height: 10px;
      border-radius: 50%;
      border: 2px solid var(--cg_vert);
      background: transparent;
      cursor: pointer;
      padding: 0;
      transition: all var(--transition);
    }
    /* Dot actif : s'étire en pilule */
    .svc-dots button.active {
      background: var(--cg_vert);
      width: 26px;
      border-radius: 5px;
    }

    /* ══════════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .services-header { flex-direction: column; align-items: flex-start; }
    }