/* DIGISUD : styles partagés des pages services (copie des tokens et composants de index.html).
   Si vous changez un token dans index.html, reportez-le ici. */
/* ── TOKENS ──────────────────────────────────────────────
   DA « papier & encre » (alignée sur Eazymo) : un papier,
   une encre, un seul signal chaud (corail du Sud) pour les
   sur-titres, les numéros et ce qui doit attirer l'œil.
   Pas d'ombre décorative : les plans se séparent par des filets.
   ───────────────────────────────────────────────────── */
:root {
    --paper:     oklch(98.4% 0.006 75);
    --paper-el:  oklch(99.7% 0.003 75);
    --paper-st:  oklch(95.6% 0.008 70);
    --ink:       oklch(26.6% 0.046 262.6);
    --ink-soft:  oklch(36% 0.04 262);
    --muted:     oklch(50% 0.03 262);
    --line:      oklch(90.5% 0.008 70);
    --line-soft: oklch(94.5% 0.006 70);

    --sig:        oklch(68.8% 0.179 37.4);
    --sig-strong: oklch(68.8% 0.179 37.4);
    --sig-soft:   oklch(94.5% 0.035 40);
    --ok:         oklch(50% 0.13 152);
    --ok-soft:    oklch(94.5% 0.04 152);
    --info:       oklch(50% 0.11 235);
    --info-soft:  oklch(94.5% 0.025 235);
    --warn:       oklch(68% 0.15 70);
    --warn-soft:  oklch(95.5% 0.045 75);

    --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --max:  72rem;
    --gut:  1.25rem;
}
@media (min-width: 1024px) { :root { --gut: 2rem } }

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100% }
body {
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
body.locked { overflow:hidden }
img, svg { display:block; max-width:100% }
a { color:inherit }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:6px }
::selection { background:var(--sig-soft); color:var(--ink) }

.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gut) }
h1, h2, h3, h4 { font-weight:600; letter-spacing:-.022em; line-height:1.08; text-wrap:balance }
p { text-wrap:pretty }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ── SECTIONS ── */
.sec { border-top:1px solid var(--line) }
.sec-alt { background:color-mix(in oklch, var(--paper-el) 55%, var(--paper)) }
.sec-pad { padding:4rem 0 }
@media (min-width: 1024px) { .sec-pad { padding:6rem 0 } }
.sec-hd { max-width:58ch }
.sec-hd h2, .h2 { margin-top:1rem; font-size:30px }
.sec-hd p { margin-top:.75rem; font-size:15px; color:var(--muted); line-height:1.65 }
@media (min-width: 1024px) { .sec-hd h2, .h2 { font-size:40px } }

/* Sur-titre : point corail + capitales mono */
.kicker {
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--mono); font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:.18em; color:var(--sig-strong);
}
.kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--sig); flex-shrink:0 }
.kicker-inv { color:color-mix(in oklch, var(--paper) 72%, transparent) }

/* ── BOUTONS : pilules encre ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    height:3rem; padding:0 1.5rem; border-radius:999px;
    font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.005em;
    text-decoration:none; white-space:nowrap; cursor:pointer;
    transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform:scale(.98) }
.btn-sm { height:2.5rem; padding:0 1.1rem; font-size:13.5px }
.btn-ink { background:var(--ink); color:var(--paper); border:1px solid var(--ink) }
.btn-ink:hover { background:var(--ink-soft); border-color:var(--ink-soft) }
.btn-line { background:var(--paper-el); color:var(--ink); border:1px solid var(--line) }
.btn-line:hover { border-color:color-mix(in oklch, var(--ink) 50%, transparent) }
.btn-paper { background:var(--paper); color:var(--ink); border:1px solid var(--paper) }
.btn-paper:hover { background:var(--paper-el) }
.btn-ghost-inv { color:var(--paper); border:1px solid color-mix(in oklch, var(--paper) 28%, transparent) }
.btn-ghost-inv:hover { border-color:var(--paper) }
.btn svg { width:17px; height:17px }

.lnk {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
    border-bottom:1px solid var(--line); padding-bottom:2px;
    transition:border-color .18s var(--ease);
}
.lnk:hover { border-color:var(--ink) }

/* Pastilles de statut (maquettes) */
.pill {
    display:inline-flex; align-items:center; height:1.375rem; padding:0 .5rem; border-radius:6px;
    font-family:var(--mono); font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.08em;
    background:var(--line-soft); color:var(--muted); white-space:nowrap;
}
.pill-sig  { background:var(--sig-soft);  color:var(--sig-strong) }
.pill-ok   { background:var(--ok-soft);   color:var(--ok) }
.pill-info { background:var(--info-soft); color:var(--info) }
.pill-warn { background:var(--warn-soft); color:oklch(48% 0.12 65) }
.pill-ink  { background:var(--ink);       color:var(--paper) }

