/* Medialem — base / global primitives (loaded site-wide)
   Shared design tokens, reset, container, typography, buttons, header, footer,
   interior pages, forms, reveal.
   Section styles for flush pages live in sections.css. */

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

:root {
    --navy: #003350;
    --navy-deep: #001f33;
    --navy-mid: #0a4568;
    --navy-glow: #0e5b85;
    --coral: #fd4f58;
    --coral-2: #ff7e6b;
    --coral-dark: #e33840;
    --coral-tint: #ffedee;
    --mist: #eff6fa;
    --line: #d9e6ee;
    --ink: #10293a;
    --muted: #587286;
    --white: #ffffff;
    --grad-coral: linear-gradient(120deg, #fd4f58 10%, #ff7e6b 90%);

    --font-display: "Bricolage Grotesque", "Figtree", sans-serif;
    --font-body: "Figtree", -apple-system, "Segoe UI", sans-serif;

    --radius: 20px;
    --container: 1180px;
    /* Horizontal breathing room between page content and the screen edge.
       Anything that is both .container and needs its own vertical padding must
       use padding-block, not the `padding` shorthand — the shorthand resets
       padding-inline to 0 and the content goes edge-to-edge on phones. */
    --gutter: 24px;
    --shadow-card: 0 10px 34px rgba(0, 51, 80, 0.09);
    --shadow-card-hover: 0 22px 50px rgba(0, 51, 80, 0.16);
    --shadow-float: 0 14px 38px rgba(0, 20, 35, 0.45);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

a:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* The header is sticky, so in-page anchors would otherwise land underneath it. */
[id] {
    scroll-margin-top: 96px;
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.12;
    color: var(--navy);
    letter-spacing: -0.015em;
}

h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.55rem);
    font-weight: 800;
}

h3 {
    font-size: 1.16rem;
    font-weight: 700;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 16px;
}

.eyebrow svg {
    width: 24px;
    height: 13px;
    flex: none;
}

/* Coral "pencil stroke" underline, drawn on load.

   `nowrap` keeps the underlined phrase on one line so the SVG can span it. That
   also makes the phrase the min-content width of whatever column holds it: on
   /saas-marketplace/ "votre propre plateforme" measures 395px, which floored the
   hero column at 395px and let `.hero { overflow: hidden }` cut the headline off
   below 430px. Below 640px the phrase is allowed to wrap and the stroke is
   dropped — a decoration is worth less than a readable headline. */
.swash {
    position: relative;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .swash {
        white-space: normal;
    }

    .swash svg {
        display: none;
    }
}

.swash svg {
    position: absolute;
    left: -2%;
    bottom: -0.18em;
    width: 104%;
    height: 0.34em;
    overflow: visible;
}

.swash svg path {
    stroke: var(--coral);
    stroke-width: 7;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawSwash 1s ease 0.9s forwards;
}

@keyframes drawSwash {
    to {
        stroke-dashoffset: 0;
    }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.9em 1.8em;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid transparent;
    /* A <button> defaults to buttonface (#efefef), and .btn-ghost only sets a
       colour and a border — so a ghost <button> rendered white-on-#efefef,
       about 1.15:1. Every .btn was an <a> or .btn-coral until the consent
       banner, which is why this went unnoticed. */
    background-color: transparent;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.btn-coral {
    background-image: var(--grad-coral);
    color: #fff;
    /* White on the gradient's light end measures 2.49:1, and coral dark enough
       to fix that is no longer coral — see AGENTS.md. This does not move the
       computed ratio at all (WCAG reads two flat colours), but it does lift
       the glyph edges off the fill, which is what actually makes the label
       legible in the bright half. */
    text-shadow: 0 1px 2px rgba(120, 20, 26, 0.45);
    box-shadow: 0 8px 24px rgba(253, 79, 88, 0.4);
}

.btn-coral:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(253, 79, 88, 0.5);
}

.btn-ghost {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

.btn-navy {
    background: var(--navy);
    color: #fff;
}

.btn-navy:hover {
    background: var(--navy-mid);
    transform: translateY(-3px);
}

.btn:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
}

/* ===== HEADER (global chrome — rendered on every page) ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 80px;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* Flex items shrink by default. The logo has a fixed height and auto width, so
   shrinking squashes it horizontally and wrecks the aspect ratio instead of
   scaling it — hence flex-shrink on the three fixed-size items. */
