/**
 * Refonte de site web
 *
 * @package Manu_Portfolio
 */


/* =========================================
   BASE
   ========================================= */

.service-refonte {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(139, 92, 246, 0.08),
            transparent 30%
        ),
        var(--color-background);
}

.service-refonte section {
    position: relative;
}


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

.service-refonte__hero {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    padding: 90px 0 70px;
}

.service-refonte__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: 80px;
}

.service-refonte__hero-content {
    max-width: 720px;
}

.service-refonte__eyebrow,
.service-refonte__section-number,
.service-refonte__cta-meta {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 24px;

    color: var(--color-text-subtle);

    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.service-refonte__eyebrow span:first-child,
.service-refonte__section-number {
    color: var(--color-primary-soft);
}

.service-refonte__kicker,
.service-refonte__section-hint,
.service-refonte__cta-hint {
    margin: 0 0 18px;

    color: var(--color-primary-light);

    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-refonte__title {
    max-width: 850px;
    margin: 0;

    color: var(--color-text);

    font-size: clamp(48px, 6vw, 88px);
    font-weight: var(--font-weight-bold);
    line-height: 0.96;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.service-refonte__title span,
.service-refonte h2 span {
    color: var(--color-primary-soft);
}

.service-refonte__description {
    max-width: 620px;
    margin: 32px 0 0;

    color: var(--color-text-muted);

    font-size: 17px;
    line-height: 1.8;
}

.service-refonte__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 38px;
}

.service-refonte__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 52px;
    padding: 0 22px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}

.service-refonte__button:hover {
    transform: translateY(-2px);
}

.service-refonte__button--primary {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.service-refonte__button--primary:hover {
    background: var(--color-primary-light);
}

.service-refonte__button--secondary {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.02);
}

.service-refonte__button--secondary:hover {
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, 0.04);
}


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

.service-refonte__hero-visual {
    position: relative;
    min-width: 0;
}

.refonte-preview {
    position: relative;

    padding: 1px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(192, 132, 252, 0.35),
            rgba(139, 92, 246, 0.06),
            rgba(255, 255, 255, 0.04)
        );

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-lg);
}

.refonte-preview::before {
    content: "";

    position: absolute;
    inset: 20% -20% -20% 35%;

    background: var(--gradient-glow);

    filter: blur(30px);

    pointer-events: none;
}

.refonte-preview__topbar {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 6px;

    height: 42px;
    padding: 0 14px;

    background: #09070d;
    border-bottom: 1px solid var(--color-border);
}

.refonte-preview__dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-text-subtle);
}

.refonte-preview__url {
    margin-left: 12px;

    color: var(--color-text-subtle);

    font-family: var(--font-mono);
    font-size: 9px;
}

.refonte-preview__body {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 46px 1fr;

    min-height: 390px;

    background: #08070c;
}

.refonte-preview__old,
.refonte-preview__new {
    position: relative;
    padding: 25px 20px;
}

.refonte-preview__old {
    opacity: 0.5;
}

.refonte-preview__label {
    display: block;

    margin-bottom: 18px;

    color: var(--color-text-subtle);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
}

.refonte-preview__old-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 20px;
}

.refonte-preview__old-header span {
    width: 22px;
    height: 5px;

    background: var(--color-text-subtle);
}

.refonte-preview__old-header span:nth-child(2) {
    width: 80px;
}

.refonte-preview__old-hero {
    height: 115px;

    margin-bottom: 20px;

    background: #14121a;
}

.refonte-preview__old-hero div {
    width: 55%;
    height: 100%;

    background:
        repeating-linear-gradient(
            0deg,
            #1a1721 0,
            #1a1721 8px,
            #111018 8px,
            #111018 16px
        );
}

.refonte-preview__old-lines {
    display: grid;
    gap: 8px;

    margin-bottom: 22px;
}

.refonte-preview__old-lines span {
    display: block;

    height: 5px;

    background: #25212d;
}

.refonte-preview__old-lines span:nth-child(2) {
    width: 80%;
}

.refonte-preview__old-lines span:nth-child(3) {
    width: 90%;
}

.refonte-preview__old-lines span:nth-child(4) {
    width: 65%;
}

.refonte-preview__old-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.refonte-preview__old-cards span {
    height: 45px;

    background: #15131b;
}

.refonte-preview__divider {
    display: flex;
    align-items: center;
    justify-content: center;

    border-inline:
        1px solid rgba(168, 163, 184, 0.08);

    color: var(--color-primary-soft);

    font-size: 22px;
}

.refonte-preview__new {
    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, 0.07),
            transparent
        );
}

