.elementor-1951 .elementor-element.elementor-element-47f2e07{--display:flex;--margin-top:-5%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-1951 .elementor-element.elementor-element-47f2e07{--margin-top:-20%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}}/* Start custom CSS for html, class: .elementor-element-392654b */@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&display=swap');    /* ─── RESET & BASE ─── */    *,    *::before,    *::after {      box-sizing: border-box;      margin: 0;      padding: 0;    }    html {      scroll-behavior: smooth;    }    body {      font-family: 'Barlow', sans-serif;      font-size: 16px;      line-height: 1.6;      color: #1a1a1a;      background: #f8f7f4;    }    /* ─── CSS VARIABLES (couleurs CSX) ─── */    :root {      --csx-navy: #0A0C10;      --csx-navy2: #0A0C10;      --csx-accent: #C2832D;      --csx-light: #f8f7f4;      --csx-white: #ffffff;      --csx-border: #ddd9d0;      --csx-muted: #6b6860;      --csx-text: #1a1a1a;      --badge-M-bg: #e8f1fb;      --badge-M-tx: #1a4f8a;      --badge-I-bg: #e6f4e0;      --badge-I-tx: #2d6020;      --badge-C-bg: #fdf0dc;      --badge-C-tx: #7a4a08;      --badge-A-bg: #ece9fd;      --badge-A-tx: #43359a;      --badge-F-bg: #fde8e4;      --badge-F-tx: #8a2a18;      --badge-R-bg: #f0ede6;      --badge-R-tx: #4a4640;      --badge-G-bg: #fdeaea;      --badge-G-tx: #8a2020;    }    /* ─── HERO ─── */    .hero {      background: var(--csx-navy);      color: var(--csx-white);      padding: 3.5rem 2rem 2.5rem;      text-align: center;    }    .hero-eyebrow {      font-size: 12px;      font-weight: 500;      letter-spacing: 0.12em;      text-transform: uppercase;      color: #C7B091;      margin-bottom: 0.75rem;    }    .hero h1 {      font-size: clamp(1.6rem, 4vw, 2.4rem);      font-weight: 300;      letter-spacing: -0.02em;      margin-bottom: 0.75rem;    }    .hero h1 strong {      font-weight: 600;    }    .hero p {      font-size: 14px;      color: rgba(255, 255, 255, 0.6);      max-width: 520px;      margin: 0 auto;    }    .hero-divider {      width: 40px;      height: 2px;      background: var(--csx-accent);      margin: 1.25rem auto 0;    }    /* ─── FILTER BAR ─── */    .filter-bar {      background: var(--csx-navy2);      padding: 1rem 2rem;      display: flex;      flex-wrap: wrap;      align-items: center;      justify-content: center;      gap: 8px;      position: sticky;      top: 0;      z-index: 100;      border-bottom: 1px solid rgba(255, 255, 255, 0.06);    }    .filter-label {      font-size: 14px;      font-weight: 500;      letter-spacing: 0.08em;      text-transform: uppercase;      color: rgba(255, 255, 255, 0.4);      margin-right: 4px;    }    .filter-btn {      font-family: 'Barlow', sans-serif;      font-size: 14px;      font-weight: 500;      padding: 5px 14px;      border-radius: 10px;      border: 1px solid #C7B091;      background: transparent;      color: rgba(255, 255, 255, 0.8);      cursor: pointer;      transition: all 0.18s ease;      letter-spacing: 0.01em;    }    .filter-btn:hover {      border-color: #C7B091;      background: #C7B091;      color: #0A0C10;    }    .filter-btn.active {      background: var(--csx-accent);      border-color: var(--csx-accent);      color: #fff;      font-weight: 600;    }    /* ─── LAYOUT ─── */    .catalog-wrap {      max-width: 1200px;      margin: 0 auto;      padding: 2.5rem 1.5rem 4rem;    }    /* ─── FAMILY (section-header) ─── */    .family-header {      margin-top: 2.75rem;      margin-bottom: 0;      padding: 1.5rem 1.75rem;      background: var(--csx-navy);      color: var(--csx-white);      border-radius: 10px 10px 0 0;    }    .family-header:first-child {      margin-top: 0;    }    .family-num {      font-size: 18px;      font-weight: 600;      letter-spacing: 0.14em;      text-transform: uppercase;      color: #C7B091;      margin-bottom: 4px;    }    .family-title {      font-size: 24px;      font-weight: 500;      margin-bottom: 3px;    }    .family-sub {      font-size: 16px;      color: rgba(255, 255, 255, 0.5);      font-weight: 300;      font-style: italic;    }    /* ─── SECTION TITLE ─── */    .section-title {      font-size: 14px;      font-weight: 600;      letter-spacing: 0.1em;      text-transform: uppercase;      color: var(--csx-muted);      padding: 0.7rem 1.75rem 0.4rem;      background: #efece5;      border-bottom: 1px solid var(--csx-border);      border-top: 1px solid var(--csx-border);    }    /* ─── SUBSECTION TITLE ─── */    .subsection-title {      font-size: 12px;      font-weight: 600;      letter-spacing: 0.09em;      text-transform: uppercase;      color: #ffffff;      /* Texte en blanc */      padding: 0.6rem 1.75rem 0.4rem 1.75rem;      /* Ajusté pour l'alignement */      background: #000000;      /* Fond noir */      border-bottom: 1px solid #333333;      border-left: 5px solid #333333;    }    /* ─── SERVICE ROW ─── */    .service-row {      display: grid;      grid-template-columns: 1fr auto;      gap: 12px;      align-items: start;      padding: 1rem 1.75rem;      background: var(--csx-white);      border-bottom: 1px solid var(--csx-border);      transition: background 0.12s ease;    }    .service-row.sub {      padding-left: 2.5rem;      background: #fdfcfa;    }    .service-row:hover {      background: #faf9f6;    }    .service-row.sub:hover {      background: #f5f3ee;    }    .service-row.hidden {      display: none !important;    }    .service-row:last-of-family {      border-radius: 0 0 10px 10px;      border-bottom: none;    }    .service-name {      font-size: 18px;      font-weight: 500;      color: var(--csx-text);      margin-bottom: 3px;      line-height: 1.4;    }    .service-desc {      font-size: 16px;      color: var(--csx-muted);      line-height: 1.55;    }    .service-tools {      font-size: 12px;      color: #9a9590;      margin-top: 5px;      font-style: italic;    }    .new-tag {      display: inline-block;      font-size: 10px;      font-weight: 600;      background: #e6f4e0;      color: #2d6020;      border-radius: 4px;      padding: 1px 6px;      margin-left: 7px;      vertical-align: middle;      letter-spacing: 0.04em;      text-transform: uppercase;    }    /* ─── BADGES ─── */    .badges {      display: flex;      flex-wrap: wrap;      gap: 4px;      justify-content: flex-end;      min-width: 70px;    }    .badge {      font-size: 12px;      font-weight: 600;      padding: 2px 8px;      border-radius: 100px;      white-space: nowrap;      letter-spacing: 0.02em;    }    .badge-M {      background: var(--badge-M-bg);      color: var(--badge-M-tx);    }    .badge-I {      background: var(--badge-I-bg);      color: var(--badge-I-tx);    }    .badge-C {      background: var(--badge-C-bg);      color: var(--badge-C-tx);    }    .badge-A {      background: var(--badge-A-bg);      color: var(--badge-A-tx);    }    .badge-F {      background: var(--badge-F-bg);      color: var(--badge-F-tx);    }    .badge-R {      background: var(--badge-R-bg);      color: var(--badge-R-tx);    }    .badge-G {      background: var(--badge-G-bg);      color: var(--badge-G-tx);    }    /* ─── FAMILY WRAPPER ─── */    .family-wrap {      border-radius: 0 0 10px 10px;      overflow: hidden;      box-shadow: 0 2px 12px rgba(15, 31, 61, 0.07);      margin-bottom: 0;    }    .family-block {      margin-top: 2.75rem;    }    .family-block:first-child {      margin-top: 0;    }    /* ─── LEGEND ─── */    .legend {      margin-top: 3rem;      padding: 1.25rem 1.75rem;      background: var(--csx-white);      border: 1px solid var(--csx-border);      border-radius: 10px;    }    .legend-title {      font-size: 10px;      font-weight: 600;      letter-spacing: 0.1em;      text-transform: uppercase;      color: var(--csx-muted);      margin-bottom: 0.75rem;    }    .legend-grid {      display: flex;      flex-wrap: wrap;      gap: 10px 20px;    }    .legend-item {      display: flex;      align-items: center;      gap: 7px;      font-size: 12px;      color: var(--csx-muted);    }    /* ─── NO RESULTS ─── */    .no-results {      display: none;      text-align: center;      padding: 3rem 2rem;      color: var(--csx-muted);      font-size: 14px;    }    /* ─── FOOTER NOTE ─── */    .footer-note {      text-align: center;      font-size: 11px;      color: #aaa;      padding: 2rem 1rem 1rem;    }    /* ─── RESPONSIVE ─── */    @media (max-width: 600px) {      .hero {        padding: 2.5rem 1.25rem 2rem;      }      .filter-bar {        padding: 0.75rem 1rem;        gap: 6px;        justify-content: center;      }      .catalog-wrap {        padding: 1.5rem 1rem 3rem;      }      .service-row {        grid-template-columns: 1fr;      }      .badges {        justify-content: flex-start;        margin-top: 6px;      }      .family-header {        padding: 1.25rem;      }      .service-row,      .service-row.sub {        padding-left: 1.25rem;      }      .subsection-title {        padding-left: 1.5rem;      }    }/* End custom CSS */