500;600;700;800;900&display=swap");

/* =========================================================
   WASSLA CLOUD - PAGE SAP
   Template enfant réutilisable
   Police : Karla, Sans-serif
   ========================================================= */
.product-page,
.product-page * {
    box-sizing: border-box;
}
.product-page {
    --product-blue:#123f6b;
    --product-blue-2:#1e527f;
    --product-light:#eef4f8;
    --product-border:#dde4ea;
    --product-text:#333;
    --product-muted:#62718a;
    --product-green:#00b82b;
    --product-red:#e10600;
    --product-orange:#ffab00;
    --product-radius:18px;
    font-family:"Karla", Sans-serif;
    color:var(--product-text);
    background:#fff;
    line-height:1.55;
}
.product-page h1,
.product-page h2,
.product-page h3,
.product-page p,
.product-page ul {
    font-family:"Karla", Sans-serif;
}
.product-container {
    width:min(1180px, calc(100% - 30px));
    margin:0 auto;
}
.product-section {
    padding:56px 0;
}
.product-section--tight {
    padding:34px 0;
}
.product-eyebrow {
    display:block;
    margin-bottom:7px;
    color:#174fb8;
    font-size:14px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.product-section-title {
    margin:0 0 18px;
    color:#3b3b3b;
    font-size:clamp(27px, 3vw, 38px);
    line-height:1.12;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-.02em;
}
.product-section-lead {
    max-width:1120px;
    margin:0 0 34px;
    font-size:18px;
    line-height:1.5;
    color:#444;
}

/* HERO */
.product-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(8, 42, 72, .88) 0%,
            rgba(14, 59, 99, .72) 55%,
            rgba(19, 67, 108, .58) 100%
        ),
        url("../images/cover-products.jpg") center center / cover no-repeat;

    color: #fff;
}
.product-hero::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(135deg, rgba(0,174,239,.12), transparent 55%);
}
.product-hero__inner {
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);
    gap:40px;
    align-items:center;
	min-height: 310px;
    padding-top: 55px;
    padding-bottom: 55px;
}

