/* Site v2 : blocs communs à l'accueil et aux pages (ciel du hero, écrans du logiciel, FAQ, formulaire de démo).
   Extraits de css/v2-accueil.css sans changement de rendu ; chargés avant la feuille de la page. */

/* ─── Hero : fond arrondi et ciel animé ─── */
.hero { position: relative; isolation: isolate; display: flow-root; overflow-x: clip; background: var(--fond); padding-inline: var(--gout); border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px); transition: background .5s; }
.ciel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
@keyframes surligne { to { background-size: 100% 100%; } }
.nu { animation: derive var(--dur, 120s) linear infinite; animation-delay: var(--del, 0s); }
@keyframes derive { from { transform: translateX(-260px); } to { transform: translateX(1700px); } }
.hero .etoile { animation: scint 3.4s ease-in-out infinite; animation-delay: var(--del, 0s); }
@media (prefers-reduced-motion: reduce) { .nu, .hero .etoile { animation: none !important; } }

/* ─── Écrans du logiciel : capture dense coupée par le bord de sa carte (jetons de carte sur .sm et .pm) ─── */
.sm, .pm { --c-bg: #fff; --c-txt: #13284b; --c-doux: #3f5870; --c-trait: rgba(19, 40, 75, .07); --c-vis: #f6f8fa; --c-omb: 0 1px 2px rgba(19, 40, 75, .04), 0 30px 60px -40px rgba(19, 40, 75, .35); }
[data-theme="nuit"] :is(.sm, .pm) { --c-bg: #1f3a5f; --c-txt: #fff; --c-doux: #c9d6e3; --c-trait: rgba(255, 255, 255, .08); --c-vis: rgba(255, 255, 255, .04); --c-omb: 0 30px 60px -40px rgba(0, 0, 0, .6); }
.sm-cadre { position: relative; height: 310px; margin-top: 22px; overflow: hidden; container-type: inline-size; }
.sm-cadre::after { content: ""; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(transparent, var(--c-bg)); pointer-events: none; }
.sm-ecran { --k: .8; --navy: #13284b; --doux: #5f6770; --trait: #e3e7ec; --ct: #d5dbe3; --sourd: #f6f8fa; position: absolute; left: 28px; top: 0; width: calc((100cqw - 28px) / var(--k) + 30px); min-width: 900px; transform-origin: 0 0; transform: scale(var(--k)); display: grid; grid-template-columns: 52px 1fr; border-radius: 14px 0 0 0; background: #eef1f5; color: hsl(240, 54%, 15%); font: 12px/1.4 var(--jakarta); box-shadow: 0 0 0 1px rgba(19, 40, 75, .08), 0 24px 50px -30px rgba(19, 40, 75, .45); }
.sm-sb { display: grid; gap: 6px; align-content: start; justify-items: center; padding: 14px 0; }
.sm-sb img { width: 28px; height: 28px; margin-bottom: 10px; }
.sm-sb i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #5d6f86; }
.sm-sb i.on { background: #fff; color: #fc8822; }
.sm-sb svg, .sm-tk svg, .sm-app svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.sm-sb svg { width: 15px; height: 15px; stroke-width: 1.7; }
.sm-win { background: #fff; border-radius: 12px 0 0 0; margin-top: 10px; padding: 18px 20px; min-height: 600px; }
.sm-ph { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.sm-ph > div { flex: 1; min-width: 0; }
.sm-ph b { display: block; font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.sm-ph small { display: block; color: var(--doux); font-size: 11.5px; margin-top: 2px; }
.sm-b { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.sm-b--o { background: #fc8822; color: var(--navy); box-shadow: inset 0 -3px 0 #c9620c; }
.sm-b--g { background: #eef2f7; color: var(--navy); }
.sm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--trait); margin-bottom: 12px; }
.sm-tabs span { padding: 7px 10px; font-weight: 600; font-size: 11.5px; color: var(--doux); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sm-tabs span.on { color: var(--navy); border-color: #fc8822; }
.sm-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.sm-k div { border: 1px solid var(--ct); border-radius: 10px; padding: 9px 11px; }
.sm-k small { display: block; font-size: 10.5px; color: var(--doux); }
.sm-k b { font-size: 15px; color: var(--navy); font-variant-numeric: tabular-nums; }
.sm-t { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ct); border-radius: 10px; overflow: hidden; font-size: 11.5px; }
.sm-t th { background: var(--sourd); color: var(--doux); font-weight: 600; font-size: 10.5px; text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.sm-t td { padding: 7px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.sm-t tr:last-child td { border-bottom: 0; }
.sm-t .n { text-align: right; font-variant-numeric: tabular-nums; }
.sm-t .c { font-weight: 700; color: var(--navy); }
.sm-t tr.prop td { background: #fffaf3; }
.sm-e { display: inline-block; padding: 0 7px; border-radius: 20px; font-size: 10px; font-weight: 700; line-height: 17px; }
.sm-e.ok { background: #d4edda; color: #155724; } .sm-e.w { background: #fff3cd; color: #856404; } .sm-e.ko { background: #f8d7da; color: #842029; } .sm-e.p { background: #e7efff; color: #2557d6; }
.sm-g { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; }
.sm-box { border: 1px solid var(--ct); border-radius: 10px; padding: 11px 12px; }
.sm-box > b { display: block; font-size: 12.5px; color: var(--navy); margin-bottom: 8px; }
.sm-res { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--trait); }
.sm-res:first-of-type { border-top: 0; }
.sm-res em { font-style: normal; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ct); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--doux); }
.sm-res.on { background: var(--sourd); border-radius: 8px; padding-inline: 6px; margin-inline: -6px; }
.sm-res small { display: block; color: var(--doux); font-size: 10.5px; }
.sm-pile { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 6px 0 10px; background: #eef2f7; }
.sm-pile i { display: block; height: 100%; }
.sm-pile .v-pour { width: 58%; background: #437a56; } .sm-pile .v-contre { width: 21%; background: #9aa7ba; } .sm-pile .v-abs { width: 6%; background: #d5dbe3; }
.sm-leg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; font-size: 11px; margin-bottom: 10px; }
.sm-leg span { display: flex; gap: 7px; align-items: center; }
.sm-leg span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.sm-leg .v-pour { --c: #437a56; } .sm-leg .v-contre { --c: #9aa7ba; } .sm-leg .v-abs { --c: #d5dbe3; } .sm-leg .v-absent { --c: #eef2f7; }
.sm-leg b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sm-seuil { font-size: 10.5px; color: var(--doux); display: flex; justify-content: space-between; border-top: 1px dashed var(--ct); padding-top: 7px; margin-bottom: 10px; }
@media (max-width: 680px) { .sm-ecran { --k: .56; } .sm-cadre { height: 250px; } }

/* ─── FAQ (accueil, pages module, blog) : une feuille par question, un bouton rond bien visible ; l'ouverture est animée
   par js/v2.js (hauteur), le signe + tourne en × ─── */
.sq, .blog-faq { --sq-trait: rgba(19, 40, 75, .12); --sq-fond: #fff; --sq-rebord: #dfe6ee; --sq-ease: cubic-bezier(.2, .7, .2, 1); }
[data-theme="nuit"] :is(.sq, .blog-faq) { --sq-trait: rgba(255, 255, 255, .12); --sq-fond: rgba(255, 255, 255, .05); --sq-rebord: #0b1a33; }
.sq .suite-in { gap: 0; }
.sq-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(20px, 2.5vw, 32px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.sq-col { display: grid; gap: 12px; min-width: 0; }
.sq-q { border-radius: 16px; background: var(--sq-fond); box-shadow: inset 0 0 0 1px var(--sq-trait), 0 5px 0 var(--sq-rebord); transition: box-shadow .2s; }
.sq-q summary { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 16px; min-height: 64px; padding: 14px 16px 14px 22px; list-style: none; cursor: pointer; font: 600 17px/1.4 var(--texte); letter-spacing: -.01em; color: var(--s-txt); text-wrap: balance; -webkit-tap-highlight-color: transparent; }
.sq-q summary > :first-child { margin: 0; font: inherit; color: inherit; }
.sq-q summary::-webkit-details-marker { display: none; }
.sq-q summary:focus-visible { outline: 2px solid #fc8822; outline-offset: 2px; border-radius: 16px; }
.sq-q:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-txt) 28%, transparent), 0 5px 0 var(--sq-rebord); }
/* Le bouton : pastille ronde, + au repos ; ouvert, elle passe en marine et le + tourne en × */
.sq-signe { position: relative; width: 34px; height: 34px; border-radius: 50%; color: var(--s-txt); background: color-mix(in srgb, var(--s-txt) 8%, transparent); transition: transform .45s var(--sq-ease), background .25s, color .25s; }
.sq-signe::before, .sq-signe::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: currentColor; }
.sq-signe::after { transform: rotate(90deg); }
.sq-q[open] .sq-signe { transform: rotate(135deg); color: #fff; background: #13284b; }
[data-theme="nuit"] .sq-q[open] .sq-signe { color: #13284b; background: #fff; }
.sq-q > :not(summary) { margin: 0; padding: 0 22px 22px; }
.sq-q p { max-width: 64ch; font-size: 15.5px; line-height: 1.65; color: var(--s-doux); text-wrap: pretty; }
.sq-q > p { opacity: 0; transform: translateY(-4px); transition: opacity .35s ease .08s, transform .45s var(--sq-ease); }
.sq-q[open] > p { opacity: 1; transform: none; }
.sq-pret .sq-q { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .8s var(--sq-ease), box-shadow .2s; transition-delay: calc(var(--i, 0) * .06s + .1s); }
.sq-pret.sq-vu .sq-q { opacity: 1; transform: none; }
@media (max-width: 860px) {
    .sq-liste { grid-template-columns: 1fr; }
    .sq-q summary { gap: 12px; min-height: 60px; padding: 12px 12px 12px 18px; font-size: 16px; }
    .sq-q > :not(summary) { padding: 0 18px 18px; }
    .sq-q p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .sq-signe, .sq-q > p { transition: none; } }

/* ─── Démo (#cta-final) : le formulaire est une dalle en plâtre ; le fond glisse vers la pêche du pied ─── */
/* Haut transparent : le fondu de la page passe dessous, quelle que soit la section qui précède */
.suite.sd { --sd-face: #fff; --sd-dessus: #fff; --sd-cote: #d6dde6; --sd-omb: rgba(19, 40, 75, .07); --sd-bas: #f2d9bf; padding-bottom: clamp(72px, 8vw, 112px); background: linear-gradient(180deg, transparent 0, var(--s-bg2) 18%, #f3e3d2 62%, var(--sd-bas) 100%); }
[data-theme="nuit"] .suite.sd { --sd-dessus: #dfe6ee; --sd-cote: #8197b0; --sd-omb: rgba(6, 16, 31, .35); --sd-bas: #2a4566; background: linear-gradient(180deg, transparent 0, var(--s-bg2) 18%, #1c3556 62%, var(--sd-bas) 100%); }
.sd .suite-in { gap: 0; }
/* Clôture sans formulaire (pages légales) : le même dégradé vers la rue, en-tête seul */
.sd.sd--fin .suite-in { grid-template-columns: minmax(0, 1fr); }
/* La dalle : le formulaire en est la face avant ; dessus et côté en isométrique (KX .36, KY -.24 du moteur : 54 x 36) */
.sd-bloc { position: relative; max-width: 600px; margin: clamp(88px, 8vw, 112px) auto 0; }
.sd-dessus { position: absolute; left: 0; top: -36px; width: 100%; height: 36px; background: var(--sd-dessus); transform-origin: 0 100%; transform: skewX(-56.31deg); z-index: 1; box-shadow: inset 0 -1px 0 rgba(19, 40, 75, .08); }
.sd-cote { position: absolute; left: 100%; top: 0; width: 54px; height: 100%; background: var(--sd-cote); transform-origin: 0 0; transform: skewY(-33.69deg); z-index: 1; }
.sd-omb { position: absolute; left: 10%; top: calc(100% - 36px); width: calc(90% + 204px); height: 60px; background: var(--sd-omb); clip-path: polygon(0 36px, calc(100% - 150px) 0, 100% 24px, 150px 60px); z-index: 0; }
.sd-pt { position: absolute; left: calc(50% + 14px); top: -58px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #ffb877 0 26%, #fc8822 27%); z-index: 3; }
.sd-pt::after { content: ""; position: absolute; left: 8px; right: -4px; bottom: -6px; height: 6px; border-radius: 50%; background: #13284b; opacity: .1; }
[data-theme="nuit"] .sd-pt { box-shadow: 0 0 36px rgba(252, 136, 34, .55); }
.sd-plateau { display: none; }

/* Le formulaire : une feuille blanche dans les deux thèmes, champs à étiquette intégrée, orange au focus */
.sd-f { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 26px 28px 22px; background: var(--sd-face); border-radius: 3px; color: #13284b; text-align: left; }
[data-theme="nuit"] .sd-f { box-shadow: 0 0 70px rgba(255, 184, 119, .14); }
.sd-f label { position: relative; display: grid; gap: 3px; align-content: start; min-width: 0; padding: 9px 14px 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #dbe2ea; font: 600 11.5px/1.25 var(--texte); letter-spacing: .01em; color: #5f6f82; cursor: text; transition: box-shadow .15s; }
.sd-f label small { font-size: 11px; font-weight: 400; color: #8a97a6; }
.sd-f label:hover { box-shadow: inset 0 0 0 1px #b4c2d1; }
.sd-f label:focus-within { box-shadow: inset 0 0 0 1.5px #fc8822, 0 0 0 4px rgba(252, 136, 34, .12); }
.sd-f :is(input, select, textarea) { width: 100%; min-width: 0; height: 24px; padding: 0; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; font: 500 16px/1.4 var(--texte); color: #13284b; outline: none; }
.sd-f select { -webkit-appearance: none; appearance: none; padding-right: 22px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%233f5870' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0 center / 12px; }
.sd-f select:has(option[value=""]:checked) { color: #a3afbd; font-weight: 400; }
.sd-f select option { color: #13284b; }
/* Deux lignes pleines à 16 px, la barre de défilement ne vient qu'au-delà ; la zone grandit avec le texte là où le navigateur sait le faire */
.sd-f textarea { height: auto; min-height: 46px; max-height: 160px; overflow-y: auto; resize: none; field-sizing: content; scrollbar-width: thin; }
.sd-f ::placeholder { color: #a3afbd; font-weight: 400; }
.sd-f .sd-pl { grid-column: 1 / -1; }
.sd-f .btn { width: 100%; height: 48px; margin-top: 4px; }
.sd .sd-f p { margin: 0; max-width: none; text-align: center; }
.sd .sd-f .sd-apres { font-size: 14px; font-weight: 500; color: #3f5870; }
.sd .sd-f .sd-rg { font-size: 12px; color: #5f6770; }
.sd-rg a { color: #13284b; text-underline-offset: 3px; }
.sd-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sd .form-error { grid-column: 1 / -1; padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #842029; font-size: 14px; }
/* Après l'envoi : l'agenda (professionnel) ou l'accusé de réception remplacent la feuille, sur le même fond blanc */
.sd-suite { position: relative; z-index: 2; padding: 26px 28px; background: var(--sd-face); border-radius: 3px; color: #13284b; text-align: center; }
.sd-suite h3 { font-family: var(--titre); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 4px; }
.sd .sd-suite p { margin: 0 auto; color: #3f5870; font-size: 15px; }
.sd .sd-suite .form-agenda__ok { display: flex; justify-content: center; align-items: center; gap: 8px; color: #437a56; font-weight: 600; }
.sd-agenda { position: relative; z-index: 2; min-height: 660px; background: var(--sd-face); }
.sd-agenda[hidden] { display: none !important; }

/* Apparition (sd-pret posé par le script, sd-vu à l'entrée) */
.sd-pret .sd-bloc { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.sd-pret.sd-vu .sd-bloc { opacity: 1; transform: none; }

/* Écran large : le titre à gauche, la dalle du formulaire à droite, un socle du moteur court sous les deux colonnes */
@media (min-width: 1081px) {
    .sd .suite-in { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: clamp(56px, 7vw, 112px); align-items: center; }
    .sd .suite-tete { grid-template-columns: 1fr; gap: 16px; align-self: start; margin-top: 48px; }
    .sd .suite-tete > * { grid-column: 1; grid-row: auto; }
    .sd .suite-tete .lien-suite { justify-self: start; margin-top: 4px; }
    .sd .suite-tete h2 { font-size: clamp(30px, 3vw, 40px); }
    .sd .sd-bloc { max-width: none; margin: 56px 54px 0 0; }
    .suite.sd { padding-top: clamp(72px, 7vw, 104px); padding-bottom: clamp(120px, 10vw, 150px); }
    /* Repère du SVG en px : pied gauche du formulaire = (760, 180) */
    .sd-plateau { display: block; position: absolute; left: -760px; bottom: -90px; width: calc(100% + 1000px); height: 270px; z-index: 0; overflow: visible; pointer-events: none; }
}
@media (max-width: 860px) {
    .sd-dessus, .sd-cote, .sd-omb { display: none; }
    .sd-bloc { margin-top: 76px; }
    .sd-pt { top: -48px; left: calc(50% - 19px); }
}
/* Téléphone : une colonne (champs à 16 px, sous lesquels iOS zoome au focus) ; la bille, sans dalle sous elle, s'efface */
@media (max-width: 640px) {
    .sd-bloc { margin-top: 32px; }
    .sd-pt { display: none; }
    .sd-f { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 14px 16px; border-radius: 16px; box-shadow: 0 8px 0 #f2d9bf; }
    .sd-f label { padding: 8px 12px 7px; }
}
/* ─── Écrans : graphiques et pilotage. Valeurs en variables sur l'élément (--v, --p en %), seul style en ligne admis ─── */
/* Barre segmentée (une part par <i>, --v = poids) et sa légende (.sm-leg) */
.sm-seg { display: flex; gap: 2px; height: 10px; margin: 6px 0 10px; border-radius: 5px; overflow: hidden; background: #eef2f7; }
.sm-seg i { flex: var(--v) 0 0; background: var(--c); }
:is(.sm-seg, .sm-leg) .ok { --c: #437a56; } :is(.sm-seg, .sm-leg) .p { --c: #6f8fd8; } :is(.sm-seg, .sm-leg) .w { --c: #fc8822; } :is(.sm-seg, .sm-leg) .n { --c: #d5dbe3; }
/* Anneau : --p = part remplie */
.sm-anneau { position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: conic-gradient(var(--c, #437a56) calc(var(--p) * 1%), #eef2f7 0); }
.sm-anneau::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.sm-anneau b { position: relative; font-size: 21px; line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; }
.sm-anneau small { display: block; font-size: 10px; font-weight: 500; color: var(--doux); }
.sm-ligne { display: flex; gap: 16px; align-items: center; }
.sm-ligne > div:not(.sm-anneau) { flex: 1; min-width: 0; }
.sm-ligne .sm-leg { grid-template-columns: 1fr; }
/* Colonnes : --v = hauteur en % de 90 px ; .on = la colonne mise en avant */
.sm-cols { display: flex; align-items: flex-end; gap: 10px; height: 128px; padding-top: 6px; }
.sm-cols div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 10.5px; color: var(--doux); font-variant-numeric: tabular-nums; }
.sm-cols i { width: 100%; max-width: 38px; height: calc(var(--v) * .9px); border-radius: 6px 6px 2px 2px; background: #c9d6e3; }
.sm-cols .on i { background: #fc8822; }
.sm-cols b { font-size: 10.5px; color: var(--navy); }
/* Barres budget et réalisé : --v = réalisé en % du budget ; .depasse au-delà de 100 */
.sm-hb { display: grid; grid-template-columns: 170px minmax(0, 1fr) 132px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--trait); font-size: 11.5px; }
.sm-hb:first-of-type { border-top: 0; }
.sm-hb i { position: relative; height: 8px; border-radius: 4px; background: #eef2f7; }
.sm-hb i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: min(100%, calc(var(--v) * 1%)); border-radius: inherit; background: #437a56; }
.sm-hb.depasse i::before { background: #fc8822; }
.sm-hb b { text-align: right; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.sm-hb b small { font-weight: 500; color: var(--doux); }
/* Paire de rapprochement : l'opération de la banque, le fil, l'imputation proposée */
.sm-paire { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--ct); border-radius: 10px; font-size: 11.5px; }
.sm-paire.on { background: #fffaf3; border-color: #ffd9b0; }
.sm-paire b { display: block; color: var(--navy); font-variant-numeric: tabular-nums; }
.sm-paire small { display: block; font-size: 10.5px; color: var(--doux); }
.sm-fil-p { height: 2px; background: repeating-linear-gradient(90deg, #fc8822 0 3px, transparent 3px 7px); }
/* Liste d'étapes : .ok fait, .en en cours, sans classe à venir */
.sm-check { list-style: none; margin: 0; padding: 0; display: grid; font-size: 11.5px; }
.sm-check li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; padding: 6px 0; border-top: 1px solid var(--trait); }
.sm-check li:first-child { border-top: 0; }
.sm-check li::before { content: ""; box-sizing: border-box; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #c3cddb; }
.sm-check li.ok::before { border-color: #437a56; background: #437a56 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.sm-check li.en::before { border-color: #fc8822; background: radial-gradient(circle, #fc8822 0 3.5px, transparent 4px); }
.sm-check b { display: block; font-weight: 600; color: var(--navy); }
.sm-check small { display: block; font-size: 10.5px; color: var(--doux); }
/* Pièce reçue (facture, relevé) : en-tête, lignes, total */
.sm-piece { border: 1px solid var(--ct); border-radius: 10px; padding: 11px 12px; }
.sm-piece-t { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sm-piece-t em { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--navy); background: #eef2f7; }
.sm-piece-t b { display: block; font-size: 12.5px; color: var(--navy); }
.sm-piece-t small { display: block; font-size: 10.5px; color: var(--doux); }
.sm-piece-l { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--trait); font-variant-numeric: tabular-nums; }
.sm-piece-l:last-child { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--navy); font-weight: 700; color: var(--navy); }
.sm-note { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: var(--sourd); font-size: 11px; color: var(--doux); }
.sm-note::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #fc8822; }
.sm-t + .sm-seuil { margin-top: 12px; }