/* Medialem — front-page sections (loaded only on is_front_page()).
   Global tokens, chrome, buttons, .reveal, the .section/.wave rhythm and the
   shared closing sections (.blog card grid, .final-cta, .form-card) live in
   base.css — /services/marketplace/ renders those same blocks.

   NOTE: .card / .post / .step / .type / .quote are scoped to their section
   (.services .card, .blog .post, …). They are generic enough to collide with
   post_class() output and with the Gutenberg canvas, which loads this file via
   add_editor_style() for every post type. Keep new selectors section-scoped. */

/* ================= HERO ================= */
.hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(1000px 600px at 88% -12%, rgba(253, 79, 88, 0.2), transparent 55%),
        radial-gradient(900px 700px at -12% 115%, rgba(14, 91, 133, 0.75), transparent 60%),
        linear-gradient(160deg, var(--navy) 30%, #04283f 100%);
}

/* grille de points + immense maillon en filigrane */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.2px, transparent 1.2px);
    background-size: 30px 30px;
    pointer-events: none;
}

.hero-watermark {
    position: absolute;
    right: -140px;
    top: -160px;
    width: 640px;
    height: 640px;
    transform: rotate(38deg);
    opacity: 0.05;
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
    /* padding-block, not `padding`: this is also a .container, and the
       shorthand would wipe out its horizontal gutter. */
    padding-block: 78px 120px;
}

.hero h1 {
    color: #fff;
    font-size: clamp(2.15rem, 4.6vw, 3.55rem);
    font-weight: 800;
    margin-bottom: 22px;
}

.hero p.lead {
    font-size: 1.18rem;
    color: #c6dae7;
    max-width: 33em;
    margin-bottom: 34px;
}

.hero p.lead strong {
    color: #fff;
}

.hero-proof {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #dce9f1;
}

.hero-proof svg {
    flex: none;
}

/* ---- Scène écosystème (signature) ---- */
.scene-wrap {
    --s: 1;
    width: calc(560px * var(--s));
    height: calc(590px * var(--s));
    margin: 0 auto;
    position: relative;
}

.scene {
    width: 560px;
    height: 590px;
    transform: scale(var(--s));
    transform-origin: top left;
    position: relative;
}

.scene-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.scene-lines path {
    fill: none;
    stroke: #6e96b0;
    stroke-width: 2.5;
    stroke-dasharray: 5 9;
    stroke-linecap: round;
    opacity: 0;
    animation:
        lineIn 0.8s ease forwards,
        flow 1.6s linear infinite;
}

.scene-lines path:nth-child(1) {
    animation-delay: 1.1s, 1.1s;
}

.scene-lines path:nth-child(2) {
    animation-delay: 1.25s, 1.25s;
}

.scene-lines path:nth-child(3) {
    animation-delay: 1.4s, 1.4s;
}

.scene-lines path:nth-child(4) {
    animation-delay: 1.55s, 1.55s;
}

@keyframes lineIn {
    to {
        opacity: 0.85;
    }
}

@keyframes flow {
    to {
        stroke-dashoffset: -28;
    }
}

.hub {
    position: absolute;
    left: 212px;
    top: 222px;
    width: 136px;
    height: 136px;
    z-index: 3;
    background: #fff;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 20px 50px rgba(0, 15, 28, 0.55),
        0 0 0 10px rgba(253, 79, 88, 0.14);
    animation: popIn 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s backwards;
}

.hub img {
    width: 78px;
    height: 78px;
}

.hub::after {
    /* onde corail */
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 40px;
    border: 3px solid var(--coral);
    animation: ring 2.6s ease-out 1.8s infinite;
    opacity: 0;
}

@keyframes ring {
    0% {
        transform: scale(0.92);
        opacity: 0.85;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.hub-chip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -46px;
    white-space: nowrap;
    background-image: var(--grad-coral);
    color: #fff;
    font-weight: 800;
    font-size: 0.86rem;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(253, 79, 88, 0.45);
    animation: popIn 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.7s backwards;
}

.fcard {
    position: absolute;
    z-index: 2;
    background: #fff;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: var(--shadow-float);
    width: 222px;
    color: var(--ink);
    animation:
        popIn 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) backwards,
        floaty 5s ease-in-out infinite;
}

.fcard.a {
    left: 0;
    top: 24px;
    animation-delay: 0.35s, 1.9s;
}

