/* ============================================================
   Prodecta — Feuille de style partagée des pages internes
   Reprend les tokens et la DA de l'accueil (index.html).
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --green: #2BDE73;
    --green-dim: rgba(43, 222, 115, .12);
    --green-glow: rgba(43, 222, 115, .25);
    --dark-green: #1B6B44;
    --bg: #F4F1EA;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, .75);
    --border: rgba(0, 0, 0, .08);
    --text: #1a1a1a;
    --text-dim: rgba(26, 26, 26, .5);
    --text-mid: rgba(26, 26, 26, .7);
    --radius: 16px;
    --radius-lg: 24px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden
}

body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 100vh;
    background: var(--dark-green);
    opacity: .35;
    z-index: 9999;
    pointer-events: none
}

a {
    color: var(--dark-green);
    text-decoration: none;
    transition: opacity .2s
}

a:hover {
    opacity: .8
}

img {
    max-width: 100%;
    height: auto
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px
}

.container-narrow {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px
}

.section-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark-green);
    margin-bottom: 12px
}

.section-title {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px
}

.section-sub {
    font-size: 17px;
    color: var(--text-mid);
    max-width: 640px;
    line-height: 1.7
}

/* ===== NAV (identique accueil) ===== */
nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - 40px);
    max-width: 1320px;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(244, 241, 234, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 100px;
    will-change: transform;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06)
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    white-space: nowrap;
    color: inherit;
}

.nav-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain
}

.nav-links {
    display: flex;
    gap: 22px;
    white-space: nowrap;
}

.nav-links a {
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: var(--text);
    opacity: 1
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-primary {
    background: var(--dark-green);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 107, 68, .3);
    opacity: 1;
    color: #fff;
}

.btn-quote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-dim);
    color: var(--dark-green);
    border: 1.5px solid var(--dark-green);
    padding: 9px 17px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
    transition: all .25s cubic-bezier(.175, .885, .32, 1.275);
}

.btn-quote svg {
    stroke: var(--dark-green);
    transition: stroke .25s;
}

.btn-quote:hover {
    background: var(--dark-green);
    color: #fff;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 107, 68, .3);
}

.btn-quote:hover svg {
    stroke: #fff;
}

.btn-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dark-green);
    color: var(--bg);
    padding: 10px 18px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.175, .885, .32, 1.275);
    box-shadow: 0 4px 16px rgba(27, 107, 68, 0.2);
}

.btn-call svg {
    stroke: var(--bg);
}

.btn-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 107, 68, 0.35);
    opacity: 1;
}

.lbl-short {
    display: none;
}

/* ===== FIL D'ARIANE ===== */
.breadcrumb {
    padding: 118px 0 0;
    font-size: 13px;
    color: var(--text-dim);
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.breadcrumb li+li::before {
    content: '›';
    margin-right: 6px;
    color: var(--text-dim);
}

.breadcrumb a {
    color: var(--text-dim);
}

.breadcrumb a:hover {
    color: var(--dark-green);
    opacity: 1;
}

.breadcrumb [aria-current="page"] {
    color: var(--dark-green);
    font-weight: 600;
}

/* ===== HERO DE PAGE ===== */
.page-hero {
    padding: 40px 0 24px;
}

.page-hero h1 {
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    max-width: 900px;
}

.page-hero .lead {
    font-size: 18px;
    color: var(--text-mid);
    line-height: 1.75;
    max-width: 760px;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-dim);
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* Encadré "réponse directe" citable (GEO) */
.answer-box {
    background: var(--bg-card);
    border: 1px solid rgba(27, 107, 68, .25);
    border-left: 4px solid var(--dark-green);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 26px 0 0;
    max-width: 820px;
    box-shadow: 0 4px 24px rgba(27, 107, 68, .06);
}

.answer-box p {
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
}

/* ===== SECTIONS DE CONTENU ===== */
main section {
    padding: 56px 0;
}

.prose h2 {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 14px;
}

.prose h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 26px 0 10px;
}

.prose p {
    color: var(--text-mid);
    margin-bottom: 14px;
    line-height: 1.75;
    font-size: 16px;
}

.prose ul,
.prose ol {
    margin: 0 0 16px 20px;
    color: var(--text-mid);
    line-height: 1.75;
}

.prose li {
    margin-bottom: 8px;
}

.prose strong {
    color: var(--text);
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== GRILLES DE CARTES ===== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.p-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(27, 107, 68, .1);
}

.p-card h3 {
    font-size: 17px;
    font-weight: 700;
}

.p-card p {
    font-size: 14.5px;
    color: var(--text-mid);
    line-height: 1.65;
}

.p-card .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--green-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.p-card .card-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--dark-green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-card .card-link {
    margin-top: auto;
    font-weight: 600;
    font-size: 14px;
}

/* ===== TABLEAU COMPARATIF ===== */
.table-wrap {
    overflow-x: auto;
    margin: 28px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
}

table.compare {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: 14.5px;
}

table.compare th,
table.compare td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.6;
}

table.compare thead th {
    background: rgba(27, 107, 68, .06);
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dark-green);
}

table.compare tbody tr:last-child td {
    border-bottom: none;
}

table.compare td:first-child {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

table.compare td {
    color: var(--text-mid);
}

/* ===== ÉTAPES / PROCESS ===== */
.steps {
    counter-reset: step;
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px 22px 74px;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
}

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 22px;
    top: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dark-green);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.step h3 {
    font-size: 16.5px;
    font-weight: 700;
    margin-bottom: 6px;
}

.step p {
    font-size: 14.5px;
    color: var(--text-mid);
    line-height: 1.65;
}

/* ===== FAÇADE DÉMO (iframe au clic) ===== */
.demo-facade {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
    aspect-ratio: 16 / 9;
    background: var(--dark-green);
    cursor: pointer;
    margin: 28px 0 10px;
}

.demo-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
    display: block;
}

.demo-facade .demo-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45));
    color: #fff;
    text-align: center;
    padding: 20px;
}

.demo-facade .demo-play .play-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(43, 222, 115, .5);
    transition: transform .25s;
}

.demo-facade:hover .demo-play .play-btn {
    transform: scale(1.08);
}

.demo-facade .demo-play .play-btn svg {
    width: 26px;
    height: 26px;
    fill: #0B3D26;
    margin-left: 4px;
}

