:root {
    /* Sampled directly from the logo file (ameleo-fond-blanc.png) so the
       site's palette is the brand's actual colors, not an invented one. */
    --color-ink: #2f3940;
    --color-body: #4b5860;
    --color-muted: #7c8891;
    --color-primary: #b8441f;
    --color-primary-dark: #8f3417;
    --color-primary-light: #fbe9df;
    --color-accent-amber: #f39218;
    --color-accent-coral: #e8503a;
    /* Reserved for the RSE section only. A desaturated forest green, chosen to
       sit beside the warm brand palette rather than compete with it. */
    --color-green: #3f6b52;
    --color-green-dark: #2f5340;
    --color-green-light: #eef4ef;
    --color-bg: #ffffff;
    --color-bg-alt: #fbf4f0;
    --color-border: #ece4df;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --max-width: 1400px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-body);
    background: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.wrap {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

h1, h2, h3, h4 {
    color: var(--color-ink);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
}

h1, h2 { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); margin: 0 0 1.1rem; }
h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin: 0 0 1rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.5rem; font-weight: 700; }
h4 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; font-weight: 700; }

p { margin: 0 0 1rem; }
a { color: var(--color-primary); }

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    overflow-x: auto;
    display: block;
}
th, td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
}
th { background: var(--color-bg-alt); }

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 700;
    margin: 0 0 0.6rem;
}
.eyebrow--on-dark {
    color: #f3c98a;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}

.section__intro {
    max-width: 62ch;
    font-size: 1.05rem;
}

/* Buttons */
.btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 0.85rem 1.7rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--color-primary-dark); }
.btn--small { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.btn--outline {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-bg-alt); }
.btn--on-dark { background: #fff; color: var(--color-primary-dark); }
.btn--on-dark:hover { background: var(--color-primary-light); }
.btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* Header */
.site-header {
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    z-index: 30;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.15rem;
}
.site-header__logo {
    display: flex;
    align-items: center;
    margin-right: auto;
}
.site-header__logo img { height: 40px; width: auto; }
.site-header__phone {
    text-decoration: none;
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
}
.nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    margin-right: -0.5rem;
    cursor: pointer;
    color: var(--color-ink);
}
.nav-toggle__bars { display: block; position: relative; width: 22px; height: 16px; }
.nav-toggle__bars i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 7px; }
.nav-toggle__bars i:nth-child(3) { top: 14px; }
.site-header.is-open .nav-toggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Le soulignement marque la page courante mieux que la seule couleur, qui se
   confond avec un simple survol. Il s'ouvre depuis la gauche plutôt que
   d'apparaître d'un bloc. */
.site-nav > ul > li > a:not(.btn) {
    position: relative;
    display: inline-block;
    padding-block: 0.35rem;
}
.site-nav > ul > li > a:not(.btn)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.site-nav > ul > li > a:not(.btn):hover::before,
.site-nav > ul > li > a.is-active::before { transform: scaleX(1); }

.site-nav > ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav a {
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 500;
    font-size: 0.95rem;
}
.site-nav a.is-active,
.site-nav a:hover { color: var(--color-primary); }
.site-nav a.btn,
.site-nav a.btn:hover { color: #fff; }

.has-dropdown { position: relative; }
/* Rien n'indiquait que « Nos expertises » ouvre un menu, on ne le découvrait
   qu'en passant dessus par hasard. Le chevron le dit, et pivote à l'ouverture. */
.has-dropdown > a::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform 0.2s ease;
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after { transform: translateY(0.1em) rotate(225deg); }
/* The panel is offset below the nav item, which leaves a gap the cursor has to
   cross. Without this invisible bridge the li loses :hover mid-travel and the
   menu snaps shut before the submenu can be reached. */
.has-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.9rem;
}
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(11, 26, 36, 0.12);
    padding: 0.5rem;
    min-width: 270px;
    list-style: none;
    margin: 0.75rem 0 0;
    z-index: 20;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li a {
    display: block;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.92rem;
}
.dropdown li a:hover { background: var(--color-bg-alt); }

/* Main content */
main { padding-block: 0 0; }
.page { padding-block: 3.5rem 4.5rem; }
.page ul { padding-left: 1.25rem; }
article.post,
article.not-found { padding-block: 2.75rem 4rem; }

