/*!
 * towards.fr — site stylesheet (design pass 2026-09-19).
 *
 * ONE stylesheet for every template (see src/pages/chrome.js `SITE_CSS`). It
 * styles the BAKED legacy markup as it is (the `.section.group > .col.span_N_of_12`
 * grid, the family wrappers, the legacy ids), so no content was rewritten.
 * The ten legacy `assets/*.css` files are the parity-audit reference corpus and
 * are no longer linked by any page.
 *
 * Contents: 1 tokens · 2 fonts · 3 base · 4 grid + utilities · 5 header
 * 6 section banner · 7 footer · 8 home · 9 blog · 10 lab + concepts
 * 11 contact · 12 clients + team · 13 flipbook · 14 a11y + print
 */

/* ── 1. tokens ─────────────────────────────────────────────────────────── */
:root {
    /* brand: #f15a29 is the logo orange. It is 3.4:1 on white — fine for large
       display type and graphics, NOT for body-size text. `--brand-ink` (5.2:1)
       is the text/link orange, `--brand-deep` (5.6:1 under white) the panel
       background that carries white body text. */
    --brand: #f15a29;
    --brand-ink: #c2410c;
    --brand-deep: #b93d0c;
    --brand-tint: #fdf1ec;
    --brand-on-dark: #ff9d7a;

    --ink: #26272e;
    --ink-soft: #4a4c55;
    --ink-muted: #5b5d66;
    --line: #e6e2dc;
    --surface: #ffffff;
    --surface-warm: #faf8f5;
    --dark: #2b2b33;
    --dark-2: #1f1f25;
    --on-dark: #f3f2f0;
    --on-dark-muted: #b9bac4;

    --font-sans: noto_sans, "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-serif: noto_serif, "Noto Serif", Georgia, "Times New Roman", serif;

    /* type scale (1.2 minor third, fluid at the top) */
    --fs-xs: .8125rem;
    --fs-sm: .9375rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.5rem;
    --fs-xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
    --fs-2xl: clamp(2rem, 1.3rem + 2.8vw, 3rem);
    --fs-display: clamp(2.25rem, 1rem + 5vw, 4.25rem);

    /* 4/8px spacing scale */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);

    --container: 73.125rem; /* 1170px — the legacy content width */
    --prose: 46rem;
    --gutter: clamp(1rem, .5rem + 2vw, 2rem);
    --header-h: 4.75rem;
    --radius: .75rem;
    --radius-sm: .375rem;
    --shadow-sm: 0 1px 2px rgba(31, 31, 37, .06), 0 1px 3px rgba(31, 31, 37, .08);
    --shadow-md: 0 6px 24px rgba(31, 31, 37, .10);
    --focus: 0 0 0 3px #fff, 0 0 0 6px var(--brand-ink);
}

/* ── 2. fonts (self-hosted, assets/font) ───────────────────────────────── */
@font-face { font-family: noto_sans; font-weight: 400; font-style: normal; font-display: swap;
    src: url(/font/notosans-regular.woff2) format("woff2"), url(/font/notosans-regular.woff) format("woff"); }
@font-face { font-family: noto_sans; font-weight: 400; font-style: italic; font-display: swap;
    src: url(/font/notosans-italic.woff2) format("woff2"), url(/font/notosans-italic.woff) format("woff"); }
@font-face { font-family: noto_sans; font-weight: 700; font-style: normal; font-display: swap;
    src: url(/font/notosans-bold.woff2) format("woff2"), url(/font/notosans-bold.woff) format("woff"); }
@font-face { font-family: noto_sans; font-weight: 700; font-style: italic; font-display: swap;
    src: url(/font/notosans-bolditalic.woff2) format("woff2"), url(/font/notosans-bolditalic.woff) format("woff"); }
@font-face { font-family: noto_serif; font-weight: 400; font-style: italic; font-display: swap;
    src: url(/font/notoserif-italic.woff2) format("woff2"), url(/font/notoserif-italic.woff) format("woff"); }

/* ── 3. base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, address, blockquote { margin: 0; padding: 0; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--ink); font-weight: 700; text-wrap: balance; }
address { font-style: normal; }
ul, ol { list-style: none; }
img, svg, canvas { max-width: 100%; }
img { height: auto; border: 0; vertical-align: middle; }
a { color: var(--brand-ink); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--brand-deep); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--brand); color: #fff; }

/* ── 4. grid + legacy utilities ────────────────────────────────────────── */
#scrollbar, #scrollbar2, .scrollIt, .clearfix, .spacer { display: none; }

