/* KeeFinops : feuille de style du site vitrine. Charte : bleus #0d47ff / #106cff / #128fff, gris #292834 / #919099 / #d9d9d9, or #ffc50b / #ffe000,
   titres DM Serif Display, texte Inter, étiquettes de méthode Manrope. Polices auto-hébergées (OFL), aucune ressource externe. */
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-serif-display-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-serif-display-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/manrope-latin-700-normal.woff2) format("woff2"); }

:root {
  --blue-900: #001f7a; --blue-800: #0033b5; --blue-700: #0a3ed6; --blue-600: #0d47ff; --blue-500: #106cff; --blue-400: #128fff; --blue-300: #5cb0ff; --blue-200: #a3d1ff; --blue-100: #d6ebff; --blue-50: #f5faff;
  --slate-900: #16151c; --slate-800: #292834; --slate-700: #37363f; --slate-600: #55545e; --slate-500: #919099; --slate-400: #a4a3ab; --slate-300: #d9d9d9; --slate-200: #e5e7eb; --slate-100: #f3f4f6; --slate-50: #f8fafc;
  --gold-500: #ffc50b; --gold-400: #ffe000; --gold-100: #fff8d6;
  --success: #27a06f; --error: #d9342b;
  --fg: var(--slate-800); --muted: #6b6a74; --line: #e4e6ea; --bg: #ffffff; --bg-soft: #f8fafc; --bg-tint: #f3f8ff;
  --font-head: "DM Serif Display", Georgia, "Times New Roman", serif; --font-body: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-method: Manrope, Inter, system-ui, sans-serif;
  --radius: 10px; --radius-xl: 24px;
  --shadow-card: 0 1px 3px rgb(13 71 255 / 0.04), 0 4px 16px -4px rgb(13 71 255 / 0.08); --shadow-card-hover: 0 4px 8px rgb(13 71 255 / 0.06), 0 12px 32px -8px rgb(13 71 255 / 0.14);
  --gradient-primary: linear-gradient(135deg, #0d47ff 0%, #128fff 100%); --gradient-cta: linear-gradient(135deg, #0d47ff 0%, #106cff 100%);
  --max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
a { color: var(--blue-600); text-decoration: none; } a:hover { color: var(--blue-700); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; line-height: 1.15; color: var(--slate-800); margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; } .lead { font-size: 1.2rem; color: var(--slate-600); }
.accent { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
section { padding: 72px 0; } section.tint { background: var(--bg-tint); } section.soft { background: var(--bg-soft); } section.dark { background: var(--slate-800); color: #fff; }
section.dark h2, section.dark h3 { color: #fff; } section.dark p { color: #d6d9e0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-method); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 14px; }
.center { text-align: center; } .narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); font-size: 0.9rem; font-weight: 500; }

/* boutons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.98rem; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn.primary { background: var(--gradient-cta); color: #fff; box-shadow: 0 8px 20px -8px rgb(13 71 255 / 0.5); } .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgb(13 71 255 / 0.55); color: #fff; }
.btn.outline { background: #fff; color: var(--slate-800); border-color: var(--slate-300); } .btn.outline:hover { border-color: var(--blue-400); color: var(--blue-700); }
.btn.gold { background: var(--gold-500); color: var(--slate-800); } .btn.gold:hover { background: var(--gold-400); }
.btn.sm { padding: 9px 16px; font-size: 0.9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } .actions.left { justify-content: flex-start; }

/* en-tête */
header.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header.top .container { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { flex-shrink: 0; } .logo img { height: 34px; width: auto; display: block; }   /* logo jamais écrasé par le menu (961 à 1 030 px) */
@media (max-width: 380px) { header.top .container { gap: 14px; } .logo img { height: 30px; } }   /* téléphone étroit (360 px) : logo, bouton Menu et langues sur une ligne */
nav.main { display: flex; gap: 22px; margin-left: 12px; } nav.main a { color: var(--slate-700); font-weight: 500; font-size: 0.95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
nav.main a:hover, nav.main a.on { color: var(--blue-600); border-bottom-color: var(--blue-600); }
nav.main a { white-space: nowrap; } @media (min-width: 961px) and (max-width: 1100px) { nav.main { gap: 14px; } }   /* libellé « Méthodologie » : une seule ligne avant le menu replié */
nav.main a.nav-mobile { display: none; }   /* entrée du seul menu replié (affichée sous 961 px) : l'en-tête de bureau n'a pas la place d'un septième lien */
.lang { margin-left: auto; display: flex; gap: 4px; font-size: 0.85rem; } .lang a { padding: 4px 8px; border-radius: 6px; color: var(--slate-500); font-weight: 600; } .lang a.on { background: var(--blue-50); color: var(--blue-600); }
.utility { background: var(--slate-800); } .utility .container { display: flex; justify-content: flex-end; align-items: center; min-height: 34px; }   /* barre de connexion des clients (au-dessus de l'en-tête, non collante) */
.utility a { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 0.82rem; font-weight: 600; padding: 6px 0; white-space: nowrap; } .utility a:hover, .utility a:focus-visible { color: var(--gold-500); }
.utility .utility-kicker { color: #b9bccb; font-weight: 500; } .utility .utility-kicker::after { content: "·"; margin-left: 7px; color: #6f7386; }
.utility svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
@media print { .utility { display: none; } }
.cta-head { margin-left: 8px; white-space: nowrap; } @media (min-width: 961px) and (max-width: 1100px) { .btn.sm.cta-head { padding: 9px 12px; font-size: 0.86rem; } }   /* bouton d'en-tête sur une ligne avant le menu replié */
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; cursor: pointer; }

/* sous-menus de l'en-tête (entrée à children, templates/base.html) : bouton chevron à côté du lien de la page d'ensemble, sous-liste ouverte par
   site.js (un seul sous-menu ouvert, Échap ou clic ailleurs le ferme) ; zone de clic du bouton de 24 px au moins */
.nav-group { position: relative; display: flex; align-items: center; gap: 0; }
.nav-toggle { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; background: none; border: 0; border-radius: 6px; padding: 0; margin: 0; cursor: pointer; color: var(--slate-500); line-height: 1; }
.nav-toggle::after { content: ""; display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); } .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { color: var(--blue-600); }
.nav-sub { position: absolute; top: calc(100% + 12px); left: -14px; min-width: 270px; list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card-hover); z-index: 30; }
nav.main .nav-sub a { display: block; padding: 8px 10px; border-bottom: 0; border-radius: 8px; } nav.main .nav-sub a:hover, nav.main .nav-sub a[aria-current] { background: var(--bg-tint); }
/* menu replié (bouton Menu) jusqu'à 1 180 px : le menu à deux groupes ne tient pas en dessous ; sous-listes toujours dépliées, menu défilant */
@media (max-width: 1180px) {
  nav.main a.nav-mobile { display: inline; } nav.main { display: none; } .burger { display: inline-block; }
  nav.main.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; max-height: calc(100vh - 68px); overflow-y: auto; background: #fff; padding: 12px 20px 18px; border-bottom: 1px solid var(--line); gap: 8px; margin: 0; }
  .nav-group { flex-direction: column; align-items: flex-start; } .nav-toggle { display: none; }
  .nav-sub[hidden] { display: block; } .nav-sub { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 14px; min-width: 0; background: transparent; }
}
@media (min-width: 961px) and (max-width: 1180px) { .lang { margin-left: 0; } }   /* bouton Menu poussé à droite, contre le choix de langue et le bouton d'en-tête */

/* héros */
.hero { position: relative; overflow: hidden; padding: 96px 0 80px; text-align: center; background: radial-gradient(900px 500px at 15% 10%, rgba(18, 143, 255, 0.10), transparent 60%), radial-gradient(800px 500px at 85% 20%, rgba(13, 71, 255, 0.08), transparent 60%), #fff; }
.hero h1 { margin: 18px auto 20px; max-width: 900px; } .hero .lead { max-width: 760px; margin: 0 auto; }
.trust { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-top: 30px; color: var(--slate-500); font-size: 0.9rem; } .trust span::before { content: "✓"; color: var(--blue-500); margin-right: 6px; font-weight: 700; }

/* grilles et cartes */
.grid { display: grid; gap: 24px; } .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 30px 28px; box-shadow: var(--shadow-card); transition: box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.card:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(13, 71, 255, 0.3); } .card.hl { border-color: rgba(13, 71, 255, 0.4); box-shadow: 0 0 0 1px rgba(13, 71, 255, 0.15), var(--shadow-card-hover); }
.card .icon { width: 52px; height: 52px; border-radius: 16px; background: var(--blue-50); display: grid; place-items: center; color: var(--blue-600); margin-bottom: 18px; font-size: 1.4rem; }
.card h3 { margin-bottom: 6px; } .card .who { font-style: italic; color: var(--muted); font-size: 0.92rem; margin-bottom: 10px; } .card .price { color: var(--blue-600); font-weight: 600; font-size: 1.05rem; margin-bottom: 16px; }
.card ul { list-style: none; padding: 0; margin: 0 0 22px; } .card ul li { position: relative; padding-left: 18px; margin: 8px 0; font-size: 0.95rem; } .card ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-600); }
.card .btn { margin-top: auto; align-self: flex-start; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 10px; } .kpi { text-align: center; padding: 22px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.kpi b { display: block; font-family: var(--font-head); font-size: 2.3rem; color: var(--blue-600); line-height: 1; margin-bottom: 8px; } .kpi span { color: var(--slate-600); font-size: 0.92rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; } .step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; position: relative; }
.step .n { font-family: var(--font-method); font-weight: 700; color: var(--blue-500); font-size: 0.85rem; letter-spacing: .06em; } .step h4 { margin: 6px 0 8px; font-family: var(--font-method); font-weight: 700; font-size: 1.05rem; } .step p { font-size: 0.92rem; color: var(--slate-600); margin: 0; }
.levers .card .pct { font-family: var(--font-head); font-size: 2rem; color: var(--blue-600); margin: 4px 0 10px; }
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .split.rev { grid-template-columns: 0.9fr 1.1fr; } .split.rev > div:first-child { order: 2; }
.split > div > .card { position: sticky; top: 88px; }
.case-head { max-width: 860px; margin-bottom: 32px; } .case-head .lead { margin: 12px 0 0; } .split.aside-first { align-items: start; }   /* cas client : titre court et chapeau au-dessus des colonnes */
.shot { border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-card-hover); overflow: hidden; background: #fff; } .shot img { display: block; }
.check { list-style: none; padding: 0; margin: 0; } .check li { padding-left: 28px; position: relative; margin: 10px 0; } .check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-50); color: var(--blue-600); font-size: 0.8rem; font-weight: 700; display: grid; place-items: center; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; } .faq summary::after { content: "+"; color: var(--blue-600); font-weight: 700; } .faq details[open] summary::after { content: "–"; } .faq p { margin: 10px 0 0; color: var(--slate-600); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--blue-50); color: var(--blue-700); margin-right: 6px; }
.pill.gold { background: var(--gold-100); color: #7a5a00; }
.prose { max-width: 780px; overflow-wrap: break-word; } .prose h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); } .prose h2 { margin-top: 2em; } .prose h3 { margin-top: 1.6em; } .prose li { margin: 6px 0; } .prose blockquote { border-left: 3px solid var(--blue-400); margin: 1em 0; padding: 4px 18px; color: var(--slate-600); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; } .prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .prose th { background: var(--bg-soft); }
.cta-band { background: var(--gradient-primary); color: #fff; border-radius: var(--radius-xl); padding: 56px 40px; text-align: center; } .cta-band h2 { color: #fff; } .cta-band p { color: #e6efff; } .cta-band .btn.primary { background: #fff; color: var(--blue-700); box-shadow: none; } .cta-band .btn.outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.cta-band .btn.outline:hover { color: #fff; border-color: #fff; }
form.contact { display: grid; gap: 14px; max-width: 640px; } form.contact label { font-weight: 600; font-size: 0.92rem; } form.contact input, form.contact select, form.contact textarea { width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--slate-300); border-radius: 10px; background: #fff; } form.contact textarea { min-height: 140px; }
form.contact .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .note { font-size: 0.85rem; color: var(--slate-500); }
.resources .card small { color: var(--slate-500); display: block; margin-bottom: 8px; }
.logos { display: flex; flex-wrap: wrap; gap: 18px 36px; justify-content: center; align-items: center; color: var(--slate-500); font-weight: 600; font-size: 0.95rem; }
.logos img { height: 36px; width: auto; filter: grayscale(1); opacity: 0.75; transition: opacity .15s ease, filter .15s ease; } .logos img:hover { filter: none; opacity: 1; }
.tablewrap { overflow-x: auto; } table.cmp { border-collapse: collapse; width: 100%; font-size: 0.95rem; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
table.cmp th, table.cmp td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; } table.cmp thead th { background: var(--bg-tint); font-family: var(--font-method); font-weight: 700; font-size: 0.85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-700); }
table.cmp tbody th { font-weight: 600; color: var(--slate-800); width: 22%; } table.cmp td p, table.cmp th p { margin: 0; }
section.article { padding-top: 48px; } .narrow-article { max-width: 760px; margin: 0 auto; } .narrow-article h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); } .meta { color: var(--slate-500); font-size: 0.9rem; }
.narrow-article img { border-radius: 12px; }
form.contact .ok, form.contact .ko { padding: 12px 14px; border-radius: 10px; font-size: 0.95rem; } form.contact .ok { background: #e8f7f0; color: #15683f; } form.contact .ko { background: #fdecea; color: #8a1f17; }
form.contact .ko { margin: 8px 0 0; } form.contact [aria-invalid="true"] { border-color: #8a1f17; }   /* saisie à corriger : message sous le champ en cause (site.js) */
/* demande d'un document (section request) : case d'accord et son libellé sur une ligne, contour de focus visible ; aperçus de l'exemple à droite */
form.contact .consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; } form.contact .consent label { font-weight: 400; font-size: 0.9rem; line-height: 1.5; }
form.contact input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--blue-600); } form.contact input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #8a1f17; outline-offset: 2px; }
form.contact input:focus-visible, form.contact textarea:focus-visible, form.contact select:focus-visible, form.contact button:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.split.request { align-items: start; } .split.request form.contact { margin-top: 24px; } .request-aside { display: grid; gap: 24px; } .preview { margin: 0; } .preview .shot img { width: 100%; height: auto; } .preview figcaption { margin-top: 10px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9rem; margin: 10px 0 24px; } .toc a { color: var(--slate-600); } .toc a:hover { color: var(--blue-600); }