.post__breadcrumb a { text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.post__date { color: var(--color-muted); margin-top: -0.5rem; }

/* Inner-page header: gives content pages the same sense of arrival as the
   homepage hero, without competing with it. */
.page-header {
    background:
        radial-gradient(700px 320px at 88% -20%, rgba(243, 146, 24, 0.10), transparent 65%),
        var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding-block: 3.5rem;
}
/* The inner keeps the full .wrap width so the header's left edge lines up with
   the content below it; the text itself is capped per element instead. */
.page-header h1 { margin-bottom: 0.75rem; max-width: 34ch; }
.page-header__intro {
    font-size: 1.15rem;
    color: var(--color-body);
    max-width: 62ch;
    margin: 0;
}

/* Dark header variant carrying a photo. Adapted from the previous WordPress
   design: the dark ground and the image bleeding off the right edge are worth
   keeping, the circular mask and its teal ring are not (that ring is a leftover
   from the old palette and fights the brand orange). */
.page-header--with-image {
    position: relative;
    overflow: hidden;
    /* Short intros were leaving this band squashed next to a full-height photo;
       a floor keeps every expertise header the same weight. */
    min-height: 30rem;
    display: flex;
    align-items: center;
    background:
        radial-gradient(700px 380px at 12% -20%, rgba(243, 146, 24, 0.16), transparent 62%),
        linear-gradient(120deg, var(--color-ink), #3c2318 78%, var(--color-primary-dark));
    border-bottom: none;
    padding-block: 4.5rem;
    color: #e7ded8;
}
.page-header--with-image .page-header__inner {
    max-width: var(--max-width);
    display: block;
    width: 100%;
}
.page-header--with-image .page-header__copy {
    position: relative;
    z-index: 1;
    max-width: 54%;
}
.page-header--with-image h1 { color: #fff; }
.page-header--with-image .eyebrow {
    color: #f3c98a;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}
.page-header__tagline {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-style: italic;
    color: var(--color-accent-amber);
    margin: 0 0 1rem;
}

/* The photo fills the right half and runs to the edge of the viewport. */
.page-header__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
}
.page-header__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    /* Softens the junction with the dark ground without resorting to a shape. */
    mask-image: linear-gradient(to right, transparent, #000 22%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
}

.page-header__lead { margin-top: 1.25rem; }
.page-header__lead p {
    max-width: 62ch;
    margin-bottom: 1rem;
}
/* The intro sets its own colour for the light header, so it does not inherit
   the dark variant's and ends up dark grey on a dark ground — 1.6:1, unreadable.
   Restated here rather than removed, because the light header still needs it. */
.page-header--with-image .page-header__intro { color: #ded4cd; }
.page-header--with-image .page-header__lead p { color: #ded4cd; }
.page-header--with-image .page-header__lead p:first-child { color: #f2ebe6; }
.page-header__lead p:first-child {
    font-size: 1.15rem;
    color: var(--color-ink);
}
.page-header__lead p:last-child { margin-bottom: 0; }

/* Editorial two-column body: the section heading sits in a narrow left rail
   and the prose runs beside it, so a page of short paragraphs fills the width
   instead of leaving half the band empty. Blocks marked .wide span both. */
.page__body {
    display: grid;
    grid-template-columns: 26rem minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
}
.page__body > h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 1.95rem);
    text-wrap: balance;
}
.page__body > * { grid-column: 2; }
.page__body > .wide { grid-column: 1 / -1; max-width: none; }
.page__body > *:last-child { margin-bottom: 0; }
.page__body > h3 { margin-top: 2rem; }

/* Section rhythm */
.section { padding-block: 4.5rem; }
.section--alt { background: var(--color-bg-alt); }

/* Dark anchor section: breaks the white/cream alternation and gives the page
   a mid-scroll change of depth. */
.section--dark {
    background:
        radial-gradient(800px 400px at 85% 0%, rgba(243, 146, 24, 0.12), transparent 65%),
        var(--color-ink);
    color: #d8d2cc;
}
.section--dark h2,
.section--dark h3 { color: #fff; }
.section h2 { margin-bottom: 0.75rem; }

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 90% -15%, rgba(243, 146, 24, 0.35), transparent 60%),
        linear-gradient(135deg, var(--color-ink), #6d2e16 60%, var(--color-primary-dark));
    color: #f4ece6;
    padding-block: 5.5rem 0;
}
.hero__deco {
    position: absolute;
    top: -12%;
    right: -6%;
    left: auto;
    width: 460px;
    height: 460px;
    opacity: 0.45;
    pointer-events: none;
}
.hero__inner { display: block; }
.hero__copy { position: relative; z-index: 1; max-width: 52%; padding-bottom: 5rem; }
.hero h1 { color: #fff; }
.hero__text { font-size: 1.15rem; color: #ecd9cd; max-width: 56ch; }
/* Le lien du texte d'accroche reste dans la couleur du paragraphe : un
   orange sur ce fond sombre manquerait de contraste et casserait la ligne. */
.hero__link { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.hero__link:hover, .hero__link:focus-visible { color: #fff; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
/* The hero shows the client's world rather than the founder: a company leads
   with what its customers do, and a portrait here would read as a freelance
   personal brand. The founder appears further down, in the quote, and on
   /a-propos/. Same bleeding treatment as the inner-page headers. */
.hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    z-index: 0;
}
.hero__photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    mask-image: linear-gradient(to right, transparent, #000 26%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26%);
}

/* Stats */
.stats { border-bottom: 1px solid var(--color-border); }
.stats__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-block: 2.5rem;
}
.stat { text-align: center; padding-inline: 1rem; border-left: 1px solid var(--color-border); }
.stat:first-child { border-left: none; }
.stat__value { font-family: var(--font-serif); font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 700; color: var(--color-primary); margin: 0 0 0.25rem; }
.stat__label { margin: 0; font-size: 0.9rem; color: var(--color-muted); }

/* Card grids (problems, expertises, blog) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0 0;
}

.problem-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 2.25rem;
}
.problem-card h3 { font-size: 1.2rem; }
.problem-card p { margin: 0; font-size: 1rem; }

.expertise-card,
.post-card {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 2.25rem;
    text-decoration: none;
    background: var(--color-bg);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.expertise-card:hover,
.post-card:hover {
    box-shadow: 0 16px 40px rgba(11, 26, 36, 0.1);
    transform: translateY(-3px);
    border-color: transparent;
}
.expertise-card h3,
.post-card h2,
.post-card h3 { color: var(--color-ink); font-size: 1.3rem; }
.expertise-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}
.expertise-card__icon svg { width: 30px; height: 30px; }
.expertise-card__tagline {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.02rem;
}
.expertise-card__link {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.92rem;
}
.post-card__date {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.home-blog .card-grid { margin-bottom: 2rem; }

/* Founder */
.founder__inner {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 3rem;
    align-items: center;
}
.founder__photo img {
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(47, 57, 64, 0.18);
}
.founder__mark {
    font-size: 4rem;
    line-height: 1;
    color: var(--color-primary);
    font-family: var(--font-serif);
    margin: 0;
}
.founder__quote {
    margin: 0 0 1.5rem;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.4;
    font-style: italic;
}
.founder__body { font-size: 1rem; }
.founder__name { font-weight: 700; color: var(--color-ink); margin-top: 1.5rem; }
.founder__name span { font-weight: 400; color: var(--color-muted); }

/* Method stepper */
.stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}
.step { position: relative; padding-top: 1.5rem; border-top: 3px solid var(--color-accent-amber); }
.step__number {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-accent-amber);
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}
.step h3 { font-size: 1.05rem; }
.step p { font-size: 0.92rem; margin: 0; }

/* Audience */
.audience__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.audience__list li {
    padding-left: 1.6rem;
    position: relative;
    font-size: 0.98rem;
}
.audience__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-primary);
}
/* Two-column list for the wide sectors section */
.audience__list--wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem 2.5rem;
}

/* Full-bleed territory band: the page's one photographic anchor. The overlay
   gradient keeps the white type legible over the skyline whatever the crop. */
.zone-band {
    position: relative;
    background-image:
        linear-gradient(rgba(28, 34, 39, 0.62), rgba(47, 57, 64, 0.55)),
        url("../images/lyon-band.jpg");
    background-size: cover;
    background-position: center 40%;
    color: #f0eae5;
    padding-block: 5rem;
    text-align: center;
}
.zone-band__inner { max-width: 900px; }
.zone-band__cities {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin: 0 0 1rem;
    text-wrap: balance;
}
/* Keep multi-word city names from breaking mid-name across lines. */
.zone-band__cities em { font-style: normal; white-space: nowrap; }

/* Les villes sont cliquables mais restent des titres. L'orange de la charte
   passe mal sur le fond sombre de la bande, le lien reprend donc la couleur du
   texte et signale sa nature par un soulignement discret. */
.zone-band__cities a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.25s ease;
}
/* Un léger grossissement au survol suffit à signaler le lien sans altérer le
   titre au repos. La transformation n'affecte pas le flux, les séparateurs ne
   bougent donc pas. */