/* `.section.group` is the legacy 12-column row; rebuilt on CSS grid so rows
   whose spans exceed 12 wrap exactly as the float grid did. */
.group {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-6);
    row-gap: var(--s-5);
}
.group > * { grid-column: 1 / -1; min-width: 0; }
/* one column on small screens — 11 column gaps alone would overflow a phone */
@media (max-width: 780px) {
    .group { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 781px) {
    .group > .span_1_of_12 { grid-column: span 1; }
    .group > .span_2_of_12 { grid-column: span 2; }
    .group > .span_3_of_12 { grid-column: span 3; }
    .group > .span_4_of_12 { grid-column: span 4; }
    .group > .span_5_of_12 { grid-column: span 5; }
    .group > .span_6_of_12 { grid-column: span 6; }
    .group > .span_7_of_12 { grid-column: span 7; }
    .group > .span_8_of_12 { grid-column: span 8; }
    .group > .span_9_of_12 { grid-column: span 9; }
    .group > .span_10_of_12 { grid-column: span 10; }
    .group > .span_11_of_12 { grid-column: span 11; }
}

/* the page wrapper: `main .content > .section.group[.family]` */
main .content > .group {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--section-y) var(--gutter);
}

.center { text-align: center; }
.rel { position: relative; }
.orange { color: var(--brand-ink); }
h1.orange, h2.orange { color: var(--brand-ink); }
a.orange { font-weight: 700; }
p.right { text-align: right; }
.art-sep { height: 1px; background: var(--line); margin: var(--s-6) 0; }
.line { width: 3rem; height: 3px; border-radius: 2px; background: var(--brand); margin: var(--s-3) auto; }
.tab:empty { display: inline-block; width: var(--s-5); }

/* ── 5. header ─────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
    padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
    background: var(--dark); color: #fff; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); color: #fff; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
}
.site-header__inner {
    max-width: calc(var(--container) + 2 * var(--gutter));
    height: var(--header-h);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-sm); }
.brand img { display: block; height: 3.25rem; width: auto; }

.site-nav ul { display: flex; align-items: stretch; gap: var(--s-2); }
.site-nav a {
    position: relative; display: flex; align-items: center;
    height: var(--header-h); padding-inline: var(--s-4);
    color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 700;
    letter-spacing: .01em; text-decoration: none;
}
.site-nav a::after {
    content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0; background: var(--brand);
    transform: scaleX(0); transition: transform .2s ease;
}
.site-nav a:hover, .site-nav li.active a { color: var(--ink); }
.site-nav a:hover::after, .site-nav li.active a::after { transform: scaleX(1); }

.burger {
    display: none; flex: none; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; margin-right: -.5rem;
    border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
}
.burger:hover { background: var(--surface-warm); }
.burger img { display: block; width: 1.75rem; height: 1.75rem; }

.mobile-panel {
    position: fixed; z-index: 49; left: 0; right: 0; top: var(--header-h);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.mobile-panel .group { display: block; }
.mobile-panel ul { padding: var(--s-2) var(--gutter) var(--s-4); }
.mobile-panel li + li { border-top: 1px solid var(--line); }
.mobile-panel a {
    display: block; padding: var(--s-4) var(--s-1);
    color: var(--ink); font-size: var(--fs-md); font-weight: 700; text-decoration: none;
}
.mobile-panel a:hover { color: var(--brand-ink); }

@media (max-width: 780px) {
    :root { --header-h: 4rem; }
    .site-nav { display: none; }
    .burger { display: inline-flex; }
    .brand img { height: 2.75rem; }
    /* no-JS fallback (the <noscript> style re-shows `.site-nav`) */
    .site-header__inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); }
    .site-nav ul { flex-wrap: wrap; gap: 0; margin-inline: calc(-1 * var(--s-3)); }
    .site-nav a { height: 2.75rem; padding-inline: var(--s-3); }
}
@media (min-width: 781px) {
    .mobile-panel { display: none; }
}

/* ── 6. section banner (interior pages) ────────────────────────────────── */
.page-banner { background: var(--dark); color: var(--on-dark); border-bottom: 3px solid var(--brand); }
.page-banner__inner {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto; padding: var(--s-5) var(--gutter);
}
.page-banner__title {
    font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--on-dark);
}
.page-banner__title::before {
    content: ""; display: inline-block; width: 1.5rem; height: 2px; margin-right: var(--s-3);
    vertical-align: middle; background: var(--brand);
}