/* ── HEADER ── */
.hdr {
    position:sticky; top:0; z-index:50;
    background:color-mix(in oklch, var(--paper) 86%, transparent);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid transparent;
    transition:border-color .2s var(--ease);
}
.hdr.scrolled { border-bottom-color:var(--line) }
body.locked .hdr { background:var(--paper); border-bottom-color:var(--line) }
.hdr-in { display:flex; align-items:center; justify-content:space-between; height:4rem; gap:1rem }
.logo { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
.logo-mark { height:30px; width:auto; flex-shrink:0 }
.nav { display:none; align-items:center; gap:.25rem; list-style:none }
.nav a {
    display:inline-flex; padding:.5rem .9rem; border-radius:999px;
    font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none;
    transition:color .18s var(--ease);
}
.nav a:hover { color:var(--ink) }
/* Menu déroulant « Études de cas » : s'ouvre au survol, au focus clavier ou au clic (tactile) */
.nav-dd { position:relative }
.nav-dd-btn {
    display:inline-flex; align-items:center; gap:.3rem; padding:.5rem .9rem; border-radius:999px;
    font-size:13.5px; font-weight:500; color:var(--muted); transition:color .18s var(--ease);
}
.nav-dd-btn svg { width:12px; height:12px; transition:transform .18s var(--ease) }
.nav-dd:hover .nav-dd-btn, .nav-dd.open .nav-dd-btn { color:var(--ink) }
.nav-dd:hover .nav-dd-btn svg, .nav-dd.open .nav-dd-btn svg { transform:rotate(180deg) }
.nav-dd-panel {
    position:absolute; top:100%; left:50%; width:20rem; margin-top:.5rem; padding:.4rem;
    display:grid; background:var(--paper-el); border:1px solid var(--line); border-radius:1rem;
    opacity:0; visibility:hidden; transform:translate(-50%, 4px);
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
.nav-dd-panel::before { content:''; position:absolute; left:0; right:0; top:-.6rem; height:.6rem }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel, .nav-dd.open .nav-dd-panel { opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s }
.nav .nav-dd-panel a { display:flex; flex-direction:column; gap:.1rem; padding:.65rem .8rem; border-radius:.65rem; color:var(--ink) }
.nav .nav-dd-panel a:hover, .nav .nav-dd-panel a[aria-current="page"] { background:var(--paper-st) }
.nav-dd-panel b { font-size:14px; font-weight:600; letter-spacing:-.01em }
.nav-dd-panel small { font-size:12.5px; color:var(--muted) }
.nav .nav-dd-panel a.nav-dd-all { margin-top:.3rem; padding-top:.75rem; border-top:1px solid var(--line); border-radius:0 0 .65rem .65rem; font-size:13px; font-weight:600; color:var(--ink) }
.mob-sub { display:grid; grid-template-columns:1fr 1fr; gap:.1rem 1rem; padding:0 0 1rem 2.1rem }
.mob-menu .mob-sub li { border:0 }
.mob-menu .mob-sub a { padding:.35rem 0; font-size:15px; font-weight:500; letter-spacing:0; color:var(--ink-soft) }
@media (prefers-reduced-motion: reduce) { .nav-dd-panel, .nav-dd-btn svg { transition:none } }
.hdr-cta { display:none }
.burger { width:44px; height:44px; display:grid; place-items:center; margin-right:-10px }
.burger-in { display:flex; flex-direction:column }
.burger-in > span { display:block; width:20px; height:1.5px; background:var(--ink) }
.burger-in > span + span { margin-top:6px }
.burger[aria-expanded="true"] .burger-in > span:first-child { transform:translateY(3.75px) rotate(45deg) }
.burger[aria-expanded="true"] .burger-in > span:last-child  { transform:translateY(-3.75px) rotate(-45deg) }
@media (min-width: 920px) {
    .nav, .hdr-cta { display:flex }
    .burger { display:none }
}

.mob-menu {
    position:fixed; inset:4rem 0 0; z-index:49; background:var(--paper);
    padding:1rem var(--gut) 2rem; display:flex; flex-direction:column; justify-content:space-between;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .24s var(--ease), transform .24s var(--ease), visibility 0s .24s;
}
.mob-menu.open { opacity:1; visibility:visible; transform:none; transition-delay:0s }
.mob-menu ul { list-style:none }
.mob-menu li + li { border-top:1px solid var(--line) }
.mob-menu li a {
    display:flex; align-items:baseline; gap:.9rem; padding:1.05rem 0;
    font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--ink); text-decoration:none;
}
.mob-menu li a span { font-family:var(--mono); font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0 }
.mob-menu .btn { width:100% }
@media (min-width: 920px) { .mob-menu { display:none } }


/* ── LISTES ÉDITORIALES ── */
.ed-list { list-style:none }
.ed-list > li { display:flex; gap:1.25rem; padding:1.6rem 0; border-top:1px solid var(--line) }
.ed-ico { width:22px; height:22px; color:var(--muted); flex-shrink:0; margin-top:3px }
.ed-row { display:flex; align-items:baseline; gap:.75rem }
.ed-n { font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.ed-list h3 { font-size:19px; letter-spacing:-.018em; line-height:1.25 }
.ed-list p { margin-top:.5rem; max-width:48ch; font-size:14.5px; line-height:1.65; color:var(--muted) }
.ed-meta {
    display:inline-flex; align-items:center; gap:.45rem; margin-top:.8rem;
    font-family:var(--mono); font-size:12px; color:var(--ink-soft);
}
.ed-meta::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--sig) }


/* ── RÉALISATIONS ── */
.cases { margin-top:3.5rem; display:flex; flex-direction:column; gap:4rem }
.case { display:grid; gap:2rem; align-items:center }
.case h3 { margin-top:1rem; font-size:24px }
.case-txt > p { margin-top:.75rem; max-width:46ch; font-size:15px; line-height:1.7; color:var(--ink-soft) }
.case-feats { list-style:none; margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem }
.case-feats li {
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    padding:.3rem .6rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft);
    background:var(--paper-el);
}
.case-foot { margin-top:1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem }
.case-stack { font-family:var(--mono); font-size:12px; color:var(--muted) }
.case-cta { gap:.6rem }