.zone-band__cities a:hover { transform: scale(1.06); }
/* Le survol ne dit rien à une navigation au clavier, le focus garde donc un
   contour explicite, lisible sur ce fond sombre. */
.zone-band__cities a:focus-visible {
    transform: scale(1.06);
    outline: 2px solid #fff;
    outline-offset: 6px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .zone-band__cities a { transition: none; }
}
.zone-band__cities span { color: var(--color-accent-amber); padding-inline: 0.35rem; }
.zone-band__text { max-width: 52ch; margin-inline: auto; color: #ece5e0; }
/* Photo backgrounds vary in local brightness; a soft shadow keeps the type
   readable over the lighter parts of the skyline. */
.zone-band__cities,
.zone-band__text { text-shadow: 0 1px 12px rgba(20, 25, 29, 0.65); }

/* Blockquotes in Markdown content pages (e.g. a-propos) */
.page blockquote {
    font-style: italic;
    color: var(--color-ink);
    border-left: 3px solid var(--color-primary);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
}
.page blockquote p:last-child { margin-bottom: 0; }

/* Format d'intervention. Copy on the left, a panel on the right that anchors
   the three figures and carries a schematic of the engagement rhythm. */
.format__inner {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 4rem;
    align-items: center;
}
.format__panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 20px 44px rgba(47, 57, 64, 0.07);
}
.format__figures {
    display: grid;
    gap: 1.5rem;
}
/* Values are short phrases rather than bare numbers, so they get their own
   line instead of sitting in a fixed-width column beside the label. */
.format__figure + .format__figure { border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.format__value {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0 0 0.35rem;
}
.format__label { margin: 0; font-size: 0.95rem; color: var(--color-body); }

.format__rhythm {
    margin: 2.5rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.format__rhythm svg { width: 100%; height: auto; display: block; }
.format__rhythm figcaption {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Content-page building blocks, used from Markdown via raw HTML wrappers. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin: 2rem 0 0;
}
.stat-row__item { border-top: 3px solid var(--color-primary); padding-top: 1.25rem; }
.stat-row__value {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.4rem;
}
.stat-row__label { margin: 0; font-size: 0.95rem; }

.card-grid--duo { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.card-lead { font-weight: 600; color: var(--color-primary); margin-bottom: 0.5rem; }

/* RSE panel: the one place on the site that uses green, to mark the
   environmental commitments as a distinct register. */
.rse-panel {
    background: var(--color-green-light);
    border: 1px solid #dbe7de;
    border-radius: 16px;
    padding: 3rem;
    margin-top: 2rem;
}
.rse-panel h2 { margin-top: 0; }
.rse-panel__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--color-green);
    font-weight: 700;
    margin: 0 0 0.6rem;
}
.rse-panel__intro { max-width: 68ch; font-size: 1.05rem; text-wrap: pretty; }
.rse-panel .card-grid { margin-top: 2rem; }
.rse-panel .problem-card { border-color: #dbe7de; }
.rse-panel .card-lead { color: var(--color-green-dark); }

/* /nos-expertises/ — each expertise is a full-width band with an alternating
   background, so the page keeps a rhythm instead of reading as one long list.
   The oversized index is decorative and fills what would otherwise be an empty
   left column. */
.expertise-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
}
.expertise-jump a {
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.expertise-jump a:hover {
    background: var(--color-primary-light);
    border-color: transparent;
}

.expertise-band { padding-block: 4.5rem; scroll-margin-top: 90px; }
.expertise-band--alt { background: var(--color-bg-alt); }
.expertise-band__inner {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 4rem;
    align-items: center;
}
/* Odd bands put the photo on the right so the page zigzags as you scroll. */
.expertise-band:nth-child(odd) .expertise-band__media { order: 2; }

.expertise-band__media { margin: 0; }
.expertise-band__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(47, 57, 64, 0.16);
}

.expertise-band__mark {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.expertise-band__mark .expertise-card__icon { margin-bottom: 0; flex: none; }
.expertise-band__index {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.22;
}
.expertise-band__content h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    margin: 0 0 0.5rem;
}
.expertise-band__tagline {
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 1rem;
}
.expertise-band__description {
    font-size: 1.08rem;
    color: var(--color-ink);
    max-width: 60ch;
    margin-bottom: 1.5rem;
}
.expertise-band__points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.expertise-band__points li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.97rem;
    max-width: 64ch;
}
.expertise-band__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-accent-amber);
}
.card-quote {
    font-style: italic;
    border-left: 3px solid var(--color-primary);
    padding-left: 1rem;
    margin: 1rem 0 0;
    color: var(--color-ink);
}

