/* ==========================================================
   INFO PRO 13 — JADE INSPIRATIONS
========================================================== */

.ip13-jade,
.ip13-jade * {
    box-sizing:border-box;
}

.ip13-jade {
    overflow:hidden;
    background:radial-gradient(
            circle at 50% 0,
            rgba(102,137,255,.10),
            transparent 28%
        ),
        #ffffff;
    color:#fff;
}

.ip13-jade-container {
    width:min(1240px,calc(100% - 40px));
    margin:0 auto;
}

.ip13-jade-section-label,
.ip13-jade-eyebrow {
    color:#6689ff;
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.14em;
}


/* HERO */

.ip13-jade-hero {
    position:relative;
    padding:95px 0 75px;
    text-align:center;
}

.ip13-jade-hero__glow {
    position:absolute;
    top:-350px;
    left:50%;
    width:950px;
    height:750px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(102,137,255,.20);
    filter:blur(140px);
    pointer-events:none;
}

.ip13-jade-hero .ip13-jade-container {
    position:relative;
    z-index:2;
}

.ip13-jade-eyebrow {
    display:inline-flex;
    padding:8px 12px;
    border:1px solid rgba(102,137,255,.35);
    border-radius:999px;
    background:rgba(102,137,255,.08);
}

.ip13-jade-hero h1 {
    max-width:1050px;
    margin:24px auto 0;
    color:#151515;
    font-size:clamp(3.5rem,8vw,7.5rem);
    line-height:.88;
    font-weight:950;
    letter-spacing:-.075em;
}

.ip13-jade-hero h1 span {
    display:block;
    margin-top:14px;
    color:#9d9daf;
    font-size:.48em;
    line-height:1.05;
    letter-spacing:-.045em;
}

.ip13-jade-lead {
    max-width:720px;
    margin:28px auto 0;
    color:#a5a5b7;
    font-size:.95rem;
    line-height:1.75;
}


/* BOUTONS */

.ip13-jade-actions {
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:30px;
}

.ip13-jade-button {
    display:inline-flex;
    min-height:51px;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:11px 19px;
    border-radius:10px;
    font-size:.67rem;
    font-weight:900;
    letter-spacing:.04em;
    text-decoration:none !important;
    transition:transform .16s ease,
        filter .16s ease,
        border-color .16s ease;
}

.ip13-jade-button:hover {
    transform:translateY(-2px);
}

.ip13-jade-button--primary {
    border:1px solid rgba(102,137,255,.55);
    background:linear-gradient(135deg,#1d3fd1,#6689ff);
    color:#fff !important;
    box-shadow:0 15px 35px rgba(102,137,255,.18);
}

.ip13-jade-button--primary:hover {
    filter:brightness(1.08);
}

.ip13-jade-button--secondary {
    border:1px solid rgba(0, 0, 0,.09);
    background:#ffffff;
    color:#151515 !important;
}

.ip13-jade-button--secondary:hover {
    border-color:rgba(102,137,255,.40);
}


/* NAVIGATEUR */

.ip13-jade-showcase {
    padding:10px 0 80px;
}

.ip13-jade-browser {
    max-width:1050px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid rgba(102,137,255,.25);
    border-radius:20px;
    background:#ffffff;
    box-shadow:0 35px 100px rgba(0,0,0,.45),
        0 0 70px rgba(102,137,255,.07);
}

.ip13-jade-browser__bar {
    display:grid;
    grid-template-columns:100px 1fr 100px;
    align-items:center;
    min-height:52px;
    padding:0 16px;
    border-bottom:1px solid rgba(0, 0, 0,.07);
}

.ip13-jade-browser__dots {
    display:flex;
    gap:6px;
}

.ip13-jade-browser__dots span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#343442;
}

.ip13-jade-browser__address {
    justify-self:center;
    padding:7px 24px;
    border:1px solid rgba(0, 0, 0,.06);
    border-radius:7px;
    background:#ffffff;
    color:#727286;
    font-size:.62rem;
}

.ip13-jade-browser__screen {
    min-height:430px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    background:radial-gradient(
            circle at 50% 50%,
            rgba(102,137,255,.12),
            transparent 35%
        ),
        #ffffff;
}

.ip13-jade-browser__screen > span {
    color:#55606e;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.7em;
}

.ip13-jade-browser__screen strong {
    margin-top:7px;
    color:#151515;
    font-size:clamp(3rem,8vw,6rem);
    line-height:1;
    font-weight:950;
    letter-spacing:-.06em;
}

.ip13-jade-browser__screen p {
    color:#858599;
    font-size:.72rem;
    letter-spacing:.08em;
}