/* ── 7. footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--dark); color: var(--on-dark-muted); font-size: var(--fs-sm); }
.site-footer__inner {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto; padding: var(--s-8) var(--gutter) var(--s-7);
    display: grid; gap: var(--s-6) var(--s-7);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr);
}
.footer-brand img {
    display: block; width: 10.5rem; height: auto; padding: var(--s-3) var(--s-4);
    background: #fff; border-radius: var(--radius-sm);
}
.footer-brand p { margin-top: var(--s-4); max-width: 22rem; color: var(--on-dark-muted); }
.site-footer h2 {
    margin-bottom: var(--s-4);
    font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.site-footer p, .site-footer li { line-height: 1.9; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--brand-on-dark); text-decoration: underline; }
.copy {
    background: var(--dark-2); color: var(--on-dark-muted);
    padding: var(--s-4) var(--gutter); text-align: center; font-size: var(--fs-xs); letter-spacing: .02em;
}
@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-7) var(--s-6); }
}

/* ── 8. home ───────────────────────────────────────────────────────────── */
[data-template="home"] .content > .group { display: block; max-width: none; padding: 0; }

/* hero: the homeSlider island (5 value slides) + the homeParallax mask reveal */
#homeShow { position: relative; background: var(--dark); }
#homeShow .img-bg {
    position: relative; overflow: hidden; width: 100%;
    aspect-ratio: 1920 / 715; min-height: 17.5rem; max-height: 68vh;
}
#homeShow .home-slider, #homeShow .track, #homeShow .img-anim { position: absolute; inset: 0; }
#homeShow .home-slider::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    /* scrim: an even veil + a darker pool behind the centred title, so the white
       display type holds >= 4.5:1 even on the brightest photo (Performance) */
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(20, 20, 25, .55), rgba(20, 20, 25, 0) 75%),
        linear-gradient(180deg, rgba(20, 20, 25, .42), rgba(20, 20, 25, .62));
}
#homeShow .tab { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
/* Before hydration (and with no JS at all) only the first slide is on-screen;
   the island then drives `style.left` on every tab. */
#homeShow .tab:not(:first-child) { left: 100%; }
#homeShow .tab img, #homeShow .img-anim img { display: block; width: 100%; height: 100%; object-fit: cover; }
#homeShow .tab .title {
    position: absolute; inset: 0; z-index: 3;
    display: grid; place-items: center; padding: var(--s-5) 4.5rem; text-align: center;
}
#homeShow .tab .title h2 {
    color: #fff; font-size: var(--fs-display); letter-spacing: -.01em; line-height: 1.05;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 28px rgba(0, 0, 0, .6);
}
#homeShow .tab .title h2::after {
    content: ""; display: block; width: 4rem; height: 4px; margin: var(--s-4) auto 0;
    border-radius: 2px; background: var(--brand);
}
#homeShow .img-anim { z-index: 5; pointer-events: none; }
/* The mask reveal is JS-driven (homeParallax); this keyframe is the no-JS /
   failed-hydration fallback so the mask can never stay over the hero. */
#homeShow .img-anim img { animation: mask-out 2s linear .4s forwards; }
@keyframes mask-out { to { opacity: 0; visibility: hidden; } }

#homeShow .navigate { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#homeShow .navigate button {
    position: absolute; top: 50%; width: 3rem; height: 3rem; margin-top: -1.5rem; padding: 0;
    pointer-events: auto; cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%;
    background: rgba(31, 31, 37, .35); transition: background .2s ease, border-color .2s ease;
}
#homeShow .navigate button:hover { background: var(--brand); border-color: var(--brand); }
#homeShow .navigate button::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: .7rem; height: .7rem;
    border: solid #fff; border-width: 0 0 3px 3px;
}
#homeShow .navigate .arrow-left { left: var(--gutter); }
#homeShow .navigate .arrow-right { right: var(--gutter); }
#homeShow .navigate .arrow-left::before { transform: translate(-30%, -50%) rotate(45deg); }
#homeShow .navigate .arrow-right::before { transform: translate(-70%, -50%) rotate(-135deg); }

#homeShow .text { background: var(--dark); padding: var(--s-6) var(--gutter); text-align: center; }
#homeShow .text h2 {
    max-width: 56rem; margin-inline: auto;
    color: #fff; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.005em;
}
#homeShow > .shadow { display: none; }