/* Résultats chiffrés d'un projet : un ou deux, jamais une grille. */
.case-res { margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:1rem 2.5rem; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.case-res dt { font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; color:var(--ink) }
.case-res dt span { color:var(--muted); font-weight:500 }
.case-res dd { margin-top:.3rem; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--sig-strong) }
@media (min-width: 1024px) { .case-res dt { font-size:34px } }


/* ── MÉTHODE ── */
.steps { margin-top:3rem; display:grid; gap:2.5rem; list-style:none }
.steps li { border-top:2px solid var(--ink); padding-top:1.25rem }
.steps .ed-n { color:var(--sig-strong); font-size:13px; letter-spacing:.14em }
.steps h3 { margin-top:.75rem; font-size:21px }
.steps p { margin-top:.5rem; font-size:14.5px; line-height:1.65; color:var(--muted) }
@media (min-width: 640px) { .steps { grid-template-columns:1fr 1fr } }
@media (min-width: 1024px) { .steps { grid-template-columns:repeat(4,1fr); gap:2.5rem } }


/* ── FAQ ── */
.faq-grid { display:grid; gap:2.5rem }
/* ── AGENCE IA & DIGITALE (bloc local) ── */
.kw-grid { display:grid; gap:2.5rem; margin-top:2.5rem }
.kw-col h3 { font-size:22px; letter-spacing:-.02em; line-height:1.2 }
.kw-col > p { margin-top:.6rem; max-width:48ch; font-size:15px; line-height:1.65; color:var(--muted) }
.kw-col ul { list-style:none; margin-top:1.25rem }
.kw-col li { position:relative; padding:.8rem 0 .8rem 1.4rem; border-top:1px solid var(--line); font-size:14.5px; line-height:1.55; color:var(--ink-soft) }
.kw-col li::before { content:''; position:absolute; left:0; top:1.35rem; width:6px; height:6px; border-radius:50%; background:var(--sig) }
.kw-zone { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); max-width:72ch; font-size:14.5px; line-height:1.7; color:var(--muted) }
.kw-zone b { font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--ink); margin-right:.5rem }
@media (min-width: 1024px) { .kw-grid { grid-template-columns:1fr 1fr; gap:4rem } }

.faq-aside p { margin-top:.9rem; font-size:15px; color:var(--muted); line-height:1.65 }
.faq-aside .lnk { margin-top:1.25rem }
.faq-list { border-bottom:1px solid var(--line) }
.faq-item { border-top:1px solid var(--line) }
.faq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
    padding:1.3rem 0; text-align:left;
    font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.35;
}
.faq-ico { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex-shrink:0; transition:transform .24s var(--ease), background .18s var(--ease) }
.faq-ico svg { width:12px; height:12px }
.faq-item.open .faq-ico { transform:rotate(45deg); background:var(--ink); color:var(--paper); border-color:var(--ink) }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease) }
.faq-a > div { overflow:hidden }
.faq-a p { padding:0 3rem 1.4rem 0; font-size:15px; line-height:1.7; color:var(--ink-soft) }
.faq-item.open .faq-a { grid-template-rows:1fr }
@media (min-width: 1024px) { .faq-grid { grid-template-columns:5fr 7fr; gap:4.5rem } }

/* ── CTA (bloc encre) ── */
.cta-blk { background:var(--ink); color:var(--paper); border-radius:1rem; padding:2rem 1.5rem }
.cta-blk h2 { margin-top:1rem; font-size:32px; max-width:16ch }
.cta-blk p { margin-top:.9rem; max-width:50ch; font-size:15.5px; line-height:1.7; color:color-mix(in oklch, var(--paper) 74%, transparent) }
.cta-acts { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem }
.cta-facts { margin-top:1.5rem; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:color-mix(in oklch, var(--paper) 65%, transparent) }
@media (min-width: 1024px) {
    .cta-blk { padding:3.5rem; display:flex; align-items:flex-end; justify-content:space-between; gap:3rem }
    .cta-blk h2 { font-size:44px }
    .cta-acts { margin-top:0; flex-shrink:0 }
}

/* ── FOOTER ── */
.ftr { border-top:1px solid var(--line); background:color-mix(in oklch, var(--paper-el) 55%, var(--paper)) }
.ftr-grid { display:grid; gap:2rem; padding:3.5rem 0 2.5rem; grid-template-columns:1fr 1fr }
.ftr-brand { grid-column:1 / -1 }
.ftr-brand p { margin-top:.75rem; max-width:36ch; font-size:14px; line-height:1.65; color:var(--muted) }
.ftr h4 { font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:.9rem }
.ftr ul { list-style:none; display:flex; flex-direction:column; gap:.5rem }
.ftr li, .ftr li a { font-size:14px; color:var(--ink-soft); text-decoration:none }
.ftr li a:hover { color:var(--ink) }
.ftr-bot { border-top:1px solid var(--line); padding:1.25rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; font-size:13px; color:var(--muted) }
.ftr-bot a { color:var(--muted); text-decoration:none; margin-left:1.25rem }
.ftr-bot a:first-child { margin-left:0 }
.ftr-bot a:hover { color:var(--ink) }
@media (min-width: 820px) {
    .ftr-grid { grid-template-columns:1.6fr repeat(4, 1fr); gap:2.5rem }
    .ftr-brand { grid-column:auto }
}

