/* =========================================================================
   redirection.io — prototype landing MCP
   Feuille de styles fidèle à la DA de redirection.io.
   Tokens, composants et principes responsive repris du site de référence.
   Base 1rem = 10px (html font-size 62.5%).
   ========================================================================= */

/* ----- Tokens (repris de app.css du site de référence) ----- */
:root {
    --font-primary: "Source Sans Pro", arial, sans-serif;
    --font-mono: "DejaVu Sans Mono", "Ubuntu Mono", menlo, consolas, "Liberation Mono", courier, monospace;

    --color-primary-100: #e8f7ff;
    --color-primary-200: #aae0ff;
    --color-primary-400: #1ab9ff;
    --color-primary-500: #03a9f4;
    --color-primary-800: #44f;
    --color-secondary: #bc6bd9;
    --color-tertiary: #ffec8a;
    --color-quaternary: #f1ff51;
    --color-success: #6fcf97;
    --color-warning: #ff986d;
    --color-danger: #ff6969;

    --color-gray-100: #f9f9f9;
    --color-gray-200: #f1f1f1;
    --color-gray-300: #e9ecef;
    --color-gray-400: #ced4da;
    --color-gray-500: #b0b0b0;
    --color-gray-600: #909797;
    --color-gray-700: #505050;
    --color-gray-800: #4e4b5d;
    --color-black: #000;
    --color-white: #fff;

    --spacing-0: 0;
    --spacing-3xs: .4rem;
    --spacing-2xs: .6rem;
    --spacing-xs: .8rem;
    --spacing-sm: 1.2rem;
    --spacing-md: 2.4rem;
    --spacing-lg: 4.2rem;
    --spacing-xl: 4.8rem;
    --spacing-2xl: 7.2rem;
    --spacing-3xl: 9.6rem;
    --spacing-4xl: 12rem;

    --text-xs: 1.2rem;
    --text-sm: 1.4rem;
    --text-base: 1.6rem;
    --text-lg: 1.8rem;
    --text-xl: 2rem;
    --text-2xl: 2.4rem;
    --text-3xl: 3.2rem;

    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 1.625;

    --container-width: 120.4rem;
    --container-padding-inline: 1.6rem;
    --gap: 2rem;
    --border-radius: .8rem;
    --box-shadow-offset-y: .2rem;
    --box-shadow-blur-radius: .8rem;
    --button-border-radius: .5em;
    --header-nav-height: 9.6rem;
    --section-skew: 5deg;

    --mcp-shadow: 0 .2rem 1.6rem rgb(0 0 0 / 8%);
    --mcp-shadow-hover: 0 .4rem 2.4rem rgb(0 0 0 / 14%);
    --mcp-code-background: #2a2e3a;
    --mcp-code-text: #e7ebf3;
    --mcp-code-muted: #8b93a7;
    --mcp-code-keyword: #7fd4ff;
    --mcp-code-flag: #ffd479;
    --mcp-code-string: #a6e3a1;
}

@media (min-width: 768px) {
    :root {
        --container-padding-inline: 2rem;
        --gap: 2.4rem;
    }
}

/* ----- Fontes ----- */
@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/source-sans-pro-400.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/source-sans-pro-600.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("assets/fonts/source-sans-pro-900.woff2") format("woff2");
}

/* ----- Base ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    font-size: 62.5%;
    line-height: var(--leading-normal);
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-gray-700);
    background-color: var(--color-white);
    overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 { color: var(--color-gray-800); margin: 0; }
h1 {
    margin-top: var(--spacing-md);
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: var(--leading-tight);
}
h2 {
    margin-top: var(--spacing-md);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--leading-tight);
}
h3 {
    margin-top: var(--spacing-md);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--leading-tight);
}
p { margin: var(--spacing-md) 0 0; }
ul, ol { margin: var(--spacing-md) 0 0; padding-left: var(--spacing-md); }
:is(p, ul, ol, h1, h2, h3, h4, figure):first-child { margin-top: 0; }

a { color: var(--color-primary-500); }
code {
    font-family: var(--font-mono);
    font-size: .92em;
    background-color: var(--color-gray-200);
    border-radius: .3rem;
    padding: .1em .4em;
}

/* ----- Utilitaires ----- */
.container {
    width: min(100% - (var(--container-padding-inline) * 2), var(--container-width));
    margin-inline: auto;
}
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-xl { margin-top: var(--spacing-xl); }
.c-anchor { display: block; scroll-margin-top: 12rem; }
.c-lead {
    max-width: 68ch;
    margin-top: var(--spacing-sm);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
}
.c-link {
    color: var(--color-primary-500);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.c-link:hover { color: var(--color-primary-800); }
.c-note {
    max-width: 68ch;
    margin: var(--spacing-md) auto 0;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    text-align: center;
}
.c-icon { width: 1.6rem; height: 1.6rem; flex: none; }

:focus-visible {
    outline: 3px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* =========================================================================
   Boutons
   ========================================================================= */
.c-btn {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: .75em 1.875em;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-normal);
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    cursor: pointer;
    color: var(--color-white);
    background-color: var(--color-primary-400);
    border: 0;
    border-radius: var(--button-border-radius);
    transition: all .2s;
}
.c-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -10;
    border-radius: inherit;
    box-shadow: 0 .5em .625em .0625em var(--color-black);
    opacity: .25;
    transition: all .2s;
}
.c-btn:hover::before,
.c-btn:focus::before,
.c-btn:active::before { opacity: .4; }

.c-btn--secondary { color: var(--color-gray-700); background-color: var(--color-white); }
.c-btn--quaternary { background-color: var(--color-warning); }
.c-btn--block { display: block; width: 100%; }

.c-btn--ghost {
    color: var(--color-primary-400);
    background-color: transparent;
    border: .0625em solid;
}
.c-btn--ghost::before {
    inset: -.0625em;
    visibility: hidden;
    background-color: var(--color-primary-400);
    box-shadow: none;
    opacity: 0;
}
.c-btn--ghost:hover,
.c-btn--ghost:focus,
.c-btn--ghost:active { color: var(--color-white); }
.c-btn--ghost:hover::before,
.c-btn--ghost:focus::before,
.c-btn--ghost:active::before { visibility: visible; opacity: 1; }
.c-btn--ghost.c-btn--tertiary { color: var(--color-white); }
.c-btn--ghost.c-btn--tertiary::before { background-color: var(--color-white); }
.c-btn--ghost.c-btn--tertiary:hover,
.c-btn--ghost.c-btn--tertiary:focus,
.c-btn--ghost.c-btn--tertiary:active { color: var(--color-gray-700); }

/* =========================================================================
   Header + navigation
   ========================================================================= */
.c-header { padding-bottom: .8rem; background-color: var(--color-white); }
.c-header--clear { background-color: var(--color-white); }

.c-skip__link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-white);
    color: var(--color-gray-800);
    border-radius: 0 0 var(--border-radius) 0;
}
.c-skip__link:focus { left: 0; }

.c-nav {
    --nav-link-color: var(--color-white);
    z-index: 100;
    position: fixed;
    top: 0; left: 0; right: 0;
    padding-block: var(--spacing-sm);
}
.c-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -10;
    visibility: hidden;
    opacity: 0;
    background: linear-gradient(270deg, var(--color-primary-800), var(--color-primary-500));
    box-shadow: 0 var(--box-shadow-offset-y) .8rem rgb(0 0 0 / 25%);
    transition: all .2s;
}
.c-nav.is-collapsed::before { visibility: visible; opacity: 1; }