.refonte-preview__new-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.refonte-preview__new-header strong {
    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.refonte-preview__new-header div {
    display: flex;
    gap: 8px;
}

.refonte-preview__new-header span {
    width: 25px;
    height: 3px;

    background: var(--color-primary);
}

.refonte-preview__new-header span:nth-child(2) {
    width: 18px;
    opacity: 0.5;
}

.refonte-preview__new-header span:nth-child(3) {
    width: 12px;
    opacity: 0.3;
}

.refonte-preview__new-hero {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 10px;

    min-height: 135px;
    margin-bottom: 16px;
    padding: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.18),
            rgba(124, 58, 237, 0.04)
        );

    border: 1px solid rgba(192, 132, 252, 0.12);
}

.refonte-preview__new-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.refonte-preview__new-copy span {
    height: 5px;

    background: var(--color-primary-soft);
}

.refonte-preview__new-copy span:nth-child(1) {
    width: 80%;
}

.refonte-preview__new-copy span:nth-child(2) {
    width: 100%;
    opacity: 0.5;
}

.refonte-preview__new-copy span:nth-child(3) {
    width: 60%;
    opacity: 0.3;
}

.refonte-preview__new-shape {
    min-height: 100%;

    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.35),
            rgba(124, 58, 237, 0.08)
        );

    clip-path: polygon(
        50% 0,
        100% 20%,
        80% 100%,
        0 80%,
        20% 25%
    );
}

.refonte-preview__new-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.refonte-preview__new-cards span {
    height: 48px;

    border: 1px solid rgba(192, 132, 252, 0.12);

    background: rgba(255, 255, 255, 0.025);
}

.refonte-preview__badge {
    position: absolute;
    right: -16px;
    bottom: -18px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 16px;

    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;

    background: #0d0a13;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-md);
}

.refonte-preview__badge-dot,
.service-refonte__cta-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-success);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.65);
}


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

.service-refonte__hero-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 65px;

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.service-refonte__hero-meta > div {
    padding: 19px 20px;

    border-right: 1px solid var(--color-border);
}

.service-refonte__hero-meta > div:last-child {
    border-right: 0;
}

.service-refonte__hero-meta span {
    display: block;

    margin-bottom: 8px;

    color: var(--color-text-subtle);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
}

.service-refonte__hero-meta strong {
    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
}


/* =========================================
   SHARED SECTION HEADING
   ========================================= */

.service-refonte__intro,
.service-refonte__signs,
.service-refonte__objectives,
.service-refonte__features,
.service-refonte__transformation,
.service-refonte__target,
.service-refonte__process,
.service-refonte__cta {
    padding: var(--section-padding-block) 0;
}

.service-refonte__section-heading {
    max-width: 800px;
    margin-bottom: 65px;
}

.service-refonte__section-heading h2 {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(42px, 5vw, 72px);
    font-weight: var(--font-weight-bold);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.service-refonte__section-description {
    max-width: 650px;
    margin: 28px 0 0;

    color: var(--color-text-muted);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   SIGNS
   ========================================= */

.service-refonte__signs {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(139, 92, 246, 0.025),
            transparent
        );
}

.service-refonte__signs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid var(--color-border);
}

.refonte-sign {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 22px;

    padding: 30px 0;

    border-bottom: 1px solid var(--color-border);
}

.refonte-sign:nth-child(odd) {
    padding-right: 45px;
    border-right: 1px solid var(--color-border);
}

.refonte-sign:nth-child(even) {
    padding-left: 45px;
}

.refonte-sign__number,
.refonte-objective > span,
.refonte-feature > span,
.refonte-process > span {
    color: var(--color-primary-soft);

    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
}

.refonte-sign h3,
.refonte-objective h3,
.refonte-process h3 {
    margin: 0 0 10px;

    color: var(--color-text);

    font-size: 18px;
    font-weight: var(--font-weight-semibold);
}

