/* ProofLivo, site vitrine. Direction du 10 octobre 2026 (soir), sur le modèle montré par le commanditaire : page
   claire et énergique, accent turquoise, grille légère en fond des sections alternées, cartes nettes, maquette
   d'interface dans le hero, vidéo dans un cadre de navigateur. Une seule famille, Manrope, commune à la page client.
   Tokens centralisés ici ; voir documentation/site/design-system.md. */
:root {
  --bg: #FFFFFF; --bg-alt: #F8FAFB; --surface: #FFFFFF; --ink: #0F172A; --ink-2: #475569; --ink-3: #94A3B8;
  --border: #E2E8F0; --border-strong: #CBD5E1; --grid: rgba(15, 23, 42, .045);
  --accent: #087F8C; --accent-hover: #066670; --accent-soft: #E6F5F4; --accent-line: #BFE6E3;
  --ok: #15803D; --ok-bg: #DCFCE7; --wait: #B45309; --wait-bg: #FEF3C7; --fix: #B91C1C; --fix-bg: #FEE2E2; --prod: #1D4ED8; --prod-bg: #DBEAFE;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-accent: 0 8px 24px rgba(8, 127, 140, .22);
  --container: 1240px; --gutter: 20px; --section: clamp(64px, 8vw, 112px);
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--accent);
}
@media (min-width: 1024px) { :root { --gutter: 40px; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.75rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
img, svg { max-width: 100%; height: auto; display: block; }
em, .italic { font-style: normal; color: var(--accent); font-weight: inherit; }
.accent { color: var(--accent); background-image: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px); background-size: 100% 4px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 6px; }
.closing .accent { background-image: repeating-linear-gradient(90deg, #7FD7D3 0 10px, transparent 10px 16px); color: #7FD7D3; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r); z-index: 100; }
.skip:focus { left: 16px; }
.small { font-size: .92rem; } .muted { color: var(--ink-2); }
.prose { font-size: 1.08rem; line-height: 1.6; }
.prose p { max-width: 62ch; }
.prose-list { padding-left: 1.2em; } .prose-list li { margin-bottom: .4em; }
.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.kicker::before, .eyebrow::before { content: ''; width: 28px; height: 3px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px); }
.note { font-size: .92rem; color: var(--ink-2); margin: 14px 0 0; }
.center { text-align: center; }
.center .section-head { margin-left: auto; margin-right: auto; }
.center .lead, .center p { margin-left: auto; margin-right: auto; }

/* Fond quadrillé des sections alternées, atténué vers le haut */
.grid-bg { background-color: #F6FAFA; background-image: linear-gradient(rgba(8, 127, 140, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 127, 140, .14) 1px, transparent 1px), linear-gradient(rgba(8, 127, 140, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 127, 140, .06) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hero.grid-bg { position: relative; overflow: hidden; }
.hero.grid-bg::before { content: ''; position: absolute; right: -10%; top: -20%; width: 60%; height: 140%; background: radial-gradient(closest-side, rgba(8, 127, 140, .16), transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: var(--r); font-family: var(--font); font-weight: 700; font-size: 1.02rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; }
.btn:disabled, .btn[aria-disabled='true'] { background: var(--border); color: var(--ink-3); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-sm { min-height: 42px; padding: 8px 16px; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }

/* Statuts et versions */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 6px; font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--border); color: var(--ink-2); }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-wait { background: var(--wait-bg); color: var(--wait); }
.status-fix { background: var(--fix-bg); color: var(--fix); }
.status-ok { background: var(--ok-bg); color: var(--ok); }
.status-prod { background: var(--prod-bg); color: var(--prod); }
.status-neutral { background: var(--border); color: var(--ink-2); }
.version { display: inline-block; font-weight: 800; font-size: .8rem; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-hover); }

/* En-tête */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.brand svg { width: 36px; height: 36px; }
.brand span b { color: var(--accent); }
.nav { display: none; align-items: center; gap: 2px; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: .98rem; }
.nav a:hover { color: var(--ink); background: var(--bg-alt); }
.nav-right { display: none; align-items: center; gap: 12px; }
.lang { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .95rem; padding: 10px 10px; border-radius: 8px; }
.lang:hover { background: var(--bg-alt); color: var(--ink); }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.mobile-nav { display: none; border-bottom: 1px solid var(--border); background: var(--surface); padding: 8px var(--gutter) 20px; }
.mobile-nav[data-open='true'] { display: block; }
.mobile-nav a { display: block; padding: 12px 8px; color: var(--ink); text-decoration: none; font-weight: 600; min-height: 44px; }
.mobile-nav .btn { width: 100%; margin-top: 8px; }
@media (min-width: 1024px) { .nav, .nav-right { display: flex; } .menu-btn, .mobile-nav { display: none !important; } }

/* Sections */
section.block { padding: var(--section) 0; }
.rubric { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rubric .folio { color: var(--ink-3); letter-spacing: .04em; }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.page-head { padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 48px); }
.page-head .cols { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .page-head .cols { grid-template-columns: 1.1fr .9fr; } }
.breadcrumb { font-size: .9rem; color: var(--ink-2); margin: 0 0 14px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); }

/* Hero */
.hero { padding: clamp(48px, 8vw, 112px) 0 clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 56px; } }
.hero h1 { margin-bottom: 20px; max-width: 16ch; }
.hero .problem { font-size: 1.15rem; font-weight: 600; color: var(--ink); max-width: 44ch; margin-bottom: 10px; }
.hero .solution { max-width: 52ch; }
.hero .note { margin-top: 14px; }