.c-nav__container { display: flex; align-items: center; }
.c-nav__bar {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.c-nav__inner { flex: auto; }
.c-nav__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.c-nav__item { position: relative; }
.c-nav__link {
    display: inline-block;
    color: var(--nav-link-color);
    font-size: var(--text-lg);
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: 0;
    padding-block: var(--spacing-sm);
    cursor: pointer;
    font-family: inherit;
    transition: color .2s;
}
.c-nav__link:hover { color: var(--color-primary-400); }
.c-nav__item[aria-current] > .c-nav__link { color: var(--color-white); }

.c-logo {
    --logo-width: 13.875em;
    width: var(--logo-width);
    height: auto;
    display: inline-block;
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.4rem;
}
.c-logo__svg { fill: currentColor; stroke: currentColor; stroke-width: 0; width: 100%; height: auto; display: block; }
.c-logo--colored { color: var(--color-black); }
.c-logo--colored .c-logo__color { fill: var(--color-primary-500); }

.c-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-none);
    color: #fff;
    background-color: var(--color-warning);
    border-radius: var(--spacing-md);
    padding: var(--spacing-3xs) var(--spacing-2xs);
    margin-right: var(--spacing-xs);
    vertical-align: middle;
}

.c-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    width: 4.4rem;
    height: 4.4rem;
    padding: var(--spacing-xs);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-white);
}
.c-burger__line {
    display: block;
    width: 100%;
    height: .2rem;
    background-color: currentColor;
    transition: transform .2s, opacity .2s;
}
.c-nav.is-expanded .c-burger { color: var(--color-gray-700); }
.c-nav.is-expanded .c-burger__line:nth-child(2) { opacity: 0; }
.c-nav.is-expanded .c-burger__line:nth-child(3) { transform: translateY(.7rem) rotate(45deg); }
.c-nav.is-expanded .c-burger__line:nth-child(4) { transform: translateY(-.7rem) rotate(-45deg); }
.c-nav.is-expanded .c-header__logo { color: var(--color-black); }
.c-nav.is-expanded .c-header__logo .c-logo__color { fill: var(--color-primary-500); }

/* Sous-menus */
.c-nav__submenu { display: none; }
.c-nav__submenu-inner { display: flex; flex-direction: column; }
.c-nav__submenu-title {
    margin: 0;
    padding-block: var(--spacing-2xs);
    font-weight: 900;
    color: var(--color-gray-800);
}
.c-nav__submenu-title a { color: inherit; text-decoration: none; }
.c-nav__submenu .c-nav__link { color: var(--color-gray-700); font-size: var(--text-base); font-weight: 400; padding-block: var(--spacing-2xs); }
.c-nav__submenu .c-nav__link:hover { color: var(--color-primary-400); }

.c-header__nav-btn {
    position: relative;
    z-index: 0;
    color: var(--color-white);
    border: .0625em solid;
    border-radius: var(--button-border-radius);
    padding: .75em 1.25em;
}
.c-header__nav-btn::before {
    content: "";
    position: absolute;
    inset: -.0625em;
    z-index: -10;
    visibility: hidden;
    opacity: 0;
    background-color: var(--color-white);
    border-radius: inherit;
    box-shadow: 0 .5em .625em .0625em rgb(0 0 0 / 25%);
    transition: all .2s;
}
.c-header__nav-btn:hover { color: var(--color-gray-700); }
.c-header__nav-btn:hover::before { visibility: visible; opacity: 1; }

/* =========================================================================
   Hero
   ========================================================================= */
.c-header__inner {
    position: relative;
    z-index: 0;
    padding-top: calc(var(--header-nav-height) + var(--spacing-sm));
    padding-bottom: calc(8.75% + 2.4rem);
    color: var(--color-white);
}
.c-header__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -20;
    background: linear-gradient(270deg, var(--color-primary-800), var(--color-primary-500));
    box-shadow: 0 var(--box-shadow-offset-y) .8rem rgb(0 0 0 / 25%);
    transform: skewY(calc(var(--section-skew) * -1));
    transform-origin: 0;
}
.c-header__waves {
    position: absolute;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    mix-blend-mode: overlay;
    transform: skewY(calc(var(--section-skew) * -1));
    transform-origin: 0;
}
.c-header__wave {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-repeat: no-repeat;
    background-size: cover;
}
.c-header__wave--primary {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDEyLjEgNjkwLjIiPjxsaW5lYXJHcmFkaWVudCBpZD0id2EiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNjY5LjA4NCIgeTE9IjcxMi4yNCIgeDI9IjY2OS43NzUiIHkyPSI3MTIuMjA1IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDI0MTIuMTE2OSAwIDAgLTY5MC4xODM2IC0xNjEzMzk0LjI1IDQ5MjA0MS45MDYpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjE3NCIvPjxzdG9wIG9mZnNldD0iLjgwOCIgc3RvcC1jb2xvcj0iI0ZGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMjQ0LjMgMTMyYzExMiAxODQuMyAyNDguNCAyNzMuNyA0MDkuMSAyNjguMiAyNDEuMS04LjMgMjc0LjEtMjE0LjggNDQ2LTIzM3MyMjQgMjE5LjcgNDQzLjkgMjA2LjdjMjE5LjktMTMgMTM0LjEtMjA1LjUgMzQ3LjQtMjM0LjhzMjI1LjUgMjE3LjIgNTI2LjUgMTc1LjJjMjAwLjctMjcuOSAyMDYuNCAxMTIuNSAxNy4xIDQyMS4zTDEwMTUgODIyLjIgMTYwIDcwMy44IDI0NC4zIDEzMnoiIGZpbGw9InVybCgjd2EpIi8+PC9zdmc+Cg==);
    background-position: left 70% bottom -8rem;
}
.c-header__wave--secondary {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMzc0IDc3OCI+PGxpbmVhckdyYWRpZW50IGlkPSJ3YiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI2MjEuMDg5IiB5MT0iOTQ0LjIxNSIgeDI9IjYyMS43OCIgeTI9Ijk0NC4xODEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMjM3NCAwIDAgLTc3OCAtMTQ3Mzk4MyA3MzUyMDQpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjE3NCIvPjxzdG9wIG9mZnNldD0iLjgwOCIgc3RvcC1jb2xvcj0iI0ZGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMTMxIDYwNC4yYzE4Ny4xLTEyMS4zIDMzMS44LTE4My4xIDQzMy45LTE4NS40IDE1My4yLTMuNSAzMDcuMiAxMjcuMSA1MTYuMyAxMzguOSAyMDkuMSAxMS44IDI3NC0xMzAuMiA1MDIuNC0xMzguOXMyNjAuNSA3MC4xIDQzNi45IDQ5LjljMTc2LjQtMjAuMiAyOTUuMi0xNDguMSAzNTUuOS0yMjUuNSA0MC41LTUxLjYgODMuNCAxNDIuMSAxMjguNiA1ODFMOTM5LjIgMTAxM2wtNzkyLjEtOTcuMUwxMzEgNjA0LjJ6IiBmaWxsPSJ1cmwoI3diKSIvPjwvc3ZnPgo=);
    background-position: left 25% bottom -6rem;
}
.c-header__wave--tertiary {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNjUwIDUyMyI+PGxpbmVhckdyYWRpZW50IGlkPSJ3YyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI3MDguMDU3IiB5MT0iNzc5LjAyOCIgeDI9IjcwOC43NDgiIHkyPSI3NzguOTk0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDI1ODUuMDUyNSAwIDAgLTUyMyAtMTgyOTkwMi4xMjUgNDA3OTUyKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLW9wYWNpdHk9IjAiLz48c3RvcCBvZmZzZXQ9Ii4xNzQiLz48c3RvcCBvZmZzZXQ9Ii44MDgiIHN0b3AtY29sb3I9IiNGRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0iTTgxIDM2OS42YzEwMi42IDgyLjUgMjA0LjEgOTkuNyAzMDQuNSA1MS44IDE1MC42LTcxLjkgMzQwLjItNzIuMyA1MTQuMi0yNi45czIzOC44LTcyLjIgMzczLjYtMTAwLjcgMzAwLjEgMTAwLjEgNTE5LjYgMjguNSA2NjMuNC05My42IDg3My4xIDQ3LjNjMTM5LjggOTMuOSA1My45IDIzMy43LTI1Ny42IDQxOS40SDEzNGMtMzUuMy05NC45LTUzLTE0OC44LTUzLTE2MS42VjM2OS42eiIgZmlsbD0idXJsKCN3YykiLz48L3N2Zz4K);
    background-position: left 40% bottom -2rem;
    left: -2%;
}

