/* =========================================================
   DAWINI — PRODUITS SPÉCIFIQUES
   Page SEO + Responsive
========================================================= */

.specific-page {

    --sp-blue: #10366d;
    --sp-blue-dark: #092d5c;
    --sp-turquoise: #13aaa9;
    --sp-turquoise-dark: #079594;

    --sp-bg: #f8fbfd;
    --sp-light: #eef9fb;

    --sp-text: #173b70;
    --sp-text-light: #617795;

    --sp-border: #e1edf3;
    --sp-white: #ffffff;

    width: 100%;
    overflow: hidden;

    background: #fff;

    color: var(--sp-text);

    font-family: "Inter", sans-serif;

    line-height: 1.6;
}

.specific-page *,
.specific-page *::before,
.specific-page *::after {
    box-sizing: border-box;
}

.specific-page a {
    text-decoration: none;
}

.specific-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

.specific-page .specific-container {

    width: min(
        1380px,
        calc(100% - 80px)
    );

    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.specific-page .specific-hero {

    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            rgba(5,34,68,.94) 0%,
            rgba(10,60,91,.86) 48%,
            rgba(10,84,91,.58) 100%
        ),

        url("images/produits-specifiques.jpg")
        center center / cover no-repeat;
}


/* Lumière décorative */

.specific-page .specific-hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    right: -150px;
    top: -180px;

    background:

        radial-gradient(
            circle,
            rgba(35,205,200,.20),
            transparent 65%
        );

    pointer-events: none;
}


/* Ligne décorative */

.specific-page .specific-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    right: 13%;
    bottom: -120px;

    border: 1px solid rgba(255,255,255,.12);

    pointer-events: none;
}


.specific-page .specific-hero-content {

    position: relative;

    z-index: 2;

    max-width: 820px;

    padding: 80px 0;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.specific-page .specific-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 24px;

    font-size: 12px;

    color: rgba(255,255,255,.70);
}

.specific-page .specific-breadcrumb a {

    color: rgba(255,255,255,.75);

    transition: .25s ease;
}

.specific-page .specific-breadcrumb a:hover {

    color: #6fe0dd;
}

.specific-page .specific-breadcrumb i {

    font-size: 9px;

    color: #62d8d5;
}

.specific-page .specific-breadcrumb span {

    color: #67d9d6;

    font-weight: 600;
}


/* =========================================================
   HERO H1
========================================================= */

.specific-page .specific-hero h1 {

    margin: 0;

    max-width: 800px;

    color: white;

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        42px,
        5vw,
        66px
    );

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 800;
}

.specific-page .specific-hero h1 span {

    color: #55d6d3;
}


/* =========================================================
   HERO SUBTITLE
========================================================= */

.specific-page .hero-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color: #6ddedb;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.specific-page .hero-kicker::before {

    content: "";

    width: 28px;
    height: 2px;

    background: #16aaa9;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.specific-page .specific-hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 32px;

    padding: 14px 24px;

    border-radius: 28px;

    background: #13aaa9;

    color: white;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 14px 30px rgba(0,0,0,.18);

    transition: .3s ease;
}

.specific-page .specific-hero-button:hover {

    background: #18bdbc;

    transform: translateY(-2px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.22);
}


/* =========================================================
   SECTION
========================================================= */

.specific-page .sp-section {

    padding: 90px 0;
}

.specific-page .sp-section-light {

    background: #f5fafc;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.specific-page .sp-heading {

    max-width: 800px;

    margin-bottom: 48px;
}

.specific-page .sp-heading.center {

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.specific-page .sp-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 15px;

    color: #0ca3a6;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.specific-page .sp-label::before {

    content: "";

    width: 27px;
    height: 2px;

    background: #13aaa9;
}

.specific-page .sp-heading.center .sp-label::before {

    display: none;
}


.specific-page .sp-title {

    margin: 0;

    font-family: "Manrope", sans-serif;

    color: var(--sp-blue);

    font-size: clamp(
        31px,
        3.2vw,
        45px
    );

    line-height: 1.18;

    letter-spacing: -1px;

    font-weight: 800;
}

.specific-page .sp-title span {

    color: #10aaa9;
}