.logo {
    flex-shrink: 0;
}

.logo img {
    display: block;
    height: 40px;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav > div {
    position: relative;
}

.nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 10px 14px;
    border-radius: 10px;
    transition: background 0.15s;
    display: inline-block;
}

.nav > div > a:hover,
.nav > a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav .caret {
    font-size: 0.68em;
    opacity: 0.7;
    margin-left: 2px;
}

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 290px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 31, 51, 0.28);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.18s ease;
}

.nav > div:hover .dropdown,
.nav > div:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    color: var(--ink);
    display: block;
    padding: 10px 14px;
    font-weight: 600;
    border-radius: 10px;
}

.dropdown a:hover {
    background: var(--mist);
    color: var(--navy);
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.header-phone {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    opacity: 0.9;
    white-space: nowrap;
}

.header-phone:hover {
    opacity: 1;
}

/* nowrap: the pill's 999px radius turns a wrapped two- or three-line button
   into an ellipse, so the label must never break. */
.header .btn {
    padding: 0.68em 1.35em;
    font-size: 0.95rem;
    white-space: nowrap;
}

.burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}

.burger span {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    margin: 5px 0;
}

/* Polylang FR/EN switcher — not in the design, themed to sit in .header-cta.
   It is emitted twice: once in the bar and once at the foot of the nav drawer.
   Below 640px the bar has no room left for it, so the two swap over. Duplicate
   markup rather than moving the node with JS; display:none also hides the
   inactive copy from assistive tech, so only one is ever exposed. */
.nav-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    list-style: none;
}

.nav-lang-drawer {
    display: none;
}

/* Drawer copy of the header CTA, for widths where the bar cannot hold it. */
.nav-cta {
    display: none;
}

.nav-lang-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 6px;
}

.nav-lang-link:hover,
.nav-lang-link.current {
    color: #fff;
}

.nav-lang-sep {
    color: rgba(255, 255, 255, 0.3);
}

/* ===== FOOTER (global chrome) ===== */
.footer {
    background: var(--navy-deep);
    color: #9fb9c9;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 48px;
    padding: 64px 0 40px;
}

.footer img {
    height: 36px;
    width: auto;
    margin-bottom: 18px;
}

.footer p a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer p a:hover {
    color: var(--coral);
}

.footer h4 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    margin-bottom: 16px;
}

.footer ul {
    list-style: none;
}

.footer ul a {
    color: #9fb9c9;
    text-decoration: none;
    display: inline-block;
    padding: 5px 0;
}

.footer ul a:hover {
    color: #fff;
}

.socials {
    display: flex;
    gap: 14px;
    margin-top: 22px;
}

.socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.18s;
}

.socials a:hover {
    background-image: var(--grad-coral);
    border-color: transparent;
    transform: translateY(-3px);
}

.socials svg {
    fill: #fff;
    width: 17px;
    height: 17px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.88rem;
}

.footer-legal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-bottom a {
    color: #9fb9c9;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #fff;
}
/* The consent re-opener is a <button> because it acts on this page rather
   than navigating; it has to read as the link it sits next to. */
.consent-reopen {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #9fb9c9;
    cursor: pointer;
}
.consent-reopen:hover {
    color: #fff;
}