/* intro panel (orange) */
#intro2 { background: linear-gradient(135deg, var(--brand-ink), var(--brand-deep)); color: #fff; font-size: 1.125rem; }
#intro2 > .group {
    max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
    padding: var(--section-y) var(--gutter); align-items: center; column-gap: var(--s-8);
}
#intro2 p { max-width: 42rem; }
#intro2 p + p, #intro2 ul + p { margin-top: var(--s-4); }
#intro2 p:first-child { font-size: var(--fs-md); font-weight: 700; line-height: 1.5; }
#intro2 ul { margin: var(--s-3) 0 0; max-width: 42rem; }
#intro2 li { position: relative; padding-left: var(--s-5); margin-top: var(--s-2); }
#intro2 li::before {
    content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem; background: #fff;
}
#intro2 .window { text-align: center; }
#intro2 .window img {
    width: 100%; max-width: 22rem; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

/* three pillars */
#intro { background: var(--surface-warm); border-bottom: 1px solid var(--line); }
#intro > .group {
    max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
    padding: var(--section-y) var(--gutter); text-align: center;
}
#intro .col { padding: var(--s-5) var(--s-4); }
#intro .icon img { width: 6rem; height: 6rem; object-fit: contain; }
#intro h2.orange { margin-top: var(--s-4); font-size: var(--fs-lg); color: var(--brand-ink); }
#intro h3 { max-width: 18rem; margin-inline: auto; font-size: var(--fs-base); font-weight: 400; line-height: 1.55; color: var(--ink-soft); }

/* photographic band. The source is 1920x1280: `cover` on the band box itself
   (never `background-attachment: fixed`, which sizes `cover` against the whole
   VIEWPORT and upscaled the photo into a blur on tall windows). The band keeps a
   wide-screen ratio and the focal point sits on the bubble lattice. */
.para1 {
    height: clamp(11rem, 6rem + 16vw, 21rem);
    background: var(--dark) url(/img/home/parallax.jpg) 50% 42% / cover no-repeat;
}
.para1 .bg { display: none; }

/* the two scroll-snap carousels (see src/islands/scrollCarousel.js) */
.clients-c, .tem-c { position: relative; padding: var(--section-y) 0; }
.clients-c { background: var(--surface); }
.tem-c { background: var(--surface-warm); border-top: 1px solid var(--line); }
.clients-c > .clients, .tem-c > .tem {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* slides are as tall as the longest one: centre the shorter ones instead of
       leaving their slack as an empty area under the quote */
    align-items: center;
}
/* the scrollbar is the ONLY affordance without JS: hide it once the buttons work */
.is-enhanced > .clients, .is-enhanced > .tem { scrollbar-width: none; }
.is-enhanced > .clients::-webkit-scrollbar, .is-enhanced > .tem::-webkit-scrollbar { display: none; }
.clients-c > .clients > .container, .tem-c > .tem > .container {
    flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always;
}
.clients-c .master, .tem-c .master {
    max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
    padding-inline: calc(var(--gutter) + 3.5rem);
}
/* prev / next: shown only once scrollCarousel.js made them work */
.clients-c .buttons, .tem-c .buttons { display: none; }
.is-enhanced > .buttons {
    display: block; position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%;
    width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); transform: translateX(-50%);
    pointer-events: none;
}
.is-enhanced > .buttons > div {
    position: absolute; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem;
    display: grid; place-items: center; float: none;
    pointer-events: auto; cursor: pointer; border-radius: 50%;
    background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
    transition: box-shadow .2s ease, transform .2s ease;
}
.is-enhanced > .buttons > div:hover { box-shadow: var(--shadow-md), 0 0 0 1px var(--brand); transform: scale(1.05); }
.is-enhanced > .buttons .bleft { left: var(--gutter); }
.is-enhanced > .buttons .bright { right: var(--gutter); }
.is-enhanced > .buttons img { width: 2.75rem; height: 2.75rem; border-radius: 50%; }

/* testimonial quotes */
.clients-c .client > .group { align-items: center; max-width: 60rem; margin-inline: auto; }
.clients-c .client .span_3_of_12 { text-align: center; font-size: var(--fs-sm); line-height: 1.45; }
.clients-c .client .span_3_of_12 br { display: none; }
.clients-c .client .span_3_of_12 img {
    display: block; width: 8rem; height: 8rem; margin: 0 auto var(--s-4);
    object-fit: cover; object-position: top center; border-radius: 50%;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line);
}
.clients-c .client b { display: block; color: var(--ink); font-size: var(--fs-base); }
.clients-c .client i { display: block; margin-top: var(--s-1); color: var(--ink-muted); }
.clients-c .client .span_9_of_12 > br { display: none; }
.clients-c .client .text {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.5; color: var(--ink);
}
.clients-c .puce { display: inline-block; width: 1.5rem; height: 1.5rem; }
.clients-c .puce img { width: 100%; height: 100%; }
.clients-c .puce.top { margin-right: var(--s-2); vertical-align: .35em; }
.clients-c .puce.bottom { margin-left: var(--s-2); vertical-align: -.35em; }