.demo-facade .demo-play span {
    font-weight: 600;
    font-size: 15px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.demo-facade iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.demo-caption {
    font-size: 13px;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 8px;
}

/* ===== FAQ (identique accueil) ===== */
.faq-container {
    max-width: 800px;
    margin: 28px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item.active {
    border-color: rgba(27, 107, 68, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.faq-question {
    padding: 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: transparent;
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    transition: color 0.3s;
    user-select: none;
}

.faq-item.active .faq-question {
    color: var(--dark-green);
}

.faq-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(27, 107, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon svg {
    width: 12px;
    height: 12px;
    stroke: var(--dark-green);
    stroke-width: 3;
    stroke-linecap: round;
    transition: transform 0.3s;
}

.faq-item.active .faq-icon {
    background: var(--dark-green);
}

.faq-item.active .faq-icon svg {
    stroke: var(--bg);
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.015);
}

.faq-answer-inner {
    padding: 0 24px 24px;
    color: var(--text-mid);
    line-height: 1.7;
    font-size: 15px;
}

/* ===== BANDEAU CTA FINAL ===== */
.cta-band {
    background: var(--dark-green);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(27, 107, 68, .3);
}

.cta-band h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
}

.cta-band p {
    color: rgba(255, 255, 255, .8);
    max-width: 560px;
    margin: 0 auto 26px;
    font-size: 16px;
    line-height: 1.7;
}

.cta-band .hero-cta-row {
    justify-content: center;
    margin-top: 0;
}

.cta-band .btn-primary {
    background: var(--green);
    color: #0B3D26;
    font-size: 15px;
    padding: 13px 28px;
}

.cta-band .btn-quote {
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font-size: 15px;
    padding: 12px 26px;
}

.cta-band .btn-quote:hover {
    background: #fff;
    color: var(--dark-green);
}

/* ===== MAILLAGE BAS DE PAGE ===== */
.related {
    border-top: 1px solid var(--border);
}

.related h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.related ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.related a {
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== FOOTER (identique accueil) ===== */
footer {
    background: var(--dark-green);
    color: #fff;
    padding: 48px 0
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.footer-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.footer-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, .6)
}

.footer-links a:hover {
    color: #fff
}

.footer-cta {
    font-size: 14px;
    color: rgba(255, 255, 255, .6)
}

.footer-cta a {
    color: var(--green)
}

/* ===== BARRE CTA MOBILE (identique accueil) ===== */
.mobile-cta-bar {
    display: none;
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
}

@media (max-width: 768px) {
    .btn-call .call-text {
        display: none;
    }

    .lbl-full {
        display: none;
    }

    .lbl-short {
        display: inline;
    }

    .breadcrumb {
        padding-top: 104px;
    }

    main section {
        padding: 40px 0;
    }

    .cta-band {
        padding: 36px 22px;
    }

    .mobile-cta-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        padding-bottom: max(env(safe-area-inset-bottom, 10px), 12px);
        background: rgba(244, 241, 234, .92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
    }

    .mobile-cta-bar a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: 48px;
        border-radius: 100px;
        font-weight: 600;
        font-size: 14px;
        flex: 1;
    }

    .mobile-cta-bar .mcb-quote {
        background: var(--green-dim);
        color: var(--dark-green);
        border: 1.5px solid var(--dark-green);
    }

    .mobile-cta-bar .mcb-rdv {
        background: var(--dark-green);
        color: #fff;
    }

    .mobile-cta-bar .mcb-call {
        background: var(--green);
        color: #0B3D26;
        flex: 0 0 48px;
    }

    body {
        padding-bottom: 76px;
    }
}

/* ============================================================
   V2 — Signature visuelle de l'accueil appliquée aux pages
   (orbites animées, dégradés, glassmorphism, reveals)
   ============================================================ */

/* ---- Hero centré, H1 dégradé (comme #hero de l'accueil) ---- */
.page-hero {
    position: relative;
    text-align: center;
    padding: 48px 0 36px;
    overflow: hidden;
}

.page-hero .container,
.page-hero .container-narrow {
    position: relative;
    z-index: 2;
}

.page-hero h1 {
    margin-left: auto;
    margin-right: auto;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--text);
}

.page-hero .lead {
    margin-left: auto;
    margin-right: auto;
}

.page-hero .hero-cta-row,
.page-hero .page-meta {
    justify-content: center;
}

.page-hero .answer-box {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ---- Orbites animées (signature de l'accueil) ---- */
@keyframes orbit-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes orbit-ccw {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes float-pulse {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.orbital-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.85;
}

.orbit-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-inner {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(27, 107, 68, 0.15);
    animation: orbit-cw 15s linear infinite;
}

.ring-inner-dot {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--dark-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--dark-green);
}

.ring-mid {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    border: 1px dashed rgba(27, 107, 68, 0.25);
    animation: orbit-ccw 25s linear infinite;
}

.ring-mid-dash-1,
.ring-mid-dash-2 {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 4px;
    background: rgba(27, 107, 68, 0.6);
    border-radius: 10px;
    transform: translateY(-50%);
}

.ring-mid-dash-1 { right: -6px; }
.ring-mid-dash-2 { left: -6px; }

.ring-outer {
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    border: 1px solid rgba(27, 107, 68, 0.1);
    animation: orbit-cw 40s linear infinite;
}

.ring-outer-element {
    position: absolute;
    top: 80px;
    right: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ring-outer-box {
    width: 16px;
    height: 16px;
    background: rgba(27, 107, 68, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(27, 107, 68, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-outer-dot {
    width: 4px;
    height: 4px;
    background: var(--dark-green);
    border-radius: 50%;
}

.floating-data {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.3;
}

.fd-1, .fd-2, .fd-3 {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--dark-green);
    border-radius: 50%;
    animation: float-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.fd-1 { top: 25%; left: 25%; }
.fd-2 { bottom: 33%; right: 25%; animation-delay: 0.7s; }
.fd-3 { top: 66%; left: 50%; animation-delay: 0.3s; }

/* ---- Animations d'apparition au scroll (comme l'accueil) ---- */
.reveal-up,
.reveal-fade {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-up { transform: translateY(40px); }

.reveal-fade {
    transform: scale(0.95);
    transition-duration: 1.2s;
}

.reveal-up.active,
.reveal-fade.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-fade { opacity: 1; transform: none; transition: none; }
    .ring-inner, .ring-mid, .ring-outer, .fd-1, .fd-2, .fd-3 { animation: none; }
}

/* ---- En-têtes de section centrés ---- */
.sec-center {
    text-align: center;
}

.sec-center .section-sub {
    margin-left: auto;
    margin-right: auto;
}

/* ---- Glassmorphism (identique .glass / .glass-green accueil) ---- */
.answer-box,
.p-card,
.step,
.table-wrap,
.faq-item {
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.answer-box {
    border: 1px solid rgba(27, 107, 68, .25);
    border-left: 4px solid var(--dark-green);
    box-shadow: 0 4px 32px rgba(27, 107, 68, .08);
}

.p-card:hover {
    border-color: rgba(27, 107, 68, .35);
    box-shadow: 0 16px 40px rgba(27, 107, 68, .12);
}

.step {
    transition: transform .25s, box-shadow .25s;
}

.step:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(27, 107, 68, .1);
}

/* ---- Pastilles clients empilées (trust-stack accueil) ---- */
.trust-strip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-top: 26px;
    max-width: 100%;
}

.trust-strip .t-stack {
    display: flex;
    align-items: center;
}

.trust-strip .t-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bg);
    margin-left: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: transform .2s;
    box-shadow: 0 4px 12px rgba(0, 43, 61, .08);
}

.trust-strip .t-circle:first-child { margin-left: 0; z-index: 6; }
.trust-strip .t-circle:nth-child(2) { z-index: 5; }
.trust-strip .t-circle:nth-child(3) { z-index: 4; }
.trust-strip .t-circle:nth-child(4) { z-index: 3; }
.trust-strip .t-circle:nth-child(5) { z-index: 2; }

.trust-strip .t-circle:hover {
    transform: translateY(-6px);
    z-index: 10;
    box-shadow: 0 8px 16px rgba(0, 43, 61, .15);
}

.trust-strip .t-circle img {
    /* Les logos sont recadrés sur leur contenu et de proportions très
       variées : « contain » avec une marge les garde entiers dans la
       pastille, là où « cover » les tronquait. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
}

.trust-strip .t-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-mid);
    text-align: left;
    line-height: 1.4;
    border-left: 1px solid rgba(0, 43, 61, .1);
    padding-left: 18px;
}

@media (max-width: 640px) {
    .trust-strip .t-label {
        border-left: none;
        padding-left: 0;
        text-align: center;
        font-size: 13px;
    }
}

/* ---- Pastilles fonctionnalités (chips) ---- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}

.chip {
    padding: 9px 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-mid);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    white-space: nowrap;
}

/* ---- Sections média / texte ---- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 30px;
}

.split-img img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .14);
    display: block;
}

.split .prose h2 { margin-top: 0; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Cartes réalisations avec visuel ---- */
.realisation-card {
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
}

.realisation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(27, 107, 68, .14);
}

.realisation-card .r-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--green-dim);
    position: relative;
}

.realisation-card .r-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.realisation-card:hover .r-img img {
    transform: scale(1.05);
}

.realisation-card .r-img.logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--green-dim), rgba(27, 107, 68, .05));
}

.realisation-card .r-img.logo-tile img {
    width: 46%;
    height: 46%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .12));
}

.realisation-card .r-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    background: rgba(244, 241, 234, .92);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--dark-green);
}

.realisation-card .r-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.realisation-card .r-body h3 {
    font-size: 18px;
    font-weight: 800;
}

.realisation-card .r-body p {
    font-size: 14.5px;
    color: var(--text-mid);
    line-height: 1.65;
}

.realisation-card .r-links {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 14px;
    font-weight: 600;
}

/* ---- Tuiles de stats (études de cas) ---- */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.stat-tile {
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(27, 107, 68, .2);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(27, 107, 68, .06);
}

.stat-tile .st-num {
    font-size: 30px;
    font-weight: 900;
    color: var(--dark-green);
    line-height: 1.1;
    margin-bottom: 6px;
}

.stat-tile .st-label {
    font-size: 13.5px;
    color: var(--text-mid);
    line-height: 1.5;
}

/* ---- Bandeau CTA : halo + anneau décoratif ---- */
.cta-band {
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(43, 222, 115, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 222, 115, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 75%);
    pointer-events: none;
}

.cta-band > * {
    position: relative;
    z-index: 1;
}

/* ---- Divers ---- */
.page-hero + section { padding-top: 30px; }


/* ============================================================
   V4 — BIBLIOTHÈQUE DE COMPOSANTS DE L'ACCUEIL
   Blocs extraits à l'identique de index.html pour que les pages
   internes disposent du MÊME vocabulaire visuel que l'accueil :
   cartes clients à accent de marque, stat-cards, cartes
   d'intégration à dégradé, cartes GEO, dashboard, témoignages,
   zones, timeline, équipe, accordéon démo, mockups.
   Ne pas éditer à la main : régénéré depuis l'accueil.
   ============================================================ */
.demo-accordion {
    display: flex;
    gap: 0;
    height: 850px;
    margin-top: 40px;
    border-radius: var(--radius-lg);
    overflow: hidden
}