.fcard.b {
    left: 338px;
    top: 96px;
    animation-delay: 0.55s, 2.6s;
}

.fcard.c {
    left: 8px;
    top: 418px;
    animation-delay: 0.75s, 2.2s;
}

.fcard.d {
    left: 338px;
    top: 436px;
    width: 206px;
    animation-delay: 0.95s, 3s;
}

@keyframes popIn {
    from {
        transform: translateY(26px) scale(0.7);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes floaty {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -9px;
    }
}

.fcard .row {
    display: flex;
    align-items: center;
    gap: 11px;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 0.95rem;
    font-family: var(--font-display);
}

.avatar.p1 {
    background: linear-gradient(135deg, #0e5b85, #003350);
}

.avatar.p2 {
    background-image: var(--grad-coral);
}

.fcard .name {
    font-weight: 800;
    font-size: 0.94rem;
    line-height: 1.25;
}

.fcard .sub {
    font-size: 0.8rem;
    color: var(--muted);
}

.stars {
    color: #ffb020;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.stars b {
    color: var(--ink);
    font-family: var(--font-body);
    margin-left: 4px;
}

.fcard .tag {
    display: inline-block;
    background: var(--coral-tint);
    color: var(--coral);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 9px;
}

.fcard .txt {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
}

.fcard.pay .row {
    gap: 12px;
}

.pay-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f7ef;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fcard .amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
}

.dots {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
    animation: blink 1.2s infinite;
}

.dots i:nth-child(2) {
    animation-delay: 0.2s;
}

.dots i:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%,
    60%,
    100% {
        opacity: 0.25;
    }

    30% {
        opacity: 1;
    }
}

/* The wave primitives (.wave, .wave-top/-bottom, .waved) and the .section /
   .section-head rhythm now live in base.css — the article pages reuse them.
   Only the hero's own bottom wave is front-page-specific. */
.hero .wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
}

/* ================= HERO DE PAGE D'ATTERRISSAGE =================
   medialem/landing-hero. The band itself is .page-hero from base.css, shared
   with the article view so /services/seo/ and /services/marketplace/ open the
   same way. What lives here is the right column — which changes per page,
   because it carries the page's own structure — and the light ground. */

/* Aucune colonne de droite : le texte prend toute la largeur, borné pour rester
   lisible plutôt qu'étiré sur 1180px. */
/* One column, but still the page container: capping the grid would re-centre
   it and pull the H1 out of line with the logo. Cap the copy instead. */
.landing-hero.aside-none .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
}

.landing-hero.aside-none h1 {
    max-width: 16em;
}

.landing-hero.aside-none p.lead {
    max-width: 40em;
}

.landing-hero .hero-note {
    display: inline-block;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 4px solid var(--coral);
    border-radius: 6px 14px 14px 6px;
    padding: 12px 20px;
    font-size: 0.95rem;
    color: #dce9f1;
    margin-bottom: 26px;
}

.landing-hero .hero-note strong {
    color: #fff;
}

/* ---- Index de liens : un sommaire de la rubrique, pas une grille de cartes.
   Des filets, pas des numéros — c'est un menu, il n'a pas d'ordre. ---- */
.landing-hero .hero-index {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    padding: 5px;
    overflow: hidden;
}

.landing-hero .hero-index a {
    display: block;
    padding: 15px 22px;
    text-decoration: none;
    transition:
        background 0.18s ease,
        padding-left 0.18s ease;
}

.landing-hero .hero-index a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-hero .hero-index a:first-child {
    border-radius: calc(var(--radius) - 6px) calc(var(--radius) - 6px) 0 0;
}

.landing-hero .hero-index a:last-child {
    border-radius: 0 0 calc(var(--radius) - 6px) calc(var(--radius) - 6px);
}

.landing-hero .hero-index a:hover {
    background: rgba(255, 255, 255, 0.08);
    padding-left: 28px;
}

.landing-hero .hero-index-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
}

.landing-hero .hero-index-text {
    display: block;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #a9c4d5;
    margin-top: 2px;
}

/* ---- Visuel : illustration nue, ou capture dans la fenêtre de navigateur
   (.browser est défini plus haut dans ce fichier). ---- */
.landing-hero .hero-visual {
    position: relative;
    min-width: 0;
}

.landing-hero .hero-visual > img {
    width: 100%;
    height: auto;
}