/* Closing CTA band */
.cta-band {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-accent-coral));
    color: #fff;
    text-align: center;
    padding-block: 4rem;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #f7e2d8; max-width: 52ch; margin: 0 auto 1.75rem; }

/* Contact */
.contact-section { padding-block: 4rem 4.5rem; }
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.85fr);
    gap: 2.5rem;
    align-items: start;
}
.contact-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 20px 44px rgba(47, 57, 64, 0.07);
}
.contact-panel > h2 { margin-top: 0; font-size: 1.5rem; }

/* Two fields per row keeps the form compact instead of a column of very wide
   inputs stacked down the page. */
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1.25rem;
}
.contact-form .field { margin-bottom: 1.25rem; }
.contact-form label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-ink);
    margin-bottom: 0.4rem;
}
.contact-form label span[aria-hidden] { color: var(--color-primary); }
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit;
    background: var(--color-bg-alt);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-form input:hover,
.contact-form textarea:hover { border-color: #dccfc6; }
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    background: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(184, 68, 31, 0.12);
}
.contact-form textarea { resize: vertical; min-height: 9rem; }

.field--checkbox label {
    display: flex;
    gap: 0.65rem;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--color-body);
    align-items: flex-start;
    cursor: pointer;
}
.field--checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    margin-top: 0.15rem;
    accent-color: var(--color-primary);
}
.field--honeypot { position: absolute; left: -9999px; }
.field-error { color: #b3261e; font-size: 0.85rem; margin: 0.35rem 0 0; }
.form-notice { padding: 0.9rem 1.1rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.95rem; }
.form-notice--success { background: #e6f4ea; color: #1e6b3c; }
.form-notice--error { background: #fbeaea; color: #b3261e; }
/* Ni succès ni erreur : une explication, quand le message arrive pré-rempli
   depuis le diagnostic. */
.form-notice--info { background: var(--color-primary-light); color: var(--color-primary-dark); }

.contact-form__footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}
.contact-form__note { margin: 0; font-size: 0.85rem; color: var(--color-muted); }

.contact-aside { display: grid; gap: 1.25rem; }
.contact-card {
    background: var(--color-ink);
    color: #ded6d0;
    border-radius: 16px;
    padding: 2rem;
}
.contact-card h2, .contact-card h3 { color: #fff; margin-top: 0; }
.contact-card h2 { font-size: 1.25rem; }
.contact-card h3 { font-size: 1.05rem; }
.contact-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-card__list a { color: #fff; text-decoration: none; font-weight: 600; }
.contact-card__list a:hover { color: var(--color-accent-amber); }
.contact-card__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-amber);
    font-weight: 700;
    margin-bottom: 0.15rem;
}
.contact-card--muted {
    background: var(--color-bg-alt);
    color: var(--color-body);
    border: 1px solid var(--color-border);
}
.contact-card--muted h3 { color: var(--color-ink); }
.contact-card--muted .audience__list { margin-top: 1rem; font-size: 0.95rem; }

@media (max-width: 960px) {
    .contact-layout { grid-template-columns: 1fr; }
    .contact-panel { padding: 1.75rem; }
}

/* Footer */
.site-footer {
    background: var(--color-ink);
    color: #d6cec6;
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    padding-block: 3.5rem;
}
.site-footer__logo {
    height: 40px;
    width: auto;
    margin: 0 0 0.75rem;
}
.site-footer__social { display: flex; gap: 1rem; margin-top: 0.75rem; }
.site-footer__social a { color: #d6cec6; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.site-footer__links { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__links a { color: #d6cec6; text-decoration: none; font-size: 0.92rem; }
.site-footer__contact { font-style: normal; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; }
.site-footer__contact a { color: #d6cec6; text-decoration: none; }
.site-footer__copyright {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-block: 1.25rem;
    font-size: 0.85rem;
}

/* Shared building blocks for the five expertise detail pages, used from
   Markdown via raw HTML wrappers so the content stays editable in Markdown. */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0 0;
}
/* Timeline rather than four separate columns: the steps are sequential, so a
   connecting rule and numbered markers show the progression. */
.steps__item { position: relative; padding-top: 4rem; }
.steps__number {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--color-primary-light);
    border: 2px solid var(--color-accent-amber);
    color: var(--color-primary);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
    z-index: 1;
}
/* The rule runs from this marker to the next one, so the last step has none. */
.steps__item::before {
    content: "";
    position: absolute;
    top: calc(1.375rem - 1px);
    left: 2.75rem;
    right: -2rem;
    height: 2px;
    background: var(--color-border);
}
.steps__item:last-child::before { display: none; }

/* Un paragraphe placé après la frise a besoin d'air, sans quoi il se lit comme
   la fin du texte de la dernière étape au lieu d'une conclusion. */
.page__body > .steps + .wide { margin-top: 2.5rem; }
.steps__item h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.steps__item p { margin: 0; font-size: 0.95rem; }

/* Once the grid wraps, a horizontal rule would point at nothing. */
/* "Sans / avec" contrast. The left column is deliberately muted so the eye
   lands on the right one without needing red crosses and green ticks. */
.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.compare__col {
    border-radius: 14px;
    padding: 2rem;
    border: 1px solid var(--color-border);
}
.compare__col h3 { font-size: 1.1rem; margin: 0 0 1.25rem; }
.compare__col ul { margin: 0; }
.compare__col--without {
    background: transparent;
    color: var(--color-muted);
}
.compare__col--without h3 { color: var(--color-muted); }
.compare .compare__col--without ul li::before { background: #d8ccc4; }
.compare__col--with {
    background: var(--color-primary-light);
    border-color: transparent;
}
.compare__col--with h3 { color: var(--color-primary-dark); }
.compare .compare__col--with ul li::before { background: var(--color-primary); }

/* Full-width photo band dropped between two content sections. Same treatment
   as the territory band on the homepage: overlay for legibility, a single
   short statement, no competing call to action. */
.photo-band {
    background-size: cover;
    background-position: center;
    color: #f4ece6;
    /* Tall enough for the subject to read: at letterbox height the crop was
       reducing photographs of people at work to anonymous fragments. */
    min-height: 26rem;
    display: flex;
    align-items: center;
    padding-block: 4rem;
}
.photo-band .wrap { width: 100%; }
/* The inner keeps the full .wrap width so the statement lines up with the
   left edge of every other section; the text itself is capped instead. */
.photo-band__text {
    max-width: 26ch;
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    text-wrap: balance;
    text-shadow: 0 1px 12px rgba(20, 25, 29, 0.65);
}

@media (max-width: 1100px) {
    .steps__item::before { display: none; }
}

/* Native disclosure widgets: no JS, keyboard accessible, collapsed by default. */
.faq { margin: 2rem 0 0; display: grid; gap: 0.75rem; }
.faq__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0 1.5rem;
}
.faq__item[open] { background: var(--color-bg-alt); }
.faq__item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-ink);
    padding: 1.15rem 2rem 1.15rem 0;
    position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-primary);
    font-weight: 400;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--color-primary); }