/* ── CTA MOBILE COLLANT ── */
.mob-cta {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:.75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom));
    background:color-mix(in oklch, var(--paper) 88%, transparent);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    transform:translateY(100%); transition:transform .24s var(--ease);
}
.mob-cta.show { transform:none }
.mob-cta .btn { width:100% }
body.locked .mob-cta { transform:translateY(100%) }
@media (min-width: 920px) { .mob-cta { display:none } }

/* ── CONSENTEMENT (sheet) ── */
.consent {
    position:fixed; left:var(--gut); right:var(--gut); bottom:var(--gut); z-index:60;
    max-width:30rem; margin-left:auto;
    background:var(--paper-el); border:1px solid var(--line); border-radius:1rem;
    padding:1.1rem 1.2rem; box-shadow:0 24px 48px -12px rgba(25,37,60,.18);
    display:none;
}
.consent.show { display:block; animation:est-in .24s var(--ease) }
/* Petite cigale : bloc CTA encre et bandeau cookies */
.cta-mark { display:block; height:40px; width:auto; margin-bottom:1.25rem }
.consent-mark { display:inline-block; height:16px; width:auto; vertical-align:-3px; margin-right:.4rem }
.consent-text { font-size:13.5px; line-height:1.6; color:var(--ink-soft) }
.consent-text strong { color:var(--ink) }
.consent-text a { color:var(--ink); text-underline-offset:2px }
.consent-actions { margin-top:.9rem; display:flex; gap:.5rem; justify-content:flex-end }

/* ── APPARITION AU SCROLL (sobre) ── */
.js .anim { opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.js .anim.in { opacity:1; transform:none }
.js .anim.d1 { transition-delay:.06s }
.js .anim.d2 { transition-delay:.12s }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto }
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; transition-delay:0s !important }
    .js .anim { opacity:1; transform:none }
}

@keyframes est-in { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }

/* ── PAGES SERVICES ── */
.crumb { padding-top:1.5rem; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted) }
.crumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem }
.crumb li + li::before { content:'/'; margin-right:.4rem; color:var(--line) }
.crumb a { color:var(--muted); text-decoration:none }
.crumb a:hover { color:var(--ink) }
.crumb [aria-current] { color:var(--ink-soft) }

.p-hero { padding:2.5rem 0 3.5rem }
.p-hero h1 { margin-top:1.1rem; max-width:20ch; font-size:38px; line-height:1.04; letter-spacing:-.03em }
.p-hero h1 em { font-style:normal; color:var(--sig-strong) }
.p-sub { margin-top:1.25rem; max-width:58ch; font-size:16px; line-height:1.7; color:var(--muted) }
.p-acts { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem }
.p-facts { margin-top:2.5rem; display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 2rem; padding:1.25rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); list-style:none }
.p-facts b { display:block; font-size:24px; font-weight:600; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums }
.p-facts span { display:block; margin-top:.3rem; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--sig-strong) }
@media (min-width: 1024px) {
    .p-hero { padding:3.5rem 0 5rem }
    .p-hero h1 { font-size:56px }
    .p-sub { font-size:18px }
    .p-facts { grid-template-columns:repeat(4, 1fr) }
    .p-facts b { font-size:30px }
}

.p-prose { margin-top:2rem; display:grid; gap:1.25rem; max-width:68ch }
.p-prose p { font-size:16px; line-height:1.75; color:var(--ink-soft) }
.p-prose strong { color:var(--ink) }

.p-list { margin-top:2.5rem; display:grid }
.p-list > li:first-child { border-top:0 }
@media (min-width: 1024px) {
    .p-list { grid-template-columns:1fr 1fr; column-gap:3.5rem }
    .p-list > li:nth-child(2) { border-top:0 }
}

.p-cases { margin-top:2.5rem; display:grid; gap:1.25rem }
.p-case { border:1px solid var(--line); border-radius:1rem; background:var(--paper-el); padding:1.5rem }
.p-case h3 { margin-top:.9rem; font-size:21px; line-height:1.2 }
.p-case p { margin-top:.6rem; font-size:14.5px; line-height:1.65; color:var(--ink-soft) }
.p-case .case-res { margin-top:1.1rem }
.p-case .lnk { margin-top:1.1rem }
@media (min-width: 1024px) { .p-cases { grid-template-columns:repeat(var(--cols, 2), 1fr) } .p-case { padding:2rem } }

.p-price { margin-top:2.5rem; list-style:none; border-bottom:1px solid var(--line) }
.p-price li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.35rem 2rem; padding:1.2rem 0; border-top:1px solid var(--line) }
.p-price b { font-size:17px; font-weight:600; letter-spacing:-.015em }
.p-price small { display:block; margin-top:.2rem; font-size:14px; color:var(--muted); max-width:52ch }
.p-price span { font-family:var(--mono); font-size:13px; color:var(--ink); white-space:nowrap }

.p-more { margin-top:2.5rem; list-style:none; display:grid; gap:.75rem }
.p-more a { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.25rem; border:1px solid var(--line); border-radius:.85rem; background:var(--paper-el); text-decoration:none; font-weight:600; letter-spacing:-.01em; transition:border-color .18s var(--ease) }
.p-more a:hover { border-color:color-mix(in oklch, var(--ink) 50%, transparent) }
.p-more small { display:block; margin-top:.2rem; font-weight:400; font-size:13.5px; color:var(--muted) }
.p-more svg { width:17px; height:17px; flex-shrink:0; color:var(--muted) }
@media (min-width: 820px) { .p-more { grid-template-columns:1fr 1fr } }