/* Maquette d'interface du hero : la liste des dossiers, en HTML, avec les vrais statuts */
.mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); }
.mock-bar { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.mock-foot { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.mock-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: .85rem; color: var(--ink-2); }
.mock-bar .dots { display: inline-flex; gap: 5px; }
.mock-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mock-bar .right { margin-left: auto; color: var(--accent); font-weight: 700; }
.mock table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mock th { text-align: left; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.mock td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mock td:first-child { font-weight: 700; white-space: nowrap; }
.mock td:last-child, .mock th:last-child { text-align: right; }
.mock-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; background: var(--bg-alt); font-size: .88rem; color: var(--ink-2); }
.mock-foot b { color: var(--ok); font-weight: 700; }
.mock-foot .bar { flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.mock-foot .bar i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 999px; }
.mock { position: relative; }
.mock-stamp { position: absolute; top: -18px; right: 22px; padding: 6px 12px 5px; border: 2.5px solid var(--ok); border-radius: 6px; color: var(--ok); background: rgba(255, 255, 255, .92); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: var(--shadow); }
.mock-stamp::after { content: ''; position: absolute; inset: 2px; border: 1px solid var(--ok); border-radius: 3px; opacity: .5; }
@media (prefers-reduced-motion: no-preference) { .mock-stamp { animation: stamp-in 380ms cubic-bezier(.2, .9, .3, 1.2) 900ms both; } @keyframes stamp-in { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } } }

/* Fonctions : quatre cartes à icône et une liste à coches */
.features { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .features { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.tile { padding: 26px 24px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; gap: 10px; align-content: start; }
.tile:nth-child(2n) { border-right: 0; }
.tile:nth-last-child(-n + 2) { border-bottom: 0; }
.tile .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.tile .ico svg { width: 22px; height: 22px; }
.tile h3 { margin: 4px 0 0; font-size: 1.05rem; }
.tile p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.checks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.checks li::before { content: ''; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087F8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; margin-top: 1px; }
.checks b { font-weight: 700; }

/* Film de présentation : cadre 16/9 sombre, bouton de lecture en superposition, chapitres dessous */
.pitch-section { padding-top: 0; }
.pitch-head { max-width: 720px; margin-bottom: 24px; }
.pitch-head h2 { margin: 8px 0 10px; }
.film-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #06343A; box-shadow: 0 30px 80px rgba(6, 52, 58, .28), var(--shadow); }
.film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #06343A; }
.film-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 0; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; cursor: pointer; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: transform 160ms ease; }
.film-play svg { width: 40px; height: 40px; margin-left: 4px; }
.film-play:hover { transform: scale(1.06); }
.film-play:focus-visible { box-shadow: var(--focus); }
.film-frame video:not([poster]) ~ .film-play, .film-frame.playing .film-play { display: none; }
.film-foot { padding: 16px 4px 0; }
.film-foot .chapters { margin-bottom: 10px; }
@media (min-width: 640px) { .film-foot .chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Vidéo dans un cadre de navigateur */
.video-section .video-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .video-section .video-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.video-frame { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden; }
.video-frame .mock-bar { background: var(--bg-alt); }
.video-frame video { display: block; width: 100%; height: auto; background: #0f172a; aspect-ratio: 16 / 10; }
.video-frame .video-foot { padding: 14px 16px; font-size: .9rem; color: var(--ink-2); display: grid; gap: 8px; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 18px; }
@media (min-width: 640px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chapters li { display: grid; grid-template-columns: 3em 1fr; gap: 8px; }
.chapters button { all: unset; cursor: pointer; color: var(--ink); font-weight: 600; }
.chapters button:hover { color: var(--accent); text-decoration: underline; }
.chapters button:focus-visible { box-shadow: var(--focus); border-radius: 4px; }
.chapters .t { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.video-dialog { width: min(94vw, 1400px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-lg); background: #0f172a; color: #fff; overflow: hidden; }
.video-dialog::backdrop { background: rgba(15, 23, 42, .86); }
.video-dialog video { display: block; width: 100%; height: auto; max-height: 90vh; background: #0f172a; }
.video-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; display: grid; place-items: center; }
.video-close svg { width: 22px; height: 22px; }
.video-close:hover { background: var(--accent); }
.video-close:focus-visible { box-shadow: 0 0 0 3px #fff; }

/* Cartes génériques (problèmes, guides, vues) */
.cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow); transition: transform 120ms ease, border-color 120ms ease; }
.card:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.card h3 { margin: 0; }
.card p { margin: 0; font-size: .97rem; color: var(--ink-2); }
.card .answer { color: var(--ink); font-weight: 600; border-top: 1px solid var(--border); padding-top: 12px; }
.card .answer::before { content: ''; display: inline-block; width: 14px; height: 10px; margin-right: 8px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg) translateY(-3px); }

/* Preuve et confiance : garanties vérifiables, témoignages réels seulement */
.social .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.social .section-head .lead { margin-left: auto; margin-right: auto; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 22px 54px; position: relative; display: grid; gap: 6px; font-size: .95rem; color: var(--ink-2); }
.trust li::before { content: ''; position: absolute; left: 20px; top: 24px; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087F8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.trust strong { color: var(--ink); font-size: 1rem; }
.quotes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quotes blockquote { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.quotes blockquote p { margin: 0 0 12px; font-size: 1.02rem; }
.quotes footer { font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.early { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; text-align: center; }
.early p { margin: 0; color: var(--ink-2); max-width: 60ch; }

/* Vues annotées : capture et liste */
.annot { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .annot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } .annot.flip > :first-child { order: 2; } }
.annot dl { margin: 0; display: grid; gap: 16px; }
.annot dt { font-weight: 700; font-size: 1.02rem; }
.annot dd { margin: 4px 0 0; color: var(--ink-2); max-width: 46ch; }
.annot .more { margin-top: 22px; }

/* Figures : captures réelles dans un cadre */
figure.shot { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
figure.shot img { width: 100%; height: auto; }
figure.shot figcaption { font-size: .88rem; color: var(--ink-2); padding: 10px 14px; border-top: 1px solid var(--border); }
figure.shot figcaption b { color: var(--ink); margin-right: 6px; }
figure.shot.phone { max-width: 320px; }
figure.shot.phone img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.article figure.shot.phone, .sec figure.shot.phone, .with-aside figure.shot.phone { max-width: none; background: var(--bg-alt); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.article figure.shot.phone img, .sec figure.shot.phone img, .with-aside figure.shot.phone img { max-width: 300px; margin: 28px auto 0; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.article figure.shot.phone figcaption, .sec figure.shot.phone figcaption, .with-aside figure.shot.phone figcaption { background: var(--surface); margin-top: 24px; }
.shots-2 { display: grid; gap: 20px; margin: 20px 0; }
@media (min-width: 640px) { .shots-2 { grid-template-columns: repeat(2, minmax(0, 320px)); } }
.wide-fig { margin: 28px 0; }

/* Cas réel : étapes datées */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.timeline li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); }
.timeline .when { color: var(--ink-3); font-size: .85rem; font-weight: 700; }
.timeline .text { margin: 0; font-size: .95rem; }

/* Encadrés, citations, registre (pages intérieures) */
.box { background: var(--accent-soft); border-radius: var(--r); padding: 16px 18px; margin: 18px 0; }
.box .label { font-weight: 800; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.box p { margin: 0; max-width: none; }
.callout { background: var(--wait-bg); border-radius: var(--r); padding: 16px 18px; margin: 24px 0; }
.pull { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.3; border-left: 4px solid var(--accent); padding-left: 18px; max-width: 26ch; }
.two-col { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; } }
.page-head figure.shot { max-width: none; }
.running { font-size: 1.15rem; line-height: 1.55; max-width: 66ch; }
.running a { font-weight: 700; }
.ledger { display: grid; gap: 20px; }
.ledger-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; display: grid; gap: 10px 32px; }
@media (min-width: 800px) { .ledger-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ledger-row h3 { margin: 0 0 6px; } .ledger-row p { margin: 0; color: var(--ink-2); }
.ledger-row .a p { color: var(--ink); font-weight: 600; }
.chron { display: grid; gap: 40px; }
.entry { display: grid; gap: 8px; }
@media (min-width: 900px) { .entry { grid-template-columns: 140px 1fr; gap: 24px; } }
.entry .when { font-weight: 700; color: var(--ink-3); }
.entry .text { font-size: 1.05rem; max-width: 60ch; }
.with-aside { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .with-aside { grid-template-columns: 1fr 320px; } .with-aside.phone-left { grid-template-columns: 300px 1fr; } }
.index { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.index li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.index .num { font-weight: 800; color: var(--accent); font-size: .85rem; padding-top: 4px; }
.index h3 { margin: 0 0 4px; } .index h3 a { text-decoration: none; color: var(--ink); }
.index p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.index .go { grid-column: 2; font-weight: 700; font-size: .92rem; }

/* Tarifs */
.center .illustrative { display: table; margin-left: auto; margin-right: auto; }
.illustrative { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wait); background: var(--wait-bg); border-radius: 6px; padding: 5px 10px; margin-bottom: 18px; }
.tariff { display: grid; gap: 24px; max-width: 900px; }
.center .tariff { margin: 0 auto; }
@media (min-width: 720px) { .tariff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tariff .row { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px 28px 28px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow); }
.tariff .row:nth-child(2) { border-color: var(--accent); border-width: 2px; }
.tariff h3 { margin: 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tariff .row:nth-child(2) h3 { color: var(--accent); }
.tariff .price { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tariff .price small { font-size: 1rem; font-weight: 600; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
.tariff ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; }
.tariff li { position: relative; padding-left: 32px; font-size: .98rem; }
.tariff li::before { content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087F8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 13px; background-position: center; background-repeat: no-repeat; }
.included { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.included li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; font-size: .95rem; }
.count-ex { display: grid; gap: 14px; margin: 18px 0; }
@media (min-width: 720px) { .count-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.count-ex div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; font-size: .95rem; }
.count-ex b { display: block; margin-bottom: 4px; }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 12px; padding: 0 20px; }
.faq details[open] { border-color: var(--accent-line); }
.faq summary { display: flex; gap: 14px; align-items: center; cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 1.04rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .n { display: none; }
.faq summary::after { content: '+'; margin-left: auto; color: var(--accent); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq .a { margin: 0 0 18px; color: var(--ink-2); max-width: none; }

/* Fermeture */
.closing { background: #0B3B40; color: #fff; background-image: radial-gradient(circle at 85% 20%, rgba(127, 215, 211, .25), transparent 45%); border-radius: var(--r-xl); padding: clamp(32px, 6vw, 64px); text-align: center; display: grid; justify-items: center; }
.closing h2 { color: #fff; max-width: 22ch; }
.closing p { max-width: 56ch; color: rgba(255, 255, 255, .78); }
.closing .actions { justify-content: center; }
.closing .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.closing .btn-primary { background: #fff; color: #0B3B40; box-shadow: none; }
.closing .btn-primary:hover { background: #E6F5F4; color: #0B3B40; }
.closing .btn-secondary:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding: 48px 0 32px; margin-top: var(--section); font-size: .95rem; }
.site-footer .cols { display: grid; gap: 28px; }
@media (min-width: 720px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer strong { display: block; color: var(--ink); }
.site-footer ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .legal { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 16px; color: var(--ink-2); font-size: .88rem; }
.site-footer .legal p { max-width: none; margin: 0 0 6px; }

/* Pages fonctionnalités : texte et figure côte à côte, fiche technique, limites */
.sec { display: grid; gap: 28px; align-items: center; margin-bottom: clamp(36px, 6vw, 64px); }
@media (min-width: 900px) { .sec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.sec .text p { max-width: 56ch; }
.spec-table { margin: 0; display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px 20px; box-shadow: var(--shadow); }
.spec-table .r { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: .96rem; }
.spec-table .r:first-child { border-top: 0; }
.spec-table dt { color: var(--ink-2); font-weight: 600; } .spec-table dd { margin: 0; }
.limits { display: grid; gap: 12px; }
@media (min-width: 720px) { .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.limits div, .limits li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; font-size: .95rem; list-style: none; }
.limits ul { margin: 0; padding: 0; display: contents; }
.limits b { display: block; margin-bottom: 4px; }

/* Guides */
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 900px) { .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-card { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }
.guide-card:hover { color: inherit; border-color: var(--accent-line); transform: translateY(-2px); }
.guide-card figure.shot { order: -1; border: 0; border-radius: 0; box-shadow: none; max-width: none; border-bottom: 1px solid var(--border); }
.guide-card figure.shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.guide-card > div { padding: 8px 22px 22px; display: grid; gap: 8px; }
.guide-card .kicker { margin: 0; font-size: .72rem; }
.guide-card h2, .guide-card h3 { font-size: 1.2rem; margin: 0; }
.guide-card:hover h2, .guide-card:hover h3 { color: var(--accent); }
.guide-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.guide-card .meta { font-size: .85rem; color: var(--ink-3); }
.article-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } }
.toc { position: sticky; top: 86px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; font-size: .92rem; }
.toc strong { display: block; margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover { color: var(--accent); text-decoration: underline; }
.article { max-width: 70ch; }
.article h2 { font-size: 1.6rem; margin-top: 2em; scroll-margin-top: 90px; }
.article h3 { margin-top: 1.5em; }
.article figure.shot { margin: 24px 0; }
.article table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 16px 0; }
.article th, .article td { text-align: left; border-top: 1px solid var(--border); padding: 8px 10px; vertical-align: top; }

/* Démo */
.demo-note { background: var(--wait-bg); border-radius: var(--r); padding: 10px 14px; font-size: .92rem; display: inline-block; }
.demo-shell { min-height: 420px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }

/* Visuel de démonstration (artboard) */
.artboard { position: relative; background: #F3F0E8; border-radius: var(--r); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.artboard .crop { position: absolute; width: 14px; height: 14px; border: 2px solid var(--ink-2); opacity: .5; }
.artboard .crop.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.artboard .crop.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.artboard .crop.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.artboard .crop.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.artboard .label { position: absolute; top: 12px; left: 32px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.artboard .garment { width: 70%; color: #3C6B4F; }
.proof { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.proof-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.proof-body { padding: 14px; }
.proof-foot { padding: 12px 14px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--ink-2); }
.proof-sample { max-width: 420px; }
.mini-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.meta { font-size: .9rem; color: var(--ink-2); }
.state { font-size: .9rem; }
.spec { font-size: .9rem; }
.decision { margin-top: 12px; }

/* Carte Open Graph (rendue par render-og.mjs) */
.og { width: 1200px; height: 630px; background: var(--bg); }