.ip13-jade-browser__line {
    width:70px;
    height:3px;
    margin-top:20px;
    border-radius:20px;
    background:#6689ff;
    box-shadow:0 0 25px rgba(102,137,255,.65);
}


/* SECTIONS */

.ip13-jade-section {
    padding:90px 0;
    border-top:1px solid rgba(0, 0, 0,.06);
}

.ip13-jade-section--soft {
    background:#ffffff;
}

.ip13-jade-intro-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:90px;
}

.ip13-jade-section h2,
.ip13-jade-cta h2 {
    margin:14px 0 0;
    color:#151515;
    font-size:clamp(2.4rem,5vw,4.5rem);
    line-height:.95;
    font-weight:950;
    letter-spacing:-.06em;
}

.ip13-jade-section h2 span,
.ip13-jade-cta h2 span {
    color:#6689ff;
}

.ip13-jade-copy p,
.ip13-jade-feature__content p {
    margin:0 0 18px;
    color:#9999ac;
    font-size:.88rem;
    line-height:1.8;
}


/* SERVICES */

.ip13-jade-section-head {
    max-width:700px;
}

.ip13-jade-services {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:45px;
}

.ip13-jade-service {
    min-height:280px;
    padding:28px;
    border:1px solid rgba(0, 0, 0,.075);
    border-radius:16px;
    background:#ffffff;
}

.ip13-jade-service__number {
    color:#6689ff;
    font-size:.61rem;
    font-weight:900;
}

.ip13-jade-service h3 {
    margin:55px 0 0;
    color:#151515;
    font-size:1.25rem;
    font-weight:850;
}

.ip13-jade-service p {
    margin:12px 0 0;
    color:#88889c;
    font-size:.75rem;
    line-height:1.7;
}


/* FEATURE SEO */