/* ── MAQUETTES DES RÉALISATIONS (copie de index.html) ── */
/* Avant / après du studio photo IA : même photo, rendu terne vs sublimé, révélé au glisser. */
.ba-fig { margin:0 }
.ba { --pos:52%; position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:1rem; border:1px solid var(--line); background:var(--line); cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.ba-before { filter:saturate(.5) brightness(.72) contrast(.93) }
.ba-veil { position:absolute; inset:0; background:oklch(52% 0.02 250 / .16) }
.ba-after { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0) }
.ba-after img { filter:saturate(1.2) contrast(1.07) brightness(1.05) }
.ba-tag { position:absolute; top:.75rem; padding:.3rem .65rem; border-radius:999px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.ba-tag-after { left:.75rem; background:color-mix(in oklch, var(--ink) 85%, transparent); color:var(--paper) }
.ba-tag-before { right:.75rem; background:color-mix(in oklch, var(--paper-el) 85%, transparent); color:var(--muted) }
.ba-line { position:absolute; top:0; bottom:0; left:var(--pos); width:1px; transform:translateX(-.5px); background:color-mix(in oklch, var(--paper) 90%, transparent) }
.ba-knob { position:absolute; top:50%; left:var(--pos); width:40px; height:40px; transform:translate(-50%,-50%); border-radius:50%; background:var(--sig); color:var(--paper); display:grid; place-items:center; box-shadow:0 6px 16px -4px rgba(25,37,60,.35) }
.ba-knob svg { width:18px; height:18px }
.ba:focus-within .ba-knob { outline:2px solid var(--ink); outline-offset:2px }
.ba-cap { margin-top:.75rem; text-align:center; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.case-cta .dom { font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0 }
/* La maquette est aussi cliquable vers le site (doublon du bouton, hors tabulation). */
a.mock { display:block; color:inherit; text-decoration:none; position:relative; transition:border-color .18s var(--ease), transform .24s var(--ease) }
a.mock:hover { border-color:color-mix(in oklch, var(--ink) 45%, transparent); transform:translateY(-2px) }
a.mock::after {
    content:attr(data-open); position:absolute; right:1rem; bottom:1rem;
    font-family:var(--mono); font-size:11px; letter-spacing:.04em;
    padding:.35rem .7rem; border-radius:999px; background:var(--ink); color:var(--paper);
    opacity:0; transform:translateY(4px); transition:opacity .18s var(--ease), transform .18s var(--ease);
}
a.mock:hover::after { opacity:1; transform:none }

/* ── CAPTURES : le vrai site, ordinateur + mobile, posés sur un plateau papier ── */
.shot { margin:0 }
.shot-stage { position:relative; display:block; padding:7% 22% 12% 5%; border:1px solid var(--line); border-radius:1rem; background:var(--paper-st); overflow:hidden; color:inherit; text-decoration:none; transition:border-color .18s var(--ease) }
.shot-desk { border:1px solid var(--line); border-radius:.6rem; background:var(--paper-el); overflow:hidden; transition:transform .24s var(--ease) }
.shot-bar { display:flex; align-items:center; gap:.35rem; height:26px; padding:0 .7rem; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10.5px; color:var(--muted); white-space:nowrap }
.shot-bar i { width:7px; height:7px; border-radius:50%; background:var(--line); flex-shrink:0 }
.shot-bar span { margin-left:.4rem; padding:.05rem .55rem; border-radius:999px; background:var(--paper-st) }
.shot img { display:block; width:100%; height:auto }
/* Écran fixe qui recadre une capture longue : la page défile dedans au rythme du scroll */
.shot-screen { position:relative; overflow:hidden; aspect-ratio:1440 / 900; background:var(--paper-el) }
.shot-phone .shot-screen { aspect-ratio:600 / 1298 }
.shot-long { will-change:transform }
.shot-phone { position:absolute; right:5%; bottom:4%; width:25%; padding:4px; border-radius:1.15rem; background:var(--ink) }
.shot-phone .shot-screen { border-radius:calc(1.15rem - 4px) }
.shot-cap { margin-top:.75rem; text-align:center; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
a.shot-stage:hover { border-color:color-mix(in oklch, var(--ink) 45%, transparent) }
a.shot-stage:hover .shot-desk { transform:translateY(-3px) }
a.shot-stage::after {
    content:attr(data-open); position:absolute; left:1rem; bottom:1rem;
    font-family:var(--mono); font-size:11px; letter-spacing:.04em;
    padding:.35rem .7rem; border-radius:999px; background:var(--ink); color:var(--paper);
    opacity:0; transform:translateY(4px); transition:opacity .18s var(--ease), transform .18s var(--ease);
}
a.shot-stage:hover::after { opacity:1; transform:none }
@media (prefers-reduced-motion: reduce) { a.shot-stage:hover .shot-desk { transform:none } }

/* En-tête de section en deux colonnes : titre à gauche, chapeau à droite */
@media (min-width: 1024px) {
    .sec-hd.split { max-width:none; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 24rem); column-gap:4rem; align-items:end }
    .sec-hd.split > .kicker { grid-column:1; justify-self:start }
    .sec-hd.split > h2 { grid-column:1; max-width:22ch }
    .sec-hd.split > p { grid-column:2; grid-row:1 / span 2; margin-top:0 }
}

/* Cadre : deux filets verticaux aux bords du contenu, une croix à chaque jonction de section */
@media (min-width: 1200px) {
    body::before { content:''; position:fixed; top:0; bottom:0; left:50%; width:var(--max); transform:translateX(-50%); border-inline:1px solid var(--line-soft); pointer-events:none; z-index:1 }
    .sec, .ftr { position:relative }
    .sec::before, .ftr::before {
        content:''; position:absolute; top:-6px; left:50%; width:calc(var(--max) + 11px); height:11px; transform:translateX(-50%); pointer-events:none; z-index:2;
        background:
            linear-gradient(var(--muted), var(--muted)) 0 5px / 11px 1px no-repeat,
            linear-gradient(var(--muted), var(--muted)) 5px 0 / 1px 11px no-repeat,
            linear-gradient(var(--muted), var(--muted)) 100% 5px / 11px 1px no-repeat,
            linear-gradient(var(--muted), var(--muted)) calc(100% - 5px) 0 / 1px 11px no-repeat;
    }
}

/* Signature de pied de page : le nom en très grand, à peine posé sur le papier */
.ftr-mark { height:.7em; overflow:hidden; margin:0 auto; max-width:var(--max); padding:0 var(--gut); font-size:clamp(64px, 19.5vw, 252px); font-weight:700; letter-spacing:-.05em; line-height:.86; text-align:center; color:color-mix(in oklch, var(--ink) 6%, transparent); user-select:none; -webkit-user-select:none; pointer-events:none }

/* Kering : les quatre maisons migrées, logos officiels en encre sur une seule plaque à filets */
.maisons { margin:0 }
.maisons-grid { list-style:none; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:1rem; background:var(--paper-el); overflow:hidden }
.maisons-grid li { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; min-height:9.5rem; padding:1.5rem 1rem; border-bottom:1px solid var(--line); text-align:center }
.maisons-grid li:nth-child(odd) { border-right:1px solid var(--line) }
.maisons-grid li:nth-last-child(-n+2) { border-bottom:0 }
.maisons-grid img { height:var(--h, 16px); width:auto; max-width:88% }
.maisons-grid small { font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
@media (min-width: 640px) { .maisons-grid li { min-height:12rem } }

/* Maquettes : mini-écrans dessinés dans la DA, pour les vues qu'aucune capture publique ne montre (coffre-fort Papelard) */
.mock { background:var(--paper-el); border:1px solid var(--line); border-radius:1rem; padding:1.25rem; overflow:hidden }
@media (min-width: 640px) { .mock { padding:1.5rem } }
.mock-hd { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-bottom:.9rem; border-bottom:1px solid var(--line) }
.mock-tt { display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted) }
.mock-tt b { font-family:var(--sans); font-size:15px; font-weight:700; text-transform:none; letter-spacing:-.01em; color:var(--ink) }
.mock-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line-soft) }
.mock-row:last-child { border-bottom:0; padding-bottom:0 }
.mock-row strong { display:block; font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.3 }
.mock-row small { display:block; font-size:12.5px; color:var(--muted); line-height:1.4 }
.mock-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1rem }
.mock-ico { width:32px; height:32px; border-radius:8px; background:var(--paper-st); display:grid; place-items:center; flex-shrink:0; color:var(--ink-soft) }
.mock-ico svg { width:16px; height:16px }
.mock-l { display:flex; align-items:center; gap:.75rem; min-width:0 }
.mock-l > div { min-width:0 }
.mock-l strong, .mock-l small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Papelard : document extrait */
.doc-fields { display:grid; grid-template-columns:1fr; gap:.6rem 1.5rem; margin-top:1rem; padding:1rem; border-radius:.75rem; background:var(--paper) ; border:1px solid var(--line-soft) }
.doc-fields div { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; border-bottom:1px solid var(--line-soft); padding-bottom:.35rem }
.doc-fields dt { font-size:12px; color:var(--muted) }
.doc-fields dd { font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums }
@media (min-width: 480px) { .doc-fields { grid-template-columns:1fr 1fr } }
.doc-search { display:flex; align-items:center; gap:.5rem; margin-top:1rem; padding:.6rem .85rem; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--muted); background:var(--paper) }
.doc-search svg { width:15px; height:15px }