@media (max-width: 768px) {

    .product-hero__inner {
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .product-hero__content {
        padding: 0;
    }
}



.product-hero__content {
    padding: 10px 0;
}


.product-hero h1 {
    max-width:880px;
    margin:0 0 16px;
    color:#fff;
    font-size:clamp(34px,4.3vw,58px);
    line-height:1.02;
    font-weight:800;
}
.product-hero p {
    max-width:900px;
    margin:0;
    font-size:18px;
    line-height:1.6;
    color:rgba(255,255,255,.94);
}
.product-hero__badge {
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(250px, 100%);
    margin-left:auto;
    background:transparent;
}
.product-hero__badge img {
    display:block;
    width:100%;
    height:auto;
    max-width:250px;
    object-fit:contain;
    filter:drop-shadow(0 12px 28px rgba(0,0,0,.18));
}

/* BREADCRUMB */
.product-breadcrumb {
    padding:12px 0;
    font-size:13px;
    color:#777;
}
.product-breadcrumb a {
    color:#526173;
    text-decoration:none;
}
.product-breadcrumb span {
    padding:0 8px;
    color:#aaa;
}

/* AVANTAGES */
.product-benefits {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:38px;
}
.product-benefit {
    min-height:255px;
    padding:20px;
    border:1px solid var(--product-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(20,42,70,.05);
}
.product-benefit__icon {
    display:flex;
    align-items:center;
    justify-content:center;
    height:54px;
    margin-bottom:14px;
    border-radius:12px;
    background:#e6eef4;
    font-size:27px;
}
.product-benefit h3 {
    margin:0 0 9px;
    font-size:21px;
    line-height:1.25;
    text-align:center;
}
.product-benefit p {
    margin:0;
    color:var(--product-muted);
    font-size:15.5px;
    line-height:1.75;
}

/* TABLEAU */
.product-table-wrap {
    overflow-x:auto;
    border:1px solid var(--product-border);
    border-radius:14px;
}
.product-compare {
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    background:#fff;
    font-size:14px;
}
.product-compare th,
.product-compare td {
    padding:15px 16px;
    border-right:1px solid #e5ebf0;
    border-bottom:1px solid #e5ebf0;
    vertical-align:middle;
}
.product-compare th:last-child,
.product-compare td:last-child { border-right:0; }
.product-compare tr:last-child td { border-bottom:0; }
.product-compare thead th {
    background:#f2f6f9;
    text-transform:uppercase;
    font-weight:800;
    text-align:center;
}
.product-compare thead th:first-child {
    background:#dce6ee;
}
.product-compare tbody td:first-child {
    width:45%;
    background:#f4f8fb;
}
.product-compare td:not(:first-child) {
    width:27.5%;
    text-align:center;
}
.product-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:19px;
    height:19px;
    border-radius:50%;
    color:#fff;
    font-size:12px;
    font-weight:800;
}
.product-status--yes { background:var(--product-green); }
.product-status--no { background:var(--product-red); }
.product-status--depends { background:#f29a00; }

/* BANDEAU SAP */
.product-offer {
    position:relative;
    overflow:hidden;
    padding:46px 58px;
    border-radius:0 52px 0 52px;
    background:
      linear-gradient(90deg, rgba(12,52,86,.97), rgba(18,63,107,.91)),
      url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
    color:#fff;
}
.product-offer__top {
    display:grid;
    grid-template-columns:365px 1fr;
    gap:24px;
    align-items:start;
}
.product-offer__label {
    padding:13px 18px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:13px;
    background:rgba(255,255,255,.06);
    font-size:26px;
    text-align:center;
}
.product-offer p {
    margin:0;
    color:#fff;
    font-size:14.5px;
}
.product-offer__bottom {
    margin-top:18px;
}
.product-offer__cta {
    display:flex;
    justify-content:flex-end;
    margin-top:24px;
}
.product-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 19px;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
    transition:.2s ease;
}
.product-btn:hover { transform:translateY(-1px); }
.product-btn--orange {
    background:var(--product-orange);
    color:#111;
}
.product-btn--blue {
    background:#06a9e6;
    color:#fff;
}

/* RELATED */
.product-related {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top:18px;
    font-size:12px;
}
.product-related strong {
    margin-right:5px;
}
.product-related a {
    padding:6px 11px;
    border:1px solid #dce4ea;
    border-radius:999px;
    color:#42536a;
    text-decoration:none;
    background:#fff;
}

/* FAQ */
.product-faq-head {
    text-align:center;
    margin-bottom:46px;
}
.product-faq-head .product-section-title {
    margin-bottom:0;
    font-size:clamp(34px,4vw,52px);
}
.product-faq {
    display:grid;
    gap:10px;
}
.product-faq details {
    border:1px solid #d8e0e8;
    border-radius:10px;
    background:#fff;
    overflow:hidden;
}
.product-faq summary {
    position:relative;
    cursor:pointer;
    padding:16px 50px 16px 15px;
    font-size:15px;
    font-weight:700;
    list-style:none;
}
.product-faq summary::-webkit-details-marker { display:none; }
.product-faq summary::after {
    content:"+";
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    color:#0876ef;
    font-size:24px;
    font-weight:700;
}
.product-faq details[open] summary {
    background:#e9f1ff;
}
.product-faq details[open] summary::after {
    content:"−";
}
.product-faq details p {
    margin:0;
    padding:13px 15px 18px;
    font-size:14px;
    line-height:1.7;
    color:#555;
}

/* CONTACT PROMO */
.product-contact {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    overflow:hidden;
    min-height:440px;
    border-radius:12px;
    background:#204f78;
}
.product-contact__media {
    min-height:440px;
}
.product-contact__media img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.product-contact__content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px 40px;
    color:#fff;
}
.product-contact__topbtn {
    display:block;
    margin-bottom:22px;
    padding:13px 15px;
    border-radius:6px;
    background:#08a9e7;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    font-size:13px;
}
.product-contact__content h2 {
    margin:0 0 18px;
    color:#fff;
    font-size:25px;
    line-height:1.05;
    font-weight:800;
    text-transform:uppercase;
}
.product-contact__content p {
    margin:0 0 20px;
    color:#dbe8f3;
    font-size:16px;
    line-height:1.65;
}
.product-contact__help {
    font-weight:700;
}
.product-chips {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:9px;
}
.product-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 11px;
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
}
.product-chip strong { font-weight:800; }
.product-chip--tel { background:#2787f2; }
.product-chip--wa { background:#25b956; }
.product-chip--mail { background:#ffbc00; color:#fff; }

/* CLIENTS */
.product-trust {
    background:#eef4f7;
    border-radius:18px;
    padding:clamp(28px,6vw,56px) clamp(16px,4vw,40px);
}
.product-trust__inner {
    max-width:1200px;
    margin:0 auto;
    text-align:center;
}
.product-trust h2 {
    margin:0 0 10px;
    color:#222;
    font-size:clamp(32px,3.6vw,48px);
    line-height:1.15;
    font-weight:800;
}
.product-trust__subtitle {
    margin:0 auto 24px;
    max-width:950px;
    font-size:17px;
}
.product-trust__list {
    display:grid;
    grid-template-columns:repeat(5,minmax(100px,1fr));
    gap:22px 38px;
    list-style:none;
    padding:0;
    margin:24px 0;
}
.product-trust__link {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:92px;
    padding:13px;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.product-trust__link img {
    width:100%;
    max-width:160px;
    max-height:62px;
    object-fit:contain;
}
.product-trust__cta {
    margin-top:28px;
}
.product-trust__cta a {
    display:inline-block;
    padding:14px 22px;
    border-radius:999px;
    background:#2e27ff;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    box-shadow:0 10px 26px rgba(46,39,255,.25);
}

/* NOTE */
.product-note {
    margin-top:18px;
    padding:15px 18px;
    border-left:4px solid #1888d8;
    background:#f5f9fc;
    color:#566576;
    font-size:13px;
}

/* RESPONSIVE */
@media (max-width:1000px) {
    .product-benefits { grid-template-columns:repeat(2,1fr); gap:20px; }
    .product-offer__top { grid-template-columns:1fr; }
    .product-contact { grid-template-columns:1fr; }
    .product-contact__media { min-height:320px; }
    .product-trust__list { grid-template-columns:repeat(3,1fr); }
    .product-hero__inner { grid-template-columns:1fr; }
    .product-hero__badge { margin:0; width:min(220px, 70%); }
}
@media (max-width:640px) {
    .product-section { padding:38px 0; }
    .product-benefits { grid-template-columns:1fr; }
    .product-offer { padding:34px 22px; border-radius:0 32px 0 32px; }
    .product-contact__content { padding:34px 22px; }
    .product-trust__list { grid-template-columns:repeat(2,1fr); gap:14px; }
}


/* =========================================================
   TABLEAU COMPARATIF - RESPONSIVE MOBILE
   Sur mobile, chaque ligne devient une carte lisible.
   ========================================================= */
@media (max-width: 760px) {
    .product-table-wrap {
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
    }

    .product-compare {
        width:100%;
        min-width:0;
        border-collapse:separate;
        border-spacing:0 12px;
        background:transparent;
    }

    .product-compare thead {
        display:none;
    }

    .product-compare,
    .product-compare tbody,
    .product-compare tr,
    .product-compare td {
        display:block;
        width:100%;
    }

    .product-compare tr {
        overflow:hidden;
        border:1px solid var(--product-border);
        border-radius:14px;
        background:#fff;
        box-shadow:0 4px 16px rgba(20,42,70,.04);
    }

    .product-compare td {
        position:relative;
        width:100% !important;
        min-height:52px;
        padding:14px 15px 14px 52%;
        border-right:0;
        border-bottom:1px solid #e5ebf0;
        text-align:right !important;
        background:#fff !important;
    }

    .product-compare td:first-child {
        padding:15px;
        background:#eef4f8 !important;
        color:#28313b;
        font-weight:700;
        line-height:1.55;
        text-align:left !important;
    }

    .product-compare td:not(:first-child)::before {
        position:absolute;
        left:15px;
        top:50%;
        width:45%;
        transform:translateY(-50%);
        color:#4a5561;
        font-size:12px;
        font-weight:800;
        line-height:1.2;
        text-align:left;
        text-transform:uppercase;
    }

    .product-compare tr td:last-child {
        border-bottom:0;
    }

    .product-status {
        margin-left:auto;
    }
}

@media (max-width: 420px) {
    .product-compare td {
        padding-left:56%;
    }
    .product-compare td:not(:first-child)::before {
        width:48%;
        font-size:11px;
    }
}

/* =========================================================
   WASSLA - TYPOGRAPHIE PRODUITS
   Alignement visuel avec les pages historiques wassla.net
   Police commune : Karla
   ========================================================= */
.product-page {
    font-family: "Karla", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.product-page h1,
.product-page h2,
.product-page h3,
.product-page h4,
.product-page h5,
.product-page h6,
.product-page p,
.product-page li,
.product-page a,
.product-page button,
.product-page summary,
.product-page th,
.product-page td {
    font-family: "Karla", Arial, sans-serif;
}

/* Hero : plus compact et proche de la page de référence */
.product-hero__inner {
    min-height: 310px;
    padding-top: 38px;
    padding-bottom: 38px;
}

.product-hero h1,
.product-hero__title {
    margin: 0 0 11px;
    max-width: 850px;
    font-size: clamp(27px, 2.5vw, 35px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.product-hero p,
.product-hero__description {
    max-width: 880px;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0;
	margin-top: 30px !important;
}

.product-eyebrow {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .16em;
}

/* Titres de sections */
.product-section-title {
    margin-bottom: 17px;
    font-size: 25px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.product-section-lead {
    max-width: 1160px;
    font-size: 17px;
    line-height: 1.52;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Bloc avantages */
.product-benefit h3 {
    font-size: 18px;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.product-benefit p {
    font-size: 14.5px;
    line-height: 1.68;
    font-weight: 400;
    letter-spacing: 0;
}

/* Tableau comparatif */
.product-compare {
    font-size: 15.5px;
    line-height: 1.48;
}

.product-compare thead th {
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .005em;
}

.product-compare tbody td:first-child {
    font-weight: 400;
}

/* Bandeau offre */
.product-offer__label {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.product-offer p {
    font-size: 15px;
    line-height: 1.55;
}

.product-btn {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
}

.product-related {
    font-size: 11.5px;
}

/* FAQ */
.product-faq-head .product-section-title {
    font-size: clamp(36px, 4vw, 50px);
    line-height: 1;
    font-weight: 800;
}

.product-faq summary {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}

.product-faq details p {
    font-size: 13.5px;
    line-height: 1.65;
}

/* Contact */
.product-contact__topbtn {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
}

.product-contact__content h2 {
    font-size: clamp(22px, 2.1vw, 28px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.product-contact__content p {
    font-size: 15px;
    line-height: 1.6;
}

.product-chip {
    font-size: 12px;
    line-height: 1.2;
}

/* Références clients */
.product-trust h2 {
    font-size: clamp(36px, 3.6vw, 48px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.product-trust__subtitle {
    font-size: 16px;
    line-height: 1.45;
}

/* Mobile */
@media (max-width: 760px) {
    .product-page {
        font-size: 15px;
    }

    .product-hero__inner {
        min-height: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .product-hero h1,
    .product-hero__title {
        font-size: 27px;
    }

    .product-hero p,
    .product-hero__description {
        font-size: 14.5px;
        line-height: 1.55;
    }

    .product-section-title {
        font-size: 27px;
    }

    .product-section-lead {
        font-size: 16px;
        line-height: 1.5;
    }

    .product-benefit h3 {
        font-size: 18px;
    }

    .product-benefit p {
        font-size: 14px;
    }

    .product-compare td {
        font-size: 15px;
        line-height: 1.45;
    }

    .product-faq-head .product-section-title {
        font-size: 34px;
    }
}


/* Libellés du comparatif pilotés par le HTML de chaque produit */
@media (max-width:760px) {
    .product-compare td:not(:first-child)::before {
        content: attr(data-label);
    }
}


/* Bloc SEO / longue traîne commun aux pages produits */
.product-longtail {
    background:#f8fbfd;
}
.product-longtail__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}
.product-longtail__grid > div {
    padding:24px;
    border:1px solid var(--product-border);
    border-radius:16px;
    background:#fff;
}
.product-longtail__grid h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #31363c;
}


.product-longtail__grid p {
    margin:0;
    color:#556477;
    font-size:15.5px;
    line-height:1.7;
}
@media (max-width:760px) {
    .product-longtail__grid {
        grid-template-columns:1fr;
    }
}