.specific-page .sp-intro {

    margin-top: 18px;

    color: var(--sp-text-light);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   INTRO GRID
========================================================= */

.specific-page .sp-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 70px;

    align-items: center;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.specific-page .sp-text p {

    margin: 0 0 18px;

    color: #5d7394;

    font-size: 14px;

    line-height: 1.85;
}

.specific-page .sp-text strong {

    color: #173b70;
}


/* =========================================================
   FEATURE BOX
========================================================= */

.specific-page .sp-feature-box {

    padding: 35px;

    border-radius: 25px;

    border: 1px solid #dceff4;

    background:

        linear-gradient(
            135deg,
            #eefafd,
            #f8fcfd
        );

    position: relative;

    overflow: hidden;
}

.specific-page .sp-feature-box::after {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    right: -100px;
    bottom: -120px;

    background: rgba(15,167,171,.055);
}

.specific-page .sp-feature-icon {

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    margin-bottom: 22px;

    background: #dff7f8;

    color: #079c9e;

    font-size: 25px;
}

.specific-page .sp-feature-box h3 {

    margin: 0 0 12px;

    color: var(--sp-blue);

    font-family: "Manrope", sans-serif;

    font-size: 21px;
}

.specific-page .sp-feature-box p {

    margin: 0;

    color: #607795;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.specific-page .sp-products-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.specific-page .sp-product-card {

    padding: 30px;

    background: white;

    border: 1px solid #e1edf2;

    border-radius: 20px;

    transition: .3s ease;
}

.specific-page .sp-product-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(20,74,104,.08);
}

.specific-page .sp-product-icon {

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    background: #e7f8fa;

    color: #079ea3;

    font-size: 21px;
}

.specific-page .sp-product-card h3 {

    margin: 0 0 10px;

    color: var(--sp-blue);

    font-family: "Manrope", sans-serif;

    font-size: 17px;
}

.specific-page .sp-product-card p {

    margin: 0;

    color: #647993;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   TYPES / LIST
========================================================= */

.specific-page .sp-list-section {

    background: #f5fafc;
}

.specific-page .sp-list-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.specific-page .sp-list-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 23px;

    background: white;

    border: 1px solid #e1edf2;

    border-radius: 17px;
}

.specific-page .sp-list-icon {

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e2f7f8;

    color: #0b9fa3;

    font-size: 15px;
}

.specific-page .sp-list-item h3 {

    margin: 0 0 5px;

    color: var(--sp-blue);

    font-family: "Manrope", sans-serif;

    font-size: 15px;
}