/* ── PAGES RÉALISATIONS ── */
.cs-grid { display:grid; gap:2.5rem; align-items:start }
.cs-mocks { display:grid; gap:1.25rem }
.cs-stack { margin-top:1.5rem; font-family:var(--mono); font-size:12px; color:var(--muted) }
@media (min-width: 1024px) {
    .cs-grid { grid-template-columns:1fr 1fr; gap:4rem }
    .cs-grid .p-prose { margin-top:1.5rem }
}

/* Section « En ligne » des études de cas : captures pleine largeur sous l'en-tête */
.sec-hd + .shot { margin-top:2.5rem }
@media (min-width: 1024px) { .sec-hd + .shot { margin-top:3.5rem } }

/* ── VIBE CODING : la journée type, le site se construit au fil du scroll ──
   La fenêtre reste collée pendant que les étapes défilent ; pages.js pose data-step et les classes cumulées s1…s4.
   Sans JS (ou au chargement), la fenêtre montre l'état final. */
.vb { margin-top:3rem; display:grid; gap:1.5rem }
.vb-stage { position:sticky; top:4.5rem; z-index:1; margin:0; padding:.75rem 0 1rem; background:var(--paper) }
.vb-win { border:1px solid var(--line); border-radius:.75rem; background:var(--paper-el); overflow:hidden }
.vb-bar { display:flex; align-items:center; gap:.35rem; height:30px; padding:0 .7rem; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10.5px; color:var(--muted) }
.vb-bar i { width:7px; height:7px; border-radius:50%; background:var(--line); flex-shrink:0 }
.vb-url { position:relative; flex:1; min-width:0; height:18px; margin-left:.4rem; border-radius:999px; background:var(--paper-st); overflow:hidden }
.vb-url em { position:absolute; inset:0; padding:0 .6rem; font-style:normal; line-height:18px; white-space:nowrap; transition:opacity .4s var(--ease), transform .4s var(--ease) }
.vb-u1 { color:var(--ink); opacity:0; transform:translateY(6px) }
.vb-live { font-size:9.5px; padding:.12rem .5rem; opacity:0; transition:opacity .4s var(--ease) }
.vb-stage.s3 .vb-u0 { opacity:0; transform:translateY(-6px) }
.vb-stage.s3 .vb-u1 { opacity:1; transform:none }
.vb-stage.s3 .vb-live { opacity:1 }