.refonte-sign p,
.refonte-objective p,
.refonte-process p {
    max-width: 520px;
    margin: 0;

    color: var(--color-text-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   OBJECTIVES
   ========================================= */

.service-refonte__objectives-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.refonte-objective {
    min-height: 260px;
    padding: 26px;

    background: rgba(255, 255, 255, 0.018);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}

.refonte-objective:hover {
    transform: translateY(-5px);

    background: rgba(139, 92, 246, 0.035);
    border-color: rgba(192, 132, 252, 0.25);
}

.refonte-objective h3 {
    margin-top: 70px;
}


/* =========================================
   FEATURES
   ========================================= */

.service-refonte__features-list {
    border-top: 1px solid var(--color-border);
}

.refonte-feature {
    display: grid;
    grid-template-columns: 70px minmax(190px, 0.7fr) 1fr;
    align-items: center;
    gap: 25px;

    padding: 24px 0;

    border-bottom: 1px solid var(--color-border);
}

.refonte-feature strong {
    color: var(--color-text);

    font-size: 16px;
    font-weight: var(--font-weight-semibold);
}

.refonte-feature p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   TRANSFORMATION
   ========================================= */

.service-refonte__transformation {
    background: var(--color-surface);
}

.service-refonte__transformation-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    gap: 90px;
}

.service-refonte__transformation-content {
    max-width: 600px;
}

.service-refonte__transformation-content h2 {
    margin: 0 0 28px;

    color: var(--color-text);

    font-size: clamp(40px, 4.5vw, 65px);
    font-weight: var(--font-weight-bold);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.service-refonte__transformation-content > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;
    line-height: 1.8;
}

.service-refonte__transformation-visual {
    display: grid;
    grid-template-columns: 1fr 45px 1fr;
    align-items: center;
    gap: 12px;
}

.transformation-card {
    overflow: hidden;

    background: #09070d;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}

.transformation-card--new {
    border-color: rgba(139, 92, 246, 0.28);
}

.transformation-card__header {
    display: flex;
    justify-content: space-between;

    padding: 13px 15px;

    border-bottom: 1px solid var(--color-border);

    color: var(--color-text-subtle);

    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
}

.transformation-card__header small {
    color: var(--color-primary-soft);
}

.transformation-card__content {
    min-height: 245px;
    padding: 18px;
}

.transformation-card__block {
    height: 30px;
    margin-bottom: 13px;

    background: #16131c;
}

.transformation-card__block--wide {
    height: 95px;
}

.transformation-card__block--medium {
    width: 70%;
}

.transformation-card__row {
    display: flex;
    gap: 8px;
}

.transformation-card__row span {
    flex: 1;
    height: 60px;

    background: #131119;
}

.transformation-card__hero {
    height: 105px;
    margin-bottom: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.32),
            rgba(124, 58, 237, 0.04)
        );
}

.transformation-card--new .transformation-card__row {
    margin-bottom: 18px;
}

.transformation-card--new .transformation-card__row span {
    border: 1px solid rgba(192, 132, 252, 0.1);
    background: rgba(255, 255, 255, 0.025);
}

.transformation-card__cta {
    width: 80px;
    height: 25px;

    background: var(--color-primary);
    border-radius: 4px;
}

.transformation-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary-soft);

    font-size: 22px;
}


/* =========================================
   TARGET
   ========================================= */

.service-refonte__target {
    background: var(--color-background);
}

.service-refonte__target-inner {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 80px;

    padding: 70px 0;

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.service-refonte__target h2 {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(40px, 5vw, 70px);
    font-weight: var(--font-weight-bold);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.service-refonte__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.service-refonte__tags span {
    padding: 10px 13px;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.018);
}


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

.service-refonte__process {
    background: var(--color-surface);
}

.service-refonte__process-list {
    border-top: 1px solid var(--color-border);
}

.refonte-process {
    display: grid;
    grid-template-columns: 80px 1fr;

    padding: 27px 0;

    border-bottom: 1px solid var(--color-border);
}

.refonte-process > span {
    padding-top: 3px;
}

.refonte-process h3 {
    margin-bottom: 7px;
}


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

.service-refonte__cta {
    padding-bottom: 130px;
}

.service-refonte__cta-inner {
    position: relative;

    overflow: hidden;

    padding: 80px 60px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(139, 92, 246, 0.15),
            transparent 55%
        ),
        var(--color-surface-elevated);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.service-refonte__cta-inner::before,
.service-refonte__cta-inner::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border: 1px solid rgba(192, 132, 252, 0.06);
    border-radius: 50%;
}

.service-refonte__cta-inner::before {
    top: -160px;
    left: -100px;
}

.service-refonte__cta-inner::after {
    right: -100px;
    bottom: -160px;
}

.service-refonte__cta-meta {
    justify-content: center;
}

.service-refonte__cta-hint {
    margin-bottom: 20px;
}