.faq__item > p {
    margin: 0 0 1.15rem;
}

/* Content bands. `.page` no longer pads itself: each band owns its spacing so
   the alternating backgrounds meet edge to edge. */
.page { padding-block: 0; }
.content-band { padding-block: 3.5rem; }
.content-band--alt { background: var(--color-bg-alt); }
.content-band:first-child { padding-top: 4rem; }
.content-band:last-child { padding-bottom: 4.5rem; }
.content-band .page__body > h2:first-child { margin-top: 0; }

/* Match the bullet treatment used elsewhere on the site. */
.page__body ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 1.5rem 0;
}
.page__body ul li {
    position: relative;
    padding-left: 1.6rem;
}
.page__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-accent-amber);
}
/* The FAQ list is a stack of disclosures, not prose bullets. */
.page__body .faq { padding-left: 0; }

/* Single column on narrow screens: the heading rail stacks above the prose. */
/* Cross-links at the foot of an expertise page. Deliberately lighter than the
   cards on /nos-expertises/ so they read as onward navigation, not a repeat
   of the main listing. */
.siblings__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.sibling-card {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.sibling-card:hover {
    box-shadow: 0 14px 32px rgba(47, 57, 64, 0.1);
    transform: translateY(-3px);
    border-color: transparent;
}
.sibling-card .expertise-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    margin-bottom: 0.9rem;
}
.sibling-card .expertise-card__icon svg { width: 22px; height: 22px; }
.sibling-card h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.sibling-card p { margin: 0; font-size: 0.92rem; color: var(--color-primary); font-weight: 600; }


/* The five pillars of the cybersecurity offer. They map one-to-one onto the
   promise stated in the page intro ("on protège, on contrôle, on journalise,
   on sauvegarde et on réagit"), so each carries its verb as a kicker and the
   section reads as a structure rather than five stacked bullet lists. */
.pillars {
    margin-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}
.pillar {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: 3rem;
    padding-block: 2.5rem;
    border-bottom: 1px solid var(--color-border);
    align-items: start;
}
.pillar__head { position: relative; }
.pillar__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: 1rem;
}
.pillar__icon svg { width: 24px; height: 24px; }
.pillar__verb {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--color-accent-amber);
    margin: 0 0 0.25rem;
}
.pillar__head h3 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.pillar__question {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin: 0;
}
.pillar__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.pillar__points li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.98rem;
}
.pillar__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-accent-amber);
}

@media (max-width: 1024px) {
    .pillar { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 1024px) {
    .page__body { grid-template-columns: 1fr; column-gap: 0; }
    .page__body > h2 { grid-column: 1; grid-row: auto; margin-bottom: 1rem; }
    .page__body > * { grid-column: 1; }
}

/* Pull-quote lifted out of the running text: a full-width closing statement
   for its section. Spanning both columns keeps it out of the grid's row
   arithmetic, which otherwise stranded it far below the heading. */
.page__body > .pullquote {
    grid-column: 1 / -1;
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--color-primary);
    border-top: 3px solid var(--color-accent-amber);
    padding-top: 1.5rem;
    margin: 2.5rem 0 0;
    max-width: 30ch;
    text-wrap: balance;
}