/* Artwork sits on a white card: the guide's infographic has no ground of its
   own, and the product mockups bring a pale grey one that fights the mist. */
.landing-hero.aside-art .hero-visual > img {
    background: #fff;
    border-radius: var(--radius);
    padding: 22px;
}

/* ---- Fond clair. Réservé à /saas-marketplace/ : tous les autres bandeaux du
   site reprennent le dégradé marine de l'en-tête collant, si bien que la page
   produit s'ouvrait sur l'image de la page d'accueil. Le fond clair lui donne
   une arête franche sous l'en-tête, qu'on ne voit nulle part ailleurs. ---- */
.landing-hero.is-light {
    color: var(--ink);
    background: var(--mist);
}

.landing-hero.is-light::before {
    background-image: radial-gradient(rgba(0, 51, 80, 0.07) 1.2px, transparent 1.2px);
}

.landing-hero.is-light h1,
.landing-hero.is-light .hero-index-label {
    color: var(--navy);
}

.landing-hero.is-light p.lead {
    color: var(--muted);
}

.landing-hero.is-light p.lead strong,
.landing-hero.is-light .hero-note strong {
    color: var(--navy);
}

.landing-hero.is-light .crumbs,
.landing-hero.is-light .crumbs a {
    color: var(--muted);
}

.landing-hero.is-light .crumbs a:hover {
    color: var(--coral);
}

.landing-hero.is-light .hero-note,
.landing-hero.is-light .hero-proof span {
    background: var(--mist);
    border-color: var(--line);
    color: var(--ink);
}

/* La capture est le seul objet sombre de la composition, et elle déborde sur la
   section suivante. .page-hero coupe ce qui dépasse (overflow: hidden), ce qui
   rognerait précisément le débordement : on le rouvre ici, le filigrane n'étant
   de toute façon pas rendu sur fond clair. */
.landing-hero.is-light {
    overflow: visible;
}

.landing-hero.is-light .page-hero-grid {
    padding-block: 56px 104px;
}

.landing-hero.is-light .hero-visual {
    margin-bottom: -84px;
    z-index: 2;
}

.landing-hero.is-light .browser {
    box-shadow: var(--shadow-float);
}

.landing-hero.is-light .hero-visual > img {
    box-shadow: 0 22px 44px rgba(0, 32, 54, 0.14);
}

@media (max-width: 1000px) {
    .landing-hero .hero-index {
        max-width: 520px;
        margin-inline: auto;
        width: 100%;
    }

    /* Le débordement n'a plus de sens en colonne unique : la capture repasse
       dans le flux et le bandeau retrouve son bas normal. */
    .landing-hero.is-light {
        overflow: hidden;
    }

    .landing-hero.is-light .page-hero-grid {
        padding-block: 48px 100px;
    }

    .landing-hero.is-light .hero-visual {
        margin-bottom: 0;
    }
}

/* ================= SECTIONS ================= */
/* Intro : mockup navigateur + texte */
.intro {
    background: #fff;
    padding-top: 64px;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.intro h2 {
    margin-bottom: 18px;
}

.intro p {
    color: var(--muted);
    margin-bottom: 16px;
}

.intro p strong {
    color: var(--ink);
}

.intro-points {
    list-style: none;
    margin-top: 22px;
}

.intro-points li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    font-weight: 600;
}

.intro-points svg {
    flex: none;
    margin-top: 4px;
}

.browser {
    border-radius: 18px;
    overflow: visible;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 51, 80, 0.22);
    /* Grid items default to min-width:auto, so the two-column mock listing
       inside sizes this box to its content and pushes it past its own track on
       narrow phones. Same trap as .article in article.css. */
    min-width: 0;
}

.mock-listings,
.mock-card {
    min-width: 0;
}

.browser-bar {
    background: var(--navy);
    border-radius: 18px 18px 0 0;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.browser-bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.browser-bar i:first-child {
    background: var(--coral);
}

.browser-url {
    margin-left: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #bfd4e2;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 999px;
}

.browser-body {
    background: #fff;
    border-radius: 0 0 18px 18px;
    padding: 22px;
}

.mock-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mist);
    border-radius: 999px;
    padding: 11px 18px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.mock-search .go {
    margin-left: auto;
    background-image: var(--grad-coral);
    color: #fff;
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 0.82rem;
    font-weight: 800;
}