/* client-case teaser cards */
.tem-c .tem-g { align-items: stretch; }
[data-template="clients-index"] .temoignage { display: block; margin-top: var(--s-7); }
[data-template="clients-index"] .temoignage .client h2 { font-size: var(--fs-base); line-height: 1.35; }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client {
    display: flex; padding: var(--s-5);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
:is(.tem-c, [data-template="clients-index"] .temoignage) .client > .group { width: 100%; column-gap: var(--s-5); row-gap: var(--s-4); grid-template-rows: 1fr auto; }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client .span_4_of_12 { display: grid; place-items: center; }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client .span_4_of_12 img { max-height: 5.5rem; width: auto; object-fit: contain; }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client h4 { font-size: var(--fs-base); line-height: 1.35; color: var(--ink); }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client h4 + br { display: none; }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client p { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client .span_12_of_12 {
    padding-top: var(--s-4); border-top: 1px solid var(--line);
    font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-muted);
}
:is(.tem-c, [data-template="clients-index"] .temoignage) .client .span_12_of_12 b { display: block; color: var(--ink); font-size: var(--fs-sm); }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client a.right { float: right; margin-left: var(--s-4); }
:is(.tem-c, [data-template="clients-index"] .temoignage) .client a.right img { width: 1.75rem; height: 1.75rem; }

@media (max-width: 780px) {
    #homeShow .tab .title { padding-inline: 3.75rem; }
    #homeShow .navigate button { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; }
    #intro2 > .group { row-gap: var(--s-7); }
    #intro2 .window img { max-width: 16rem; }
    #intro .col { padding-block: var(--s-3); }
    .clients-c .master, .tem-c .master { padding-inline: var(--gutter); }
    .is-enhanced > .buttons { top: auto; bottom: var(--s-5); height: 2.75rem; }
    .is-enhanced > .buttons > div { top: 0; margin-top: 0; }
    .is-enhanced > .buttons .bleft { left: calc(50% - 3.25rem); }
    .is-enhanced > .buttons .bright { right: calc(50% - 3.25rem); }
    .clients-c.clients-c, .tem-c.tem-c { padding-bottom: calc(var(--section-y) + 3.5rem); }
    .tem-c .client .span_4_of_12 { justify-items: start; }
}

/* ── 9. blog ───────────────────────────────────────────────────────────── */
.blog-container > .col { max-width: var(--prose); margin-inline: auto; width: 100%; }
.blog-container > .col > br:first-child { display: none; }
.blog-container h1 { font-size: var(--fs-2xl); letter-spacing: -.01em; }
.blog-container h1 + br { display: none; }
.blog-container h1 + br + p, .blog-container h1 + p {
    margin-top: var(--s-5); font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft);
}
.blog-container .medium-h2, [data-template="blog-article"] h2 {
    margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-lg); color: var(--ink);
}
[data-template="blog-article"] .col { font-size: 1.125rem; line-height: 1.8; }
[data-template="blog-article"] p + p { margin-top: var(--s-4); }
/* Long-form legacy markup: bare text runs cut by `<br><br>`, `.medium-*` classes
   from the legacy editor, and indented asides carried as
   `<span class="medium-span" style="margin-left:60px;display:block">`. */
[data-template="blog-article"] h1.orange { color: var(--ink); }
[data-template="blog-article"] .art-sep { margin: var(--s-5) 0 var(--s-2); }
.medium-h3, .medium-h4, [data-template="blog-article"] h3 {
    margin: var(--s-5) 0 var(--s-2); font-size: 1.1875rem; line-height: 1.35; color: var(--ink);
}
.medium-span .medium-h3, .medium-span h3 { margin-top: 0; }
/* `!important`: beats the baked inline 60px, which eats a phone's measure */
.medium-span { margin-left: clamp(1rem, .25rem + 4vw, 3.75rem) !important; }
.medium-i { font-style: italic; }
.medium-b { font-weight: 700; }
[data-template="blog-article"] p[style*="center"] { margin-block: var(--s-4); }
/* a heading brings its own top margin: the `<br><br>` run before it is slack */
br:has(+ .medium-h2), br:has(+ br + .medium-h2), br:has(+ .medium-h3), br:has(+ br + .medium-h3) { display: none; }
@media (max-width: 780px) {
    [data-template="blog-article"] .col, [data-template="concept"] .span_9_of_12 { font-size: var(--fs-base); line-height: 1.75; }
}
[data-template="blog-article"] ul, [data-template="blog-article"] ol { margin: var(--s-3) 0 var(--s-3) var(--s-5); list-style: disc; }
[data-template="blog-article"] ol { list-style: decimal; }