@media (max-width: 900px) {
    .stepper { grid-template-columns: repeat(2, 1fr); }
    .founder__inner { grid-template-columns: 1fr; }
    .founder__photo img { max-width: 240px; margin-inline: auto; }
    .founder__body { text-align: left; }
    .format__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .format__panel { padding: 1.75rem; }
    .expertise-band__inner { grid-template-columns: 1fr; gap: 2rem; }
    .expertise-band { padding-block: 3rem; }
    .page-header--with-image .page-header__copy { max-width: none; }
    .page-header__media { position: static; width: 100%; margin-top: 2rem; height: 220px; }
    .page-header__media img { mask-image: none; -webkit-mask-image: none; border-radius: 12px; }
}

@media (max-width: 860px) {
    .contact-layout { grid-template-columns: 1fr; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .stats__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .stat { border-left: none; border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
    .stat:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 720px) {
    .nav-toggle { display: block; order: 3; }
    .site-header__phone { display: none; }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--color-border);
        padding: 1rem 1.5rem 1.5rem;
    }
    .site-header { position: relative; }
    .site-header.is-open .site-nav { display: block; }
    .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .dropdown { position: static; box-shadow: none; border: none; padding-left: 0.75rem; display: block; }
    .has-dropdown > a::after { display: none; }
    .stepper { grid-template-columns: 1fr; }
    .hero { padding-block: 3.5rem 0; }
    .hero__copy { max-width: none; padding-bottom: 2.5rem; }
    .hero__photo { position: static; width: 100%; height: 220px; margin-bottom: 2rem; }
    .hero__photo img { mask-image: none; -webkit-mask-image: none; border-radius: 12px; }
    .section { padding-block: 3rem; }
}

/* Scroll reveal: sections fade/rise into place once, on first entry. Skipped
   entirely (see main.js) for prefers-reduced-motion or without JS. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* Band without a photograph: same rhythm and weight, brand gradient instead of
   a stock image. Used where no photograph is worth the space. */
.photo-band--plain {
    background:
        radial-gradient(700px 380px at 85% -10%, rgba(243, 146, 24, 0.18), transparent 62%),
        linear-gradient(120deg, var(--color-ink), #4a2a1a 78%, var(--color-primary-dark));
}

/* Consent banner. Fixed to the bottom, above everything, and it never shifts
   the page content since it sits outside the flow. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--color-ink);
    color: #ded6d0;
    border-top: 3px solid var(--color-accent-amber);
    box-shadow: 0 -10px 40px rgba(20, 25, 29, 0.25);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.cookie-banner.is-visible { transform: none; }
.cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1.25rem;
    flex-wrap: wrap;
}
.cookie-banner__title {
    font-family: var(--font-serif);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.2rem;
}
.cookie-banner__text p { margin: 0; font-size: 0.92rem; max-width: 80ch; }
.cookie-banner__text a { color: var(--color-accent-amber); }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.cookie-banner__actions .btn--outline {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.cookie-banner__actions .btn--outline:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 720px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
    .cookie-banner__actions .btn { flex: 1; text-align: center; }
}

/* Intervention zone on the contact page: what someone about to get in touch
   actually needs to know. */
.contact-zone {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.5;
    margin: 1rem 0 0.75rem;
}
.contact-zone span { color: var(--color-accent-amber); padding-inline: 0.2rem; }
.contact-zone__text { margin: 0; font-size: 0.92rem; }

/* Blog article. The body is migrated content whose shape we do not control, so
   it gets a single readable column rather than the editorial rail used on the
   pages we author. */
.post-header .page-header__inner { max-width: var(--max-width); }
.post-header h1 { max-width: 26ch; }
.post-header__back { color: inherit; text-decoration: none; }
.post-header__back:hover { text-decoration: underline; }
.post-header__date {
    color: var(--color-muted);
    font-size: 0.92rem;
    margin: 0 0 1rem;
}
.post { padding-block: 3.5rem 4.5rem; }
/* No cap of its own: the article body simply fills the site's 1400px grid,
   like every other page. The wrap is left untouched so the body starts on the
   same vertical as the article title. */
.post__body > h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    margin: 2.75rem 0 1rem;
}
.post__body > h2:first-child { margin-top: 0; }
.post__body > h3 { margin: 2rem 0 0.6rem; }
.post__body > p { margin-bottom: 1.1rem; }
.post__body ul, .post__body ol {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0;
}
.post__body ul li, .post__body ol li { position: relative; padding-left: 1.6rem; }
.post__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-accent-amber);
}
.post__body ol { counter-reset: post-item; }
.post__body ol li { counter-increment: post-item; }
.post__body ol li::before {
    content: counter(post-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 700;
}
/* Migrated tables can be wide; let them scroll rather than break the column. */
.post__body table { display: block; overflow-x: auto; white-space: nowrap; }
.post__body table th, .post__body table td { white-space: normal; min-width: 10rem; }
.post__body blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--color-ink);
}

/* Blog index */
.blog-count {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    font-weight: 600;
    margin: 0;
}
.blog-grid { margin-top: 1.5rem; }
.blog-grid .post-card { display: flex; flex-direction: column; }
.blog-grid .post-card h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.blog-grid .post-card p { font-size: 0.93rem; }
/* Push the read link to the bottom so cards of different lengths still align. */
.blog-grid .post-card .expertise-card__link { margin-top: auto; padding-top: 0.75rem; }


/* Appartenance aux réseaux, sous les liens sociaux du pied de page. Volontairement
   discrète : c'est une mention de contexte, pas un argument commercial. */
.site-footer__networks {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-muted);
}
.site-footer__networks a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer__networks a:hover {
    color: #fff;
    border-bottom-color: currentColor;
}

/* Intertitres de thème dans le guide des bonnes pratiques. Ils séparent des
   grilles de cartes, d'où la marge haute généreuse sur tous sauf le premier. */