/* chaîne de la dépense IT (section chain) : données dans site.yaml (chain), variante compacte (liens vers les offres) ou complète (ancres) ;
   texte blanc seulement sur --blue-600, --blue-500 et --slate-800 (contraste d'au moins 4,5:1), jamais sur --blue-400 */
.chain { display: grid; gap: 12px; margin-top: 28px; }
.chain-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; padding: 12px 18px; border-radius: 12px; color: #fff; font-family: var(--font-method); }
.chain-bar:hover { color: #fff; filter: brightness(1.08); } .chain-bar span { font-weight: 400; font-size: .9rem; opacity: .92; }
.chain-bar.start { background: var(--blue-600); } .chain-bar.keep { background: var(--blue-500); } .chain-bar.base { background: var(--slate-800); }
.chain-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chain-stage { background: #fff; border: 1px solid var(--blue-500); border-radius: 14px; padding: 16px 18px; }
.chain-stage h3 { font-family: var(--font-method); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 10px; }
.chain-stage ul { list-style: none; margin: 0; padding: 0; } .chain-stage li { margin: 6px 0; } .chain-stage a { color: var(--slate-800); font-weight: 600; }
.chain-flag { font-size: .8rem; color: var(--slate-600); border-bottom: 2px solid var(--gold-500); }
.chain-loop { text-align: center; color: var(--slate-600); font-size: .92rem; margin: 4px 0 0; }
@media (max-width: 960px) { .chain-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .chain-stages { grid-template-columns: 1fr; } }

/* vitrine d'écrans (section showcase) : défilement horizontal natif par défaut ; is-pinned (site.js) : section épinglée sous l'en-tête,
   écrans décalés par --shift (pixels) ; jamais d'overflow hidden sur section, main ou body (l'en-tête collant en dépend) */
.showcase { --screen-w: min(86vw, 880px); }
.showcase.dark h2 { color: #fff; } .showcase.dark .lead { color: var(--slate-300); } .showcase.dark .eyebrow { color: var(--gold-500); }
.showcase-track { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-top: 28px; scrollbar-width: none; }
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-track:focus-visible, .showcase button:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; }
.showcase-list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 4px max(20px, calc((100vw - var(--max)) / 2 + 20px)) 18px; width: max-content; }
.screen { flex: 0 0 auto; width: var(--screen-w); scroll-snap-align: center; } .screen figure { margin: 0; }
.screen-frame { border-radius: 14px; overflow: hidden; background: var(--slate-900); border: 1px solid var(--slate-700); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.screen-bar { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 14px; background: var(--slate-900); color: var(--slate-400); font-size: .78rem; border-bottom: 1px solid var(--slate-700); }
.screen-dots { width: 44px; height: 10px; background: radial-gradient(circle at 5px 5px, var(--slate-600) 4px, transparent 5px), radial-gradient(circle at 22px 5px, var(--slate-600) 4px, transparent 5px), radial-gradient(circle at 39px 5px, var(--slate-600) 4px, transparent 5px); }
.screen-frame img { display: block; width: 100%; height: auto; }
.screen figcaption { margin-top: 14px; font-size: .95rem; color: var(--slate-300); } .screen figcaption strong { color: #fff; font-family: var(--font-method); font-weight: 700; margin-right: 6px; }
.showcase:not(.dark) figcaption { color: var(--slate-600); } .showcase:not(.dark) figcaption strong { color: var(--slate-800); }
.showcase-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; } .showcase-controls[hidden] { display: none; }
.sc-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--slate-400); background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sc-arrow[aria-disabled="true"] { opacity: .4; cursor: default; }
/* bouton pause / lecture du défilement automatique : deux barres en lecture (l'action proposée est la pause), triangle à l'arrêt */
.sc-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--slate-400); background: transparent; color: inherit; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.sc-play span { display: block; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.sc-play[data-state="playing"] span { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }
.sc-play:hover, .sc-arrow:not([aria-disabled="true"]):hover { border-color: var(--gold-500); }
.sc-dots { display: flex; gap: 8px; } .sc-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 6px; background: var(--slate-400); cursor: pointer; }
.sc-dots button[aria-current="true"] { width: 26px; background: var(--gold-500); }
/* téléphone : boutons ronds jamais écrasés (40 px, cible WCAG 2.5.8), points resserrés pour que la rangée tienne avec douze écrans, sans
   défilement horizontal de la page (360 et 320 px contrôlés, tests/test_composants.py) ; les points restent un doublon des flèches */