/* index: a flat `h1|h2.orange + p + p.right > a + br br` run per post */
[data-template="blog-index"] h1, [data-template="blog-index"] h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; letter-spacing: -.005em; }
[data-template="blog-index"] h2 { margin-top: var(--s-6); padding-top: var(--s-7); border-top: 1px solid var(--line); }
[data-template="blog-index"] h1 + p, [data-template="blog-index"] h2 + p {
    margin-top: var(--s-4); font-size: var(--fs-base); line-height: 1.7; color: var(--ink-soft);
}
[data-template="blog-index"] br { display: none; }
[data-template="blog-index"] p.right { margin-top: var(--s-4); text-align: left; }
[data-template="blog-index"] p.right a {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4); border: 1px solid currentColor; border-radius: 999px;
    font-size: var(--fs-sm); text-decoration: none; transition: background .2s ease, color .2s ease;
}
[data-template="blog-index"] p.right a::after { content: "→"; }
[data-template="blog-index"] p.right a:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

/* ── 10. lab + concepts ────────────────────────────────────────────────── */
/* lab hub */
[data-template="lab-index"] .lab { row-gap: var(--s-6); }
[data-template="lab-index"] h1 { font-size: var(--fs-2xl); }
[data-template="lab-index"] h2 { font-size: var(--fs-xl); }
/* both section titles carry a legacy inline `font-size:22px` */
[data-template="lab-index"] :is(h1, h2)[style] { font-size: var(--fs-xl) !important; }
[data-template="lab-index"] .lab a {
    display: block; height: 100%; padding: var(--s-5);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
[data-template="lab-index"] .lab a:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
[data-template="lab-index"] .lab a h2, [data-template="lab-index"] .lab a h3 { font-size: var(--fs-md); color: var(--brand-ink); margin-bottom: var(--s-4); }
[data-template="lab-index"] .lab a img { max-height: 18rem; width: auto; border-radius: var(--radius-sm); }

/* concept index: three columns of a 3-level outline (`p.p0` / `.p1` / `.p2`) */
[data-template="concepts-index"] .lab { row-gap: var(--s-7); }
[data-template="concepts-index"] .lab > .col {
    padding: var(--s-5); border: 1px solid var(--line); border-top: 3px solid var(--brand);
    border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
}
[data-template="concepts-index"] h1, [data-template="concepts-index"] h2 { font-size: var(--fs-lg); }
[data-template="concepts-index"] .lab br { display: none; }
.lab .p0, .lab .p1, .lab .p2, .lab .p3 { line-height: 1.4; }
.lab .p0 { margin-top: var(--s-4); }
.lab .p1 { margin-top: var(--s-2); padding-left: var(--s-4); border-left: 2px solid var(--line); }
.lab .p2, .lab .p3 { margin-top: var(--s-1); margin-left: var(--s-4); padding-left: var(--s-4); border-left: 2px solid var(--line); }
.lab .p0 a { font-size: var(--fs-base); text-decoration: none; }
.lab .p0 a:hover { text-decoration: underline; }
.lab .p1 a, .lab .p2 a, .lab .p3 a { font-weight: 400; font-size: var(--fs-sm); color: var(--ink-soft); text-decoration: none; }
.lab .p1 a:hover, .lab .p2 a:hover, .lab .p3 a:hover { color: var(--brand-ink); text-decoration: underline; }

/* concept page (`.solo`: article + the concepts list aside) */
[data-template="concept"] .solo { column-gap: var(--s-8); align-items: start; }
[data-template="concept"] .span_9_of_12 { font-size: 1.125rem; line-height: 1.8; max-width: 48rem; }
[data-template="concept"] .span_9_of_12 > a.orange {
    font-size: var(--fs-sm); text-decoration: none;
}
[data-template="concept"] .span_9_of_12 > a.orange:hover { text-decoration: underline; }
[data-template="concept"] .span_9_of_12 > a.orange + .tab + a.orange::before { content: "·"; margin-right: var(--s-5); color: var(--ink-muted); }
.medium-h1 { margin: var(--s-4) 0 var(--s-5); font-size: var(--fs-2xl); letter-spacing: -.01em; }
.medium-h1 + br, .medium-h1 + br + br, .medium-h2 + br { display: none; }
.medium-h2 { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-lg); color: var(--ink); }
.medium-h1 + .medium-h2, .medium-h1 + br + .medium-h2, .medium-h1 + br + br + .medium-h2 { margin-top: 0; }
[data-template="concept"] .span_3_of_12 {
    position: sticky; top: calc(var(--header-h) + var(--s-5));
    max-height: calc(100vh - var(--header-h) - var(--s-7)); overflow-y: auto;
    padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-warm);
}
[data-template="concept"] .span_3_of_12 h2 { margin-bottom: var(--s-3); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.conceptsList { font-size: var(--fs-sm); line-height: 1.35; }
p.conceptsList a { display: block; padding: .3rem 0; color: var(--ink-soft); text-decoration: none; }
p.conceptsList a:hover { color: var(--brand-ink); text-decoration: underline; }
@media (max-width: 780px) {
    [data-template="concept"] .span_3_of_12 { position: static; max-height: 22rem; }
}

/* ── 11. contact ───────────────────────────────────────────────────────── */
[data-template="contact"] .content > .group { align-items: center; row-gap: var(--s-6); }
[data-template="contact"] .map-container { grid-column: 1 / -1; }
[data-template="contact"] .map-container:first-child { order: 2; }
[data-template="contact"] .map-container br { display: none; }
[data-template="contact"] .map-container .group { display: block; }
/* `#map` is the legacy Google-Maps mount point. No third-party script is
   loaded any more: it shows the committed static map thumbnail instead. */
#map {
    /* `!important`: the baked block carries the legacy widget's inline sizing */
    width: 100%; max-width: 18rem !important; height: auto !important; aspect-ratio: 1; margin-inline: auto;
    border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-md);
    background: var(--surface-warm) url(/img/map.png) center / cover no-repeat;
}
[data-template="contact"] h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
[data-template="contact"] .map-container p { font-size: var(--fs-md); line-height: 1.6; }
[data-template="contact"] .map-container a { display: inline-block; margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-md); font-weight: 700; }
@media (min-width: 781px) {
    [data-template="contact"] .map-container:first-child { grid-column: 8 / span 5; order: 2; }
    [data-template="contact"] .map-container:nth-child(2) {
        grid-column: 1 / span 7; order: 1; padding: var(--s-7);
        border-left: 4px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface-warm);
    }
}