.vb-body { position:relative; overflow:hidden; container-type:inline-size }
.vb-site { position:relative; padding:4cqi 5cqi; display:flex; flex-direction:column; gap:3.4cqi; font-size:2.3cqi; color:var(--ink) }
.vb-site > * { opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
.vb-stage.s1 .vb-site > * { opacity:1; transform:none }
.vb-stage.s1 .vb-site > :nth-child(2) { transition-delay:.12s }
.vb-stage.s1 .vb-site > :nth-child(3) { transition-delay:.24s }
.vb-stage.s1 .vb-site > :nth-child(4) { transition-delay:.36s }

/* Texte : barre grise (squelette) tant que les contenus ne sont pas écrits, vrai texte à partir de l'étape 3 */
.vb-t { border-radius:.4em; transition:color .5s var(--ease), background-color .5s var(--ease) }
.vb-stage:not(.s2) .vb-t { color:transparent; background:var(--paper-st) }
.vb-nav { display:flex; align-items:center; gap:3cqi; padding-bottom:2.4cqi; border-bottom:1px solid var(--line-soft); color:var(--ink-soft) }
.vb-nav b { margin-right:auto; font-size:2.8cqi; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
.vb-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:4cqi; align-items:center }
.vb-hero > div:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:1.6cqi }
.vb-hero small { font-family:var(--mono); font-size:1.8cqi; text-transform:uppercase; letter-spacing:.08em; color:var(--sig-strong) }
.vb-hero strong { font-size:4.4cqi; font-weight:600; line-height:1.08; letter-spacing:-.03em }
.vb-btn { padding:1cqi 2.4cqi; border-radius:999px; background:var(--ink); color:var(--paper); font-weight:600 }
.vb-stage:not(.s2) .vb-btn { background:var(--paper-st) }
.vb-img { aspect-ratio:4 / 3; border-radius:1.4cqi; background:var(--paper-st); transition:background .6s var(--ease) }
.vb-img-hero { aspect-ratio:5 / 4 }
.vb-stage.s2 .vb-img { background:linear-gradient(135deg, oklch(86% 0.07 70), oklch(72% 0.11 50)) }
.vb-stage.s2 .vb-img-hero { background:linear-gradient(160deg, oklch(90% 0.05 80), var(--sig) 140%) }
.vb-stage.s2 .vb-cards > :nth-child(2) .vb-img { background:linear-gradient(135deg, oklch(88% 0.06 95), oklch(74% 0.09 75)) }
.vb-stage.s2 .vb-cards > :nth-child(3) .vb-img { background:linear-gradient(135deg, oklch(84% 0.05 40), oklch(66% 0.1 35)) }
.vb-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:2.4cqi; font-weight:600 }
.vb-cards > div { display:flex; flex-direction:column; align-items:flex-start; gap:1.2cqi }
.vb-cards .vb-img { align-self:stretch; aspect-ratio:16 / 9 }
.vb-hours { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1cqi 3cqi; padding-top:2.4cqi; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:1.9cqi; color:var(--ink-soft) }
.vb-sun { position:relative; display:inline-grid }
.vb-sun em { grid-area:1 / 1; font-style:normal; transition:opacity .4s var(--ease) }
.vb-h1 { opacity:0; color:var(--sig-strong) }
.vb-stage.s4 .vb-h0 { opacity:0 }
.vb-stage.s4 .vb-h1 { opacity:1 }

