/* Flowxify : mise en page des pages du site (accueil et pages à venir).
   Les composants et les valeurs viennent de systeme.css, chargé avant ce fichier.
   Ici, seulement l'agencement propre aux pages ; aucune valeur qui existe déjà en token. */

/* Base de page */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--espace-18); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-systeme); font-size: 17px; line-height: 1.6; color: var(--encre); background: var(--surface); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
h2, .section-heading h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
button, a, input, select { font: inherit; }
button { cursor: pointer; color: inherit; }

.wrap { max-width: var(--largeur-site); margin: 0 auto; padding-left: var(--espace-8); padding-right: var(--espace-8); }
.section { padding-top: var(--espace-24); padding-bottom: var(--espace-24); }
.serif, .muted { color: var(--gris); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gris); }

/* Marque (.marque, systeme.css) : le symbole en dégradé est la seule touche de couleur hors bleu */

/* Bandeau (.bandeau, systeme.css) : gouttières alignées sur .wrap, liens de navigation */
.bandeau { padding-left: var(--espace-8); padding-right: var(--espace-8); gap: 1.5rem; }
.bandeau nav { display: flex; gap: 1.5rem; font-size: 0.875rem; }
.bandeau nav a { color: var(--encre); opacity: 0.8; }
.bandeau nav a:hover { opacity: 1; }
.skip { position: absolute; top: -100px; left: var(--espace-4); z-index: 100; padding: 0.75rem 1rem; background: var(--encre); color: var(--surface); border-radius: var(--rayon-pilule); }
.skip:focus { top: var(--espace-3); }

/* Hero : le texte à gauche, l'application réelle à droite, posée sur le fond gris */
.hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--espace-14); align-items: center; padding-top: var(--espace-18); padding-bottom: var(--espace-18); }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 0.5rem; }
.hero h1 { font-size: clamp(2.75rem, 5.6vw, 4.5rem); margin: 1.25rem 0 1.5rem; line-height: 1.02; letter-spacing: -0.035em; }
.hero-copy > p { font-size: 1.1875rem; line-height: 1.55; color: var(--gris); max-width: 28rem; }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-note { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--gris-clair); }

.hero-stage { position: relative; min-width: 0; padding: var(--espace-5) var(--espace-5) 0; background: var(--fond); border-radius: var(--rayon-grand); }
.stage-top { display: flex; justify-content: space-between; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gris); }
.stage-top i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--bleu); }
.orbital-label { margin: 18px 0 var(--espace-4); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--encre); }
.hero-app { overflow: hidden; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); }
.app-top { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; font-size: 0.8125rem; border-bottom: 1px solid var(--trait); }
.app-icon { color: var(--bleu); }
.app-live { margin-left: auto; padding: 0.1rem 0.6rem; font-size: 0.6875rem; font-weight: 600; color: var(--lien); background: var(--bleu-pale); border-radius: var(--rayon-pilule); }
.app-layout { display: flex; }
.app-layout aside { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 44px; padding: 1rem 0; font-size: 0.9375rem; color: var(--gris-clair); border-right: 1px solid var(--trait); background: var(--fond); }
.side-active { color: var(--bleu); }
.app-body { flex: 1; min-width: 0; padding: 1.125rem 1.25rem 1rem; }
.app-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.app-heading small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.app-heading h3 { margin-top: 0.25rem; font-size: 1.125rem; }
.period { display: inline-flex; align-items: center; min-height: 28px; padding: 0 0.7rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule); }
.mini-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.5rem; margin: 1rem 0; }
.mini-kpis > div { padding: 0.75rem 0.85rem; border-radius: 10px; box-shadow: var(--ombre-carte); }
.mini-kpis small { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--gris); }
.mini-kpis strong { display: block; margin-top: 0.25rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
.mini-kpis em { font-style: normal; font-size: 0.875rem; color: var(--gris); }
.mini-kpis span { display: block; margin-top: 0.15rem; font-size: 0.6875rem; color: var(--gris-clair); }
.chart-head { display: flex; justify-content: space-between; font-size: 0.75rem; }
.chart-head strong { font-weight: 600; }
.chart-head span { color: var(--gris); }
.chart-head i { display: inline-block; width: 8px; height: 8px; margin-right: var(--espace-1); border-radius: 2px; background: var(--serie); }
.hero-chart { width: 100%; height: auto; margin-top: 0.5rem; overflow: visible; }
.gridline { stroke: var(--grille); fill: none; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--gris-clair); }
.floating-note { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin-top: var(--espace-3); padding: 0.85rem 1rem; text-align: left; background: var(--surface); border: 0; border-radius: var(--rayon); box-shadow: var(--ombre-carte); transition: box-shadow 0.2s ease; }
.floating-note:hover { box-shadow: var(--ombre-douce); }
.floating-note > span:nth-child(2) { flex: 1; }
.floating-note strong { display: block; font-size: 0.8125rem; font-weight: 600; }
.floating-note small { font-size: 0.75rem; color: var(--gris); }
.note-icon { font-size: 1.25rem; color: var(--bleu); }
.floating-note > b { margin-left: 0.25rem; color: var(--lien); font-weight: 500; }
.stage-bottom { display: flex; justify-content: space-between; padding: 0.9rem 0; margin-top: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: var(--lien); border-top: 1px solid var(--trait-fort); }