/* 404 document (`src/pages/not-found.js`, emitted as `/404.html`) */
.button {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-5); border-radius: 999px;
    background: var(--brand-ink); color: #fff; font-weight: 700; text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.button:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.not-found { text-align: center; padding-block: var(--s-6); }
.not-found__code {
    font-size: clamp(5rem, 3rem + 12vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -.04em;
    color: var(--brand-tint); -webkit-text-stroke: 2px var(--brand);
}
.not-found h1 { margin-top: var(--s-4); font-size: var(--fs-2xl); }
.not-found__lead { max-width: 34rem; margin: var(--s-4) auto var(--s-6); font-size: var(--fs-md); color: var(--ink-soft); }
.not-found__links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5);
    margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.not-found__links a { font-weight: 700; text-decoration: none; }
.not-found__links a:hover { text-decoration: underline; }

/* ── 12. clients + team (unrouted today, kept styled for reintegration) ── */
#clientsLogo, canvas#logos { display: none; }
#tags ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-4); }
#tags li { display: grid; place-items: center; min-height: 6.5rem; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
#tags img { max-height: 4rem; width: auto; object-fit: contain; }
[data-template="clients-index"] .content > h1 { max-width: calc(var(--container) + 2 * var(--gutter)); margin: var(--section-y) auto 0; padding-inline: var(--gutter); font-size: var(--fs-2xl); }