/* Bulles « Vous → Claude Code » et toast de mise en ligne */
.vb-chat, .vb-toast { position:absolute; left:5cqi; right:5cqi; bottom:4cqi; padding:2.6cqi 3cqi; border:1px solid var(--line); border-radius:2cqi; background:var(--paper); font-size:2.5cqi; line-height:1.45; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .45s var(--ease), transform .45s var(--ease) }
.vb-who { display:block; margin-bottom:.8cqi; font-family:var(--mono); font-size:1.8cqi; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.vb-chat p { color:var(--ink) }
.vb-chat-a { top:18cqi; bottom:auto; border-color:var(--ink); font-size:3cqi }
.vb-chat-b, .vb-toast { left:auto; width:62cqi; bottom:13cqi }
.vb-caret { display:inline-block; width:.5em; height:1em; margin-left:.15em; vertical-align:-.12em; background:var(--sig); animation:vb-blink 1s steps(2) infinite }
@keyframes vb-blink { 50% { opacity:0 } }
.vb-ok { display:block; margin-top:1cqi; font-family:var(--mono); font-size:1.9cqi; color:var(--ok) }
.vb-toast { display:flex; align-items:center; gap:2cqi; font-family:var(--mono); font-size:2cqi; color:var(--ink-soft) }
.vb-toast .pill { font-size:1.8cqi }
.vb-stage[data-step="0"] .vb-chat-a,
.vb-stage[data-step="3"] .vb-toast,
.vb-stage[data-step="4"] .vb-chat-b { opacity:1; transform:none }

/* Progression : cinq points sous la fenêtre */
.vb-dots { display:flex; justify-content:center; gap:.4rem; margin-top:.75rem; list-style:none }
.vb-dots li { width:18px; height:3px; border-radius:2px; background:var(--line); transition:background .3s var(--ease) }
.vb-stage[data-step="0"] .vb-dots li:nth-child(-n+1),
.vb-stage[data-step="1"] .vb-dots li:nth-child(-n+2),
.vb-stage[data-step="2"] .vb-dots li:nth-child(-n+3),
.vb-stage[data-step="3"] .vb-dots li:nth-child(-n+4),
.vb-stage[data-step="4"] .vb-dots li { background:var(--sig) }
.vb-stage .shot-cap { margin-top:.5rem }
@media (max-width: 1023px) { .vb-stage .shot-cap { display:none } }

/* Étapes : chacune occupe assez de hauteur pour laisser la fenêtre évoluer */
.vb-steps { list-style:none }
.vb-step { min-height:46vh; padding:1.5rem 0; border-top:2px solid var(--line); transition:border-color .3s var(--ease) }
.vb-step .ed-n { color:var(--sig-strong); font-size:13px; letter-spacing:.14em }
.vb-step h3 { margin-top:.6rem; font-size:21px; color:var(--muted); transition:color .3s var(--ease) }
.vb-step p { margin-top:.5rem; max-width:44ch; font-size:15px; line-height:1.7; color:var(--muted) }
.vb-step.on { border-top-color:var(--ink) }
.vb-step.on h3 { color:var(--ink) }
.vb-step.on p { color:var(--ink-soft) }
.vb-step:last-child { min-height:0 }
@media (min-width: 1024px) {
    .vb { grid-template-columns:5fr 7fr; gap:4rem }
    .vb-stage { grid-column:2; grid-row:1; align-self:start; top:calc(50vh - 19rem); padding:0; background:none }
    .vb-steps { grid-column:1; grid-row:1; padding:8vh 0 18vh }
    .vb-step { min-height:62vh }
    .vb-pin { display:contents }
}
/* Mobile : la section est épinglée. Fenêtre + texte de l'étape restent fixes sous le header,
   la hauteur de .vb donne la course de scroll, et pages.js choisit l'étape selon la progression.
   Sans JS, tout reste dans le flux (fenêtre finale puis liste des étapes). */
@media (max-width: 1023px) {
    .js .vb { display:block; height:calc(var(--vb-n, 5) * 70vh) }
    .js .vb-pin {
        position:sticky; top:4rem; height:calc(100vh - 4rem); height:calc(100svh - 4rem);
        display:flex; flex-direction:column; justify-content:center; padding-bottom:5.5rem; background:var(--paper);
    }
    .js .vb-stage { position:static; padding:0; background:none; width:100%; max-width:calc((100svh - 25rem) * 1.3); margin:0 auto }
    .js .vb-steps { display:grid; margin-top:1rem }
    .js .vb-step { grid-area:1 / 1; min-height:0; padding:1rem 0 0; border-top-color:var(--ink); opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none }
    .js .vb-step.on { opacity:1; transform:none; pointer-events:auto }
    .js .vb-step h3 { margin-top:.4rem; font-size:19px }
    .js .vb-step p { font-size:14.5px; line-height:1.6 }
}
@media (prefers-reduced-motion: reduce) {
    .vb-stage *, .vb-stage *::before, .vb-step { transition:none !important; animation:none !important }
}

/* Avec une agence / après la formation */
.vb-cmp { margin-top:2.5rem; border-bottom:1px solid var(--line) }
.vb-cmp-row { display:grid; grid-template-columns:1fr; gap:.25rem; padding:1rem 0; border-top:1px solid var(--line); font-size:15px; line-height:1.55 }
.vb-cmp-row b { font-weight:600; letter-spacing:-.01em }
.vb-cmp-row span:nth-child(2) { color:var(--muted) }
.vb-cmp-row span:nth-child(2)::before { content:'Agence · '; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em }
.vb-cmp-row span:nth-child(3) { color:var(--ink) }
.vb-cmp-row span:nth-child(3)::before { content:'Vous · '; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--sig-strong) }
.vb-cmp-hd { display:none }
@media (min-width: 768px) {
    .vb-cmp-row { grid-template-columns:1.1fr 1fr 1fr; gap:2rem; align-items:baseline }
    .vb-cmp-row span::before { content:none !important }
    .vb-cmp-hd { display:grid; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
    .vb-cmp-hd span:nth-child(3) { color:var(--sig-strong) }
}
.vb-note { margin-top:1.75rem; max-width:68ch; font-size:15px; line-height:1.7; color:var(--ink-soft) }
.vb-note a { color:var(--ink) }