.demo-panel {
    position: relative;
    flex: 0 0 80px;
    transition: flex .6s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, .06);
    background: var(--bg-card);
    transform: translateZ(0);
    will-change: flex
}

.demo-panel:last-child {
    border-right: none
}

.demo-panel.active {
    flex: 1 1 0;
    cursor: default
}

.demo-panel.coming-soon {
    opacity: .45;
    pointer-events: none
}

.demo-panel .panel-bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.demo-panel .panel-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.demo-panel .panel-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity .4s
}

.demo-panel.active .panel-bg::after {
    opacity: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

.demo-panel.active .panel-bg {
    opacity: 0
}

.demo-panel-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: opacity .3s;
    z-index: 2
}

.demo-panel.active .demo-panel-label {
    opacity: 0;
    pointer-events: none
}

.demo-panel-label span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5)
}

.demo-panel-label .sector-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center
}

.demo-panel-label .sector-icon svg {
    width: 18px;
    height: 18px
}

.demo-panel-label .badge-soon {
    font-size: 10px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    padding: 4px 8px;
    border-radius: 100px;
    writing-mode: vertical-rl;
    color: rgba(255, 255, 255, .7)
}

.demo-panel-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity .4s .2s;
    z-index: 1
}

.demo-panel.active .demo-panel-content {
    opacity: 1
}

.demo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(27, 107, 68, .95);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    flex-shrink: 0;
    color: #fff
}

.demo-panel-header .demo-info {
    display: flex;
    align-items: center;
    gap: 12px
}

.demo-panel-header .demo-info .cat {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--green);
    letter-spacing: 1px
}

.demo-panel-header .demo-info .name {
    color: #fff
}

.demo-panel-header .demo-info .name {
    font-size: 16px;
    font-weight: 700
}

.demo-panel-header .demo-actions {
    display: flex;
    gap: 10px
}

.demo-panel-header .demo-actions a {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color .2s
}

.demo-panel-header .demo-actions a:hover {
    background: rgba(255, 255, 255, .2)
}

/* BRAND THEMES FOR DEMOS */
.brand-senlisse .demo-panel-header {
    background: #F8F5F0;
    /* Beige Cour Senlisse */
}

.brand-senlisse .demo-info .cat,
.brand-senlisse .demo-info .name {
    color: #A07D4F;
    /* Marron/Gold Cour Senlisse */
}

.brand-senlisse .demo-actions a {
    background: rgba(160, 125, 79, 0.15);
    color: #A07D4F;
}

.brand-senlisse .demo-actions a:hover {
    background: #A07D4F;
    color: #FFF;
}

/* Château de Méridon (gold/dark) */
.brand-meridon .demo-panel-header {
    background: #1C1A17;
}

.brand-meridon .demo-info .cat,
.brand-meridon .demo-info .name {
    color: #C5A05B;
}

.brand-meridon .demo-actions a {
    background: rgba(197, 160, 91, 0.18);
    color: #C5A05B;
}

.brand-meridon .demo-actions a:hover {
    background: #C5A05B;
    color: #1C1A17;
}

/* Les Jardins de la Sud (gîte — cream/maroon) */
.brand-gite .demo-panel-header {
    background: #FAF4EC;
}

.brand-gite .demo-info .cat,
.brand-gite .demo-info .name {
    color: #7A3B2E;
}

.brand-gite .demo-actions a {
    background: rgba(224, 123, 57, 0.15);
    color: #B8542E;
}

.brand-gite .demo-actions a:hover {
    background: #E07B39;
    color: #FFF;
}

.brand-restaurant .demo-panel-header {
    background: #FFFFFF;
    /* Blanc Matsuri */
}

.brand-restaurant .demo-info .cat,
.brand-restaurant .demo-info .name {
    color: #e8899b;
    /* Rose Matsuri */
}

.brand-restaurant .demo-actions a {
    background: rgba(244, 165, 181, 0.15);
    color: #e8899b;
}

.brand-restaurant .demo-actions a:hover {
    background: #F4A5B5;
    color: #fff;
}

.brand-gym .demo-panel-header {
    background: #0F0F0F;
    /* Dark for Fitness Park */
}

.brand-gym .demo-info .cat {
    color: #FDE902;
    /* Fitness Park Yellow */
}

.brand-gym .demo-actions a {
    background: rgba(253, 233, 2, 0.15);
    color: #FDE902;
}

.brand-gym .demo-actions a:hover {
    background: #FDE902;
    color: #0F0F0F;
}

.brand-hotel .demo-panel-header {
    background: #F5EDE3;
}

.brand-hotel .demo-info .cat {
    color: #C8842A;
}

.brand-hotel .demo-info .name {
    color: #2C2420;
}

.brand-hotel .demo-actions a {
    background: rgba(200, 132, 42, 0.15);
    color: #C8842A;
}

.brand-hotel .demo-actions a:hover {
    background: #C8842A;
    color: #fff;
}

/* /BRAND THEMES */

.demo-iframe-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    overscroll-behavior: contain
}

.demo-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    touch-action: pan-x pan-y
}

.int-carousel-wrap {
    position: relative;
    margin-top: 48px;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.int-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 20px max(24px, calc((100vw - 1152px) / 2)) 20px;
    scroll-behavior: smooth;
}

.int-carousel::-webkit-scrollbar {
    display: none
}

.int-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border-radius: 20px;
    padding: 28px 24px;
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    transition: transform .4s cubic-bezier(.25, .46, .45, .94), box-shadow .4s cubic-bezier(.25, .46, .45, .94), border-color .4s;
    border: 1px solid rgba(0, 0, 0, .08);
    position: relative
}

.int-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12), 0 20px 50px rgba(0, 0, 0, .08)
}

.int-card.c-gmaps:hover {
    border-color: rgba(66, 133, 244, .4);
    box-shadow: 0 8px 20px rgba(66, 133, 244, .15), 0 20px 50px rgba(0, 0, 0, .1)
}

.int-card.c-insta:hover {
    border-color: rgba(221, 42, 123, .4);
    box-shadow: 0 8px 20px rgba(221, 42, 123, .15), 0 20px 50px rgba(0, 0, 0, .1)
}

.int-card.c-tiktok:hover {
    border-color: rgba(0, 242, 234, .4);
    box-shadow: 0 8px 20px rgba(0, 242, 234, .15), 0 20px 50px rgba(0, 0, 0, .1)
}

.int-card.c-web:hover {
    border-color: rgba(43, 222, 115, .4);
    box-shadow: 0 8px 20px rgba(43, 222, 115, .15), 0 20px 50px rgba(0, 0, 0, .1)
}

.int-card.c-linkedin:hover {
    border-color: rgba(10, 102, 194, .4);
    box-shadow: 0 8px 20px rgba(10, 102, 194, .15), 0 20px 50px rgba(0, 0, 0, .1)
}

.int-card.c-facebook:hover {
    border-color: rgba(24, 119, 242, .4);
    box-shadow: 0 8px 20px rgba(24, 119, 242, .15), 0 20px 50px rgba(0, 0, 0, .1)
}

.int-card.c-multi:hover {
    border-color: rgba(139, 92, 246, .4);
    box-shadow: 0 8px 20px rgba(139, 92, 246, .15), 0 20px 50px rgba(0, 0, 0, .1)
}

.int-card .int-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

.int-card .int-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.int-card .int-logo .int-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(8px)
}

.int-card .int-logo .int-icon svg {
    width: 18px;
    height: 18px
}

.int-card .int-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.int-card .int-arrow svg {
    width: 14px;
    height: 14px;
    stroke: rgba(255, 255, 255, .8)
}

.int-card .int-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
    margin-bottom: 20px
}

.int-card .int-visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
    line-height: 1.5
}

.int-card .int-visual .v-item {
    padding: 8px 12px;
    background: rgba(0, 0, 0, .2);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .6)
}