.c-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}
.c-hero__eyebrow {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary-100);
}
.c-hero__title {
    margin-top: var(--spacing-sm);
    color: var(--color-white);
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: 1.15;
    max-width: 16ch;
}
.c-hero__signature {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--text-lg);
    font-weight: 900;
    letter-spacing: .02em;
    color: var(--color-white);
}
.c-hero__signature span { white-space: nowrap; }
.c-hero__signature-sep { padding-inline: .5em; opacity: .6; }
.c-hero__lead {
    max-width: 52ch;
    margin-top: var(--spacing-md);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-white);
}
.c-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}
.c-hero__actions .c-btn { flex: 1 1 100%; }
.c-hero__reassurance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    margin: var(--spacing-md) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-white);
}
.c-hero__reassurance li { display: inline-flex; align-items: center; gap: var(--spacing-2xs); }
.c-hero__reassurance-icon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--color-primary-100); }

/* Fenêtre de conversation (composant signature) */
.c-hero__window { align-self: center; }
.c-conversation {
    overflow: hidden;
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
    border-radius: var(--border-radius);
    box-shadow: 0 1.6rem 3.2rem rgb(0 0 0 / 30%);
}
.c-conversation__header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
    background-color: var(--color-gray-300);
    border-bottom: 1px solid var(--color-gray-400);
}
.c-conversation__dots { position: absolute; left: var(--spacing-sm); display: flex; gap: .4rem; }
.c-conversation__dot { width: .8rem; height: .8rem; border-radius: 50%; background-color: var(--color-gray-500); }
.c-conversation__body { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); }
.c-conversation__turn { display: flex; }
.c-conversation__turn--you { justify-content: flex-end; }
.c-conversation__bubble { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius); }
.c-conversation__bubble > * { margin-top: 0; }
.c-conversation__bubble > * + * { margin-top: var(--spacing-xs); }
.c-conversation__turn--you .c-conversation__bubble { max-width: 88%; color: var(--color-white); background-color: var(--color-primary-500); }
.c-conversation__turn--assistant .c-conversation__bubble { flex: 1; min-width: 0; background-color: var(--color-white); box-shadow: 0 2px 8px rgb(0 0 0 / 10%); }
.c-conversation__tools { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs); }
.c-conversation__tool {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-gray-800);
    background-color: var(--color-gray-200);
    border-radius: calc(var(--border-radius) / 2);
    padding: .3rem 1rem;
}
.c-conversation__tool--write { color: #8c543c; background-color: #ffece5; }

/* Bloc readout (mini-table mono) */
.c-readout {
    padding: var(--spacing-3xs) var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: calc(var(--border-radius) / 2);
}
.c-readout__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding-block: .6rem; }
.c-readout__row + .c-readout__row { border-top: 1px solid var(--color-gray-200); }
.c-readout__value { color: var(--color-gray-700); white-space: nowrap; }
.c-mcp-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    border-radius: calc(var(--border-radius) / 2);
    padding: .1rem .8rem;
}
.c-mcp-badge--write { color: #8c543c; background-color: #ffece5; }

/* =========================================================================
   Sections
   ========================================================================= */
.c-section {
    position: relative;
    z-index: 10;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}
.c-section--small { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.c-section--secondary { background-color: var(--color-gray-100); }

.c-section--cta {
    position: relative;
    z-index: 0;
    overflow: hidden;
    color: var(--color-white);
    background: linear-gradient(270deg, var(--color-primary-800), var(--color-primary-500));
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

/* =========================================================================
   Bandeau logos
   ========================================================================= */
.c-logos__label {
    margin: 0;
    text-align: center;
    font-size: var(--text-lg);
    color: var(--color-gray-800);
    font-weight: 600;
}
.c-mcp-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md) var(--spacing-xl);
    margin: var(--spacing-lg) 0 0;
    padding-left: 0;
    list-style: none;
}
.c-mcp-logos__item { display: inline-flex; align-items: center; color: var(--color-gray-700); }
.c-mcp-logos__svg { display: block; height: 2.4rem; width: auto; }
.c-mcp-logos__item--cursor .c-mcp-logos__svg { height: 2.3rem; }
.c-mcp-logos__item--copilot .c-mcp-logos__svg { height: 2.6rem; }
.c-logos__text { font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-700); }

/* Bandeau de compatibilité (dans la section pédagogique MCP) */
.c-logos-band {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
}
.c-logos-band__title {
    margin: 0;
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-gray-700);
}
.c-mcp-logos--band {
    gap: var(--spacing-lg) var(--spacing-2xl);
    margin-top: var(--spacing-lg);
}
.c-mcp-logos--band .c-mcp-logos__item { color: var(--color-gray-800); }
.c-mcp-logos--band .c-mcp-logos__svg { height: 3.2rem; }
.c-mcp-logos--band .c-mcp-logos__item--cursor .c-mcp-logos__svg { height: 3rem; }
.c-mcp-logos--band .c-mcp-logos__item--text { font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-700); }
@media (max-width: 767.98px) {
    .c-mcp-logos--band { gap: var(--spacing-md) var(--spacing-lg); }
    .c-mcp-logos--band .c-mcp-logos__svg { height: 2.6rem; }
    .c-mcp-logos--band .c-mcp-logos__item--cursor .c-mcp-logos__svg { height: 2.4rem; }
}


/* =========================================================================
   Emplacement vidéo
   ========================================================================= */
.c-video-slot {
    display: grid;
    place-items: center;
    margin-top: var(--spacing-xl);
    background-color: var(--color-white);
    border: 2px dashed var(--color-gray-400);
    border-radius: var(--border-radius);
    color: var(--color-gray-700);
}
.c-video-slot--16x9 { aspect-ratio: 16 / 9; }
.c-video-slot__label { font-size: var(--text-sm); letter-spacing: .04em; }

/* =========================================================================
   Deux colonnes + schéma MCP
   ========================================================================= */
.c-two-col { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); margin-top: var(--spacing-md); }
.c-two-col__text p { max-width: 60ch; }
.c-two-col__aside { align-self: start; }

.c-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    margin: 0;
    padding: var(--spacing-md);
    list-style: none;
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
}
.c-diagram__step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
}
.c-diagram__badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-gray-700);
}
.c-diagram__badge--assistant { color: var(--color-secondary); }
.c-diagram__badge--rio { color: var(--color-primary-500); }
.c-diagram__badge--final { color: var(--color-success); }
.c-diagram__text { font-weight: 600; color: var(--color-gray-800); }
.c-diagram__arrow { display: grid; place-items: center; color: var(--color-gray-500); }
.c-diagram__arrow svg { width: 2rem; height: 2rem; }
.c-diagram__step--source { border-color: var(--color-primary-200); background-color: var(--color-primary-100); }
.c-diagram__step--final { border-color: var(--color-gray-300); border-left: 4px solid var(--color-success); }

.c-diagram__connector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-inline: var(--spacing-sm);
}
.c-diagram__connector-line {
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-primary-500) 0 6px, transparent 6px 12px);
}
.c-diagram__connector-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-gray-700);
}
.c-diagram__connector-label strong {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary-800);
}
.c-diagram__connector-label span { color: var(--color-gray-600); }