/* ===== INTERIOR PAGES (posts, pages without a hero, archives, search, 404) ===== */
.entry-hero {
    background: var(--navy);
    /* The header is sticky and in-flow now, so this no longer has to clear it. */
    padding: 4.5rem 0 3.5rem;
    position: relative;
    overflow: hidden;
}
.entry-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;
}
.entry-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 0%, rgba(14, 91, 133, 0.35), transparent),
        radial-gradient(ellipse 50% 60% at 85% 100%, rgba(253, 79, 88, 0.1), transparent);
}
.entry-hero .container {
    position: relative;
    z-index: 2;
}
.entry-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.entry-hero .entry-meta {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}
.entry-hero .entry-meta a {
    color: var(--coral);
    text-decoration: none;
}
.entry-hero .entry-lead {
    max-width: 62ch;
    margin-top: 1.1rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

.site-content {
    padding: 4rem 0 6rem;
    background: var(--white);
}
.prose {
    max-width: 760px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.8;
}
.prose > * {
    margin-bottom: 1.25rem;
}
.prose > *:last-child {
    margin-bottom: 0;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--font-display);
    color: var(--navy);
    line-height: 1.25;
    margin: 2.25rem 0 1rem;
}
.prose h2 {
    font-size: 1.7rem;
}
.prose h3 {
    font-size: 1.35rem;
}
.prose a {
    color: var(--coral);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.prose ul,
.prose ol {
    padding-left: 1.5rem;
}
.prose li {
    margin-bottom: 0.5rem;
}
.prose blockquote {
    border-left: 3px solid var(--coral);
    padding-left: 1.25rem;
    color: var(--ink);
    font-style: italic;
}
.prose code {
    background: var(--mist);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9em;
}
.prose pre {
    background: var(--navy-deep);
    color: var(--mist);
    padding: 1.25rem;
    border-radius: 12px;
    overflow: auto;
}

/* ===== BLOG INDEX + ARCHIVES =====
   home.php and index.php share one layout: the navy hero, a row of category
   pills, then the same .blog-grid the medialem/latest-posts block renders. */
.entry-lead {
    margin-top: 1rem;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.02rem;
    line-height: 1.65;
}

.blog-index {
    background: var(--mist);
}

/* Wraps rather than scrolling: five pills at most, and a wrapped second row
   reads better here than a hidden scroller would on a page this long. */
.blog-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 38px;
}

.blog-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.55em 1.1em;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.blog-filter:hover {
    color: var(--navy);
    border-color: var(--navy);
}

.blog-filter.current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    box-shadow: var(--shadow-card);
}

.blog-filter-count {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--muted);
    background: var(--mist);
    border-radius: 999px;
    padding: 1px 8px;
}

.blog-filter.current .blog-filter-count {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.entry-pagination {
    margin: 3rem auto 0;
}

.entry-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.entry-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.85em;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.entry-pagination a.page-numbers:hover {
    border-color: var(--navy);
    color: var(--coral);
}

.entry-pagination .page-numbers.current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* The ellipsis is not a target, so it drops the button chrome. */
.entry-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
    min-width: 0;
    padding: 0 0.2em;
    color: var(--muted);
}

/* ===== SCROLL REVEAL =====
   Markup emits .reveal; assets/js/site.js adds .visible via IntersectionObserver;
   editor.css forces it visible inside Gutenberg. */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ===== CONTACT (contact-form block, interior /contact/ page) ===== */
.contact-section {
    background: var(--white);
    padding: 6rem 0 7rem;
}
.contact-box {
    background: var(--navy);
    border-radius: 24px;
    padding: 3.5rem 4rem;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3.5rem;
    align-items: center;
}
.contact-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 90% 10%, rgba(14, 91, 133, 0.35), transparent),
        radial-gradient(ellipse 50% 60% at 5% 95%, rgba(0, 31, 51, 0.45), transparent);
}
.contact-left,
.contact-form {
    position: relative;
    z-index: 2;
}
.contact-left h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.contact-left p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.25s;
}
.contact-info-item:hover {
    color: var(--coral);
}
.contact-info-item svg {
    width: 15px;
    height: 15px;
    stroke: var(--coral);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.form-field.full {
    grid-column: 1 / -1;
}
.form-field label {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}
.form-field input,
.form-field select,
.form-field textarea {
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--white);
    outline: none;
    transition:
        border-color 0.25s,
        background 0.25s;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--coral);
    background: rgba(255, 255, 255, 0.07);
}
.form-field select {
    cursor: pointer;
    appearance: none;
}
.form-field select option {
    background: var(--navy-mid);
    color: var(--white);
}
.form-field textarea {
    resize: vertical;
    min-height: 80px;
}
.form-submit {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.25rem;
}

.form-feedback {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
}
.form-feedback.success {
    background: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
}
.form-feedback.error {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

/* Checkbox group ("prestation(s) demandée(s)"). A fieldset, so the group label
   is a <legend> — .form-field styles the wrapper, these style the choices. */
.form-options {
    border: 0;
    margin: 0;
    padding: 0;
}
.form-options legend {
    padding: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}
.form-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.55rem;
}
.form-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition:
        border-color 0.25s,
        background 0.25s;
}
.form-option:hover {
    border-color: rgba(255, 255, 255, 0.28);
}
/* The pill is the hit area, so the focus ring has to be drawn on it rather
   than on the box, which is only 15px wide. */