/* Card background colors */
.int-card.c-gmaps {
    background: linear-gradient(160deg, #1a3a5c 0%, #0d1f33 40%, #0a1520 100%);
    border-color: rgba(66, 133, 244, .2)
}

.int-card.c-insta {
    background: linear-gradient(160deg, #4a1942 0%, #2a0e28 40%, #1a0818 100%);
    border-color: rgba(221, 42, 123, .2)
}

.int-card.c-tiktok {
    background: linear-gradient(160deg, #0a2a2a 0%, #0a1a1a 40%, #080e0e 100%);
    border-color: rgba(0, 242, 234, .2)
}

.int-card.c-web {
    background: linear-gradient(160deg, #0a2a1a 0%, #0a1a12 40%, #080e0a 100%);
    border-color: rgba(43, 222, 115, .2)
}

.int-card.c-linkedin {
    background: linear-gradient(160deg, #0a2040 0%, #081830 40%, #050e1a 100%);
    border-color: rgba(10, 102, 194, .2)
}

.int-card.c-facebook {
    background: linear-gradient(160deg, #1a2a50 0%, #101a38 40%, #0a1020 100%);
    border-color: rgba(24, 119, 242, .2)
}

.int-card.c-multi {
    background: linear-gradient(160deg, #1a1040 0%, #120a2a 40%, #0a0618 100%);
    border-color: rgba(139, 92, 246, .2)
}

/* Carousel nav */
.int-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 0 24px
}

.int-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .04);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s
}

.int-nav button:hover {
    border-color: var(--dark-green);
    color: var(--dark-green);
    background: var(--green-dim)
}

.int-nav button svg {
    width: 18px;
    height: 18px
}

.case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 48px
}

.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.kpi-card {
    padding: 28px;
    text-align: center
}

.kpi-card .kpi-value {
    font-size: 36px;
    font-weight: 900;
    color: var(--dark-green)
}

.kpi-card .kpi-label {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 6px
}

.case-quote {
    padding: 32px;
    position: relative
}

.case-quote p {
    font-size: 18px;
    font-style: italic;
    color: var(--text-mid);
    line-height: 1.8;
    margin-bottom: 20px
}

.case-quote .author {
    font-size: 14px;
    font-weight: 600
}

.case-quote .role {
    font-size: 13px;
    color: var(--text-dim)
}

.zones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px
}

.zone-card {
    padding: 36px 28px;
    text-align: left;
    transition: transform .3s, box-shadow .3s
}

.zone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .08)
}

.zone-card .zone-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--green-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

.zone-card .zone-icon svg {
    width: 24px;
    height: 24px
}

.zone-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px
}

.zone-card p {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.7
}

.team-row {
    display: flex;
    justify-content: center;
    gap: 64px;
    margin-top: 48px
}

.team-member .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--bg-glass);
    border: 2px solid var(--border);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.team-member .avatar svg {
    width: 48px;
    height: 48px
}

.team-member h3 {
    font-size: 18px;
    font-weight: 700
}

.team-member p {
    font-size: 13px;
    color: var(--text-dim)
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.article-card {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    color: #fff;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.article-card.grad-green {
    background: linear-gradient(145deg, #115e41 0%, #041f12 100%);
}

.article-card.grad-blue {
    background: linear-gradient(145deg, #1a365d 0%, #061121 100%);
}

.article-card.grad-purple {
    background: linear-gradient(145deg, #312e81 0%, #10102b 100%);
}

.article-card .art-cat {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.article-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
    color: #fff;
}

.article-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    flex: 1;
    margin-bottom: 32px;
    line-height: 1.6;
}

.article-card .btn-read {
    display: inline-block;
    align-self: flex-start;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s;
}

.article-card .btn-read:hover {
    background: rgba(255, 255, 255, 0.25);
}

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border)
}

.dash-header .dash-title {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px
}

.dash-header .dash-title svg {
    width: 20px;
    height: 20px
}

.dash-header .dash-pills {
    display: flex;
    gap: 8px
}

.dash-header .dash-pills span {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid var(--border);
    color: var(--text-dim)
}

.dash-header .dash-pills span.active {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-dim)
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--border)
}

.dash-kpi {
    padding: 24px 20px;
    border-right: 1px solid var(--border);
    text-align: left
}

.dash-kpi:last-child {
    border-right: none
}

.dash-kpi .dk-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.dash-kpi .dk-val {
    font-size: 28px;
    font-weight: 800
}

.dash-kpi .dk-val.green {
    color: var(--green)
}

.dash-kpi .dk-change {
    font-size: 11px;
    color: var(--green);
    margin-top: 4px
}

.dash-chart {
    padding: 28px;
    display: flex;
    gap: 20px
}

.dash-chart-main {
    flex: 2;
    min-height: 180px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .02);
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    gap: 8px
}

.dash-chart-main .bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to top, rgba(22, 163, 74, .3), #16a34a);
    min-height: 20px;
    transition: height .6s cubic-bezier(.4, 0, .2, 1), transform .2s;
    cursor: pointer;
    position: relative
}

.dash-chart-main .bar:hover {
    transform: scaleY(1.05);
    filter: brightness(1.15)
}

.dash-chart-main .bar::after {
    content: attr(data-val);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: #16a34a;
    opacity: 0;
    transition: opacity .2s;
    white-space: nowrap
}

.dash-chart-main .bar:hover::after {
    opacity: 1
}

.dash-header .dash-pills span {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s
}

.dash-header .dash-pills span:hover {
    border-color: rgba(22, 163, 74, .4);
    color: #16a34a
}

.dash-chart-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.dash-chart-side .mini-card {
    padding: 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .02);
    border: 1px solid var(--border);
    text-align: left
}

.dash-chart-side .mini-card .mc-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px
}

.dash-chart-side .mini-card .mc-val {
    font-size: 18px;
    font-weight: 700
}

.dash-note {
    padding: 16px 28px;
    border-top: 1px solid var(--border);
    text-align: left;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6
}

.hiw-module {
    background: var(--dark-green);
    border-radius: 40px;
    padding: 20px 48px;
    position: relative;
    overflow: hidden;
}

.decomp-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 40px;
    align-items: center;
    margin-top: 56px;
    min-height: 600px
}

/* LEFT — phone frame with live iframe */
.decomp-phone-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0
}

/* Decorative diagonal lines behind phone */
.decomp-phone-wrap::before,
.decomp-phone-wrap::after {
    content: '';
    position: absolute;
    width: 300%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .06) 70%, transparent);
    left: -80%;
    transform-origin: center
}

.decomp-phone-wrap::before {
    top: 30%;
    transform: rotate(-25deg)
}

.decomp-phone-wrap::after {
    top: 65%;
    transform: rotate(-25deg)
}

.decomp-phone-wrap:hover .phone-device {
    transform: translateY(-8px);
}

/* RIGHT — title + extracted components */
.decomp-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 20px
}

.decomp-right .dr-title {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--bg);
}

/* Extracted UI component row */
.decomp-extract {
    display: flex;
    align-items: center;
    gap: 22px
}

.decomp-extract .de-img-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 100px;
    flex-shrink: 0;
    position: relative;
}

.decomp-extract .de-img-card img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .4));
    transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
}

.decomp-extract .de-img-card.card-toolbar {
    height: 75px;
    margin-bottom: -10px;
}

.decomp-extract .de-img-card.card-food {
    height: 180px;
}

.decomp-extract .de-img-card.card-nav {
    height: 90px;
    margin-top: -10px;
}

.decomp-extract:hover .de-img-card img {
    transform: scale(1.05) translateY(-4px);
}

/* Dashed line */
.decomp-extract .de-dash {
    width: 50px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    flex-shrink: 0
}

/* Annotations */
.decomp-extract .de-annotation {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.decomp-extract .de-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.2px;
}

.decomp-extract .de-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dim);
    max-width: 250px;
}

.de-icon-row .ir-item:not(.active) {
    background: rgba(255, 255, 255, .06);
}

.de-icon-row .ir-item:not(.active) svg {
    stroke: var(--text-dim)
}

.hiw-labels.l4 {
    bottom: 50px;
    left: -20px
}

.hiw-line {
    position: absolute;
    background: rgba(255, 255, 255, .06)
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    z-index: 1;
}

.stat-card {
    text-align: center;
    padding: 48px 28px 40px;
    border-radius: 20px;
    background: #0C2116;
    border: 1px solid rgba(43, 222, 115, 0.12);
    position: relative;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
}

.stat-card:hover,
.stat-card.visible:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(43, 222, 115, 0.3);
    box-shadow: 0 20px 60px rgba(27, 107, 68, 0.15);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(43, 222, 115, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.stat-icon svg {
    width: 26px;
    height: 26px;
    stroke: #2BDE73;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stat-number {
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 900;
    color: #2BDE73;
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -2px;
}

.stat-label {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto;
}

.stat-detail strong {
    color: rgba(255, 255, 255, 0.7);
}

.stats-disclaimer {
    text-align: center;
    margin-top: 40px;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    position: relative;
    z-index: 1;
}

.stat-divider {
    width: 40px;
    height: 2px;
    background: rgba(43, 222, 115, .3);
    margin: 16px auto;
}

/* Stats - no scroll animation, always visible */
.stat-card {
    opacity: 1;
    transform: translateY(0);
}

.stat-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(.4, 0, .2, 1), transform 0.7s cubic-bezier(.4, 0, .2, 1);
}

.stat-card:nth-child(2).visible {
    transition-delay: 0.15s;
}

.stat-card:nth-child(3).visible {
    transition-delay: 0.3s;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.testimonial-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    border-color: rgba(27, 107, 68, 0.2);
}

.testimonial-stats {
    display: flex;
    gap: 16px;
}

.testimonial-stat {
    flex: 1;
    background: rgba(27, 107, 68, 0.06);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
}

.testimonial-stat .ts-number {
    font-size: 24px;
    font-weight: 800;
    color: var(--dark-green);
    line-height: 1.2;
}