.temoignage, [data-template="equipe-bio"] .solo { column-gap: var(--s-7); align-items: start; }
.temoignage .photo, .solo .photo { text-align: center; }
.temoignage .photo img, .solo .photo img { width: 100%; max-width: 15rem; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.temoignage .photo h2 { margin-top: var(--s-3); font-size: var(--fs-base); }
.temoignage .photo h2 + h2 { margin-top: var(--s-1); font-weight: 400; color: var(--ink-muted); }
.temoignage h1, [data-template="equipe-bio"] h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
.temoignage .span_9_of_12 h2, [data-template="equipe-bio"] .span_9_of_12 h2 { margin: var(--s-5) 0 var(--s-3); font-size: var(--fs-lg); color: var(--brand-ink); }
.temoignage .span_9_of_12, [data-template="equipe-bio"] .span_9_of_12 { max-width: 48rem; }
.temoignage .span_9_of_12 br, [data-template="equipe-bio"] .span_9_of_12 br { display: none; }
.temoignage p + p, [data-template="equipe-bio"] p + p { margin-top: var(--s-3); }
.temoignage ul, [data-template="equipe-bio"] ul { margin: var(--s-3) 0 var(--s-3) var(--s-5); list-style: square; }
.temoignage li::marker, [data-template="equipe-bio"] li::marker { color: var(--brand); }
.illustration { margin-top: var(--s-5); }

.staff.staff { display: block; }
.staff-container .title { text-align: center; }
.staff-container h1 { font-size: var(--fs-2xl); }
.staff-container h2 { margin-top: var(--s-2); font-size: var(--fs-md); font-weight: 400; color: var(--ink-soft); }
.staff-container br, .staff-link br { display: none; }
/* the closing statement carries a legacy inline `font-weight:bold;font-size:18px`:
   reset it to a calm centred lead, its three `<br>`-separated couplets spaced */
.staff-container .col.center[style] {
    max-width: 52rem; margin: var(--s-7) auto 0; padding-top: var(--s-6); border-top: 1px solid var(--line);
    font-weight: 400 !important; font-size: var(--fs-md) !important; line-height: 1.6; color: var(--ink-soft);
}
.staff-container .col.center[style] p:nth-of-type(2n+1):not(:first-of-type) { margin-top: var(--s-4); }
.staff-link .vignette { margin-top: var(--s-5); }
.vignette .rel { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--dark); }
.vignette img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .3s ease; }
.vignette .rel:hover img { transform: scale(1.03); }
.vignette .colorIt { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6) var(--s-4) var(--s-4); background: linear-gradient(transparent, rgba(31, 31, 37, .85)); }
.vignette .colorIt h3 { color: #fff; font-size: var(--fs-base); }
.vignette .overImg { position: absolute; inset: 0; }

/* ── 13. flipbook (unrouted today) ─────────────────────────────────────── */
[data-template="flipbook-page"] .content > h1 {
    max-width: calc(var(--container) + 2 * var(--gutter)); margin: var(--s-7) auto 0;
    padding-inline: var(--gutter); font-size: var(--fs-xl);
}
[data-template="flipbook-page"] .lab { align-items: start; padding-top: var(--s-6); }
#menuButton { display: none; }
#inner-menu {
    padding: var(--s-4); border-radius: var(--radius); background: var(--dark); color: var(--on-dark);
    max-height: 32rem; overflow-y: auto;
}
.flipMenu a { display: block; color: inherit; text-decoration: none; }
.flipMenu .flipMenu { padding: var(--s-1) 0; font-size: var(--fs-sm); line-height: 1.35; }
.flipMenu a:hover { text-decoration: underline; }
.flip1 { font-weight: 700; color: var(--brand-on-dark); }
.flip2 { padding-left: var(--s-3) !important; font-weight: 700; }
.flip3 { padding-left: var(--s-5) !important; color: var(--on-dark-muted); }
.flip4, .flip5, .flip6, .flip7 { padding-left: var(--s-6) !important; color: var(--on-dark-muted); }
.flipbook-stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s-4); }
.flipbook-stage > svg { grid-column: 1 / -1; width: 100%; height: auto; max-height: 80vh; }
.flipbook-page { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
@media (min-width: 781px) {
    [data-template="flipbook-page"] #inner-menu { grid-column: span 3; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
    [data-template="flipbook-page"] #flip { grid-column: span 9; }
}

/* ── 14. accessibility + print ─────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.site-footer :focus-visible, .page-banner :focus-visible, #homeShow :focus-visible {
    box-shadow: 0 0 0 3px var(--dark), 0 0 0 6px #fff;
}
#homeShow .navigate button:focus-visible { border-radius: 50%; }
.is-enhanced > .buttons > div:focus-visible { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    #homeShow .img-anim { display: none; }
}

@media print {
    .site-header, .mobile-panel, .skip-link, .page-banner, .site-footer nav,
    #homeShow .navigate, #homeShow .img-anim, .para1, .buttons { display: none !important; }
    body { display: block; font-size: 11pt; color: #000; }
    main .content > .group { padding-block: 1rem; }
    .clients-c > .clients, .tem-c > .tem { display: block; overflow: visible; }
    #homeShow .tab:not(:first-child) { display: none; }
    .site-footer, .copy { background: none; color: #000; }
    .site-footer__inner { padding-block: 1rem; }
    .site-footer a, .site-footer h2 { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}