.mock-chips {
    display: flex;
    gap: 8px;
    margin: 14px 0 18px;
    flex-wrap: wrap;
}

.mock-chips span {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--muted);
}

.mock-chips span.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.mock-listings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mock-card {
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 14px;
}

.mock-card .row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mock-card .name {
    font-weight: 800;
    font-size: 0.86rem;
    line-height: 1.2;
}

.mock-card .sub {
    font-size: 0.74rem;
    color: var(--muted);
}

.mock-card .price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    margin: 6px 0 10px;
}

.mock-card .price small {
    font-weight: 600;
    color: var(--muted);
    font-family: var(--font-body);
}

.mock-btn {
    display: block;
    text-align: center;
    background: var(--coral-tint);
    color: var(--coral);
    font-weight: 800;
    font-size: 0.82rem;
    border-radius: 999px;
    padding: 7px;
}

.badge-float {
    position: absolute;
    right: -26px;
    bottom: 34px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 51, 80, 0.25);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    animation: floaty 4.5s ease-in-out infinite;
}

/* Services */
.services {
    background: var(--mist);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.services .card {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    padding: 34px 28px 30px;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    display: block;
    overflow: hidden;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.services .card::before {
    /* liseré gradient au survol */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background-image: var(--grad-coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.services .card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
}

.services .card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    width: 64px;
    height: 64px;
    background: var(--coral-tint);
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    /* blob */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition:
        background 0.25s ease,
        border-radius 0.35s ease,
        transform 0.25s ease;
}

.services .card:hover .card-icon {
    background-image: var(--grad-coral);
    border-radius: 50% 50% 52% 48% / 48% 52% 48% 52%;
    transform: rotate(-6deg) scale(1.06);
}

.card-icon svg {
    stroke: var(--coral);
    transition: stroke 0.2s ease;
}

.services .card:hover .card-icon svg {
    stroke: #fff;
}

.services .card h3 {
    margin-bottom: 10px;
}

.services .card p {
    color: var(--muted);
    font-size: 0.97rem;
}

.services .card .more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--coral);
    font-weight: 800;
    font-size: 0.95rem;
}

.services .card:hover .more {
    gap: 11px;
}

.services .card .more {
    transition: gap 0.2s ease;
}

.services .card .pop {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--navy);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
}

/* Process : parcours courbe */
.process {
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    padding-top: 8px;
}

/* An SVG with a viewBox is a replaced element with an intrinsic width (1000px
   here), and an absolutely positioned replaced box with width:auto takes that
   intrinsic width and ignores `right` outright. So the width has to be stated:
   with left/right the path stayed 1000px wide and pushed the whole document
   into a horizontal scroll between 1001px and ~1078px. */
.process-path {
    position: absolute;
    left: 8%;
    width: 84%;
    top: 36px;
    height: 56px;
    pointer-events: none;
}

.process-path path {
    fill: none;
    stroke: var(--line);
    stroke-width: 3;
    stroke-dasharray: 1 12;
    stroke-linecap: round;
}

.process .step {
    padding: 0 20px;
    position: relative;
    text-align: center;
}

.step-num {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 26px;
    background: #fff;
    border: 3px solid var(--line);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--navy);
    transition: 0.22s ease;
    box-shadow: 0 6px 18px rgba(0, 51, 80, 0.07);
}

.process .step:hover .step-num {
    border-color: var(--coral);
    color: #fff;
    background-image: var(--grad-coral);
    transform: rotate(-5deg) scale(1.07);
}

.process .step h3 {
    margin-bottom: 10px;
}

.process .step p {
    color: var(--muted);
    font-size: 0.95rem;
}

/* Témoignages */
.temoignages {
    background: linear-gradient(165deg, var(--navy) 40%, #04283f 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.temoignages::before {
    content: "";
    position: absolute;
    left: -160px;
    bottom: -180px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(253, 79, 88, 0.14), transparent 65%);
}

.temoignages .section-head h2 {
    color: #fff;
}

.temoignages .section-head p {
    color: #a9c2d1;
}

.quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    position: relative;
}