.sc-arrow, .sc-play { flex: 0 0 40px; } .sc-dots { min-width: 0; } .sc-dots button { flex: 0 0 auto; }
@media (max-width: 480px) { .showcase-controls { gap: 10px; } .sc-dots { gap: 5px; } .sc-dots button { width: 8px; height: 8px; } .sc-dots button[aria-current="true"] { width: 18px; } }
@media (max-width: 359px) { .showcase-controls { gap: 8px; } .sc-dots { gap: 4px; } .sc-dots button { width: 6px; height: 6px; } .sc-dots button[aria-current="true"] { width: 12px; } }
.showcase.is-pinned { padding: 0; --screen-w: min(64vw, 900px, calc((100vh - 68px - 330px) * 1.6)); }
.showcase.is-pinned .showcase-pin { position: sticky; top: 68px; height: calc(100vh - 68px); overflow-x: clip; display: flex; flex-direction: column; justify-content: center; }
.showcase.is-pinned .showcase-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 4px; } .showcase.is-pinned .showcase-head .lead { font-size: 1rem; margin: 0; }
.showcase.is-pinned .showcase-track { overflow: visible; scroll-snap-type: none; margin-top: 18px; }
.showcase.is-pinned .showcase-list { transform: translate3d(calc(var(--shift, 0) * -1px), 0, 0); padding-bottom: 6px; }
/* section épinglée : marges verticales resserrées pour qu'elle tienne dans la fenêtre (recette à 1 440 x 900, 1 366 x 768, 1 280 x 720, 961 x 700) */
.showcase.is-pinned .eyebrow { margin-bottom: 6px; } .showcase.is-pinned .showcase-controls { margin-top: 4px; } .showcase.is-pinned .actions { margin-top: 10px; }
@media print { .showcase { height: auto !important; } .showcase-pin { position: static !important; height: auto !important; } .showcase-list { display: block; width: auto; padding: 0; transform: none !important; } .screen { width: 100%; break-inside: avoid; margin-bottom: 24px; } .showcase-controls { display: none !important; }
  /* bande sombre : les navigateurs n'impriment pas les fonds par défaut ; titres et légendes en encre foncée sur papier blanc */
  .showcase.dark { background: #fff; } .showcase.dark h2, .showcase.dark .screen figcaption strong { color: var(--slate-800); }
  .showcase.dark .lead, .showcase.dark .screen figcaption { color: var(--slate-600); } .showcase.dark .eyebrow { color: var(--blue-600); } }

/* pied de page */
footer.site { background: var(--slate-800); color: #c9ccd6; padding: 56px 0 28px; font-size: 0.92rem; } footer.site a { color: #e6e8ee; } footer.site a:hover { color: #fff; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } footer.site h4 { color: #fff; font-family: var(--font-method); font-weight: 700; font-size: 0.9rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }
footer.site ul { list-style: none; padding: 0; margin: 0; } footer.site li { margin: 7px 0; } footer.site .base { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 36px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: #9ea3b1; font-size: 0.85rem; }
footer.site .logo img { height: 30px; filter: brightness(0) invert(1); }

@media (max-width: 960px) {
  .grid.c3, .grid.c4, .kpis, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split, .split.rev { grid-template-columns: 1fr; } .split.aside-first > div:last-child { order: -1; } .case-head { margin-bottom: 24px; } footer.site .cols { grid-template-columns: 1fr 1fr; }
  .cta-head { display: none; } .hero { padding: 64px 0 56px; }
}
@media (max-width: 600px) {
  .grid.c2, .grid.c3, .grid.c4, .kpis, .steps { grid-template-columns: 1fr; } form.contact .row { grid-template-columns: 1fr; } footer.site .cols { grid-template-columns: 1fr; } section { padding: 52px 0; } .cta-band { padding: 40px 22px; }
}