/* =========================================================================
   Bénéfices (3 étapes différenciées)
   ========================================================================= */
.c-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: benefit;
}
.c-benefits__item { position: relative; padding-top: var(--spacing-md); }
.c-benefits__item:not(:first-child) { border-top: 1px solid var(--color-gray-300); }
.c-benefits__number {
    display: inline-grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    font-size: var(--text-lg);
    font-weight: 900;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-primary-500);
    border-radius: 50%;
}
.c-benefits__label {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--text-sm);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary-800);
}
.c-benefits__subtitle { margin-top: var(--spacing-2xs); font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-800); }
.c-benefits__text { margin-top: var(--spacing-xs); }

/* =========================================================================
   Onglets
   ========================================================================= */
.c-tabs { margin-top: var(--spacing-xl); }
.c-tabs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-tabs__link {
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary-400);
    background-color: var(--color-white);
    border: 1px solid var(--color-primary-400);
    border-radius: 999px;
    padding: .7em 1.6em;
    cursor: pointer;
    transition: all .2s;
}
.c-tabs__link:hover { background-color: var(--color-primary-100); }
.c-tabs__link[aria-selected="true"] { color: var(--color-white); background-color: var(--color-primary-400); }
.c-tabs__panel { margin-top: var(--spacing-xl); }
.c-tabs__panel[hidden] { display: none; }
.c-tabs__panel:focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 8px; border-radius: var(--border-radius); }

/* Cartes de demandes */
.c-mcp-prompts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-mcp-prompts__item { display: flex; }
.c-mcp-prompt {
    display: flex;
    flex: 1;
    position: relative;
    padding: var(--spacing-sm) 5.6rem var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    text-align: left;
    color: var(--color-gray-700);
    background-color: var(--color-white);
    border: 0;
    border-radius: var(--border-radius);
    box-shadow: var(--mcp-shadow);
    cursor: pointer;
    transition: box-shadow .2s, transform .2s;
}
.c-mcp-prompt:hover { box-shadow: var(--mcp-shadow-hover); }
.c-mcp-prompt__text { display: block; padding-block: .4rem; }
.c-mcp-prompt__icon {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: inline-grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--color-gray-500);
    border-radius: var(--border-radius);
    transition: all .2s;
}
.c-mcp-prompt__icon svg { width: 1.8rem; height: 1.8rem; }
.c-mcp-prompt__icon svg:last-child { display: none; }
.c-mcp-prompt:hover .c-mcp-prompt__icon { color: var(--color-primary-400); background-color: var(--color-primary-100); }
.c-mcp-prompts__item.is-copied .c-mcp-prompt__icon { color: var(--color-white); background-color: var(--color-primary-500); }
.c-mcp-prompts__item.is-copied .c-mcp-prompt__icon svg:first-child { display: none; }
.c-mcp-prompts__item.is-copied .c-mcp-prompt__icon svg:last-child { display: block; }

/* =========================================================================
   Étapes de connexion + copie
   ========================================================================= */
.c-steps {
    display: grid;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0 0;
    padding: 0;
    list-style: none;
}
.c-steps__item { position: relative; padding-left: calc(4rem + var(--spacing-sm)); }
.c-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4rem;
    bottom: calc(var(--spacing-lg) * -1);
    left: calc(2rem - 1px);
    border-left: 2px dashed var(--color-gray-400);
}
.c-steps__number {
    position: absolute;
    top: 0; left: 0;
    display: inline-grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    font-size: var(--text-lg);
    font-weight: 900;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-primary-500);
    border-radius: 50%;
}
.c-steps__title { margin-top: 0; padding-top: .6rem; }

.c-copy {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    cursor: pointer;
    overflow: hidden;
}
.c-copy__text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    padding: .8rem 1.2rem;
    color: var(--color-gray-800);
}
.c-copy__button {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.2rem;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary-400);
    background-color: var(--color-white);
    border-left: 1px solid var(--color-gray-300);
    transition: all .2s;
}
.c-copy__button svg { width: 1.6rem; height: 1.6rem; }
.c-copy:hover .c-copy__button { background-color: var(--color-primary-100); }
.c-copy.is-copied .c-copy__button { color: var(--color-primary-500); background-color: var(--color-primary-100); }

/* Bloc de code sombre (config par assistant) */
.c-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--spacing-md);
    color: var(--mcp-code-text);
    background-color: var(--mcp-code-background);
    border-radius: var(--border-radius);
    box-shadow: var(--mcp-shadow);
    overflow: hidden;
}
.c-code__bar { display: flex; flex-wrap: wrap; padding-inline: var(--spacing-xs); background-color: rgb(0 0 0 / 25%); }
.c-code__tab {
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(255 255 255 / 75%);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 1rem 1.4rem;
    cursor: pointer;
    transition: all .2s;
}
.c-code__tab:hover, .c-code__tab[aria-selected="true"] { color: var(--color-white); }
.c-code__tab[aria-selected="true"] { border-bottom-color: var(--color-primary-400); }
.c-code__panel { position: relative; padding: var(--spacing-md); }
.c-code__panel[hidden] { display: none; }
.c-code__panel > * + * { margin-top: var(--spacing-sm); }
.c-code__panel p { margin-top: 0; }
.c-code__copy {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .8rem;
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--mcp-code-text);
    background-color: rgb(255 255 255 / 10%);
    border: 0;
    border-radius: calc(var(--border-radius) / 2);
    cursor: pointer;
    transition: all .2s;
}
.c-code__copy svg { width: 1.4rem; height: 1.4rem; }
.c-code__copy:hover { background-color: rgb(255 255 255 / 22%); }
.c-code__panel.is-copied .c-code__copy { color: var(--mcp-code-string); }
.c-code__pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    padding-right: 8rem;
    hyphens: none;
}
.c-code__pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.c-code__shell::before { content: "$ "; color: var(--mcp-code-muted); user-select: none; }
.c-code__command { color: var(--mcp-code-keyword); }
.c-code__flag, .c-code__key { color: var(--mcp-code-flag); }
.c-code__string { color: var(--mcp-code-string); }

/* =========================================================================
   Flux de contrôle + garanties + permissions
   ========================================================================= */
.c-flow {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    max-width: 88rem;
    margin: var(--spacing-xl) auto 0;
    padding-left: 0;
    list-style: none;
}
.c-flow__step {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-gray-800);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
}
.c-flow__step + .c-flow__step::before {
    content: "";
    position: absolute;
    top: -1.8rem;
    left: 50%;
    width: 2.8rem;
    height: 2.8rem;
    transform: translate(-50%, -50%) rotate(90deg);
    background-color: var(--color-gray-700);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c-flow__step--final { color: var(--color-white); background-color: var(--color-primary-500); border-color: var(--color-primary-500); }
.c-flow__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3.6rem;
    height: 3.6rem;
    background-color: rgb(0 0 0 / 6%);
    border-radius: 50%;
}
.c-flow__icon svg { width: 1.8rem; height: 1.8rem; }
.c-flow__step--final .c-flow__icon { background-color: rgb(255 255 255 / 20%); }

.c-guarantees {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}
.c-guarantees__item { padding-top: var(--spacing-md); border-top: 2px solid var(--color-primary-200); }
.c-guarantees__item h3 { margin-top: 0; }