.temoignages .quote {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(4px);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.temoignages .quote:hover {
    transform: translateY(-6px);
    border-color: rgba(253, 79, 88, 0.6);
}

.temoignages .quote .mark {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 0.6;
    color: var(--coral);
    font-weight: 800;
    margin-bottom: 16px;
}

.temoignages .quote p {
    color: #d7e4ec;
    margin-bottom: 24px;
    flex: 1;
}

.temoignages .quote cite {
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 13px;
}

.temoignages .quote cite a {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    font-size: 0.95rem;
}

.temoignages .quote cite a:hover {
    color: var(--coral);
}

.temoignages .quote cite span {
    display: block;
    font-size: 0.82rem;
    color: #a9c2d1;
    font-weight: 500;
}

/* The blog card grid and the closing .final-cta / .cta-grid / .form-card
   sections moved to base.css: /services/marketplace/ renders the same
   medialem/latest-posts and medialem/cta blocks. */
.final-contacts {
    display: flex;
    justify-content: center;
    gap: 52px;
    flex-wrap: wrap;
    margin-top: 52px;
}

.final-contacts div {
    font-size: 0.95rem;
    color: #a9c2d1;
}

.final-contacts strong {
    display: block;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin-bottom: 2px;
}

.final-contacts a {
    color: #fff;
    text-decoration: none;
}

.final-contacts a:hover {
    color: var(--coral);
}

/* Bande logos clients (défilement, gris -> couleur au survol).

   .clients est la bande elle-même ; medialem/clients l'enveloppe dans une
   .clients-section quand elle est posée seule (page Tarifs). Sur l'accueil elle
   ouvre la page juste avant medialem/intro, d'où le padding asymétrique. */
.clients {
    padding: 46px 0 0;
}

.clients-section {
    padding: 64px 0 72px;
}

.clients-section.is-mist {
    background: var(--mist);
}

/* Dans sa propre section, la bande n'a plus à compenser le padding du bloc
   qui la portait. */
.clients-section .clients {
    padding: 0;
}

.clients-label {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 26px;
}

.marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scrollX 26s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes scrollX {
    to {
        transform: translateX(-50%);
    }
}

.marquee-group {
    display: flex;
    align-items: center;
    gap: 74px;
    padding-right: 74px;
}

.client {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.01em;
    color: #a9bac6;
    filter: grayscale(1);
    opacity: 0.75;
    transition:
        color 0.25s ease,
        filter 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
    white-space: nowrap;
}

.client:hover {
    color: var(--navy);
    filter: none;
    opacity: 1;
    transform: translateY(-2px);
}

.client em {
    font-style: normal;
    color: inherit;
    transition: color 0.25s ease;
}

.client:hover em {
    color: var(--coral);
}

/*
 * Logo variant. The wrapper already carries the greyscale/opacity treatment for
 * the wordmark, so the image must not apply its own or the two multiply and the
 * logos wash out to ~0.45.
 *
 * Real logos have wildly different aspect ratios (8.5:1 for Séances de Sport,
 * 2.9:1 for Bambini Stories). Capping width as well as height and letting
 * object-fit letterbox keeps the wide ones from dwarfing the compact ones.
 */
.client-logo {
    opacity: 0.62;
}

.client-logo img {
    height: 40px;
    width: auto;
    max-width: 178px;
    object-fit: contain;
}

/* Types de plateformes */
.types {
    background: #fff;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* render.php sets cols-N from the number of cards: four across on the SaaS
   landing page, three when the home page shows six. */
.types-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.types-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

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

.types .type {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    text-decoration: none;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.types .type:hover {
    border-color: var(--coral);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.type-icon {
    flex: none;
    width: 48px;
    height: 48px;
    background: var(--coral-tint);
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.types .type:hover .type-icon {
    background-image: var(--grad-coral);
}

.type-icon svg {
    stroke: var(--coral);
    transition: stroke 0.2s ease;
}

.types .type:hover .type-icon svg {
    stroke: #fff;
}

.types .type h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.types .type p {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.types .type .go-arrow {
    margin-left: auto;
    align-self: center;
    color: var(--coral);
    font-weight: 800;
    opacity: 0;
    transform: translateX(-6px);
    transition: 0.2s;
}

.types .type:hover .go-arrow {
    opacity: 1;
    transform: none;
}

/* Filtres (mockup) */
.mock-chips .filters {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--navy);
    border: 1.5px solid var(--navy);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 999px;
}

.mock-chips .filters svg {
    stroke: #fff;
}

.mock-chips .filters b {
    background: var(--coral);
    border-radius: 999px;
    font-size: 0.68rem;
    padding: 1px 7px;
    font-weight: 800;
}

/* ===== BLOCK-DRIVEN OVERRIDES =====
   The design carried these as inline style="" attributes; render.php emits no
   inline styles, so they live here. */
.intro {
    padding-top: 48px;
}

.intro-grid {
    margin-top: 64px;
}

.process {
    padding-top: 40px;
}

@media (max-width: 1120px) {
    .scene-wrap {
        --s: 0.82;
    }
}

@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1fr;
        padding-block: 60px 110px;
        gap: 56px;
    }

    .scene-wrap {
        --s: 0.9;
        margin-top: 6px;
    }

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

    /* The cols-N modifiers out-specify a bare .types-grid, so the responsive
       rules have to carry the same specificity or the grid never collapses. */
    .types-grid,
    .types-grid[class*="cols-"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 48px;
    }

    .process-path {
        display: none;
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .badge-float {
        right: 8px;
    }
}

@media (max-width: 640px) {
    .services-grid,
    .quotes,
    .process-grid,
    .types-grid,
    .types-grid[class*="cols-"] {
        grid-template-columns: 1fr;
    }

    .mock-chips .filters {
        margin-left: 0;
    }

    .scene-wrap {
        --s: 0.6;
    }

    .badge-float {
        display: none;
    }
}

/* 0.6 × 560px + the 48px of gutters needs 384px. Below that the scene has to
   step down again or it drags the whole document into a horizontal scroll.
   --s is unitless and feeds calc(560px * var(--s)), so it cannot be made fluid
   with a length-over-length division; a second step is the workable form. */
@media (max-width: 390px) {
    .scene-wrap {
        --s: 0.45;
    }
}

/* ============================================================
   medialem/feature-grid — icon cards, light or navy
   ============================================================ */

.fgrid-section.is-mist {
    background: var(--mist);
}

.fgrid-section.is-dark {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Dot field, so the navy band doesn't read as a flat slab. */
.fgrid-section.is-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.2px);
    background-size: 30px 30px;
    pointer-events: none;
}

.fgrid-section.is-dark .container {
    position: relative;
}

.fgrid-section.is-dark .section-head h2 {
    color: #fff;
}

.fgrid-section.is-dark .section-head p {
    color: #b9cfdd;
}

.fgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Le rail vertical d'un tabset laisse ~760px au panneau : quatre colonnes y
   font 170px. Le modificateur suit le précédent de `.types-grid.cols-N` — et,
   comme lui, il doit être répété dans les media queries plus bas, sinon
   `.fgrid` seul (0-1-0) perd contre `.fgrid.cols-2` (0-2-0). */
.fgrid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.fgrid-card {
    border-radius: var(--radius);
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.fgrid-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.fgrid-card .ic {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--coral-tint);
    color: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* h4 quand la grille est posée sous un chapeau (panneau d'onglet) : même
   allure, un cran plus bas dans le plan du document. */
.fgrid-card h3,
.fgrid-card h4 {
    font-size: 1.06rem;
    margin-bottom: 8px;
}

.fgrid-card p {
    color: var(--muted);
    font-size: 0.93rem;
}

/* The navy variant trades the card shadow for a translucent fill: on a dark
   ground a drop shadow reads as dirt, and the eight admin cards need to sit
   quieter than the four on the white grid. */
.fgrid-section.is-dark .fgrid {
    gap: 20px;
}

.fgrid-section.is-dark .fgrid-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
    border-radius: 16px;
    padding: 22px 20px;
}

.fgrid-section.is-dark .fgrid-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
    box-shadow: none;
}

.fgrid-section.is-dark .fgrid-card .ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(253, 79, 88, 0.18);
    color: var(--coral-2);
    margin-bottom: 12px;
}

.fgrid-section.is-dark .fgrid-card h3 {
    color: #fff;
    font-size: 1.02rem;
}

.fgrid-section.is-dark .fgrid-card p {
    color: #b9cfdd;
    font-size: 0.9rem;
}

.fgrid-panel {
    margin-top: 56px;
    border-radius: var(--radius);
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
}

.fgrid-section.is-dark .fgrid-panel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

.fgrid-panel h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.fgrid-panel p {
    color: var(--muted);
    font-size: 0.98rem;
}

.fgrid-panel p + p {
    margin-top: 12px;
}

.fgrid-section.is-dark .fgrid-panel h3,
.fgrid-section.is-dark .fgrid-panel strong {
    color: #fff;
}

.fgrid-section.is-dark .fgrid-panel p {
    color: #b9cfdd;
}

/* Text-only: the panel is a block of prose in the section rhythm, so it takes
   the whole row rather than leaving the image column empty. */
.fgrid-panel.no-img {
    grid-template-columns: minmax(0, 1fr);
}

.fgrid-panel-img {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card-hover);
    background: #fff;
    /* Without this the image can out-measure its track and widen the page. */
    min-width: 0;
}

.fgrid-panel-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   medialem/archi — cards floating on an architecture diagram
   ============================================================ */

.archi {
    background: var(--mist);
}

.archi-scene {
    position: relative;
    margin-top: 8px;
}

.archi-scene > img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
}