.form-option:has(input:focus-visible) {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
}
.form-option:has(input:checked) {
    border-color: var(--coral);
    background: rgba(253, 79, 88, 0.14);
    color: var(--white);
}
.form-option input {
    width: 15px;
    height: 15px;
    accent-color: var(--coral);
    flex: none;
    margin: 0;
}
.form-note {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

/* ===== BOOKING (medialem/booking, the /demande-de-demo/ page) ===== */
.booking-section {
    background: var(--white);
    padding: 6rem 0 7rem;
}
.booking-box {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.5rem;
    align-items: start;
}
.booking-left h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.booking-left p {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.booking-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding: 0;
}
.booking-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.94rem;
    line-height: 1.55;
}
.booking-points svg {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex: none;
    fill: none;
    stroke: var(--coral);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.booking-left .contact-info-item {
    color: var(--navy);
    font-weight: 600;
}

/* The panel the visitor sees before the calendar is fetched. Once booking.js
   swaps HubSpot's iframe in, .is-loaded drops the padding and the border so the
   embed sits in the box on its own. */
.booking-embed {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 3rem 2rem;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking-embed.is-loaded {
    background: var(--white);
    border-color: transparent;
    padding: 0;
    display: block;
}
.booking-placeholder {
    max-width: 42ch;
    text-align: center;
}
.booking-icon {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: var(--coral);
    stroke-width: 1.6;
    stroke-linecap: round;
}
.booking-panel-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0.75rem 0 0.6rem;
}
.booking-notice {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 1.5rem;
}
.booking-fallback {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.booking-fallback a {
    color: var(--coral);
    font-weight: 600;
}
.meetings-iframe-container iframe {
    width: 100%;
    border: 0;
}

@media (max-width: 900px) {
    .booking-box {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .booking-embed {
        padding: 2.25rem 1.25rem;
        min-height: 0;
    }
}

/* ===== COOKIE CONSENT (Medialem\Privacy\Consent) ===== */
.consent {
    position: fixed;
    left: 50%;
    /* Clears the iOS home indicator; falls back to 20px where env() is unknown. */
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 200;
    width: min(920px, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--navy);
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 31, 51, 0.35);
}
/* The banner ships hidden and is revealed by consent.js, so [hidden] has to
   win over the display the rules above would otherwise imply. */
.consent[hidden] {
    display: none;
}
/* The open mobile drawer is fixed inside the header's stacking context and
   the banner sits above it, over the CTA and the language switcher. One of
   them has to yield, and the drawer is the one the visitor just asked for. */
body.nav-open .consent {
    display: none;
}
.consent-inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 1.25rem 1.6rem;
}
.consent-text {
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}
.consent-text a {
    color: var(--coral);
    font-weight: 600;
}
/* Refusing must be no harder than accepting, so both buttons are the same
   size and sit side by side. Accept leads on fill and shadow, which is a
   legitimate hierarchy; decline stays a full-size button with white text on
   navy at ~11:1, not a de-emphasised text link. See AGENTS.md. */
.consent-actions {
    display: flex;
    gap: 0.6rem;
    flex: none;
}
.consent-actions .btn {
    min-width: 132px;
    justify-content: center;
}
.consent-actions .btn-ghost {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}
.consent-actions .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
}

@media (max-width: 700px) {
    .consent-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
    }
    .consent-actions .btn {
        flex: 1;
        min-width: 0;
    }
}

/* Below this the floating card wastes width it does not have, so it becomes a
   sheet sitting on the bottom edge. */