/* Bandeau des outils */
.tools-strip { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 1.5rem 0; }
.tools-strip .wrap { display: flex; align-items: center; gap: 2rem; }
.tools-strip p { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gris); white-space: nowrap; }
.tools-strip .wrap > div { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex: 1; flex-wrap: wrap; }
.tools-strip span { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--gris-clair); }
.tools-strip a { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--encre); text-decoration: none; }
.tools-strip a:hover { color: var(--lien); }
.tools-strip span:last-child { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--lien); }
.tool-mark { display: none; }

/* Têtes de section */
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: 2.5rem; }
.section-heading .eyebrow { margin-bottom: 1rem; }
.section-heading > p { max-width: 22rem; font-size: 1rem; line-height: 1.55; color: var(--gris); }

/* Univers : quatre cartes sur fond gris, aucune couleur par carte */
.universe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.universe { display: flex; flex-direction: column; padding: 1.5rem; text-align: left; background: var(--fond); border: 0; border-radius: var(--rayon-grand); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.universe:hover { transform: translateY(-4px); box-shadow: var(--ombre-douce); }
.universe-number { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.universe h3 { margin-bottom: 0.75rem; font-size: 1.375rem; min-height: 3.1em; }
.universe p { font-size: 0.9375rem; line-height: 1.55; color: var(--gris); }
.card-link { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 1.5rem; font-size: 0.875rem; font-weight: 500; color: var(--lien); }
.card-link b { font-weight: 500; }
.universe .viz-bars { display: flex; align-items: flex-end; gap: 6px; height: 88px; padding: 14px var(--espace-1); margin: 1rem 0; }
.universe .viz-bars i { width: 100%; height: var(--h); background: var(--serie); border-radius: 3px 3px 0 0; }
.viz-bars i:nth-child(2n) { background: var(--serie-comparaison); }
.viz-flow { display: flex; align-items: center; justify-content: center; height: 88px; margin: 1rem 0; }
.viz-flow span { padding: 0.5rem 0.7rem; font-size: 1.125rem; background: var(--surface); border-radius: 10px; box-shadow: var(--ombre-carte); }
.viz-flow i { width: 18px; height: 1px; background: var(--trait-fort); }
.viz-kanban { display: flex; gap: 6px; height: 88px; padding: 10px var(--espace-1); margin: 1rem 0; }
.viz-kanban > div { flex: 1; padding: 6px; background: var(--surface); border-radius: var(--rayon-moyen); box-shadow: var(--ombre-carte); }
.viz-kanban i { display: block; width: 16px; height: 3px; margin-bottom: var(--espace-2); background: var(--serie); border-radius: 2px; }
.viz-kanban b { display: block; height: 14px; margin-bottom: 5px; background: var(--remplissage); border-radius: 3px; }
.viz-ai { display: flex; align-items: center; justify-content: center; gap: 0.75rem; height: 88px; margin: 1rem 0; font-size: 3rem; color: var(--bleu); }
.viz-ai span { max-width: 6rem; font-size: 0.75rem; line-height: 1.3; color: var(--gris); }

/* Démonstrations (vignettes) */
.explore-section { background: var(--surface); }
.filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-row button { min-height: 34px; padding: 0.25rem 0.9rem; font-size: 0.8125rem; font-weight: 500; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule); }
.filter-row button:hover { background: var(--survol); }
.filter-row button.active { color: var(--surface); background: var(--encre); border-color: var(--encre); }
.filter-row button span { margin-left: 0.4rem; opacity: 0.6; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem 1.5rem; }
.demo-card[hidden] { display: none; }
.demo-thumb { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; min-height: 236px; padding: 1.25rem; overflow: hidden; text-align: left; color: var(--encre); background: var(--fond); border: 0; border-radius: var(--rayon-grand); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.demo-thumb:hover { transform: translateY(-4px); box-shadow: var(--ombre-douce); }
.demo-thumb > div { width: 100%; }
.thumb-tag { position: relative; z-index: 1; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.thumb-kpi { margin-top: 1.25rem; font-size: 2.25rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.thumb-kpi small { display: block; margin-top: 0.35rem; font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.thumb-rental .thumb-kpi { font-size: 1.5rem; }
.thumb-spark { position: absolute; bottom: 1.1rem; left: 1.25rem; font-size: 1.75rem; letter-spacing: 2px; color: var(--serie); white-space: nowrap; }
.round-arrow { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; font-size: 1rem; color: var(--encre); background: var(--surface); border-radius: 50%; box-shadow: var(--ombre-carte); }
.demo-caption { padding-top: 1rem; }
.demo-caption > span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.demo-caption h3 { margin: 0.4rem 0; font-size: 1.25rem; }
.demo-caption p { font-size: 0.9375rem; line-height: 1.5; color: var(--gris); }
.rental-preview { display: grid; gap: 6px; margin-top: 1rem; font-size: 0.8125rem; }
.rental-preview span { display: flex; justify-content: space-between; max-width: 240px; padding: 0.5rem 0.7rem; background: var(--surface); border-radius: var(--rayon-moyen); box-shadow: var(--ombre-carte); }
.rental-preview b { font-weight: 600; color: var(--vert); }
.rental-preview span:last-child b { color: var(--rouge); }
.management-preview { margin-top: 1.25rem; }
.management-preview > span { display: inline-block; margin: 0 var(--espace-1) 10px 0; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 500; background: var(--surface); border-radius: var(--rayon-pilule); box-shadow: var(--ombre-carte); }
.management-preview strong { display: block; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.map-roads { position: absolute; inset: 44px -20px 0; background: repeating-linear-gradient(35deg, transparent 0 35px, var(--surface) 36px 42px, transparent 43px 85px); }
.map-roads i { position: absolute; top: -40px; left: 40%; width: 9px; height: 300px; background: var(--surface); transform: rotate(35deg); }
.map-roads i:nth-child(2) { left: 10%; }
.map-roads i:nth-child(3) { left: 75%; }
.map-roads b { position: absolute; font-size: 1.125rem; line-height: 0.9; color: var(--bleu); border: 5px solid var(--surface); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.map-card { position: absolute; bottom: 1.1rem; left: 1.25rem; padding: 0.6rem 0.8rem; font-size: 0.8125rem; font-weight: 500; background: var(--surface); border-radius: var(--rayon-moyen); box-shadow: var(--ombre-carte); }
.email-sample { width: 100%; max-width: 220px; margin: 0.75rem auto 0; font-size: 0.8125rem; text-align: center; }
.email-sample > span, .email-sample > strong { display: block; padding: 0.6rem; background: var(--surface); border-radius: var(--rayon-moyen); box-shadow: var(--ombre-carte); }
.email-sample > strong { color: var(--lien); }
.email-sample > div { padding: 2px; color: var(--gris-clair); }
.finance-preview { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0.6rem; margin: 1.25rem 0.25rem; }
.finance-preview span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.finance-preview b { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.03em; }
.finance-preview small { font-size: 1rem; color: var(--vert); }
.finance-preview > div { grid-column: span 2; display: flex; gap: var(--espace-1); height: 20px; margin: 0.5rem 0; }
.finance-preview i { width: 40%; background: var(--serie); border-radius: 3px; }
.finance-preview i:nth-child(2) { width: 23%; background: var(--serie-comparaison); }
.finance-preview i:nth-child(3) { width: 17%; background: var(--trait-fort); }
.finance-preview i:nth-child(4) { width: 20%; background: var(--remplissage); }
.board-preview { display: flex; gap: 6px; margin-top: 1.25rem; }
.board-preview > div { flex: 1; min-width: 0; padding: 6px; background: var(--remplissage); border-radius: var(--rayon-moyen); }
.board-preview small { display: block; margin-bottom: var(--espace-2); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.board-preview span { display: block; margin-bottom: 5px; padding: 0.5rem 0.4rem; font-size: 0.6875rem; line-height: 1.3; background: var(--surface); border-radius: 6px; box-shadow: var(--ombre-carte); }
.board-preview i { display: block; margin-top: 6px; font-size: 0.5rem; color: var(--bleu); }
.training-preview { padding-top: 1rem; }
.training-preview strong { font-size: 1.875rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; }
.training-preview em { font-style: normal; color: var(--gris); }
.training-preview > span { display: block; margin-top: 1rem; font-size: 0.75rem; color: var(--gris); }

/* Chemins */
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.path-grid > a, .path-grid > button { display: flex; flex-direction: column; padding: 1.5rem; text-align: left; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-grand); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.path-grid > a:hover, .path-grid > button:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-douce); }
.path-grid span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.path-grid h3 { margin: 1.25rem 0 0.75rem; font-size: 1.25rem; }
.path-grid p { margin-bottom: 1.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--gris); }
.path-grid b { margin-top: auto; font-size: 0.875rem; font-weight: 500; color: var(--lien); }
.possibility-note { max-width: 44rem; margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--gris-clair); }

/* Approche et fondateur */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; background: var(--fond); border-radius: var(--rayon-grand); padding-left: var(--espace-14); padding-right: var(--espace-14); }
.approach-title .eyebrow { margin-bottom: 1.25rem; }
.approach-title > p { max-width: 24rem; margin: 1.5rem 0; font-size: 1.0625rem; line-height: 1.6; color: var(--gris); }
.founder { display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem; align-items: center; }
.founder img { width: 140px; height: 180px; object-fit: cover; object-position: 55% 35%; border-radius: var(--rayon); }
.founder .eyebrow { font-size: 0.6875rem; }
.founder h3 { margin: 0.75rem 0; font-size: 1.375rem; }
.founder p { font-size: 0.9375rem; line-height: 1.6; color: var(--gris); }

/* Confiance */
.trust { padding: 3.5rem var(--espace-8) 4.5rem; }
.trust > p { margin-bottom: 1.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gris); }
.trust > div { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; }
.trust img { max-width: 130px; height: 36px; object-fit: contain; filter: grayscale(1); opacity: 0.55; }

/* Contact : la seule apparition du symbole en grand */
.contact { background: var(--fond); }
.contact-inner { text-align: center; }
.contact .symbole { width: var(--espace-18); height: var(--espace-18); margin: 0 auto 1.5rem; display: block; }
.contact h2 { margin: 1rem auto 1.25rem; font-size: clamp(2.25rem, 5vw, 3.75rem); max-width: 16em; }
.contact p { max-width: 34rem; margin: 0 auto 2rem; font-size: 1.125rem; line-height: 1.6; color: var(--gris); }

footer { display: flex; align-items: center; gap: 2rem; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; flex-wrap: wrap; font-size: 0.8125rem; color: var(--gris); border-top: 1px solid var(--trait); }
footer > div { display: flex; gap: 1.5rem; margin-left: auto; }
footer > div a:hover { color: var(--encre); }
footer > small { font-size: 0.75rem; color: var(--gris-clair); }

/* Fenêtre de démonstration : mêmes composants que l'application MB */
dialog { width: min(1000px, 94vw); max-height: 90dvh; padding: 0; color: var(--encre); background: var(--fond); border: 0; border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
dialog::backdrop { background: var(--voile-dialogue); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog-header, .dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--trait); }
.dialog-header .eyebrow { font-size: 0.6875rem; }
.close-dialog { display: grid; place-items: center; width: 32px; height: 32px; color: var(--gris); background: var(--remplissage); border: 0; border-radius: 50%; }
.dialog-footer { font-size: 0.8125rem; color: var(--gris); border-bottom: 0; border-top: 1px solid var(--trait); }
.dialog-footer a { font-size: 0.875rem; font-weight: 600; color: var(--lien); }
#demo-content { padding: 1.5rem; overflow-x: auto; }
.demo-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
#demo-title { font-size: 1.75rem; }
.demo-subtitle { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--gris); }
.demo-select { min-height: 34px; padding: 0.25rem 0.9rem; font-size: 0.8125rem; font-weight: 500; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule); }
.demo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.demo-kpis > div { padding: 1rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.demo-kpis small { display: block; font-size: 0.8125rem; font-weight: 600; }
.demo-kpis strong { display: block; margin-top: 0.25rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
.demo-kpis span { font-size: 0.75rem; color: var(--gris); }
.big-chart { padding: 1rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.big-chart h3 { font-size: 0.9375rem; }
.bar-chart { display: flex; align-items: flex-end; gap: var(--espace-2); height: 180px; margin: 1.25rem 0 0.5rem; }
.bar-chart > button { position: relative; flex: 1; height: var(--h); min-height: 8px; background: var(--serie); border: 0; border-radius: 3px 3px 0 0; }
.bar-chart > button:hover, .bar-chart > button:focus-visible { background: var(--bleu); }
.bar-chart > button span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 0.6875rem; color: var(--gris); white-space: nowrap; }
.chart-detail { min-height: 1.5rem; margin-top: 2rem; font-size: 0.875rem; color: var(--gris); }
.demo-table { width: 100%; margin-top: 1rem; font-size: 0.8125rem; border-collapse: collapse; }
.demo-table th, .demo-table td { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 1px solid var(--trait); }
.demo-table th { font-size: 0.75rem; font-weight: 600; color: var(--gris); }
.demo-table button { min-height: 28px; padding: 0 0.7rem; font-size: 0.75rem; font-weight: 500; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule); }
.simulation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sim-panel { padding: 1.25rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.sim-panel h3 { margin-bottom: 0.75rem; font-size: 1.0625rem; }
.sim-panel p { font-size: 0.9375rem; line-height: 1.6; color: var(--gris); }
.sim-panel small { display: block; margin-bottom: 1rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.sim-action { min-height: 40px; margin-top: 1.25rem; padding: 0.5rem 1.1rem; font-size: 0.875rem; font-weight: 600; color: var(--surface); background: var(--bleu); border: 0; border-radius: var(--rayon-pilule); }
.sim-action:hover { background: var(--bleu-fonce); }
.sim-result { background: var(--bleu-pale); box-shadow: none; }
.sim-result[hidden] { display: none; }
.training-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.training-list > div { padding: 1.25rem; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.training-list b { display: inline-grid; place-items: center; width: 32px; height: 32px; font-size: 0.9375rem; color: var(--surface); background: var(--encre); border-radius: 50%; }
.training-list h3 { margin: 1rem 0 0.5rem; font-size: 1.0625rem; }
.training-list p { font-size: 0.9375rem; line-height: 1.55; color: var(--gris); }

@media (max-width: 1100px) {
  .wrap { padding-left: var(--espace-6); padding-right: var(--espace-6); }
  .bandeau { padding-left: var(--espace-6); padding-right: var(--espace-6); }
  .hero { gap: var(--espace-8); }
  .hero h1 { font-size: 3rem; }
  .universe-grid { grid-template-columns: repeat(2, 1fr); }
  .universe h3 { min-height: 0; }
  .section { padding-top: var(--espace-18); padding-bottom: var(--espace-18); }
  .approach { gap: 2.5rem; padding-left: var(--espace-8); padding-right: var(--espace-8); }
  .founder { grid-template-columns: 100px 1fr; gap: 1rem; }
  .founder img { width: 100px; height: 140px; }
  .tools-strip .wrap { display: block; }
  .tools-strip p { margin-bottom: 1rem; }
  .tools-strip .wrap > div { justify-content: flex-start; }
  .path-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .wrap { padding-left: var(--espace-4); padding-right: var(--espace-4); }
  .bandeau { padding-left: var(--espace-4); padding-right: var(--espace-4); gap: 0.75rem; }
  .bandeau nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 40px; padding-bottom: var(--espace-8); }
  .hero h1 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .hero-stage { padding: 14px 10px 0; }
  .floating-note { position: static; margin: 1rem 0 0; width: 100%; }
  .section { padding-top: var(--espace-14); padding-bottom: var(--espace-14); }
  .section-heading { display: block; margin-bottom: 1.75rem; }
  .section-heading > p { max-width: 100%; margin-top: 1rem; }
  .universe-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .demo-thumb { min-height: 220px; }
  .mini-kpis { grid-template-columns: 1fr; }
  .mini-kpis strong { display: inline; margin: 0 0 0 0.5rem; }
  .mini-kpis span { display: inline; margin-left: 0.5rem; }
  .path-grid { grid-template-columns: 1fr; }
  .approach { grid-template-columns: 1fr; padding-left: var(--espace-5); padding-right: var(--espace-5); }
  .trust { padding-left: var(--espace-4); padding-right: var(--espace-4); }
  .trust > div { gap: 1.25rem; }
  .trust img { max-width: 100px; height: 30px; }
  footer > div { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .demo-title-row { display: block; }
  .demo-select { margin-top: 0.75rem; }
  .demo-kpis { grid-template-columns: 1fr; gap: 0.5rem; }
  #demo-content { padding: 1rem; }
  .simulation, .training-list { grid-template-columns: 1fr; }
  .dialog-footer { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Pages par besoin et contact. */
.solution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--espace-6)}.solution-grid .lab-panel{margin:0}.solution-grid p{margin-top:var(--espace-4)}.hero>.lab-panel h2{font-size:clamp(1.5rem,3vw,2.25rem);margin:var(--espace-5) 0}.hero>.lab-panel p{margin-top:var(--espace-4)}.button.secondary{background:var(--surface);color:var(--lien);border-color:var(--trait-fort)}.button.secondary:hover{background:var(--bleu-pale)}@media(max-width:800px){.solution-grid{grid-template-columns:1fr}.bandeau{flex-wrap:wrap;height:auto;min-height:var(--hauteur-bandeau);padding-top:var(--espace-3);padding-bottom:var(--espace-3)}.bandeau nav{flex-wrap:wrap}}

@media(max-width:650px){.hero>.lab-panel .mini-kpis{grid-template-columns:1fr}.hero>.lab-panel .mini-kpis>div{display:flex;justify-content:space-between;align-items:center;gap:var(--espace-3)}}

/* Accueil data : forces, offres et prix, méthode, FAQ. */
.forces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.forces > div { padding: 1.5rem; background: var(--fond); border-radius: var(--rayon-grand); }
.forces span, .offer > span, .method span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris); }
.forces h3 { margin: 1rem 0 0.75rem; font-size: 1.25rem; }
.forces p { font-size: 0.9375rem; line-height: 1.55; color: var(--gris); }
.demo-grid.duo { grid-template-columns: repeat(2, 1fr); }
.demo-more { margin-top: 2rem; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.offer { display: flex; flex-direction: column; padding: 1.75rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-grand); }
.offer-main { border-color: var(--bleu); box-shadow: var(--ombre-douce); }
.offer h3 { margin: 1rem 0 0.75rem; font-size: 1.375rem; }
.offer-price { font-size: 1rem; color: var(--gris); }
.offer-price strong { white-space: nowrap; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 650; letter-spacing: -0.03em; color: var(--encre); }
.offer-unit { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--gris-clair); }
.offer ul { margin: 1.25rem 0 0; padding: 1.25rem 0 0; list-style: none; border-top: 1px solid var(--trait); }
.offer li { position: relative; padding-left: 1.25rem; margin-bottom: 0.6rem; font-size: 0.9375rem; line-height: 1.45; }
.offer li::before { content: "✓"; position: absolute; left: 0; color: var(--bleu); }
.offer-more { margin-top: 1.5rem; }
.preuves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.preuve { padding: 1.5rem; background: var(--fond); border-radius: var(--rayon-grand); }
.preuve > strong { display: block; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.preuve > p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--gris); }
.preuve details { margin-top: 1rem; border-top: 1px solid var(--trait); }
.preuve summary { padding-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--lien); cursor: pointer; }
.preuve dl { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.5; }
.preuve dt { margin-top: 0.6rem; font-weight: 600; }
.preuve dd { margin: 0.15rem 0 0; color: var(--gris); }
.preuve table { width: 100%; margin-top: 0.4rem; border-collapse: collapse; font-size: 0.8125rem; }
.preuve td { padding: 0.2rem 0; border-bottom: 1px solid var(--trait); color: var(--gris); }
.preuve td + td { text-align: right; }
.garantie { margin-top: 1.5rem; padding: 1.5rem 1.75rem; background: var(--bleu-pale); border: 1px solid var(--bleu); border-radius: var(--rayon-grand); }
.garantie span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--lien); }
.garantie h3 { margin: 0.75rem 0 0.5rem; font-size: 1.375rem; }
.garantie p { font-size: 0.9375rem; line-height: 1.55; color: var(--encre); }
.preuves .garantie { margin-top: 0; grid-column: span 2; }
@media (max-width: 800px) { .preuves { grid-template-columns: 1fr; } .preuves .garantie { grid-column: auto; } }
.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.engagements > div { padding: 1rem 1.25rem; background: var(--fond); border-radius: var(--rayon); }
.engagements strong { display: block; font-size: 0.9375rem; }
.engagements span { font-size: 0.875rem; color: var(--gris); }
.method { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.method li { padding: 1.5rem 1.25rem; background: var(--fond); border-radius: var(--rayon-grand); }
.method h3 { margin: 0.75rem 0 0.5rem; font-size: 1.125rem; }
.method p { font-size: 0.875rem; line-height: 1.55; color: var(--gris); }
.faq { max-width: 52rem; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--lien); font-weight: 500; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1.25rem; font-size: 0.9375rem; line-height: 1.6; color: var(--gris); }
@media (max-width: 1100px) {
  .method { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .forces, .offer-grid, .engagements, .method, .demo-grid.duo { grid-template-columns: 1fr; }
}

/* Pages commerciales data : contenu partagé, charte conservée. */
.data-home-hero h1{font-size:clamp(2.25rem,4vw,3.4rem);line-height:1.08}.data-home-hero .hero-copy>p{max-width:34rem}.data-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.data-card{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border:1px solid var(--trait);border-radius:var(--rayon-grand);min-width:0}.data-card p{color:var(--gris);font-size:1rem}.data-card .text-link{margin-top:auto}a.data-card:hover{border-color:var(--bleu);background:var(--fond)}.software-links{display:flex;flex-wrap:wrap;gap:1rem}.software-link{border:1px solid var(--trait);border-radius:var(--rayon-pilule);padding:.75rem 1.25rem}.software-link:hover{background:var(--fond)}.data-note{font-size:.875rem;color:var(--gris);margin-top:1rem;line-height:1.6}.data-total{font-size:.9375rem;font-weight:600;margin-top:1rem}.offer .text-link{margin-top:auto;padding-top:1.5rem}.data-callout{padding:1.75rem;background:var(--fond);border-radius:var(--rayon-grand);margin-top:1.5rem}.data-callout h3,.data-callout p{margin-bottom:.75rem}.data-founder{display:grid;grid-template-columns:180px 1fr;gap:2rem;align-items:center;max-width:850px}.data-founder img{width:100%;border-radius:var(--rayon-grand)}.data-founder p+p{margin-top:1rem}.data-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.data-two ul{padding-left:1.25rem}.data-two li+li{margin-top:.75rem}.data-intro{padding-top:3rem;padding-bottom:3rem}.data-intro h1{font-size:clamp(2.2rem,5vw,4rem);max-width:950px;margin:1.25rem 0;line-height:1.08}.data-intro>p{max-width:780px;color:var(--gris);font-size:1.2rem}.breadcrumbs{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.8rem;color:var(--gris);margin-bottom:2rem}.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}.data-table{overflow:auto}.data-table table{border-collapse:collapse;width:100%;text-align:left}.data-table th,.data-table td{padding:1rem;border-bottom:1px solid var(--trait);min-width:130px}.data-table caption{text-align:left;color:var(--gris);font-size:.875rem;margin-bottom:1rem}a:focus-visible,summary:focus-visible{outline:3px solid var(--bleu);outline-offset:4px}footer>div{flex-wrap:wrap}.section-heading h2{max-width:850px}
@media(max-width:900px){.data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bandeau nav{gap:.75rem}.bandeau{gap:.75rem}}
@media(max-width:650px){.data-grid,.data-two{grid-template-columns:1fr}.data-founder{grid-template-columns:1fr}.data-founder img{width:140px}.data-home-hero h1{font-size:2.25rem}.data-intro>p{font-size:1.05rem}.bandeau nav{order:3;width:100%;justify-content:space-between;font-size:.75rem}.bandeau>.button{margin-left:auto;font-size:.75rem}.software-link{font-size:.9rem}.offer{padding:1.3rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-thumb{transition:none}}
@media(min-width:901px){.data-home-hero{grid-template-columns:1.05fr 1fr;gap:2.5rem}.data-home-hero h1{font-size:clamp(2.25rem,3.3vw,2.9rem)}}
.data-home-hero .hero-copy>p.hero-note{font-size:.8125rem;line-height:1.5;color:var(--gris)}
@media(max-width:650px){.bandeau nav{display:flex;padding-top:.3rem;padding-bottom:.3rem;gap:.7rem}.data-home-hero{padding-top:2.5rem}}
/* Espace clients : accès au portail rapports.flowxify.com, à gauche du bouton de contact */
.bandeau a.espace-client{margin-left:auto;font-size:.875rem;color:var(--encre);white-space:nowrap}
.bandeau .espace-client:hover{color:var(--lien)}
.bandeau .espace-client+.button{margin-left:0}
@media(max-width:650px){.bandeau a.espace-client{font-size:.75rem}}
/* Bandeau mobile : marque et Espace clients, navigation sur une ligne, CTA pleine largeur */
@media(max-width:650px){.bandeau{row-gap:.6rem}.bandeau nav{order:2;width:100%;justify-content:space-between;gap:.25rem .5rem;padding-top:0;padding-bottom:0}.bandeau>.button{order:3;width:100%;margin-left:0;justify-content:center;text-align:center}}
@media(max-width:374px){.bandeau nav{justify-content:flex-start;column-gap:1.1rem}}
.nowrap{white-space:nowrap}.contact .software-links{justify-content:center;margin-top:2rem}
.founder-points{margin-top:2rem}.founder-cta{margin-top:1.5rem}

/* Parcours du 19/10 : une action principale par bloc, cartes réservées aux choix cliquables. */
.button.small.secondary{color:var(--lien)}
.menu-toggle{display:none;min-height:44px;padding:0 1rem;font-size:.875rem;font-weight:500;background:var(--surface);border:1px solid var(--trait-fort);border-radius:var(--rayon-pilule)}
.menu-toggle:focus-visible,button:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.hero-proof{margin-top:1.25rem;max-width:30rem;font-size:.9375rem;line-height:1.5;color:var(--encre)}
.data-home-hero .hero-copy>p.hero-note{margin-top:.75rem}
.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.example-card{display:flex;flex-direction:column;gap:.5rem;min-width:0;border-radius:var(--rayon-grand)}
.example-card .demo-thumb{height:190px;min-height:0;margin-bottom:.5rem;transition:transform .2s ease,box-shadow .2s ease}
.example-card:hover .demo-thumb{transform:translateY(-4px);box-shadow:var(--ombre-douce)}
.example-card h3{font-size:1.25rem}
.example-card p{font-size:1rem;line-height:1.5;color:var(--gris)}
.example-card small{font-size:.8125rem;color:var(--gris)}
.example-card .text-link{margin-top:.25rem}
.example-card:hover .text-link{text-decoration:underline;text-underline-offset:3px}
.example-card .finance-preview{margin:.75rem 0 0;gap:.35rem}
.example-card .finance-preview b{font-size:1.5rem}
.example-card .management-preview{margin-top:.75rem}
.example-card .management-preview strong{font-size:1.5rem}
.offer-grid.duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px}
.offer-summary{margin-top:1rem;font-size:1rem;line-height:1.5;color:var(--gris)}
.offer-aside{max-width:960px;margin:1.5rem 0 0;padding:0;list-style:none;border-top:1px solid var(--trait)}
.offer-aside li{padding:1rem 0;font-size:1rem;line-height:1.55;color:var(--gris);border-bottom:1px solid var(--trait)}
.offer-aside strong{color:var(--encre);font-weight:600}
.home-approach{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
.home-approach .data-founder{grid-template-columns:150px 1fr;gap:1.5rem;align-items:start}
.home-approach .data-founder p{font-size:1.0625rem;line-height:1.6}
.steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--trait)}
.steps li{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--trait)}
.steps li>span{font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--gris);padding-top:.3rem}
.steps h3{font-size:1.125rem}
.steps p{margin-top:.25rem;font-size:.9375rem;line-height:1.5;color:var(--gris)}
.orientation{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-bottom:var(--espace-18)}
.orientation-link{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem 1.5rem;border:1px solid var(--trait);border-radius:var(--rayon-grand)}
.orientation-link>span{font-size:1.0625rem;font-weight:600;color:var(--lien)}
.orientation-link small{font-size:.875rem;line-height:1.5;color:var(--gris)}
.orientation-link:hover{border-color:var(--bleu);background:var(--fond)}
.contact-alt{margin-top:1.25rem!important;margin-bottom:0!important}
.offers-intro{padding-top:2rem;padding-bottom:1.5rem}
.offers-intro h1{font-size:clamp(2rem,3.5vw,2.75rem);margin:0 0 .75rem}
.offers-intro .breadcrumbs{margin-bottom:1.25rem}
.offers-intro>p{font-size:1.0625rem}
.offers-first{padding-bottom:var(--espace-14)}
.offers-first .offer-grid.duo{max-width:none}
@media(max-width:900px){.example-grid{grid-template-columns:1fr 1fr}.home-approach{grid-template-columns:1fr;gap:2rem}}
@media(max-width:760px){.offer-grid.duo,.orientation{grid-template-columns:1fr}}
@media(max-width:650px){
 .example-grid{grid-template-columns:1fr;gap:2rem}
 .example-card .demo-thumb{height:180px}
 .home-approach .data-founder{grid-template-columns:96px 1fr;gap:1rem}
 .home-approach .data-founder img{width:96px}
 .data-home-hero .hero-stage{display:none}
 .orientation{padding-bottom:var(--espace-14)}
 /* Bandeau mobile compact : marque, Espace clients, Menu ; le reste s'ouvre sous le bandeau. */
 .bandeau{flex-wrap:wrap;row-gap:.5rem}
 .bandeau nav,.bandeau>.button{display:none}
 .menu-toggle{display:inline-flex;align-items:center}
 .bandeau a.espace-client{margin-left:auto;font-size:.875rem;min-height:44px;display:inline-flex;align-items:center}
 .bandeau.menu-ouvert nav{display:flex;order:3;flex-direction:column;width:100%;gap:0;font-size:1rem}
 .bandeau.menu-ouvert nav a{padding:.75rem 0;border-top:1px solid var(--trait);opacity:1}
 .bandeau.menu-ouvert>.button{display:flex;order:4;width:100%;justify-content:center;min-height:44px;margin-bottom:.5rem}
}
@media(prefers-reduced-motion:reduce){.example-card .demo-thumb{transition:none}.example-card:hover .demo-thumb{transform:none}}