.c-disclosure {
    margin-top: var(--spacing-xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.c-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    color: var(--color-gray-800);
    cursor: pointer;
    list-style: none;
}
.c-disclosure__summary::-webkit-details-marker { display: none; }
.c-disclosure__summary:hover { background-color: var(--color-gray-100); }
.c-disclosure__icon { width: 2rem; height: 2rem; flex: none; transition: transform .2s; }
.c-disclosure[open] .c-disclosure__icon { transform: rotate(180deg); }
.c-disclosure__content { padding: 0 var(--spacing-md) var(--spacing-sm); }
.c-disclosure__content p { margin-top: 0; }
.c-disclosure__content > :first-child { margin-top: var(--spacing-sm); }

.c-permissions {
    border-collapse: collapse;
    width: 100%;
    max-width: 88rem;
    margin-inline: auto;
}
.c-permissions__label th { padding: var(--spacing-md) 0 var(--spacing-2xs); text-align: left; }
.c-permissions__kind {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.c-permissions__kind::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; }
.c-permissions__kind--read { color: var(--color-gray-700); }
.c-permissions__kind--read::before { background-color: var(--color-gray-500); }
.c-permissions__kind--write { color: #8c543c; }
.c-permissions__kind--write::before { background-color: var(--color-warning); }
.c-permissions__kind--publish { color: var(--color-primary-500); }
.c-permissions__kind--publish::before { background-color: var(--color-primary-500); }
.c-permissions__scope, .c-permissions__text { padding: 1rem 0; vertical-align: top; border-top: 1px solid var(--color-gray-200); text-align: left; }
.c-permissions__scope { width: 1%; white-space: nowrap; padding-right: var(--spacing-md); }
.c-permissions__scope code { font-weight: 600; color: var(--color-gray-800); background: none; padding: 0; }

/* =========================================================================
   FAQ
   ========================================================================= */
.c-faq { max-width: 88rem; margin: var(--spacing-xl) auto 0; }
.c-faq .c-disclosure { margin-top: var(--spacing-sm); }

/* =========================================================================
   CTA final
   ========================================================================= */
.c-cta { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); align-items: center; }
.c-cta__intro h2 { color: var(--color-white); margin-top: 0; max-width: 20ch; }
.c-cta__signature { margin-top: var(--spacing-sm); font-size: var(--text-lg); font-weight: 900; letter-spacing: .02em; }
.c-cta__actions { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
.c-cta__action-label { margin: 0 0 var(--spacing-xs); font-size: var(--text-sm); font-weight: 600; }

/* =========================================================================
   Footer
   ========================================================================= */
.c-footer { background-color: var(--color-white); }
.c-footer__inner { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.c-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg);
}
.c-footer__col { min-width: 0; }
.c-footer__title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-800); }
.c-footer__list { margin: var(--spacing-sm) 0 0; padding: 0; list-style: none; }
.c-footer__list li + li { margin-top: var(--spacing-sm); }
.c-footer__link { color: inherit; text-decoration: none; transition: color .2s; }
.c-footer__link:hover { color: var(--color-gray-500); }
.c-footer__logo { margin-top: var(--spacing-2xl); text-align: center; }
.c-footer__logo .c-logo { max-width: 12rem; font-size: 1rem; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 768px) {
    h1, .c-hero__title { font-size: 3.6rem; }
    h2 { font-size: 2.8rem; }

    .c-section { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

    .c-hero__actions .c-btn { flex: 0 0 auto; }
    .c-video-slot { margin-inline: auto; max-width: 88rem; }

    .c-two-col { grid-template-columns: 1fr 1fr; align-items: start; }

    .c-benefits { grid-template-columns: repeat(3, 1fr); }
    .c-benefits__item { padding-top: 0; border-top: 0 !important; }
    .c-benefits__item:not(:first-child) { padding-left: var(--spacing-lg); border-left: 1px solid var(--color-gray-300) !important; }

    .c-mcp-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

    .c-flow { flex-direction: row; }
    .c-flow__step { flex: 1; }
    .c-flow__step + .c-flow__step::before { top: 50%; left: -1.8rem; transform: translate(-50%, -50%); }

    .c-cta__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .c-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
    .c-nav { padding-block: var(--spacing-xs); }
    .c-nav__inner { display: flex; justify-content: flex-end; }
    .c-nav__list { flex-direction: row; align-items: center; gap: var(--spacing-md); }
    .c-nav__link { font-size: var(--text-base); padding-block: .8rem; }
    .c-nav__item--has-submenu:hover .c-nav__submenu,
    .c-nav__item--has-submenu:focus-within .c-nav__submenu { display: block; }
    .c-nav__item--secondary { margin-inline: auto 0; }
    .c-nav__item--cta { margin-left: var(--spacing-sm); }
    .c-burger { display: none; }
    .c-nav__bar { flex: 0 0 auto; }
    .c-nav__inner { flex: 1 1 auto; }

    .c-nav__submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding-top: var(--spacing-sm);
        z-index: 50;
    }
    .c-nav__submenu-inner {
        flex-direction: row;
        min-width: 30rem;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        background-color: var(--color-white);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--border-radius);
        box-shadow: 0 var(--box-shadow-offset-y) 1.6rem rgb(0 0 0 / 18%);
    }
    .c-nav__submenu-col { min-width: 22rem; max-width: 30rem; padding: 0 var(--spacing-sm); }
    .c-nav__submenu-col + .c-nav__submenu-col { border-left: 1px solid var(--color-gray-200); }
    .c-nav__submenu .c-nav__list { flex-direction: column; gap: 0; }

    .c-hero {
        grid-template-columns: 6fr 5fr;
        grid-template-areas:
            "title video"
            "lead video"
            "actions video"
            "logos logos";
        gap: var(--spacing-md) var(--spacing-2xl);
        align-items: center;
    }
    .c-hero__compat { margin-top: var(--spacing-sm); }
    .c-hero__window { margin-bottom: 0; }

    .c-header__inner { padding-bottom: 4.37443vw; }

    .c-mcp-prompts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .c-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .c-cta { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1280px) {
    h1, .c-hero__title { font-size: 4rem; }
    h2 { font-size: 3.2rem; }
}

/* Menu mobile */
@media (max-width: 1024.98px) {
    .c-nav.is-expanded {
        background-color: var(--color-white);
        box-shadow: 0 .2rem 1.6rem rgb(0 0 0 / 20%);
    }
    .c-nav.is-expanded::before { visibility: hidden; opacity: 0; }
    .c-nav__inner {
        position: absolute;
        top: calc(100% + var(--spacing-xs));
        left: var(--spacing-xs);
        right: var(--spacing-xs);
        display: none;
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
        padding: var(--spacing-md);
        background-color: var(--color-white);
        border-radius: var(--border-radius);
        box-shadow: 0 .2rem 2.4rem rgb(0 0 0 / 25%);
    }
    .c-nav.is-expanded .c-nav__inner { display: block; }
    .c-nav__list { gap: 0; }
    .c-nav__link {
        color: var(--color-gray-700);
        width: 100%;
        text-align: left;
        padding-block: var(--spacing-sm);
    }
    .c-nav__item--has-submenu.is-open .c-nav__submenu { display: block; padding: var(--spacing-xs) 0 var(--spacing-sm) var(--spacing-md); }
    .c-nav__item--has-submenu.is-open > .c-nav__link { color: var(--color-primary-400); }
    .c-nav__item--cta { margin-top: var(--spacing-sm); }
    .c-nav__item--cta .c-header__nav-btn { color: var(--color-white); background-color: var(--color-primary-400); border: 0; }
    .c-nav__item--cta .c-header__nav-btn::before { content: none; }
    .c-nav__item--cta .c-header__nav-btn:hover { color: var(--color-white); }
}

/* Respect de la réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* =========================================================================
   ITERATION 2 — composants et ajustements
   ========================================================================= */