@media (max-width: 560px) {
    .consent {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-height: 80vh;
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .consent-inner {
        padding: 1.1rem var(--gutter) 1.2rem;
    }
    .consent-text {
        font-size: 0.85rem;
    }
    .consent-actions .btn {
        /* .btn's 1.8em inline padding is what overflows a 320px screen once
           two of them sit side by side. */
        padding-inline: 1em;
        font-size: 0.94rem;
    }
}

/* A phone in landscape has the width for one row but almost no height. */
@media (max-height: 460px) and (orientation: landscape) {
    .consent-inner {
        flex-direction: row;
        align-items: center;
        padding-block: 0.85rem;
    }
    .consent-actions .btn {
        padding-block: 0.7em;
    }
}

/* ===== SHARED SECTION CHROME =====
   Section rhythm, wave dividers and the closing blog/CTA sections. These were
   front-page-only until /services/marketplace/ reused the medialem/latest-posts
   and medialem/cta blocks verbatim, so they belong site-wide. The sections of
   a flush, block-composed page (hero scene, intro, services, types, process,
   testimonials) stay in sections.css.

   `.post` stays scoped to `.blog` — a bare `.post` would hijack post_class()
   output on the blog index, and this file loads everywhere. */
.section {
    padding: 88px 0;
}

.section-head {
    max-width: 660px;
    margin-bottom: 52px;
}

.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head.center .eyebrow {
    justify-content: center;
}

.section-head p {
    color: var(--muted);
    margin-top: 14px;
    font-size: 1.06rem;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

/* Wave dividers: always placed INSIDE the following section and filled with the
   previous section's solid colour -> no visible seam. */
.wave {
    line-height: 0;
    position: relative;
}

.wave svg {
    display: block;
    width: 100%;
    height: 76px;
}

.wave-top,
.wave-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}

.wave-top {
    top: -1px;
}

.wave-bottom {
    bottom: -1px;
    transform: scaleY(-1);
}

.wave-top svg,
.wave-bottom svg {
    display: block;
    width: 100%;
    height: 76px;
}

.waved {
    position: relative;
    padding-top: 150px;
}

.waved-b {
    padding-bottom: 165px;
}

/* Navy CTA band, inline in a section or in an article column. */
.midcta {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 46px 50px;
    margin-top: 44px;
    background:
        radial-gradient(500px 260px at 90% -30%, rgba(253, 79, 88, 0.35), transparent 60%),
        linear-gradient(110deg, var(--navy) 10%, var(--navy-mid) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

/* The block renders an <h2> on a flush landing page and an <h3> inside an
   article (see blocks/midcta/render.php), so both levels are styled here.
   Without the h2 the band's heading fell back to the global navy on navy. The
   size and weight are pinned so the band looks the same at either level. */
.midcta h2,
.midcta h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.midcta p {
    color: #b9cfdd;
}

/* The standalone medialem/midcta block, as opposed to the band the
   medialem/services block draws inside its own .container. On a flush landing
   page nothing wraps it, so it carries its own width and gutters. Inside an
   article `.article .midcta` out-specifies this and the column governs. */
.midcta-block {
    width: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
    margin-block: 72px;
}

/* At container width the copy would otherwise run the full 1180px and push the
   button onto its own line. The design caps it so the two sit side by side;
   inside an article the column is already narrow and the button belongs below. */
.midcta-block h2,
.midcta-block h3 {
    max-width: 18em;
}

.midcta-block p {
    max-width: 34em;
}

.refs-link {
    text-align: center;
    margin-top: 44px;
    position: relative;
}

/* ===== INNER-PAGE HERO (page-hero, crumbs, steps-card) =====
   Moved out of article.css when the /services/ branch stopped rendering through
   ArticleView: the hero, its breadcrumb trail and its roadmap card are now shared
   between the article view and medialem/landing-hero, and article.css only loads
   on page-guide.php and single.php. Same reasoning that moved .section, .midcta
   and .final-cta out of sections.css. .hero-meta stays behind — the byline and
   the reading time are article chrome, and only ArticleView emits them. */
.page-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%);
}

.page-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;
}

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

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

.page-hero h1 {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    margin-bottom: 20px;
}

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

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

.page-hero .hero-ctas {
    margin-bottom: 30px;
}

.page-hero .hero-visual {
    min-width: 0;
}

.page-hero .hero-visual img {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-float);
}

.page-hero .wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: #9fc0d4;
    margin-bottom: 22px;
}

.crumbs a {
    color: #c6dae7;
    text-decoration: none;
}

.crumbs a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.crumbs span[aria-hidden] {
    opacity: 0.55;
}

/* ---- Carte "feuille de route" (les mêmes entrées que le sommaire) ---- */
.steps-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    padding: 28px 26px 24px;
    color: var(--ink);
    box-shadow: 0 30px 80px rgba(0, 10, 20, 0.5);
    max-width: 400px;
    margin-left: auto;
    animation: popInCard 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.2s backwards;
}

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

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