.guide-theme {
    font-size: 1.5rem;
    margin: 3.5rem 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.guide-theme:first-of-type { margin-top: 1rem; }

/* Fil d'Ariane. Volontairement discret, il sert de repère et de signal de
   hiérarchie pour les moteurs, pas d'élément de mise en avant. */
.breadcrumb {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding-block: 0.85rem;
    font-size: 0.82rem;
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-muted);
}
.breadcrumb li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--color-border);
}
.breadcrumb a {
    color: var(--color-body);
    text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] {
    color: var(--color-muted);
    /* Un titre d'article peut être long, on l'empêche de casser la ligne
       proprement plutôt que de le tronquer et de le rendre illisible. */
    min-width: 0;
}

/* Renvoi vers les guides depuis une page d'expertise. Deux colonnes sur écran
   large pour ne pas produire une colonne unique très haute. */
.guides-band__list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.85rem 3rem;
}
.guides-band__list li { position: relative; padding-left: 1.1rem; }
.guides-band__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}
.guides-band__list a { color: inherit; text-decoration: none; }
.guides-band__list a:hover,
.guides-band__list a:focus-visible { text-decoration: underline; }
.guides-band__more { margin: 1.6rem 0 0; }

/* Lien remontant d'un guide vers l'expertise à laquelle il se rattache. */
.related-parent { margin: 2rem 0 0; }

/* ---------------------------------------------------------------------------
   Diagnostic (/diagnostic/)

   Deux états dans la même feuille : le questionnaire et son résultat. Le
   questionnaire est volontairement étroit et centré — c'est une tâche, pas une
   page à lire —, tandis que le résultat reprend le vocabulaire de bandes du
   reste du site pour ne pas ressembler à un outil rapporté d'ailleurs.
   --------------------------------------------------------------------------- */
.diag-wrap { max-width: 780px; }

/* Progression. Masquée tant que main.js n'a pas pris la main : sans script les
   huit questions s'affichent à la suite et un compteur n'aurait aucun sens. */
.diag-progress { margin-bottom: 2.5rem; }
.diag-progress__label {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.diag-progress__track {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}
.diag-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent-amber), var(--color-primary));
    transition: width 0.25s ease;
}

/* Une question. Un fieldset, pour que le lecteur d'écran annonce l'intitulé
   avant chaque réponse ; ses bordures et sa marge par défaut sont écartées. */
.diag-step {
    border: 0;
    padding: 0;
    margin: 0 0 3rem;
}
.diag-step:last-of-type { margin-bottom: 0; }
.diag-step__legend {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    padding: 0;
    margin-bottom: 0.5rem;
}
.diag-step__number {
    flex: none;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}
.diag-step__label {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ink);
}
.diag-step__help {
    margin: 0 0 1.25rem 1.9rem;
    font-size: 0.95rem;
    color: var(--color-muted);
}

.diag-choices {
    display: grid;
    gap: 0.6rem;
    margin-left: 1.9rem;
}
/* La case est la cible : toute la ligne est cliquable, ce qui compte surtout
   au doigt. La bordure épaissit à la sélection plutôt que de changer la taille
   du bloc, sinon la liste sursaute à chaque choix. */
.diag-choice {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.95rem 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.diag-choice:hover { border-color: #dccfc6; background: var(--color-bg-alt); }
.diag-choice input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.18rem 0 0;
    accent-color: var(--color-primary);
}
.diag-choice span { font-size: 1rem; color: var(--color-body); }
.diag-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.diag-choice:has(input:checked) span { color: var(--color-ink); font-weight: 600; }
.diag-choice:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.diag-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 3rem;
}
.diag-note {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Le résultat. Le volume est le seul chiffre à retenir, il occupe donc la
   place qu'occupe ailleurs un titre de page. */
.diag-result {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2.75rem;
}
.diag-result__eyebrow {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
}
.diag-result__figure {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-ink);
    margin: 0 0 0.85rem;
}
.diag-result__figure span {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-body);
    margin-top: 0.35rem;
}
.diag-result__price { font-size: 1.1rem; color: var(--color-body); }
.diag-result__price strong { color: var(--color-ink); }
.diag-result__text { max-width: 62ch; margin-bottom: 1.5rem; }
.diag-result__links { margin: 0; font-size: 0.95rem; }
.diag-result__links span { color: var(--color-border); margin-inline: 0.5rem; }

.diag-mode { margin-top: 3rem; }
.diag-mode h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.diag-mode p { max-width: 68ch; margin-bottom: 0; }

/* Les sujets prioritaires. Une liste ordonnée, parce que l'ordre est le message : ce qui
   peut mettre l'entreprise à l'arrêt passe devant ce qui organise le pilotage. */
.diag-sujets {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}
.diag-sujet {
    display: flex;
    gap: 1.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 2rem 2.25rem;
}
.diag-sujet__rank {
    flex: none;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}
.diag-sujet h3 { margin-bottom: 0.4rem; }
.diag-sujet p { margin: 0; }
.diag-sujet__link {
    display: inline-block;
    margin-top: 0.9rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.diag-sujet__link:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .diag-step__help, .diag-choices { margin-left: 0; }
    .diag-result { padding: 1.75rem; }
    .diag-sujet { flex-direction: column; gap: 0.5rem; padding: 1.75rem; }
}

/* Saisie d'une quantité de parc. Le champ reste court : on y tape un nombre à
   deux ou trois chiffres, un champ pleine largeur suggérerait une phrase. */