/* Hero vidéo — structure de l'itération suivante */
.c-hero__content { display: contents; }
.c-hero { grid-template-areas: "title" "lead" "actions" "video" "logos"; }
.c-hero__title { grid-area: title; }
.c-hero__lead { grid-area: lead; }
.c-hero__actions { grid-area: actions; }
.c-hero__window { grid-area: video; align-self: center; }
.c-hero__compat { grid-area: logos; }
.c-hero__window .c-video-slot { margin-top: 0; }
.c-hero__window .c-video-slot__label { color: var(--color-gray-600); }
.c-hero__actions .c-btn--secondary {
    padding-inline: 2.2em;
    font-weight: 900;
    box-shadow: 0 .8rem 1.6rem rgb(0 0 0 / 20%);
}

/* Hero compact */
.c-hero__title { font-size: 2.6rem; max-width: 20ch; margin-top: var(--spacing-xs); line-height: 1.15; }
.c-hero__lead { max-width: 58ch; font-size: var(--text-base); }
.c-hero__actions { margin-top: var(--spacing-lg); align-items: center; }
.c-btn--lg { font-size: var(--text-lg); padding: 1em 2em; }

.c-hero__compat {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgb(255 255 255 / 25%);
}
.c-hero__compat-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 85%);
}
.c-hero__compat .c-mcp-logos { margin-top: 0; justify-content: flex-start; gap: var(--spacing-sm) var(--spacing-lg); }
.c-hero__compat .c-mcp-logos__item { color: var(--color-white); }
.c-hero__compat .c-mcp-logos__svg { height: 1.8rem; }
.c-hero__compat .c-mcp-logos__item--cursor .c-mcp-logos__svg { height: 1.7rem; }
.c-hero__compat .c-mcp-logos__item--text { font-size: var(--text-sm); font-weight: 600; color: rgb(255 255 255 / 90%); }

/* Usages — trois intentions */
.c-intents { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.c-intent { display: flex; flex-direction: column; padding-top: var(--spacing-md); border-top: 2px solid var(--color-primary-200); }
.c-intent__label {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary-800);
}
.c-intent__desc { margin-top: var(--spacing-2xs); color: var(--color-gray-700); }

/* Demande copiable */
.c-prompt {
    display: flex;
    position: relative;
    width: 100%;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) 4.8rem var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    text-align: left;
    color: var(--color-gray-800);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.c-prompt:hover { background-color: var(--color-white); border-color: var(--color-primary-400); box-shadow: var(--mcp-shadow); }
.c-prompt:focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 2px; }
.c-prompt__text { display: block; }
.c-prompt__icon {
    display: inline-grid;
    place-items: center;
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 3.2rem;
    height: 3.2rem;
    color: var(--color-gray-500);
    border-radius: var(--border-radius);
    transition: all .2s;
}
.c-prompt__icon svg { width: 1.8rem; height: 1.8rem; }
.c-prompt__icon svg:last-child { display: none; }
.c-prompt:hover .c-prompt__icon { color: var(--color-primary-400); background-color: var(--color-primary-100); }
.c-prompt.is-copied .c-prompt__icon { color: var(--color-white); background-color: var(--color-primary-500); }
.c-prompt.is-copied .c-prompt__icon svg:first-child { display: none; }
.c-prompt.is-copied .c-prompt__icon svg:last-child { display: block; }

/* Liste de demandes secondaires */
.c-prompt-list { margin: 0; padding: 0; list-style: none; }
.c-prompt-list li { margin: 0; }
.c-prompt-list li + li { margin-top: var(--spacing-2xs); }
.c-prompt--row {
    margin-top: 0;
    padding-left: var(--spacing-sm);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-gray-200);
    border-radius: 0;
    font-size: var(--text-sm);
}
.c-prompt--row:hover { background-color: var(--color-gray-100); border-color: var(--color-gray-200); box-shadow: none; }

.c-disclosure--center { max-width: 88rem; margin-inline: auto; margin-top: var(--spacing-xl); }

/* Vidéo */
.c-video-head { text-align: center; }
.c-video-head h2 { margin-top: 0; }
.c-video-head p { margin-top: var(--spacing-xs); }
@media (min-width: 768px) {
    .c-video-slot { max-width: 72rem; }
}

/* Bandeau MCP compact */
.c-mcp-band { max-width: 88rem; margin-inline: auto; text-align: center; }
.c-mcp-band__title { margin-top: 0; }
.c-mcp-band__text { max-width: 68ch; margin-inline: auto; font-size: var(--text-lg); color: var(--color-gray-800); }
.c-mcp-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}
.c-mcp-chain__node {
    padding: .6em 1.2em;
    font-weight: 600;
    color: var(--color-gray-800);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: 999px;
}
.c-mcp-chain__node--rio { color: var(--color-primary-800); background-color: var(--color-primary-100); border-color: var(--color-primary-200); }
.c-mcp-chain__link { display: flex; align-items: center; gap: .6rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-500); }
.c-mcp-chain__link-line { width: 2.4rem; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 10px); }
.c-mcp-band__foot { max-width: 70ch; margin: var(--spacing-md) auto 0; font-size: var(--text-sm); color: var(--color-gray-700); }
.c-mcp-band__more { margin-top: var(--spacing-md); font-size: var(--text-sm); }

/* Activation */
.c-activation { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); margin-top: var(--spacing-md); align-items: start; }
.c-activation__step { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm); font-weight: 600; color: var(--color-gray-800); }
.c-activation__step-num {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.8rem;
    height: 2.8rem;
    font-size: var(--text-sm);
    font-weight: 900;
    color: var(--color-white);
    background-color: var(--color-primary-500);
    border-radius: 50%;
}
.c-url { margin-top: var(--spacing-lg); }
.c-url__label {
    display: block;
    margin-bottom: var(--spacing-3xs);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-gray-500);
}
.c-note--left { text-align: left; margin-inline: 0; max-width: 68ch; }

/* Contrôle / permissions */
.c-control { margin-top: var(--spacing-2xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-gray-300); }
.c-control__title { margin-top: 0; }
.c-control__lead { max-width: 68ch; margin-top: var(--spacing-sm); color: var(--color-gray-700); }
.c-control__more { margin-top: var(--spacing-md); font-size: var(--text-sm); }
.c-control__list { display: grid; gap: var(--spacing-sm); margin: var(--spacing-md) 0 0; padding: 0; list-style: none; }
.c-control__list li { display: flex; align-items: flex-start; gap: var(--spacing-sm); color: var(--color-gray-700); }
.c-control__list .c-icon { flex: none; margin-top: .3rem; color: var(--color-success); }

/* Responsive itération 2 */
@media (min-width: 768px) {
    .c-hero__title { font-size: 3rem; }
    .c-intents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .c-intent { padding-top: 0; }
    .c-activation { grid-template-columns: 0.9fr 1.1fr; }
    .c-activation .c-code { margin-top: 0; }
    .c-activation .c-code__pre { font-size: 1.3rem; }
    .c-control__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .c-mcp-logos__svg { height: 2rem; }
}
@media (min-width: 1025px) {
    .c-hero__window { margin-bottom: 0; }
}
@media (min-width: 1280px) {
    .c-hero__title { font-size: 3.4rem; }
}

/* Disposition finale du hero : vidéo à droite, logos sous les deux colonnes. */
@media (min-width: 1025px) {
    .c-hero {
        grid-template-columns: 6fr 5fr;
        grid-template-areas:
            "title video"
            "lead video"
            "actions video"
            "logos logos";
        gap: var(--spacing-md) var(--spacing-2xl);
        align-items: center;
    }
    .c-hero__compat { margin-top: var(--spacing-sm); }
}

/* =========================================================================
   Onglets + exemples de demandes (repris de la V2)
   ========================================================================= */