.steps-card h2 {
    font-size: 1.1rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.steps-card h2 svg {
    flex: none;
}

.steps-card ol {
    list-style: none;
    position: relative;
}

/* Chaîne verticale pointillée, derrière les numéros. */
.steps-card ol::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 14px;
    bottom: 14px;
    width: 0;
    border-left: 3px dotted var(--line);
}

.steps-card li {
    position: relative;
}

.steps-card a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 7px 8px 7px 0;
    border-radius: 10px;
    color: var(--ink);
    transition: color 0.15s ease;
}

.steps-card a:hover {
    color: var(--coral);
}

.steps-card .n {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    background: #fff;
    border: 2.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--navy);
    transition: 0.18s ease;
}

.steps-card a:hover .n {
    border-color: var(--coral);
    background-image: var(--grad-coral);
    color: #fff;
}

.steps-card .card-chip {
    position: absolute;
    top: -16px;
    left: 26px;
    background-image: var(--grad-coral);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(253, 79, 88, 0.45);
}

/* ===== SHARED BLOCK COMPONENTS (medialem/stats, /figure, /callout) =====
   Article components until these blocks started appearing on flush landing pages,
   where article.css never loads and they rendered unstyled. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 26px 0 30px;
}

.stat-head {
    margin-bottom: 22px;
}

.stat-head + .stat-grid-block {
    margin-top: 0;
}

/* The standalone medialem/stats block on a flush landing page: nothing wraps
   it, so it carries its own width and gutters. Inside an article the column
   governs, and this is out-specified below. */
.stat-grid-block {
    width: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
    margin-block: 72px;
}

.article .stat-grid {
    width: auto;
    margin: 26px 0 30px;
}

.stat {
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 20px 18px;
    text-align: center;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

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

.stat b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.55rem;
    color: var(--navy);
    line-height: 1.1;
}

.stat b em {
    font-style: normal;
    color: var(--coral);
}

.stat span {
    font-size: 0.84rem;
    color: var(--muted);
    font-weight: 600;
}

/* Illustrations. */
.figure {
    margin: 34px 0;
}