.archi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-shadow: 0 18px 44px rgba(0, 51, 80, 0.16);
    position: absolute;
    max-width: 315px;
    z-index: 2;
    animation: floaty 6s ease-in-out infinite;
}

.archi-card:nth-of-type(2) {
    animation-delay: 1.4s;
}

.archi-card:nth-of-type(3) {
    animation-delay: 2.6s;
}

.archi-card .num {
    font-family: var(--font-display);
    font-weight: 800;
    color: #fff;
    background: var(--navy);
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 0.9rem;
}

.archi-card h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.archi-card p {
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.5;
}

/* ============================================================
   medialem/buildbuy — the turnkey / bespoke comparison
   ============================================================ */

.buildbuy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
}

/* Column count comes from the content, like .types-grid: /services/formations/
   compares three courses, /saas-marketplace/ compares two builds. */
.buildbuy-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .buildbuy-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

.bb-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 30px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.bb-card.accent {
    border: 2px solid var(--coral);
    position: relative;
}

/* The ribbon is real text, not a ::before content string: it is translated. */
.bb-card .bb-badge {
    position: absolute;
    top: -14px;
    left: 26px;
    background-image: var(--grad-coral);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
}

.bb-card h3 {
    margin-bottom: 12px;
    font-size: 1.15rem;
}