.tabs { margin-top: var(--spacing-xl); }
.tabs__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}
.tabs__tab {
    padding: 1rem 2.4rem;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-gray-700);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: all .2s;
}
.tabs__tab:hover {
    border-color: var(--color-primary-400);
    color: var(--color-primary-800);
}
.tabs__tab[aria-selected="true"] {
    color: var(--color-white);
    background-color: var(--color-primary-800);
    border-color: var(--color-primary-800);
}
.tabs__panel { margin-top: var(--spacing-xl); }
.tabs__panel[hidden] { display: none; }
.prompts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.prompts__item { display: flex; }
.prompt {
    flex: 1;
    position: relative;
    padding: 1.2rem 5.6rem 1.2rem 2.4rem;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    text-align: left;
    color: var(--color-gray-700);
    background-color: var(--color-white);
    border: 0;
    border-radius: var(--border-radius);
    box-shadow: var(--mcp-shadow);
    cursor: pointer;
    transition: all .2s;
}
.prompt:hover { box-shadow: var(--mcp-shadow-hover); }
.prompt__text { display: block; padding-block: .4rem; }
.prompt__icon {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    display: inline-grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--color-gray-500);
    border-radius: var(--border-radius);
    transition: all .2s;
}
.prompt__icon svg { grid-area: 1 / 1; width: 1.8rem; height: 1.8rem; }
.prompt__icon-check { display: none; }
.prompt:hover .prompt__icon { color: var(--color-primary-400); background-color: var(--color-primary-100); }
.prompt.is-copied .prompt__icon { color: var(--color-white); background-color: var(--color-primary-500); }
.prompt.is-copied .prompt__icon-copy { display: none; }
.prompt.is-copied .prompt__icon-check { display: block; }
@media (min-width: 768px) {
    .prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
    .prompts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
   Connect — composition de référence (itération Connexion)
   ========================================================================= */
.c-connect { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); align-items: start; }
.c-connect__eyebrow { margin: 0; font-size: var(--text-sm); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary-500); }
.c-connect__title { margin-top: var(--spacing-xs); font-size: var(--text-3xl); font-weight: 900; line-height: 1.15; color: var(--color-gray-800); }
.c-connect__lead { max-width: 48ch; margin-top: var(--spacing-md); font-size: var(--text-lg); color: var(--color-gray-700); }
.c-connect__steps { display: grid; gap: var(--spacing-sm); margin: var(--spacing-lg) 0 0; padding: 0; list-style: none; }
.c-connect__steps li { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 600; color: var(--color-gray-800); }
.c-connect__step-num { display: inline-grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; font-size: var(--text-sm); font-weight: 900; color: var(--color-white); background-color: var(--color-primary-500); border-radius: 50%; }

.c-connect__panel { background-color: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--border-radius); box-shadow: var(--mcp-shadow); overflow: hidden; }
.c-config__tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-gray-300); }
.c-config__tab { flex: 1 1 33.333%; min-width: 11rem; text-align: left; padding: var(--spacing-sm) var(--spacing-md); font-family: inherit; font-size: var(--text-base); font-weight: 600; color: var(--color-gray-700); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color .2s, border-color .2s; }
.c-config__tab small { display: block; margin-top: .2rem; font-size: var(--text-xs); font-weight: 400; color: var(--color-gray-500); }
.c-config__tab:hover { color: var(--color-primary-500); }
.c-config__tab[aria-selected="true"] { color: var(--color-primary-500); border-bottom-color: var(--color-primary-500); }
.c-config__body { padding: var(--spacing-md); }
.c-config__panel[hidden] { display: none; }
.c-config__panel > * + * { margin-top: var(--spacing-md); }
.c-config__step { margin: 0; color: var(--color-gray-700); }
.c-config__step strong { color: var(--color-gray-800); }
.c-config__code { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background-color: var(--mcp-code-background); border-radius: calc(var(--border-radius) / 2); }
.c-config__code code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--mcp-code-text); background: none; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-config__copy { flex: none; align-self: flex-start; font-family: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--mcp-code-text); background-color: rgb(255 255 255 / 10%); border: 0; border-radius: calc(var(--border-radius) / 2); padding: .5rem 1rem; cursor: pointer; transition: all .2s; }
.c-config__copy:hover { background-color: rgb(255 255 255 / 22%); }
.c-config__copy.is-copied { color: var(--mcp-code-string); }
.c-connect__more { display: inline-block; margin: 0 var(--spacing-md) var(--spacing-md); font-weight: 600; color: var(--color-primary-500); }
.c-connect__more:hover { color: var(--color-primary-800); }

.c-connect__reassurance { margin: var(--spacing-xl) 0 0; color: var(--color-gray-700); }
.c-connect__reassurance strong { color: var(--color-gray-800); }
.c-connect__perms { margin-top: var(--spacing-md); }

@media (min-width: 768px) {
    .c-connect { grid-template-columns: 1fr 1.05fr; }
}

/* =========================================================================
   Hero — deux parcours CTA (harmonisés avec le bandeau final)
   ========================================================================= */