/* Fiches : un chiffre démontable (chiffre, termes, règle et statut, lignes d'origine). */
.escalier-intro{margin-bottom:1.25rem;color:var(--gris)}
.escalier{background:var(--fond);border-radius:var(--rayon-grand)}
.escalier summary{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:1.75rem;cursor:pointer;list-style:none;border-radius:var(--rayon-grand)}
.escalier summary::-webkit-details-marker{display:none}
.escalier summary:hover .escalier-open{text-decoration:underline;text-underline-offset:3px}
.escalier summary:focus-visible{outline:3px solid var(--bleu);outline-offset:4px}
.escalier .figs{display:flex;flex-wrap:wrap;gap:1rem}
.escalier .fig{display:flex;flex-direction:column;min-width:13rem;padding:1.1rem 1.25rem;background:var(--surface);border-radius:var(--rayon);box-shadow:var(--ombre-carte)}
.escalier .fig small{font-size:.8125rem;font-weight:600;color:var(--gris)}
.escalier .fig strong{margin-top:.35rem;font-size:clamp(2rem,4vw,2.75rem);font-weight:650;letter-spacing:-.03em;line-height:1.05;color:var(--lien)}
.escalier .fig em{margin-top:.35rem;font-style:normal;font-size:.8125rem;color:var(--gris)}
.escalier-open{font-size:1rem;font-weight:600;color:var(--lien)}
.escalier-open::after{content:" ↓"}
.escalier[open] .escalier-open::after{content:" ↑"}
.escalier-body{display:grid;gap:1rem;padding:0 1.75rem 1.75rem}
.marche{position:relative;padding:1.25rem 1.25rem 1.25rem 3.5rem;background:var(--surface);border-radius:var(--rayon)}
.marche>span{position:absolute;left:1.25rem;top:1.2rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;font-size:.8125rem;font-weight:600;color:var(--surface);background:var(--encre);border-radius:50%}
.marche h3{font-size:1.0625rem;margin-bottom:.75rem}
.marche p{font-size:1rem;line-height:1.55;color:var(--gris)}
.marche .terms{display:flex;flex-wrap:wrap;gap:.75rem 2rem}
.marche .terms span{display:flex;flex-direction:column}
.marche .terms small{font-size:.8125rem;color:var(--gris)}
.marche .terms b{font-size:1.25rem;font-weight:650;letter-spacing:-.02em}
.regle-statut{margin-top:.75rem}
.regle-statut .statut{margin-left:.35rem;font-size:.8125rem}
.marche .data-table td,.marche .data-table th{min-width:0;padding:.6rem .75rem;font-size:.9375rem}
.marche .data-table td:not(:first-child),.marche .data-table th:not(:first-child){text-align:right}
.marche .data-table td:last-child{white-space:nowrap}
.marche .data-table thead th{font-size:.75rem;font-weight:600;color:var(--gris)}
.marche .data-table tfoot th,.marche .data-table tfoot td{font-weight:650;border-bottom:0}
.lecture{padding:0 .25rem;font-size:1.0625rem;line-height:1.6}
.scope-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.scope-lists h3{font-size:1.125rem;margin-bottom:.75rem}
.scope-lists ul{margin:0;padding-left:1.1rem}
.scope-lists li+li{margin-top:.5rem}
.scope-lists p,.scope-lists li{font-size:1rem;line-height:1.55;color:var(--gris)}
.demo-line,.related-line{padding-bottom:var(--espace-14)}
.demo-line p{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border:1px solid var(--trait);border-radius:var(--rayon-grand)}
.related-line .eyebrow{display:block;margin-bottom:1rem}
.card-figure{display:flex;flex-direction:column}
.card-figure strong{font-size:2rem;font-weight:650;letter-spacing:-.03em;line-height:1.1;color:var(--lien)}
.card-figure small{font-size:.8125rem;color:var(--gris)}
@media(max-width:760px){.scope-lists{grid-template-columns:1fr;gap:1.5rem}}
@media(max-width:650px){
 .escalier summary{padding:1.25rem}
 .escalier .fig{min-width:0;width:100%}
 .escalier-body{padding:0 .75rem .75rem}
 .marche{padding:1rem 1rem 1rem 3rem}
 .marche>span{left:1rem;top:1rem}
 .marche .data-table td,.marche .data-table th{padding:.5rem .4rem;font-size:.875rem}
}
.escalier-body>*,.marche{min-width:0}
.marche .data-table{overflow-x:auto}