.service-refonte__cta h2 {
    position: relative;
    z-index: 2;

    max-width: 950px;
    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(42px, 5vw, 72px);
    font-weight: var(--font-weight-bold);
    line-height: 0.98;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.service-refonte__cta-inner > p:not(.service-refonte__cta-hint) {
    position: relative;
    z-index: 2;

    max-width: 650px;
    margin: 28px auto 0;

    color: var(--color-text-muted);

    font-size: 15px;
    line-height: 1.8;
}

.service-refonte__cta-button {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;
    margin-top: 35px;
    padding: 0 25px;

    color: #fff;

    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;

    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-primary);

    transition:
        transform var(--transition-base),
        background var(--transition-base);
}

.service-refonte__cta-button:hover {
    transform: translateY(-3px);

    background: var(--color-primary-light);
}

.service-refonte__cta-status {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-top: 22px;

    color: var(--color-text-subtle);

    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
}


/* =========================================
   RESPONSIVE — 1100
   ========================================= */

@media (max-width: 1100px) {

    .service-refonte__hero-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .service-refonte__hero-content {
        max-width: 850px;
    }

    .service-refonte__hero-visual {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }

    .service-refonte__objectives-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-refonte__transformation-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .service-refonte__transformation-content {
        max-width: 800px;
    }

    .service-refonte__target-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}


/* =========================================
   RESPONSIVE — 800
   ========================================= */

@media (max-width: 800px) {

    .service-refonte__hero {
        padding-top: 65px;
    }

    .service-refonte__hero-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-refonte__hero-meta > div:nth-child(2) {
        border-right: 0;
    }

    .service-refonte__hero-meta > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }

    .service-refonte__signs-grid {
        grid-template-columns: 1fr;
    }

    .refonte-sign:nth-child(odd) {
        padding-right: 0;
        border-right: 0;
    }

    .refonte-sign:nth-child(even) {
        padding-left: 0;
    }

    .refonte-feature {
        grid-template-columns: 55px 1fr;
        gap: 18px;
    }

    .refonte-feature p {
        grid-column: 2;
    }

    .service-refonte__transformation-visual {
        grid-template-columns: 1fr;
    }

    .transformation-arrow {
        transform: rotate(90deg);
    }

}


/* =========================================
   RESPONSIVE — 600
   ========================================= */

@media (max-width: 600px) {

    .service-refonte__hero {
        min-height: auto;
        padding: 55px 0 50px;
    }

    .service-refonte__title {
        font-size: clamp(42px, 13vw, 65px);
    }

    .service-refonte__description {
        font-size: 15px;
    }

    .service-refonte__actions {
        flex-direction: column;
    }

    .service-refonte__button {
        width: 100%;
    }

    .refonte-preview__body {
        grid-template-columns: 1fr;
    }

    .refonte-preview__divider {
        height: 42px;

        border-top: 1px solid rgba(168, 163, 184, 0.08);
        border-bottom: 1px solid rgba(168, 163, 184, 0.08);
        border-inline: 0;
    }

    .refonte-preview__divider span {
        transform: rotate(90deg);
    }

    .refonte-preview__old,
    .refonte-preview__new {
        padding: 22px 16px;
    }

    .refonte-preview__badge {
        right: 10px;
        bottom: -14px;
    }

    .service-refonte__hero-meta {
        margin-top: 50px;
    }

    .service-refonte__hero-meta > div {
        padding: 16px 12px;
    }

    .service-refonte__section-heading {
        margin-bottom: 45px;
    }

    .service-refonte__section-heading h2,
    .service-refonte__transformation-content h2,
    .service-refonte__target h2,
    .service-refonte__cta h2 {
        font-size: clamp(38px, 11vw, 58px);
    }

    .service-refonte__objectives-grid {
        grid-template-columns: 1fr;
    }

    .refonte-objective {
        min-height: auto;
    }

    .refonte-objective h3 {
        margin-top: 45px;
    }

    .refonte-feature {
        grid-template-columns: 45px 1fr;
        gap: 12px;
    }

    .refonte-feature p {
        grid-column: 2;
    }

    .service-refonte__target-inner {
        padding: 50px 0;
    }

    .refonte-process {
        grid-template-columns: 55px 1fr;
    }

    .service-refonte__cta-inner {
        padding: 55px 22px;
    }

    .service-refonte__cta {
        padding-bottom: 80px;
    }

}


/* =========================================
   RESPONSIVE — 400
   ========================================= */

@media (max-width: 400px) {

    .service-refonte__hero-meta {
        grid-template-columns: 1fr;
    }

    .service-refonte__hero-meta > div {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .service-refonte__hero-meta > div:last-child {
        border-bottom: 0;
    }

    .refonte-sign {
        grid-template-columns: 42px 1fr;
        gap: 14px;
    }

    .service-refonte__tags span {
        font-size: 8px;
    }

}