.testimonial-stat .ts-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.3;
}

.testimonial-quote {
    font-size: 15px;
    color: var(--text-mid);
    line-height: 1.65;
    font-style: italic;
    flex: 1;
}

.testimonial-quote strong {
    color: var(--text);
    font-style: normal;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-author-info .ta-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.testimonial-author-info .ta-role {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

.testimonial-author-info .ta-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--dark-green);
    background: rgba(27, 107, 68, 0.08);
    padding: 3px 8px;
    border-radius: 100px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-stars {
    display: flex;
    gap: 2px;
}

.testimonial-stars svg {
    width: 14px;
    height: 14px;
    fill: #FBBF24;
}

/* ---- DESKTOP LOGO CARDS ---- */
.clients-logo-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 52px;
}

.client-logo-card {
    width: 178px;
    min-height: 148px;
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid rgba(0,0,0,0.07);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(.175,.885,.32,1.275), box-shadow 0.28s, border-color 0.28s;
}

.client-logo-card:hover { transform: translateY(-7px); opacity: 1; }

/* Brand accent bar */
.clc-accent {
    width: 100%; height: 5px;
    flex-shrink: 0;
}

/* Logo area */
.clc-logo-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px 8px;
    width: 100%;
}

.clc-logo-wrap img {
    max-width: 128px;
    max-height: 54px;
    width: auto; height: auto;
    object-fit: contain;
}

/* Brand-specific logo sizes */
.brand-fitness-park .clc-logo-wrap img { max-width: 220px; max-height: 120px; }

.brand-orange-bleue .clc-logo-wrap img  { max-width: 220px; max-height: 120px; }

.brand-henonville .clc-logo-wrap img    { max-width: 155px; max-height: 110px; }

.brand-matsuri .clc-logo-wrap img       { max-width: 80px;  max-height: 72px; }

.brand-gite .clc-logo-wrap img          { max-width: 120px; max-height: 108px; }

.brand-oxyty .clc-logo-wrap img         { max-width: 215px; max-height: 155px; }

/* Mobile bubble sizes */
.brand-fitness-park .clc-logo-wrap { padding: 6px 8px 2px; min-height: 90px; }

.brand-orange-bleue .clc-logo-wrap  { padding: 6px 8px 2px; min-height: 90px; }

.brand-henonville .clc-logo-wrap    { padding: 6px 8px 2px; min-height: 85px; }

.brand-fitness-park .ctc-logo-bubble { width: 148px; height: 80px; border-radius: 16px; }

.brand-orange-bleue .ctc-logo-bubble { width: 148px; height: 80px; border-radius: 16px; }

.brand-matsuri .ctc-logo-bubble      { width: 96px;  height: 96px; }

.brand-oxyty .ctc-logo-bubble        { width: 168px; height: 92px; border-radius: 16px; }

.brand-gite .ctc-logo-bubble         { width: 102px; height: 96px; border-radius: 18px; }

.brand-meridon .ctc-logo-bubble      { width: 82px;  height: 100px; border-radius: 18px; }

/* Info */
.clc-info { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 12px; }