.c-hero__actions { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-top: var(--spacing-lg); align-items: start; }
.c-hero__action { display: flex; flex-direction: column; align-items: stretch; }
.c-hero__action-label { margin: 0 0 var(--spacing-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-white); }
@media (min-width: 768px) {
    .c-hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   V3.3 — consolidation UX/UI
   Deux largeurs de composition, des états cohérents et aucun nouveau motif.
   ========================================================================= */
:root {
    --mcp-reading-width: 88rem;
    --mcp-panel-border: 1px solid var(--color-gray-300);
    --mcp-control-radius: var(--border-radius);
    --mcp-control-height: 4.8rem;
}

/* Lisibilité : les textes fonctionnels restent à 16 px minimum. */
.c-hero__lead {
    max-width: 53ch;
    font-size: var(--text-lg);
    line-height: 1.55;
}
.c-lead { color: var(--color-gray-700); }

/* Les cartes d'usage restent des cartes, mais suivent le même niveau de finition que la configuration. */
.tabs { margin-top: var(--spacing-lg); }
.tabs__bar { gap: var(--spacing-xs); }
.tabs__tab {
    min-height: var(--mcp-control-height);
    padding: .8rem 2.2rem;
    border-radius: var(--mcp-control-radius);
}
.tabs__panel { margin-top: var(--spacing-lg); }
.prompts { gap: var(--spacing-md); }
.prompt {
    min-height: 11.2rem;
    padding: var(--spacing-md) 8.4rem var(--spacing-md) var(--spacing-md);
    font-size: 1.7rem;
    line-height: 1.45;
    border: var(--mcp-panel-border);
    box-shadow: 0 .2rem .8rem rgb(0 0 0 / 6%);
}
.prompt:hover { border-color: var(--color-primary-200); box-shadow: var(--mcp-shadow); }
.prompt__icon {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    grid-auto-flow: column;
    gap: .4rem;
    width: auto;
    height: auto;
    min-height: 3.2rem;
    padding: .4rem .7rem;
    font-size: var(--text-sm);
    font-weight: 600;
}
.prompt__icon::after { content: "Copier"; }
.prompt.is-copied .prompt__icon::after { content: "Copié"; }

/* MCP : explication, schéma puis compatibilité, sur deux repères de lecture connus. */
.c-section--mcp { padding-block: var(--spacing-xl); }
.c-mcp-band { max-width: var(--mcp-reading-width); }
.c-mcp-band__text { font-size: var(--text-lg); line-height: 1.55; }
.c-mcp-chain { gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.c-mcp-chain__node {
    display: inline-flex;
    align-items: center;
    min-height: var(--mcp-control-height);
    padding-inline: 1.6rem;
    font-size: var(--text-base);
}
.c-mcp-chain__link { gap: var(--spacing-xs); font-size: var(--text-sm); }
.c-mcp-chain__link-line { width: 3.6rem; }
.c-mcp-band__foot { margin-top: var(--spacing-lg); font-size: var(--text-base); line-height: 1.5; }
.c-logos-band { max-width: var(--mcp-reading-width); margin-inline: auto; margin-top: var(--spacing-xl); padding-top: var(--spacing-xl); }
.c-logos-band__title { font-size: var(--text-lg); }

/* Connexion : colonnes équilibrées, onglets descriptifs et code respirant. */
.c-connect { gap: clamp(4.8rem, 6vw, 7.2rem); }
.c-connect__lead { font-size: var(--text-lg); line-height: 1.55; }
.c-connect__steps li { min-height: 3.2rem; font-size: var(--text-base); }
.c-connect__panel { border: var(--mcp-panel-border); box-shadow: 0 .2rem .8rem rgb(0 0 0 / 7%); }
.c-config__tab { min-height: 7.2rem; padding: var(--spacing-sm) var(--spacing-md); }
.c-config__tab[aria-selected="true"] { background-color: var(--color-primary-100); }
.c-config__body { padding: var(--spacing-lg); }
.c-config__step { font-size: var(--text-base); line-height: 1.5; }
.c-config__code { align-items: flex-start; padding: var(--spacing-md); }
.c-config__code code { font-size: 1.3rem; line-height: 1.55; }
.c-config__copy { min-height: 3.6rem; padding-inline: 1.2rem; }
.c-connect__more { min-height: 4.4rem; margin: 0 var(--spacing-lg) var(--spacing-md); }
.c-connect__reassurance { max-width: var(--mcp-reading-width); font-size: var(--text-base); }
.c-connect__perms { max-width: var(--mcp-reading-width); }

/* Un même système d'accordéon ; la FAQ ferme le parcours « Commencer » sans le concurrencer. */
.c-disclosure { border: var(--mcp-panel-border); border-radius: var(--mcp-control-radius); box-shadow: none; }
.c-disclosure__summary { min-height: 5.2rem; padding: var(--spacing-sm) var(--spacing-md); }
.c-disclosure__summary:hover { background-color: var(--color-primary-100); }
.c-section--faq { padding-top: var(--spacing-xl); }
.c-faq { max-width: var(--mcp-reading-width); margin-top: var(--spacing-lg); }
.c-faq .c-disclosure { margin-top: var(--spacing-xs); }

/* Le bandeau garde la hiérarchie des CTA du hero sans rejouer sa promesse. */
.c-cta__intro h2 { max-width: 18ch; }
.c-cta__actions { gap: var(--spacing-sm); }

@media (min-width: 768px) {
    .c-section--mcp { padding-block: 6.4rem; }
    .c-connect { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
    .c-section--faq { padding-top: 5.6rem; padding-bottom: var(--spacing-2xl); }
}

@media (max-width: 767.98px) {
    .c-hero__lead { font-size: var(--text-base); }
    .prompt { min-height: 0; padding: var(--spacing-md) 7.6rem var(--spacing-md) var(--spacing-md); font-size: var(--text-base); }
    .c-config__tabs { display: grid; grid-template-columns: 1fr; }
    .c-config__tab { min-height: 5.6rem; text-align: left; border-bottom: 1px solid var(--color-gray-300); border-left: 3px solid transparent; }
    .c-config__tab[aria-selected="true"] { border-bottom-color: var(--color-gray-300); border-left-color: var(--color-primary-500); }
    .c-config__body { padding: var(--spacing-md); }
    .c-config__code { flex-direction: column; gap: var(--spacing-sm); }
    .c-config__copy { align-self: flex-end; }
    .c-mcp-chain { gap: var(--spacing-xs); }
    .c-mcp-chain__link-line { width: 1.6rem; }
}

/* =========================================================================
   V3.4 — rythme du hero
   La grille porte les espacements : aucun écart ne s'additionne en marge.
   ========================================================================= */
.c-hero {
    grid-template-areas:
        "title"
        "lead"
        "actions"
        "reassurance"
        "video";
    gap: var(--spacing-md);
}
.c-hero__title { max-width: 24ch; }
.c-hero__lead {
    max-width: 60ch;
    margin-top: 0;
}
.c-hero__actions { margin-top: 0; }
.c-hero__reassurance {
    grid-area: reassurance;
    margin-top: 0;
}

@media (min-width: 1025px) {
    .c-hero {
        grid-template-areas:
            "title video"
            "lead video"
            "actions video"
            "reassurance video";
        gap: var(--spacing-md) var(--spacing-2xl);
    }
}

/* =========================================================================
   V3.5 — finitions de hiérarchie et de respiration
   ========================================================================= */
.c-connect__perms { max-width: none; }
.c-section--faq {
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
}

@media (min-width: 768px) {
    .c-mcp-logos--band { flex-wrap: nowrap; gap: 3.2rem; }
    .c-mcp-logos--band .c-mcp-logos__item--text { margin-left: 0; white-space: nowrap; }
}

@media (min-width: 1025px) {
    .c-header__inner { padding-bottom: clamp(10rem, 8vw, 13rem); }
    .c-hero__title { font-size: 3.8rem; }
}

@media (min-width: 1280px) {
    .c-hero__title { font-size: 4rem; }
}

/* Les libellés des deux parcours restent sur une ligne, emoji compris. */
.c-hero__actions .c-btn--lg,
.c-cta__actions .c-btn--lg {
    padding-inline: 1.25em;
    white-space: nowrap;
}

/* Le fond derrière le biais du hero prolonge la section Exemples. */
.c-header.c-header--clear { background-color: var(--color-gray-100); }

/* =========================================================================
   V3.7 — hero validé et repères visuels des cartes MCP
   Traitement repris de .c-mcp-card__icon du site : cyan 500 sur cyan 100.
   ========================================================================= */
.c-hero {
    grid-template-areas:
        "eyebrow"
        "title"
        "lead"
        "actions"
        "reassurance"
        "video";
}
.c-hero__eyebrow {
    grid-area: eyebrow;
    margin: 0 -0.8rem -1.2rem 0;
    font-size: var(--text-sm);
    color: var(--color-primary-100);
}
.c-hero__title { margin-top: 0; }
.c-mcp-logos--band .c-mcp-logos__item--text { font-weight: 400; }
.c-logos-band__title { font-weight: 400; }

.prompt {
    min-height: 0;
    padding: 5.2rem 8.2rem 1.6rem var(--spacing-md);
}
.prompt__feature-icon {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    display: inline-grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--color-primary-500);
    background-color: var(--color-primary-100);
    border-radius: .6rem;
}
.prompt__feature-icon svg { width: 1.8rem; height: 1.8rem; }
.prompt__icon {
    color: var(--color-primary-500);
    background-color: var(--color-primary-100);
    border: 1px solid var(--color-primary-200);
}
.prompt:hover .prompt__icon { color: var(--color-primary-800); background-color: var(--color-primary-100); }
.prompt.is-copied .prompt__icon { color: var(--color-white); background-color: var(--color-primary-500); border-color: var(--color-primary-500); }

@media (min-width: 1025px) {
    .c-hero {
        grid-template-areas:
            "eyebrow video"
            "title video"
            "lead video"
            "actions video"
            "reassurance video";
    }
}

/* Navigation : dimensions et espacements alignés sur la page MCP officielle. */
.c-nav { padding-block: 2.8rem; }
.c-header__logo { font-size: var(--text-base); }

@media (max-width: 1024.98px) {
    .c-nav__link { display: block; }
    .c-nav__item--cta .c-header__nav-btn { display: inline-block; width: auto; }
}

@media (min-width: 1025px) {
    .c-nav { padding-block: 2.8rem; }
    .c-nav__item--cta { margin-left: 0; }
}

@media (min-width: 1280px) {
    .c-nav__list { gap: var(--spacing-lg); }
}