.ip13-jade-feature {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.ip13-jade-code {
    display:grid;
    gap:8px;
    padding:22px;
    border:1px solid rgba(102,137,255,.20);
    border-radius:18px;
    background:#ffffff;
}

.ip13-jade-code div {
    display:grid;
    grid-template-columns:55px 1fr;
    align-items:center;
    min-height:70px;
    padding:12px 16px;
    border:1px solid rgba(0, 0, 0,.06);
    border-radius:10px;
    background:#ffffff;
}

.ip13-jade-code span {
    color:#6689ff;
    font-size:.62rem;
    font-weight:950;
}

.ip13-jade-code strong {
    color:#151515;
    font-size:.79rem;
}


/* RESULTAT */

.ip13-jade-section--result {
    background:radial-gradient(
            circle at 50% 50%,
            rgba(102,137,255,.10),
            transparent 35%
        ),
        #ffffff;
}

.ip13-jade-result {
    max-width:850px;
    margin:0 auto;
    text-align:center;
}

.ip13-jade-result p {
    max-width:700px;
    margin:22px auto 0;
    color:#5b6472;
    font-size:.86rem;
    line-height:1.8;
}

.ip13-jade-result__tags {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
    margin-top:28px;
}

.ip13-jade-result__tags span {
    padding:8px 11px;
    border:1px solid rgba(102,137,255,.20);
    border-radius:999px;
    background:rgba(102,137,255,.06);
    color:#b2a4d7;
    font-size:.59rem;
    font-weight:750;
}


/* CTA */

.ip13-jade-cta {
    padding:0 0 90px;
}

.ip13-jade-cta__box {
    padding:65px 30px;
    border:1px solid rgba(102,137,255,.23);
    border-radius:22px;
    background:linear-gradient(
            135deg,
            rgba(102,137,255,.10),
            rgba(255,255,255,.015)
        ),
        #ffffff;
    text-align:center;
}

.ip13-jade-cta__box p {
    max-width:620px;
    margin:18px auto 0;
    color:#9292a5;
    font-size:.83rem;
    line-height:1.7;
}


/* TABLETTE */

@media(max-width:900px) {

    .ip13-jade-intro-grid,
    .ip13-jade-feature {
        grid-template-columns:1fr;
        gap:35px;
    }

    .ip13-jade-services {
        grid-template-columns:1fr 1fr;
    }

    .ip13-jade-browser__screen {
        min-height:350px;
    }
}


/* MOBILE */

@media(max-width:650px) {

    .ip13-jade-container {
        width:calc(100% - 20px);
    }

    .ip13-jade-hero {
        padding:55px 0 45px;
    }

    .ip13-jade-hero h1 {
        font-size:clamp(3.3rem,16vw,5rem);
    }

    .ip13-jade-lead {
        font-size:.78rem;
    }

    .ip13-jade-actions {
        display:grid;
        grid-template-columns:1fr;
    }

    .ip13-jade-button {
        width:100%;
    }

    .ip13-jade-showcase {
        padding-bottom:45px;
    }

    .ip13-jade-browser__bar {
        grid-template-columns:60px 1fr 60px;
    }

    .ip13-jade-browser__address {
        padding:6px 10px;
        font-size:.54rem;
    }

    .ip13-jade-browser__screen {
        min-height:270px;
        padding:20px;
    }

    .ip13-jade-browser__screen strong {
        font-size:2.8rem;
    }

    .ip13-jade-section {
        padding:55px 0;
    }

    .ip13-jade-services {
        grid-template-columns:1fr;
    }

    .ip13-jade-service {
        min-height:auto;
        padding:22px;
    }

    .ip13-jade-service h3 {
        margin-top:30px;
    }

    .ip13-jade-cta {
        padding-bottom:55px;
    }

    .ip13-jade-cta__box {
        padding:40px 16px;
    }
}


/* ==========================================================
   JADE — FINITIONS PREMIUM
========================================================== */


/* HERO moins massif */

.ip13-jade-hero {
    padding-top:78px !important;
    padding-bottom:62px !important;
}

.ip13-jade-hero h1 {
    max-width:1050px !important;

    font-size:clamp(3.2rem,6.4vw,6.3rem) !important;

    line-height:.92 !important;
}

.ip13-jade-hero h1 span {
    max-width:800px;

    margin:14px auto 0 !important;

    font-size:.43em !important;

    line-height:1.08 !important;
}


/* Texte introductif légèrement plus lisible */

.ip13-jade-lead {
    max-width:760px !important;

    font-size:1rem !important;

    line-height:1.75 !important;
}


/* ==========================================================
   TITRES SECONDAIRES
========================================================== */

.ip13-jade-section h2,
.ip13-jade-cta h2 {
    font-size:clamp(2.25rem,4.2vw,3.9rem) !important;

    line-height:.98 !important;
}


/* Évite le Z isolé dans "A à Z" */

.ip13-jade-intro-grid > div:first-child {
    min-width:0;
}

.ip13-jade-intro-grid h2 {
    max-width:500px !important;
}


/* ==========================================================
   TEXTES
========================================================== */

.ip13-jade-copy p,
.ip13-jade-feature__content p {
    font-size:.95rem !important;

    line-height:1.8 !important;
}


.ip13-jade-service p {
    font-size:.82rem !important;

    line-height:1.72 !important;
}


.ip13-jade-service h3 {
    font-size:1.35rem !important;
}


.ip13-jade-result p {
    font-size:.92rem !important;

    line-height:1.8 !important;
}


.ip13-jade-cta__box p {
    font-size:.9rem !important;
}


/* ==========================================================
   VRAIE CAPTURE DU SITE
========================================================== */

.ip13-jade-browser__screen {
    position:relative !important;

    min-height:0 !important;

    padding:0 !important;

    background:#ffffff !important;
}


.ip13-jade-browser__screenshot {
    display:block;

    width:100% !important;
    height:auto !important;

    margin:0 !important;

    object-fit:cover !important;
}


.ip13-jade-browser__fallback {
    min-height:430px;

    display:flex;

    flex-direction:column;

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

    padding:40px;

    background:radial-gradient(
            circle at 50% 50%,
            rgba(102,137,255,.12),
            transparent 35%
        ),
        #ffffff;
}


/* TABLETTE */

@media(max-width:900px) {

    .ip13-jade-hero h1 {
        font-size:clamp(3rem,8vw,5.2rem) !important;
    }

    .ip13-jade-intro-grid h2 {
        max-width:650px !important;
    }

    .ip13-jade-copy p,
    .ip13-jade-feature__content p {
        font-size:.9rem !important;
    }
}


/* MOBILE */

@media(max-width:650px) {

    .ip13-jade-hero {
        padding-top:48px !important;
        padding-bottom:42px !important;
    }

    .ip13-jade-hero h1 {
        font-size:clamp(2.8rem,14vw,4.3rem) !important;
    }

    .ip13-jade-hero h1 span {
        font-size:.46em !important;
    }

    .ip13-jade-lead {
        font-size:.82rem !important;
    }

    .ip13-jade-section h2,
    .ip13-jade-cta h2 {
        font-size:clamp(2.1rem,11vw,3rem) !important;
    }

    .ip13-jade-copy p,
    .ip13-jade-feature__content p {
        font-size:.84rem !important;
    }

    .ip13-jade-service p {
        font-size:.78rem !important;
    }
}



/* ==========================================================
   JADE — TYPOGRAPHIE ÉQUILIBRÉE FINALE
========================================================== */


/* Gros titre principal : moins énorme */
.ip13-jade-hero h1 {
    font-size:clamp(3rem, 5.3vw, 5.2rem) !important;
    line-height:.95 !important;
}


/* Sous-titre du hero : taille intermédiaire */
.ip13-jade-hero h1 span {
    max-width:820px !important;
    margin:13px auto 0 !important;

    font-size:.44em !important;
    line-height:1.12 !important;
}


/* Texte introductif : plus lisible */
.ip13-jade-lead {
    max-width:760px !important;

    font-size:1.05rem !important;
    line-height:1.7 !important;
}


/* Titres des sections : moins gros */
.ip13-jade-section h2,
.ip13-jade-cta h2 {
    font-size:clamp(2.2rem, 3.5vw, 3.35rem) !important;
    line-height:1 !important;
}


/* Titres des cartes */
.ip13-jade-service h3 {
    font-size:1.3rem !important;
    line-height:1.2 !important;
}


/* Paragraphes généraux : plus grands */
.ip13-jade-copy p,
.ip13-jade-feature__content p,
.ip13-jade-result p,
.ip13-jade-cta__box p {
    font-size:1rem !important;
    line-height:1.75 !important;
}


/* Texte des cartes : plus lisible */
.ip13-jade-service p {
    font-size:.9rem !important;
    line-height:1.7 !important;
}


/* Petits éléments SEO / WP / WC / DEV */
.ip13-jade-code strong {
    font-size:.88rem !important;
}


/* Labels violets */
.ip13-jade-section-label,
.ip13-jade-eyebrow {
    font-size:.68rem !important;
}


/* Tags résultat */
.ip13-jade-result__tags span {
    font-size:.66rem !important;
}


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

@media (max-width: 900px) {

    .ip13-jade-hero h1 {
        font-size:clamp(3rem, 7vw, 4.5rem) !important;
    }

    .ip13-jade-section h2,
    .ip13-jade-cta h2 {
        font-size:clamp(2.2rem, 6vw, 3.2rem) !important;
    }

    .ip13-jade-copy p,
    .ip13-jade-feature__content p,
    .ip13-jade-result p,
    .ip13-jade-cta__box p {
        font-size:.95rem !important;
    }
}


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

@media (max-width: 650px) {

    .ip13-jade-hero h1 {
        font-size:clamp(2.7rem, 12vw, 3.7rem) !important;
    }

    .ip13-jade-hero h1 span {
        font-size:.48em !important;
    }

    .ip13-jade-lead {
        font-size:.9rem !important;
    }

    .ip13-jade-section h2,
    .ip13-jade-cta h2 {
        font-size:clamp(2rem, 9vw, 2.7rem) !important;
    }

    .ip13-jade-copy p,
    .ip13-jade-feature__content p,
    .ip13-jade-result p,
    .ip13-jade-cta__box p {
        font-size:.9rem !important;
    }

    .ip13-jade-service p {
        font-size:.85rem !important;
    }
}


/* ==========================================================
   IP13 REALISATION — NUMEROS STYLE ACCUEIL
   ========================================================== */

/*
 * Numéros 01 / 02 / 03 des cartes expertise.
 * Même esprit visuel que les cartes services de l'accueil.
 */

/* IP13 REALISATION NUMBER BOXES FINAL START */

/*
 * 01 / 02 / 03
 * Même esprit que les cartes services de l'accueil.
 */
.ip13-jade-service__number {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:42px !important;
    min-width:42px !important;
    height:42px !important;

    margin:0 !important;
    padding:0 !important;

    border:1px solid rgba(102,137,255,.48) !important;
    border-radius:9px !important;

    background:linear-gradient(
            135deg,
            rgba(102,137,255,.16),
            rgba(102,137,255,.055)
        ) !important;

    box-shadow:inset 0 0 18px rgba(102,137,255,.05),
        0 0 18px rgba(102,137,255,.04) !important;

    color:#b56cff !important;

    font-size:.62rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.03em !important;
}

/*
 * L'ancien CSS mettait 55px avant le titre.
 * On réduit pour que le rendu ressemble aux cartes de l'accueil.
 */
.ip13-jade-service h3 {
    margin-top:28px !important;
}

@media (max-width:650px) {

    .ip13-jade-service__number {
        width:40px !important;
        min-width:40px !important;
        height:40px !important;

        border-radius:8px !important;
    }

    .ip13-jade-service h3 {
        margin-top:24px !important;
    }
}

/* IP13 REALISATION NUMBER BOXES FINAL END */