.figure img {
    width: 100%;
    height: auto;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.figure figcaption {
    text-align: center;
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 10px;
}

/* Encadrés. */
.callout {
    border: 1.5px solid var(--line);
    border-left: 5px solid var(--coral);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 26px 0;
    background: var(--mist);
}

.callout p:last-child {
    margin-bottom: 0;
}

/* Standalone on a flush landing page, like .midcta-block and .stat-grid-block:
   nothing wraps it, so it carries its own width. The article column keeps
   control inside .article, where this is out-specified. */
.callout-block {
    width: min(760px, 100% - var(--gutter) * 2);
    margin-inline: auto;
    margin-block: 56px;
}

.article .callout {
    width: auto;
    margin: 26px 0;
}

/* ===== BLOG CARD GRID (medialem/latest-posts) ===== */
.blog {
    background: var(--mist);
}

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

.blog-grid .post {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

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

.post-banner {
    height: 118px;
    position: relative;
    overflow: hidden;
}

.post-banner.g1 {
    background: linear-gradient(120deg, #003350, #0e5b85);
}

.post-banner.g2 {
    background: var(--grad-coral);
}

.post-banner.g3 {
    background: linear-gradient(120deg, #0e5b85, #fd4f58);
}

.post-banner svg {
    position: absolute;
    right: -24px;
    bottom: -30px;
    width: 150px;
    height: 150px;
    transform: rotate(32deg);
    opacity: 0.2;
}

/* Optional featured image layered over the gradient banner (attribute
   useThumbnails). No thumbnail = pure gradient, as designed. */
.blog-grid .post-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo banners get a scrim: the pill is near-white, and on a bright photo it
   loses its edge entirely. Gradient-only banners keep their flat colour, which
   is why this is gated on :has(img) rather than applied to every banner. */
.blog-grid .post-banner:has(img)::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 64px;
    background: linear-gradient(rgba(0, 20, 35, 0), rgba(0, 20, 35, 0.45));
    pointer-events: none;
    z-index: 1;
}

.post-tag {
    position: absolute;
    left: 22px;
    bottom: 16px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 13px;
    border-radius: 999px;
}

.blog-grid .post h3 {
    padding: 20px 26px 6px;
    font-size: 1.08rem;
    transition: color 0.15s;
}

.blog-grid .post:hover h3 {
    color: var(--coral);
}

.blog-grid .post p {
    padding: 0 26px 22px;
    color: var(--muted);
    font-size: 0.94rem;
}

.blog-grid .post .more {
    margin: auto 26px 24px;
    color: var(--coral);
    font-weight: 800;
    font-size: 0.92rem;
}

/* ===== CLOSING CTA + FORM (medialem/cta) ===== */
.final-cta {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(760px 420px at 14% -6%, rgba(253, 79, 88, 0.22), transparent 55%),
        radial-gradient(700px 500px at 100% 120%, rgba(14, 91, 133, 0.6), transparent 60%), var(--navy-deep);
}

.final-cta::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;
}

.final-cta .container {
    position: relative;
}

.final-cta h2 {
    color: #fff;
    font-size: clamp(1.95rem, 3.7vw, 2.8rem);
    max-width: 19em;
    margin: 0 auto 18px;
}

.final-cta h2 .accent {
    color: var(--coral);
}

.final-cta > .container > p {
    color: #a9c2d1;
    max-width: 36em;
    margin: 0 auto 38px;
    font-size: 1.1rem;
}

.final-cta .hero-ctas {
    justify-content: center;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: start;
    text-align: left;
    margin-top: 8px;
}

.final-cta .cta-grid h2 {
    margin: 0 0 18px;
    max-width: none;
}

.final-cta .cta-grid > div > p {
    margin: 0 0 30px;
    max-width: 30em;
}

.cta-contacts {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 36px;
}

.cta-contacts div {
    font-size: 0.95rem;
    color: #a9c2d1;
    display: flex;
    gap: 16px;
    align-items: center;
}

.cta-contacts .ico {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-contacts .ico svg {
    stroke: var(--coral);
}

.cta-contacts strong {
    display: block;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
}

.cta-contacts a {
    color: #a9c2d1;
    text-decoration: none;
}

.cta-contacts a:hover {
    color: #fff;
}

.form-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 38px 36px;
    color: var(--ink);
    box-shadow: 0 30px 80px rgba(0, 10, 20, 0.5);
}

.form-card h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.form-card > p {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.form-card label {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    margin: 16px 0 6px;
}

.form-card input,
.form-card select,
.form-card textarea {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 12px 15px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(253, 79, 88, 0.15);
}

.form-card textarea {
    resize: vertical;
    min-height: 96px;
}

.form-card .btn {
    width: 100%;
    margin-top: 24px;
}

.form-card small {
    display: block;
    text-align: center;
    color: var(--muted);
    margin-top: 12px;
    font-size: 0.8rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
    .page-hero-grid {
        grid-template-columns: 1fr;
        padding-block: 48px 100px;
        gap: 48px;
    }

    .steps-card {
        margin: 16px auto 0;
    }
}

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

/* The phone number goes first when the bar runs out of room. Laid out end to
   end the desktop header needs ~1130px in French (logo 187 + nav 440 + cta 403
   + gaps/gutters); dropping the phone brings that down to ~936, which is what
   lets the horizontal nav survive down to the burger breakpoint below. */
@media (max-width: 1200px) {
    .header-cta .header-phone {
        display: none;
    }
}

/* Burger at 1024px, not the mockup's 900px: between 901 and 1129px the full
   nav does not fit and pushes the whole document into a horizontal scroll. */
@media (max-width: 1024px) {
    .nav {
        position: fixed;
        inset: 80px 0 auto 0;
        background: var(--navy);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 20px 24px;
        margin: 0;
        gap: 2px;
        display: none;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        /* The panel is fixed, so anything past the fold is unreachable without
           this — the CTA and the language switcher sit at the bottom. */
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav.open {
        display: flex;
    }

    .nav a {
        padding: 13px 12px;
    }

    /* Dropdowns become static and permanently open — no JS involved. */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.05);
        margin: 4px 0 8px;
    }

    .dropdown a {
        color: #d7e4ec;
    }

    .dropdown a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .burger {
        display: block;
        margin-left: auto;
    }

    .contact-box {
        grid-template-columns: 1fr;
        padding: 2.75rem 2.5rem;
    }
}

@media (max-width: 768px) {
    .contact-form {
        grid-template-columns: 1fr;
    }
    .contact-box {
        padding: 2.25rem 1.5rem;
    }
}

/* Descending order matters: the 640px rules must come last so they win. */
@media (max-width: 1000px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .cta-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

@media (max-width: 640px) {
    /* Five wrapped pills eat a whole phone screen before the first card, so the
       row turns into a scroller. Same four-layer edge-shadow trick as the
       tabset's tab bar (see tabset.css): the two `local` layers travel with the
       content and mask the `scroll` shadow behind them, so a shadow shows on
       the left only once scrolled and on the right only while more remains. */
    .blog-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
        padding: 4px 0;
        background:
            linear-gradient(90deg, var(--mist) 40%, rgba(239, 246, 250, 0)) left center / 26px 100% no-repeat
                local,
            linear-gradient(90deg, rgba(239, 246, 250, 0), var(--mist) 60%) right center / 26px 100% no-repeat
                local,
            radial-gradient(farthest-side at 0 50%, rgba(0, 51, 80, 0.3), rgba(0, 51, 80, 0)) left center /
                20px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 51, 80, 0.3), rgba(0, 51, 80, 0)) right
                center / 20px 100% no-repeat scroll;
    }

    .blog-filters::-webkit-scrollbar {
        display: none;
    }

    .blog-filter {
        flex: none;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    /* Header at phone width. Even with these, logo + CTA + burger only just fit
       393px, so the language switcher moves down into the nav drawer. */
    .header-inner {
        gap: 10px;
    }

    /* 26px rather than the mockup's 30px: the mockup was drawn without the
       language switcher and overflows 393px at 30px even after moving it out. */
    .logo img {
        height: 26px;
    }

    .header .btn {
        padding: 0.55em 0.95em;
        font-size: 0.82rem;
    }

    .burger {
        padding: 8px 4px;
    }

    .header-cta .nav-lang {
        display: none;
    }

    .nav-lang-drawer {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 0.95rem;
    }

    /* `.nav a` is more specific than `.nav-lang-link`, so without these both
       languages would render as the active one. */
    .nav-lang-drawer .nav-lang-link {
        padding: 6px 10px;
        color: rgba(255, 255, 255, 0.6);
    }

    .nav-lang-drawer .nav-lang-link.current {
        color: #fff;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .section {
        padding: 62px 0;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 28px 22px;
    }

    .midcta {
        padding: 34px 28px;
    }
}

/* Narrow phones (320–380px). "Réserver une démo" needs ~54px more than a 320px
   bar can give even at the compact size above, so the CTA follows the phone
   number and the switcher into the drawer rather than overflowing the screen. */
@media (max-width: 380px) {
    .header-cta {
        display: none;
    }

    .nav-cta {
        display: block;
        margin-top: 12px;
    }

    /* `.nav a` sets display:inline-block and outranks `.btn`, which would drop
       the flex centring and leave the label hard against the left edge. */
    .nav-cta .btn {
        display: flex;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .swash svg path {
        stroke-dashoffset: 0;
    }

    /* Same repair, third case, and the one that needs `!important`. The other two
       targets are declared earlier in THIS file, so a plain rule outranks them on
       source order. `.scene-lines path` is declared in sections.css, which loads
       after base.css at equal specificity (0-1-1) — without `!important` this
       rule loses and the hero's connector lines stay invisible. That is content
       lost, not motion lost. */
    .scene-lines path {
        opacity: 0.85 !important;
    }
}

/* Bandeau FAQ d'une landing page : le bloc medialem/faq avec un titre se rend
   comme une section à part entière, fond mist et liste centrée. */
.section.faq-band {
    background: var(--mist);
}

.faq-band .faq {
    max-width: 820px;
    margin: 0 auto;
}

/* FAQ : accordéons natifs <details>, sans JS. Site-wide rather than in
   article.css — medialem/faq is used by the marketplace guide *and* by the
   landing pages, which never load the article sheet. */
.faq details {
    border: 1.5px solid var(--line);
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.faq details[open] {
    border-color: var(--coral);
    box-shadow: var(--shadow-card);
}

.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: 1.02rem;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    margin-left: auto;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--coral-tint);
    color: var(--coral);
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.faq details[open] summary::after {
    content: "–";
    background-image: var(--grad-coral);
    color: #fff;
}

.faq .faq-body {
    padding: 0 22px 20px;
}

.faq .faq-body p,
.faq .faq-body ul {
    margin-bottom: 14px;
}