.clc-name { font-size: 11.5px; font-weight: 700; color: #1a1a1a; text-align: center; line-height: 1.25; }

.clc-tag {
    font-size: 9px; font-weight: 700;
    padding: 2px 9px; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap;
}

/* Demo badge */
.clc-demo {
    position: absolute; top: 14px; right: 10px;
    background: var(--green); color: #000;
    font-size: 7px; font-weight: 900;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 1px; text-transform: uppercase;
}

/* ---- BRAND THEMES (desktop) ---- */
/* Gigafit */
.brand-gigafit .clc-accent { background: linear-gradient(90deg, #2a5c14, #6BBF3E); }

.brand-gigafit .clc-tag { background: rgba(107,191,62,0.12); color: #2a5c14; }

.brand-gigafit:hover { box-shadow: 0 18px 48px rgba(107,191,62,0.22); border-color: rgba(107,191,62,0.45); }

/* Fitness Park */
.brand-fitness-park .clc-accent { background: #FFD700; }

.brand-fitness-park .clc-tag { background: rgba(255,215,0,0.18); color: #705f00; }

.brand-fitness-park:hover { box-shadow: 0 18px 48px rgba(255,215,0,0.25); border-color: rgba(255,215,0,0.55); }

/* L'Orange Bleue */
.brand-orange-bleue .clc-accent { background: linear-gradient(90deg, #c44200, #FF6B00); }

.brand-orange-bleue .clc-tag { background: rgba(255,107,0,0.1); color: #b33a00; }

.brand-orange-bleue:hover { box-shadow: 0 18px 48px rgba(255,107,0,0.2); border-color: rgba(255,107,0,0.4); }

/* Paradis du Fruit */
.brand-paradis .clc-accent { background: linear-gradient(90deg, #1a3a28, #2D5A3D); }

.brand-paradis .clc-tag { background: rgba(45,90,61,0.1); color: #1a3a28; }

.brand-paradis:hover { box-shadow: 0 18px 48px rgba(45,90,61,0.2); border-color: rgba(45,90,61,0.35); }

/* Matsuri */
.brand-matsuri .clc-accent { background: linear-gradient(90deg, #0a0a0a, #3a3a3a); }

.brand-matsuri .clc-tag { background: rgba(0,0,0,0.07); color: #333; }

.brand-matsuri:hover { box-shadow: 0 18px 48px rgba(0,0,0,0.14); border-color: rgba(0,0,0,0.22); }

/* Château d'Hénonville */
.brand-henonville .clc-accent { background: linear-gradient(90deg, #0D1B4B, #1e3a8a); }

.brand-henonville .clc-tag { background: rgba(13,27,75,0.08); color: #0D1B4B; }

.brand-henonville:hover { box-shadow: 0 18px 48px rgba(13,27,75,0.2); border-color: rgba(13,27,75,0.28); }

/* 13e Lieu */
.brand-13lieu .clc-accent { background: linear-gradient(90deg, #7B5EA7, #d4a8e0); }

.brand-13lieu .clc-tag { background: rgba(123,94,167,0.1); color: #6b3590; }

.brand-13lieu:hover { box-shadow: 0 18px 48px rgba(123,94,167,0.2); border-color: rgba(123,94,167,0.35); }

/* Parador Vert */
.brand-parador .clc-accent { background: linear-gradient(90deg, #082c12, #2E7D32); }

.brand-parador .clc-tag { background: rgba(27,94,32,0.1); color: #082c12; }

.brand-parador:hover { box-shadow: 0 18px 48px rgba(27,94,32,0.2); border-color: rgba(27,94,32,0.35); }

/* Senlisse */
.brand-senlisse .clc-accent { background: linear-gradient(90deg, #1e4010, #3a6b2a); }

.brand-senlisse .clc-tag { background: rgba(58,107,42,0.1); color: #1e4010; }

.brand-senlisse:hover { box-shadow: 0 18px 48px rgba(58,107,42,0.2); border-color: rgba(58,107,42,0.35); }

.brand-senlisse .clc-logo-wrap img { max-width: 152px; max-height: 100px; object-fit: cover; border-radius: 10px; }

.brand-senlisse .ctc-header { background: linear-gradient(135deg, #0f2208 0%, #3a6b2a 100%); }

.brand-senlisse .ctc-logo-bubble { width: 114px; height: 76px; border-radius: 14px; padding: 0; overflow: hidden; }

.brand-senlisse .ctc-logo-bubble img { object-fit: cover; border-radius: 0; }

/* Hôtel de Harlay */
.brand-harlay .clc-accent { background: linear-gradient(90deg, #0d1a3e, #1e3a8a); }

.brand-harlay .clc-tag { background: rgba(13,26,62,0.08); color: #0d1a3e; }

.brand-harlay:hover { box-shadow: 0 18px 48px rgba(13,26,62,0.22); border-color: rgba(13,26,62,0.3); }

.brand-harlay .clc-logo-wrap img { max-width: 152px; max-height: 100px; object-fit: cover; border-radius: 10px; }

.brand-harlay .ctc-header { background: linear-gradient(135deg, #06101f 0%, #1a2b5e 100%); }

.brand-harlay .ctc-logo-bubble { width: 114px; height: 76px; border-radius: 14px; padding: 0; overflow: hidden; }

.brand-harlay .ctc-logo-bubble img { object-fit: cover; border-radius: 0; }

/* Château de Méridon */
.brand-meridon .clc-accent { background: linear-gradient(90deg, #1C1A17, #C5A05B); }

.brand-meridon .clc-tag { background: rgba(197,160,91,0.14); color: #8a6d2f; }

.brand-meridon:hover { box-shadow: 0 18px 48px rgba(197,160,91,0.25); border-color: rgba(197,160,91,0.4); }

.brand-meridon .clc-logo-wrap { padding: 8px 8px 4px; min-height: 122px; }

.brand-meridon .clc-logo-wrap img { max-width: 88px; max-height: 118px; object-fit: contain; }

.brand-meridon .ctc-header { background: linear-gradient(135deg, #0e0d0b 0%, #2a2520 60%, #4a3f2c 100%); }

.brand-meridon .ctc-logo-bubble img { object-fit: contain; }

/* Les Jardins de la Sud (gîte) */
.brand-gite .clc-accent { background: linear-gradient(90deg, #7A3B2E, #E07B39); }

.brand-gite .clc-tag { background: rgba(224,123,57,0.12); color: #B8542E; }

.brand-gite:hover { box-shadow: 0 18px 48px rgba(224,123,57,0.2); border-color: rgba(224,123,57,0.4); }

.brand-gite .ctc-header { background: linear-gradient(135deg, #5a2a20 0%, #9c4a32 55%, #E07B39 100%); }

/* Oxyty */
.brand-oxyty .clc-accent { background: linear-gradient(90deg, #111, #9BD43A); }

.brand-oxyty .clc-tag { background: rgba(155,212,58,0.16); color: #4f6e12; }

.brand-oxyty:hover { box-shadow: 0 18px 48px rgba(155,212,58,0.22); border-color: rgba(155,212,58,0.5); }

.brand-oxyty .ctc-header { background: linear-gradient(135deg, #0a0a0a 0%, #1d1d1d 55%, #2a2a2a 100%); }

/* Brand header colors (mobile tinder) */
.brand-gigafit .ctc-header { background: linear-gradient(135deg, #1e4210 0%, #5AAD2D 100%); }

.brand-fitness-park .ctc-header { background: linear-gradient(135deg, #0d0e18 0%, #1C1E2E 60%, #252640 100%); }

.brand-orange-bleue .ctc-header { background: linear-gradient(135deg, #8c2e00 0%, #FF6B00 100%); }

.brand-paradis .ctc-header { background: linear-gradient(135deg, #0f2218 0%, #2D5A3D 100%); }

.brand-matsuri .ctc-header { background: linear-gradient(135deg, #000 0%, #1a1a1a 100%); }

.brand-henonville .ctc-header { background: linear-gradient(135deg, #040b22 0%, #0D1B4B 100%); }

.brand-13lieu .ctc-header { background: linear-gradient(135deg, #4a2275 0%, #9b59b6 60%, #e8c0f0 100%); }

.brand-parador .ctc-header { background: linear-gradient(135deg, #04160a 0%, #1B5E20 100%); }

/* Fitness Park & Orange Bleue : logo XXL */
#demos-tinder-wrapper .brand-fitness-park .ctc-logo-bubble,
#demos-tinder-wrapper .brand-orange-bleue .ctc-logo-bubble {
    width: clamp(200px, 74vw, 280px);
    height: clamp(90px, 28vw, 120px);
    border-radius: clamp(10px, 3vw, 14px);
    padding: clamp(8px, 2.5vw, 14px) clamp(14px, 4vw, 22px);
}

/* Autres logos légèrement plus larges */
#demos-tinder-wrapper .brand-gigafit .ctc-logo-bubble,
#demos-tinder-wrapper .brand-matsuri .ctc-logo-bubble,
#demos-tinder-wrapper .brand-paradis .ctc-logo-bubble,
#demos-tinder-wrapper .brand-parador .ctc-logo-bubble,
#demos-tinder-wrapper .brand-13lieu .ctc-logo-bubble {
    width: clamp(160px, 60vw, 210px);
    height: clamp(80px, 25vw, 108px);
}

/* Senlisse */
#demos-tinder-wrapper .brand-senlisse .ctc-logo-bubble {
    width: clamp(130px, 48vw, 170px);
    height: clamp(72px, 22vw, 96px);
}

/* Méridon (logo carré) */
#demos-tinder-wrapper .brand-meridon .ctc-logo-bubble {
    width: clamp(96px, 32vw, 128px);
    height: clamp(96px, 32vw, 128px);
}

/* Jardins de la Sud (gîte) */
#demos-tinder-wrapper .brand-gite .ctc-logo-bubble {
    width: clamp(120px, 44vw, 160px);
    height: clamp(96px, 30vw, 130px);
}

/* Oxyty */
#demos-tinder-wrapper .brand-oxyty .ctc-logo-bubble {
    width: clamp(170px, 62vw, 220px);
    height: clamp(80px, 25vw, 108px);
}

/* Harlay & Hénonville : image en couverture */
#demos-tinder-wrapper .brand-harlay .ctc-logo-bubble,
#demos-tinder-wrapper .brand-henonville .ctc-logo-bubble {
    width: clamp(160px, 60vw, 210px);
    height: clamp(80px, 25vw, 108px);
    padding: 0; overflow: hidden;
    border-radius: clamp(10px, 3vw, 14px);
}

#demos-tinder-wrapper .brand-harlay .ctc-logo-bubble img,
#demos-tinder-wrapper .brand-henonville .ctc-logo-bubble img {
    object-fit: cover; border-radius: 0;
}

.sg-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.sg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
}

.sg-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 34px 32px 32px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .06);
    transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s;
}

.sg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--dark-green), var(--green));
}

.sg-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 60px rgba(27, 107, 68, .14);
}

.sg-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.sg-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-green), #2B8F5A);
    box-shadow: 0 8px 20px rgba(27, 107, 68, .28);
}

.sg-icon svg {
    stroke: #fff;
}

.sg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--green-dim);
    color: var(--dark-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 7px 14px;
    border-radius: 100px;
    border: 1px solid rgba(27, 107, 68, .2);
}

.sg-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px var(--green-glow);
}

.sg-card h3 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}

.sg-card .sg-desc {
    font-size: 15px;
    color: var(--text-mid);
    line-height: 1.6;
    margin-bottom: 22px;
}

.sg-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(27, 107, 68, .035);
    border: 1px solid rgba(27, 107, 68, .1);
    border-radius: 12px;
    transition: background .25s, border-color .25s;
}

.sg-item:hover {
    background: rgba(27, 107, 68, .07);
    border-color: rgba(27, 107, 68, .22);
}

.sg-checkbox {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--dark-green), var(--green));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(27, 107, 68, .3);
}

.sg-checkbox svg {
    width: 13px;
    height: 13px;
    stroke: #fff;
    stroke-width: 3.5;
}

.sg-item span {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    flex: 1;
}

.sg-item .sg-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--dark-green);
}

.sg-engines {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed rgba(27, 107, 68, .25);
}

.sg-engines-label {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.sg-chip {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-mid);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 100px;
}

.process-intro {
    text-align: center;
    font-size: 18px;
    color: var(--text-mid);
    max-width: 600px;
    margin: 0 auto 60px;
    line-height: 1.6;
}

.process-timeline {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.process-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

@media(max-width:600px) {
    .int-card {
        flex: 0 0 240px;
        min-height: 300px
    }
    .articles-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:900px) {
    .hiw-grid {
        grid-template-columns: 1fr
    }
    .dash-kpis {
        grid-template-columns: 1fr 1fr
    }
    .dash-kpi {
        border-bottom: 1px solid var(--border)
    }
    .dash-chart {
        flex-direction: column
    }
}

@media (max-width: 900px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .sg-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .sg-card {
        padding: 28px 22px 26px;
    }
    .sg-item .sg-status {
        display: none;
    }
}

/* ---- Adaptateurs : versions "grille" pour pages internes ---- */
.int-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.int-grid .int-card {
    flex: initial;
    min-height: 340px;
}

.clients-logo-strip.strip-compact {
    margin-top: 26px;
}

.stats-grid.stats-compact {
    margin-top: 8px;
}

.sg-grid.sg-two {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Grille de cartes "zone" et "case" alignée sur la largeur des pages */
.zones-grid,
.case-grid,
.testimonials-grid,
.articles-grid {
    margin-top: 30px;
}

@media (max-width: 768px) {
    .int-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .zones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .zones-grid {
        grid-template-columns: 1fr;
    }
}


/* ---- Mockup téléphone (identique accueil) ---- */
/* Realistic phone frame */
.phone-device {
    position: relative;
    z-index: 2;
    width: 350px;
    height: 730px;
    background: #1a1a1a;
    border-radius: 48px;
    padding: 12px;
    box-shadow:
    0 0 0 2px #333,
    0 0 0 4px #1a1a1a,
    0 30px 80px rgba(0, 0, 0, .5),
    0 10px 30px rgba(0, 0, 0, .3),
    inset 0 0 2px rgba(255, 255, 255, .05);
    transition: transform .6s cubic-bezier(.175, .885, .32, 1.275);
}

.decomp-phone-wrap:hover .phone-device {
    transform: translateY(-8px);
}

/* Dynamic notch */
.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #1a1a1a;
    border-radius: 0 0 18px 18px;
    z-index: 10;
}

.phone-notch::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
}

/* Screen area */
.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 38px;
    overflow: hidden;
    background: #000;
    position: relative;
}

.phone-screen iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 38px;
}

/* Subtle screen reflection */
.phone-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(165deg, rgba(255, 255, 255, .06) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 38px 38px 0 0;
    z-index: 5;
}

/* Adaptation mobile du mockup téléphone (évite le débordement horizontal) */
@media (max-width: 420px) {
    .phone-device {
        width: 292px;
        height: 610px;
        border-radius: 40px;
    }

    .phone-screen {
        border-radius: 30px;
    }

    .phone-screen iframe {
        border-radius: 30px;
    }

    .phone-screen::after {
        border-radius: 30px 30px 0 0;
    }
}

/* Bottom bar */
.phone-home-bar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: rgba(255, 255, 255, .3);
    border-radius: 4px;
    z-index: 10;
}

/* ===== RYTHME DE FOND DES SECTIONS — /tarifs-visite-virtuelle/ =====
   Le body des pages internes est déjà crème (--bg : #F4F1EA) : ce sont
   donc les sections alternées qui passent en blanc, comme sur l'accueil.
   Portée limitée à la page tarifs pour ne pas toucher aux autres pages. */
main.page-tarifs section.sec-alt {
    background: #fff;
    padding: 76px 0;
}

@media (max-width: 768px) {
    main.page-tarifs section.sec-alt {
        padding: 48px 0;
    }
}

/* ===== RYTHME DE FOND DES SECTIONS — /realisations/ =====
   Cette page est une galerie : ses cartes (logos clients, cartes réalisation)
   sont blanches. Les sections alternées prennent donc un crème plus soutenu
   que le body (#F4F1EA) — les chapitres deviennent lisibles SANS aplatir les
   cartes blanches, ce qu'un fond blanc ferait ici.
   Portée limitée à la page réalisations. */
main.page-realisations section.sec-alt {
    background: #E9E3D6;
    padding: 76px 0;
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

@media (max-width: 768px) {
    main.page-realisations section.sec-alt {
        padding: 48px 0;
    }
}

/* ===== VARIANTES DES CARTES SIGNATURE (comparatif de configurations) ===== */
.sg-grid.sg-three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
}

@media (max-width: 1040px) {
    .sg-grid.sg-three {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}

/* Ligne dont la valeur s'affiche sous le libellé (valeurs longues) */
.sg-item.sg-stacked {
    flex-wrap: wrap;
    row-gap: 4px;
    align-items: flex-start;
}

.sg-item.sg-stacked .sg-checkbox {
    flex: 0 0 22px;
    margin-top: 1px;
}

.sg-item.sg-stacked .sg-status {
    flex: 1 0 100%;
    margin-left: 34px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-mid);
}

/* Ligne non incluse dans la configuration (cellule « — ») */
.sg-item.sg-off {
    background: rgba(0, 0, 0, .028);
    border-color: rgba(0, 0, 0, .07);
}

.sg-item.sg-off .sg-checkbox {
    background: none;
    box-shadow: none;
    border: 1.6px solid rgba(0, 0, 0, .16);
}

.sg-item.sg-off span,
.sg-item.sg-off .sg-status {
    color: var(--text-dim);
}

/* ============================================================
   V4 — Compléments portés depuis index.html
   (additifs : aucune règle existante n'est modifiée)
   ============================================================ */

/* Rythme de fond « chapitres ». Le body des pages internes est déjà
   crème (--bg : #F4F1EA) : ce sont donc les sections alternées qui
   passent en blanc pour recréer le contraste de l'accueil.
   Portée limitée à /application-web-immersive/ pour ne pas modifier
   la convention retenue par les autres pages. */
main.page-app-immersive section.sec-alt {
    background: #fff;
    padding: 76px 0;
}

@media (max-width: 768px) {
    main.page-app-immersive section.sec-alt {
        padding: 48px 0;
    }
}

/* ---- Chrome du tableau de bord (index.html l.1873-1890) ---- */
.dashboard-mock {
    margin: 48px auto 0;
    max-width: 1400px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, .06);
    background: #f7f5f2;
    overflow: hidden;
    color: #1a1a1a;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .15)
}

.dashboard-mock,
.dashboard-mock * {
    --border: rgba(0, 0, 0, .08);
    --text-dim: rgba(0, 0, 0, .45);
    --green: #16a34a;
    --green-dim: rgba(22, 163, 74, .1)
}

.dashboard-mock .dash-header .dash-title svg {
    stroke: #1B6B44;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Démonstration live intégrée dans le chrome */
/* Le dashboard de démonstration est une application conçue pour un écran de
   bureau : en dessous de ~1400 px sa mise en page se chevauche. On le rend donc
   à sa largeur native (1600 px) dans une fenêtre qui le met à l'échelle
   (facteur calculé par pages.js, qui ajuste aussi la hauteur du conteneur). */
.dashboard-mock .dash-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    /* hauteur provisoire avant le calcul du script */
    height: 560px;
}

.dashboard-mock .dash-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 1600px;
    height: 1000px;
    border: 0;
    background: #fff;
    transform-origin: top left;
    will-change: transform;
}

/* Capture de secours : affichée sur mobile (à 0,24× l'iframe serait illisible)
   et si le script ne s'exécute pas. */
.dashboard-mock .dash-poster {
    display: none;
    position: relative;
}

.dashboard-mock .dash-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.dashboard-mock .dash-poster-cta {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    background: var(--dark-green);
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: 100px;
    text-align: center;
    /* Le libellé est long : il doit rester dans la largeur de l'écran
       (sans nowrap, qui le faisait déborder à 390 px). */
    max-width: calc(100% - 28px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

@media (max-width: 480px) {
    .dashboard-mock .dash-poster-cta {
        font-size: 12.5px;
        padding: 9px 14px;
        bottom: 12px;
    }
}

.dashboard-mock .dash-note {
    font-size: 13.5px;
    color: rgba(0, 0, 0, .62);
}

@media (max-width: 900px) {
    .dashboard-mock .dash-viewport {
        display: none;
    }

    .dashboard-mock .dash-poster {
        display: block;
    }
}

/* ---- Cartes « zone » : habillage carte + icône verte ---- */
.zone-card {
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
}

.zone-card .zone-icon svg {
    stroke: var(--dark-green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zones-grid.zones-four {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px) {

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

@media (max-width: 620px) {

    .zones-grid,
    .zones-grid.zones-four {
        grid-template-columns: 1fr;
    }
}

/* ---- Accordéon de démos : état « aucun panneau ouvert » ----
   Sur /application-web-immersive/ aucun panneau n'est actif au chargement
   (l'iframe n'est injectée qu'au clic) : les panneaux se partagent alors la
   largeur à parts égales. La classe .has-active est posée par le script de la
   page à la première ouverture — on n'utilise pas :has() pour que le rendu
   reste correct sur les navigateurs qui ne le supportent pas. */
main.page-app-immersive .demo-accordion:not(.has-active) .demo-panel {
    flex: 1 1 0;
}

/* Les panneaux fermés font ici 280 px de large (contre 80 px sur l'accueil) :
   le voile noir + flou de l'accueil transformerait la bande en pavé opaque.
   Tant qu'aucun panneau n'est ouvert, on allège le voile pour que les photos
   restent lisibles et donnent envie de cliquer. */
main.page-app-immersive .demo-accordion:not(.has-active) .demo-panel .panel-bg::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, .62) 100%);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

main.page-app-immersive .demo-accordion:not(.has-active) .demo-panel:hover .panel-bg::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .52) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Les libellés verticaux passent sur des photos claires (façade, hall) :
   ombre portée renforcée tant qu'aucun panneau n'est ouvert. */
main.page-app-immersive .demo-accordion:not(.has-active) .demo-panel-label span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 14px rgba(0, 0, 0, .7);
}

/* /senlisse.jpg est la vraie photo du domaine mais en faible définition :
   un léger flou assumé évite l'effet « image pixelisée » au milieu de
   panneaux nets. */
main.page-app-immersive .demo-accordion:not(.has-active) .brand-senlisse .panel-bg img {
    filter: blur(1.2px) saturate(1.06) brightness(.94);
    transform: scale(1.06);
}

.demo-panel-header .demo-info .demo-note {
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 3px;
    color: inherit;
    opacity: .82;
}

/* .demo-note hérite de .demo-panel-header (color:#fff). Sur les thèmes de
   marque à en-tête clair (hôtel, Senlisse, restaurant, gîte), du blanc sur
   fond crème/blanc serait illisible : on force une couleur sombre. */
.brand-hotel .demo-info .demo-note,
.brand-senlisse .demo-info .demo-note,
.brand-restaurant .demo-info .demo-note,
.brand-gite .demo-info .demo-note {
    color: #2C2420;
}

.demo-panel-header .demo-info .demo-note a {
    color: inherit;
    text-decoration: underline;
}

/* Les panneaux sont activables au clavier (role="button" + tabindex) :
   il leur faut un anneau de focus visible. */
.demo-panel:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: -3px;
}

.demo-hint {
    margin-top: 18px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-dim);
}

/* Responsive accordéon (identique accueil, absent de la v4) */
@media (max-width: 900px) {
    .demo-accordion {
        flex-direction: column;
        height: auto
    }

    .demo-panel {
        flex: 0 0 96px !important
    }

    .demo-panel.active {
        flex: 0 0 520px !important
    }

    .demo-panel-label span {
        writing-mode: horizontal-tb
    }
}
/* ===== ALTERNANCE DE FONDS — pages internes uniquement =====
   Le <body> des pages internes est déjà crème (--bg: #F4F1EA) : la section
   alternée doit donc être BLANCHE pour créer le rythme de « chapitres ».
   Sélecteur volontairement spécifique (0,1,2) pour rester prioritaire. */
main section.sec-alt {
    background: #ffffff;
    padding: 76px 0;
}

main section.sec-alt .sg-card,
main section.sec-alt .p-card,
main section.sec-alt .table-wrap,
main section.sec-alt .faq-item {
    border-color: rgba(0, 0, 0, .1);
}

/* Variante 2 colonnes : les deux cartes sont étirées à la même hauteur par la
   grille. On répartit la checklist sur toute la hauteur disponible au lieu de
   laisser un vide en bas de la carte la plus courte. */
.sg-grid.sg-two .sg-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sg-grid.sg-two .sg-card .sg-list {
    flex: 1 1 auto;
    justify-content: space-between;
}

/* ===== PROCESS — CARTES ÉPINGLÉES (port depuis l'accueil) ===== */
.proc-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .14);
    position: relative;
    z-index: 2;
    transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
    margin: 0 auto 40px;
}

.proc-inner {
    border-radius: 14px;
    padding: 30px 25px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.proc-card:hover {
    transform: scale(1.03) !important;
    z-index: 10;
}

.proc-card.theme-orange .proc-inner {
    background: #fff8f3;
}

.proc-card.theme-blue .proc-inner {
    background: #f3f6ff;
}

.proc-card.theme-purple .proc-inner {
    background: #faf3ff;
}

.proc-step {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1;
}

.proc-card.theme-orange .proc-step {
    color: #f97316;
}

.proc-card.theme-blue .proc-step {
    color: #3b82f6;
}

.proc-card.theme-purple .proc-step {
    color: #a855f7;
}

.proc-card h4 {
    font-size: 19px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
    line-height: 1.2;
}

.proc-card p {
    font-size: 13.5px;
    color: #555;
    line-height: 1.55;
    margin: 0;
}

.proc-pin {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    z-index: 4;
    box-shadow: inset -3px -3px 8px rgba(0, 0, 0, .3), inset 3px 3px 8px rgba(255, 255, 255, .8);
}

.proc-pin::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 4px;
    width: 14px;
    height: 6px;
    background: rgba(0, 0, 0, .25);
    border-radius: 50%;
    filter: blur(2px);
    z-index: -2;
}

.proc-pin::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 9px;
    width: 4px;
    height: 12px;
    background: linear-gradient(to right, #e5e5e5, #999);
    border-radius: 2px;
    z-index: -1;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}

.proc-card.theme-orange .proc-pin {
    background: radial-gradient(circle at 35% 35%, #ffb885, #ea580c);
}

.proc-card.theme-blue .proc-pin {
    background: radial-gradient(circle at 35% 35%, #93c5fd, #2563eb);
}

.proc-card.theme-purple .proc-pin {
    background: radial-gradient(circle at 35% 35%, #d8b4fe, #7e22ce);
}

/* Variante "grille épinglée" — 4 étapes, indépendante du zig-zag 6 cartes de l'accueil */
.process-timeline.pt-grid {
    max-width: 940px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 46px;
    padding: 22px 0 4px;
}

.process-timeline.pt-grid .proc-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: none;
    margin: 0;
}

.process-timeline.pt-grid .proc-card:nth-of-type(1) {
    transform: rotate(-2deg);
}

.process-timeline.pt-grid .proc-card:nth-of-type(2) {
    transform: rotate(1.5deg);
}

.process-timeline.pt-grid .proc-card:nth-of-type(3) {
    transform: rotate(2deg);
}

.process-timeline.pt-grid .proc-card:nth-of-type(4) {
    transform: rotate(-1.5deg);
}

@media (max-width: 760px) {
    .process-timeline.pt-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 360px;
    }
    .process-timeline.pt-grid .proc-card:nth-of-type(1),
    .process-timeline.pt-grid .proc-card:nth-of-type(2),
    .process-timeline.pt-grid .proc-card:nth-of-type(3),
    .process-timeline.pt-grid .proc-card:nth-of-type(4) {
        transform: none;
    }
}

/* Citation client encadrée (variante scopée) */
.case-quote.quote-mark::before {
    content: '\201C';
    position: absolute;
    top: 4px;
    left: 20px;
    font-size: 68px;
    line-height: 1;
    font-weight: 800;
    color: rgba(27, 107, 68, .16);
    pointer-events: none;
}

.case-quote.quote-mark p {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .case-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}


/* ===== SECTEUR SALLE DE SPORT — rythme de fond ===== */
main.page-fitness section.sec-alt {
    background: #fff;
    padding: 76px 0;
}

/* La case cochée ne doit pas s'étirer (règle .sg-item span trop générique) */
main.page-fitness .sg-item .sg-checkbox {
    flex: 0 0 22px;
}

@media (max-width: 768px) {
    main.page-fitness section.sec-alt {
        padding: 48px 0;
    }
}


/* ---- Rythme de fond des sections internes ---- */
.sec-alt {
    background: var(--bg-card);
    padding: 76px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.block-gap {
    margin-top: 48px;
}

@media (max-width: 768px) {
    .sec-alt {
        padding: 52px 0;
    }

    .block-gap {
        margin-top: 34px;
    }
}

/* La case cochee ne doit pas s'etirer (la regle .sg-item span est trop generique) */
.sg-item .sg-checkbox {
    flex: 0 0 22px;
}


/* ---- Liens internes aux cartes .int-card (page Agence) ----
   Le fond des .int-card est sombre : les liens doivent heriter de la couleur
   claire de la carte au lieu du vert fonce global. */
.int-card .int-visual .v-item a {
    color: inherit;
    font-weight: 600;
}

a.int-card {
    color: inherit;
}


/* ---- /visite-virtuelle-360-3d/ : equilibrage des 2 cartes signature ----
   La regle generique `.sg-grid.sg-two .sg-card .sg-list { justify-content: space-between }`
   etire la checklist sur toute la hauteur : quand une carte a 3 items et l'autre 4,
   des trous enormes apparaissent entre les lignes de la carte courte.
   Ici la checklist reste compacte en haut et l'espace restant est repousse avant le
   bloc de chips, dont le pied s'aligne alors sur les deux cartes. */
main.page-visite-virtuelle .sg-grid.sg-two .sg-card .sg-list {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-bottom: auto;
}

/* ---- Aperçu cliquable du panneau de démo ouvert par défaut ----
   .demo-panel.active masque son .panel-bg (il attend une iframe). Quand le
   panneau est ouvert automatiquement au chargement, pages.js injecte cet
   aperçu à la place, pour éviter une zone blanche et une 2e iframe auto. */
.panel-preview {
    position: absolute;
    inset: 0;
    cursor: pointer;
    overflow: hidden;
}

.panel-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.panel-preview-cta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .5));
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    padding: 20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.panel-preview .play-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(43, 222, 115, .5);
    transition: transform .25s;
}

.panel-preview:hover .play-btn {
    transform: scale(1.08);
}

.panel-preview .play-btn svg {
    width: 26px;
    height: 26px;
    fill: #0B3D26;
    margin-left: 4px;
}

/* ---- Thème de panneau démo : Gigafit (vert enseigne) ----
   L'accueil n'en avait pas besoin (son panneau "salle de sport" est Fitness Park).
   La page /application-web-immersive/ présente Gigafit ET Fitness Park : sans ce
   thème, Gigafit héritait du jaune Fitness Park (incohérence de marque). */
.brand-gigafit .demo-panel-header {
    background: #12290A;
}

.brand-gigafit .demo-info .cat {
    color: #8ED96A;
}

.brand-gigafit .demo-actions a {
    background: rgba(142, 217, 106, .16);
    color: #8ED96A;
}

.brand-gigafit .demo-actions a:hover {
    background: #8ED96A;
    color: #12290A;
}

/* Le lien "ouvrir dans un nouvel onglet" se retrouve dans une colonne étroite
   quand le panneau ouvert n'occupe qu'une fraction de l'accordéon : on évite
   qu'il se découpe sur quatre lignes. */
.demo-panel-header .demo-actions a {
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
}