.diag-quantity {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-left: 1.9rem;
}
.diag-quantity input {
    width: 7rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
    font: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-ink);
    text-align: right;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.diag-quantity input:hover { border-color: #dccfc6; }
.diag-quantity input:focus {
    outline: none;
    background: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(184, 68, 31, 0.12);
}
.diag-quantity__suffix { color: var(--color-muted); font-size: 1rem; }

/* Le parc, six champs sur un seul écran. Deux colonnes sur large : la liste
   tient alors sous la ligne de flottaison, ce qui est tout l'intérêt de les
   avoir regroupés. */
.diag-parc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem 2.5rem;
    margin-left: 1.9rem;
}
.diag-parc__field { display: flex; flex-direction: column; gap: 0.5rem; }
.diag-parc__label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-ink);
    line-height: 1.35;
}
.diag-parc__help { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
.diag-parc .diag-quantity { margin-left: 0; }

/* Le oui/non du parc, en boutons jumelés plutôt qu'en liste : il occupe la
   même hauteur qu'un champ numérique et la grille reste alignée. */
.diag-parc__toggle { display: flex; gap: 0.5rem; }
.diag-parc__toggle label {
    flex: 1;
    text-align: center;
    padding: 0.7rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-body);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.diag-parc__toggle label:hover { border-color: #dccfc6; }
.diag-parc__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.diag-parc__toggle label:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-ink);
}
.diag-parc__toggle label:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Le rappel de ce qui a été déclaré. Volontairement sobre : il montre sur quoi
   l'estimation repose, jamais comment elle s'en déduit. */
.diag-recap {
    margin-top: 3rem;
    padding: 2rem 2.25rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}
.diag-recap h2 { font-size: 1.3rem; }
.diag-recap ul {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem 2rem;
}
.diag-recap li {
    position: relative;
    padding-left: 1.1rem;
    font-weight: 600;
    color: var(--color-ink);
}
.diag-recap li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}
.diag-recap__note { margin: 0; font-size: 0.9rem; color: var(--color-muted); }

@media (max-width: 600px) {
    .diag-quantity, .diag-parc { margin-left: 0; }
    .diag-recap { padding: 1.5rem; }
}

/* Le mur devant les sujets prioritaires.
   La liste des titres reste présente mais illisible : montrer qu'il y a
   quelque chose, et combien, sans le donner. Le flou est décoratif, les titres
   sont donc retirés aux lecteurs d'écran côté gabarit — le compte, lui, est
   annoncé en clair dans le titre de section. */
.diag-gate {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 2.5rem;
    align-items: start;
}
.diag-gate__teaser {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.diag-gate__teaser li {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.1rem 1.35rem;
}
.diag-gate__rank {
    flex: none;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}
.diag-gate__blur {
    color: var(--color-ink);
    font-weight: 600;
    filter: blur(6px);
    /* La sélection du texte contournerait le flou ; le titre reste dans le DOM
       pour que le bloc garde sa vraie hauteur, mais il n'est ni copiable ni
       cliquable. */
    user-select: none;
    pointer-events: none;
}
.diag-gate__form {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2rem 2.25rem;
    box-shadow: 0 20px 44px rgba(47, 57, 64, 0.07);
}
.diag-gate__note {
    margin: 1rem 0 0;
    font-size: 0.87rem;
    color: var(--color-muted);
}

@media (max-width: 820px) {
    .diag-gate { grid-template-columns: 1fr; gap: 1.75rem; }
    .diag-gate__form { padding: 1.5rem; }
}

/* Deux appels côte à côte en bas de page. Le second n'apparaît que là où le
   diagnostic a du sens, la bande doit donc rester correcte avec un seul. */
.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Appel intercalé dans une page de contenu, posé au moment où la question se
   pose plutôt que dans le menu, où le mot « diagnostic » n'appelle aucun clic.

   Sans .wide : le bloc reste dans la colonne de texte de .page__body. Étendu
   aux deux colonnes il passait sous le titre de section, détaché du paragraphe
   qu'il prolonge, et s'étirait sur toute la largeur de page.

   Fond blanc et non primary-light : la bande qui l'accueille est en bg-alt,
   deux crèmes voisins au point de se confondre. Le liseré primaire et l'ombre
   le détachent aussi bien du crème que du blanc, selon la bande où il tombe. */
.inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin: 2.5rem 0 0;
    padding: 1.6rem 1.85rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(47, 57, 64, 0.07);
}
.inline-cta__copy { flex: 1 1 20rem; }
.inline-cta h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.inline-cta p { margin: 0; font-size: 0.95rem; }
.inline-cta .btn { flex: none; }

/* Les trois paliers, en cartes plutôt qu'en tableau : une ligne de tableau ne
   se met pas en avant, et le palier du milieu est celui qui sert de référence.

   Trois précautions pour que les trois cartes s'alignent au pixel près.
   L'étiquette est sortie du flux et posée sur la bordure : dans le flux, elle
   ajoutait une ligne à la seule carte du milieu et décalait vers le bas son
   volume, son prix et son rythme. Les bordures font 2 px partout, seule la
   couleur change, sinon la carte mise en avant se décalait d'un pixel. Et les
   cartes s'étirent à la même hauteur au lieu d'être centrées chacune pour
   elle-même. */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0 2rem;
}
.price-card {
    position: relative;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-border);
    border-radius: 14px;
    padding: 2.25rem 1.75rem;
    text-align: center;
}
.price-card__volume {
    margin: 0 0 0.75rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-ink);
}
.price-card__price {
    margin: 0 0 0.6rem;
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-ink);
}
.price-card__price span {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}
.price-card__rhythm { margin: 0; font-size: 0.92rem; color: var(--color-body); }

/* La carte de référence : le fond blanc la détache de ses voisines crème sur
   une bande blanche, la bordure la nomme. Un cran de relief, pas un ruban. */
.price-card--featured {
    background: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: 0 18px 40px rgba(184, 68, 31, 0.10);
}
.price-card__flag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}