.specific-page .sp-list-item p {

    margin: 0;

    color: #657b96;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   PROCESS
========================================================= */

.specific-page .sp-process {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-top: 45px;
}

.specific-page .sp-process-card {

    position: relative;

    padding: 30px 25px;

    background: white;

    border: 1px solid #e2edf3;

    border-radius: 20px;
}

.specific-page .sp-process-number {

    position: absolute;

    top: 17px;
    right: 20px;

    color: #9bb2c8;

    font-size: 12px;

    font-weight: 800;
}

.specific-page .sp-process-icon {

    width: 53px;
    height: 53px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 15px;

    background: #e8f8fa;

    color: #079ea3;

    font-size: 20px;
}

.specific-page .sp-process-card h3 {

    margin: 0 0 10px;

    color: var(--sp-blue);

    font-family: "Manrope", sans-serif;

    font-size: 16px;
}

.specific-page .sp-process-card p {

    margin: 0;

    color: #637993;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   POUR QUI
========================================================= */

.specific-page .sp-audience-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.specific-page .sp-audience-card {

    padding: 30px;

    border-radius: 20px;

    border: 1px solid #e1edf2;

    background: white;
}

.specific-page .sp-audience-card i {

    color: #0ca3a6;

    font-size: 25px;

    margin-bottom: 18px;
}

.specific-page .sp-audience-card h3 {

    margin: 0 0 9px;

    color: var(--sp-blue);

    font-family: "Manrope", sans-serif;

    font-size: 17px;
}

.specific-page .sp-audience-card p {

    margin: 0;

    color: #637993;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   FAQ
========================================================= */

.specific-page .sp-faq {

    max-width: 900px;

    margin: 45px auto 0;
}

.specific-page .sp-faq-item {

    border: 1px solid #dfeaf0;

    border-radius: 15px;

    margin-bottom: 12px;

    background: white;

    overflow: hidden;
}

.specific-page .sp-faq-item summary {

    cursor: pointer;

    list-style: none;

    padding: 20px 23px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: var(--sp-blue);

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 700;
}

.specific-page .sp-faq-item summary::-webkit-details-marker {

    display: none;
}

.specific-page .sp-faq-item summary i {

    color: #0ca3a6;

    transition: .25s ease;
}

.specific-page .sp-faq-item[open] summary i {

    transform: rotate(180deg);
}

.specific-page .sp-faq-answer {

    padding: 0 23px 21px;

    color: #637993;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

.specific-page .sp-cta {

    padding: 20px 0 90px;
}

.specific-page .sp-cta-box {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 48px 55px;

    border-radius: 26px;

    background:

        linear-gradient(
            135deg,
            #0d9fa1,
            #16b3af
        );
}

.specific-page .sp-cta-box::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    right: -90px;
    top: -120px;

    border: 1px solid rgba(255,255,255,.12);
}

.specific-page .sp-cta-content {

    position: relative;

    z-index: 2;
}

.specific-page .sp-cta-content h2 {

    margin: 0 0 9px;

    color: white;

    font-family: "Manrope", sans-serif;

    font-size: 29px;
}

.specific-page .sp-cta-content p {

    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 13px;
}

.specific-page .sp-cta-button {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 14px 23px;

    border-radius: 25px;

    background: white;

    color: #087f88;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:1100px) {

    .specific-page .specific-container {

        width: calc(100% - 40px);
    }

    .specific-page .sp-intro-grid {

        gap: 40px;
    }

    .specific-page .sp-products-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .specific-page .sp-process {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .specific-page .sp-audience-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width:768px) {

    .specific-page .specific-container {

        width: calc(100% - 36px);
    }

    .specific-page .specific-hero {

        min-height: 470px;

        background-position: center;
    }

    .specific-page .specific-hero-content {

        padding: 70px 0;
    }

    .specific-page .specific-hero h1 {

        font-size: 48px;
    }

    .specific-page .sp-intro-grid {

        grid-template-columns: 1fr;
    }

    .specific-page .sp-list-grid {

        grid-template-columns: 1fr;
    }

    .specific-page .sp-products-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .specific-page .sp-audience-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .specific-page .sp-cta-box {

        padding: 40px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px) {

    .specific-page {

        overflow-x: hidden;
    }

    .specific-page .specific-container {

        width: calc(100% - 30px);
    }


    /* HERO */

    .specific-page .specific-hero {

        min-height: 470px;

        background-position: 60% center;
    }

    .specific-page .specific-hero-content {

        padding: 55px 0;
    }

    .specific-page .specific-hero h1 {

        font-size: 38px;

        line-height: 1.12;

        letter-spacing: -1.5px;
    }

    .specific-page .specific-breadcrumb {

        margin-bottom: 20px;
    }

    .specific-page .specific-hero-button {

        width: 100%;

        margin-top: 27px;
    }


    /* SECTIONS */

    .specific-page .sp-section {

        padding: 65px 0;
    }

    .specific-page .sp-title {

        font-size: 30px;
    }


    /* INTRO */

    .specific-page .sp-intro-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .specific-page .sp-feature-box {

        padding: 27px;
    }


    /* PRODUCTS */

    .specific-page .sp-products-grid {

        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* PROCESS */

    .specific-page .sp-process {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 35px;
    }

    .specific-page .sp-process-card {

        padding: 25px 22px;
    }


    /* AUDIENCE */

    .specific-page .sp-audience-grid {

        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* FAQ */

    .specific-page .sp-faq {

        margin-top: 30px;
    }

    .specific-page .sp-faq-item summary {

        padding: 18px;

        font-size: 13px;
    }

    .specific-page .sp-faq-answer {

        padding: 0 18px 18px;

        font-size: 12px;
    }


    /* CTA */

    .specific-page .sp-cta {

        padding: 10px 0 65px;
    }

    .specific-page .sp-cta-box {

        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

    .specific-page .sp-cta-content h2 {

        font-size: 25px;
    }

    .specific-page .sp-cta-button {

        width: 100%;

        text-align: center;
    }
}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width:400px) {

    .specific-page .specific-container {

        width: calc(100% - 24px);
    }

    .specific-page .specific-hero {

        min-height: 450px;
    }

    .specific-page .specific-hero h1 {

        font-size: 33px;
    }

    .specific-page .sp-section {

        padding: 55px 0;
    }

    .specific-page .sp-title {

        font-size: 27px;
    }

    .specific-page .sp-feature-box {

        padding: 23px 19px;
    }

    .specific-page .sp-product-card {

        padding: 25px 20px;
    }

    .specific-page .sp-process-card {

        padding: 22px 18px;
    }

}