.bb-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.bb-card li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--muted);
    font-size: 0.96rem;
}

.bb-card li svg {
    flex: none;
    margin-top: 5px;
    color: var(--coral);
}

.bb-links {
    margin-top: 34px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Once the two cards stack, the row wraps and centring leaves the button and
   the link on ragged half-lines; left-aligned they line up with the cards. */
@media (max-width: 640px) {
    .bb-links {
        justify-content: flex-start;
    }
}

.bb-links .more {
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
}

.bb-links .more:hover {
    color: var(--coral);
    text-decoration: underline;
}

/* ============================================================
   medialem/showcase — scrolling bands of platform screenshots
   ============================================================ */

.showcase {
    background: #fff;
    padding: 76px 0;
    overflow: hidden;
}

.showcase .section-head {
    margin-bottom: 42px;
}

.shots-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.shots-marquee + .shots-marquee {
    margin-top: 26px;
}

/* scrollX and floaty are declared once, up with the client strip and the hero
   float — the tracks below reuse them rather than redeclaring. */
.shots-track {
    display: flex;
    width: max-content;
    animation: scrollX 55s linear infinite;
}

.shots-marquee.rtl .shots-track {
    animation-direction: reverse;
}

.shots-marquee:hover .shots-track {
    animation-play-state: paused;
}

.shots-group {
    display: flex;
    gap: 26px;
    padding-right: 26px;
}

.shot-card {
    width: 320px;
    flex: none;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.shot-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.shot-card img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
}

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

@media (max-width: 1000px) {
    .fgrid-panel,
    .buildbuy-grid {
        grid-template-columns: 1fr;
    }

    /* A 315px card pinned to a phone-width scene would cover what it points
       at, so below this the cards unpin and read as a list under the image. */
    .archi-card {
        position: static;
        max-width: none;
        margin-top: 18px;
        animation: none;
    }

    .archi-scene > img {
        margin-bottom: 6px;
    }
}

@media (max-width: 640px) {
    .fgrid,
    .fgrid.cols-2 {
        grid-template-columns: 1fr;
    }

    .fgrid-panel {
        padding: 28px 24px;
    }

    .showcase {
        padding: 62px 0;
    }
}