/* Sezo — vignettes illustrées et interactives (aucune capture de l'appli) */
.phone, .screen .frame { container-type: inline-size; }
.di { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[data-demo] [hidden] { display: none !important; }
.screen.phone-only { align-items: flex-start; }
[data-demo] button { font: inherit; color: inherit; cursor: pointer; }
[data-demo] button:focus-visible { outline: 2px solid var(--corail); outline-offset: 2px; }

/* Bulle « Essayez » */
.dm-hint { position: absolute; z-index: 30; right: 6%; bottom: 7%; background: var(--corail); color: #fff; font-weight: 700; font-size: .86em; padding: .45em .8em; border-radius: 999px; box-shadow: 0 6px 16px rgba(194,66,27,.35); pointer-events: none; animation: dm-bob 1.8s ease-in-out infinite; transition: opacity .3s, transform .3s; white-space: nowrap; }
.dm-hint::before { content: ''; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #fff; margin-right: .45em; vertical-align: .05em; animation: dm-ping 1.8s ease-out infinite; }
.dm-hint.off { opacity: 0; transform: translateY(6px); }
@keyframes dm-bob { 50% { transform: translateY(-4px); } }
@keyframes dm-ping { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.8); } 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
.dm-toast { position: absolute; z-index: 40; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; gap: .5em; align-items: center; background: var(--encre); color: #fff; padding: .6em 1em; border-radius: .8em; font-weight: 600; font-size: .92em; white-space: nowrap; animation: dm-up .25s ease; transition: opacity .4s; box-shadow: 0 10px 24px rgba(28,34,64,.3); }
.dm-toast .di { color: #7EE2B8; }
.dm-toast.off { opacity: 0; }
@keyframes dm-up { from { transform: translate(-50%, 8px); opacity: 0; } }
.dm-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 35; overflow: hidden; }
.dm-confetti i { position: absolute; top: -6%; width: .55em; height: .9em; border-radius: 2px; background: var(--corail); animation: dm-fall 1.6s ease-in forwards; }
.dm-confetti i:nth-child(3n) { background: var(--outremer); }
.dm-confetti i:nth-child(3n+1) { background: var(--lin); }
@keyframes dm-fall { to { transform: translateY(1100%) rotate(540deg); opacity: .2; } }
.dm-ring { --p: 0%; width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--corail) var(--p), var(--lin-tint) 0); position: relative; flex: none; transition: --p .4s; }
.dm-ring::before { content: ''; position: absolute; inset: .38em; border-radius: 50%; background: #fff; }
.dm-ring b { position: relative; font-size: .82em; font-family: var(--titre); }
.dm-av { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85em; flex: none; background: var(--outremer-tint); color: var(--outremer); }
.dm-av.t1 { background: var(--lin); color: var(--lin-ink); } .dm-av.t2 { background: #FBE5DC; color: var(--corail-texte); } .dm-av.t3 { background: var(--indigo-tint); color: var(--indigo); } .dm-av.t4 { background: #DDF3EC; color: #0E6E55; } .dm-av.t5 { background: #F1E6D2; color: #7A5A21; }
.sh-lines { display: grid; gap: .45em; margin-top: .5em; }
.sh-lines i { display: block; height: .5em; border-radius: 1em; background: var(--lin-tint); }

/* =========================================================== Téléphone */
.phone .ps { position: relative; border-radius: 31px; aspect-ratio: 390 / 844; overflow: hidden; background: var(--coquille); font-size: 4.6cqw; line-height: 1.3; display: flex; flex-direction: column; color: var(--encre); text-align: left; }
.ps-head { background: var(--indigo); color: #fff; padding: 2.4em 1.2em 1.4em; display: grid; gap: .25em; position: relative; overflow: hidden; flex: none; }
.ps-head::after { content: ''; position: absolute; right: -1.6em; top: -1.2em; width: 5.2em; height: 6em; border-radius: 1.6em; background: var(--indigo-soft); }
.ps-head > * { position: relative; z-index: 1; }
.ps-head small { opacity: .75; font-size: .82em; }
.ps-head b { font-family: var(--titre); font-size: 1.55em; font-weight: 800; letter-spacing: -.02em; }
.ps-head.small { padding: 2.2em 1.2em 1em; }
.ps-head.small b { font-size: 1.25em; }
.ps-chip { justify-self: start; background: var(--corail); color: #fff; border-radius: 1em; padding: .2em .7em; font-weight: 700; font-size: .8em; margin-top: .3em; }
.ps-bar { height: .4em; border-radius: 1em; background: rgba(255,255,255,.2); overflow: hidden; margin-top: .5em; }
.ps-bar i { display: block; height: 100%; width: 0; background: var(--corail); border-radius: 1em; transition: width .4s ease; }
.ps-body { flex: 1; padding: 1em; display: flex; flex-direction: column; gap: .6em; overflow: hidden; position: relative; }
.ps-card { background: #fff; border: 1px solid var(--ligne); border-radius: 1em; padding: .8em; display: flex; gap: .8em; align-items: center; }
.ps-card small { display: block; color: var(--encre-muted); font-size: .85em; }
.ps-prog { box-shadow: 0 8px 20px rgba(28,34,64,.1); position: relative; z-index: 2; }
.ps-title { margin: .3em 0 0; font-family: var(--titre); font-weight: 800; font-size: 1.02em; }
.ps-steps { display: grid; gap: .45em; }
.ps-step { display: flex; align-items: center; gap: .7em; width: 100%; text-align: left; border: 1px solid var(--ligne); background: #fff; border-radius: .9em; padding: .55em .7em; transition: background .2s, border-color .2s; }
.ps-step .num { width: 1.9em; height: 1.9em; border-radius: .6em; display: grid; place-items: center; background: var(--outremer-tint); color: var(--outremer); flex: none; }
.ps-step .tx { flex: 1; font-weight: 600; font-size: .92em; }
.ps-step .go { color: var(--ligne-forte); }
.ps-step.done { background: #F1FAF5; border-color: #BFE6D1; }
.ps-step.done .num { background: #1F9D6B; color: #fff; }
.ps-step.done .tx { color: var(--encre-muted); text-decoration: line-through; text-decoration-color: rgba(77,82,102,.4); }
.ps-ready { display: flex; gap: .7em; align-items: center; background: var(--outremer); color: #fff; border-radius: 1em; padding: .8em; animation: dm-pop .4s ease; }
.ps-ready .di { width: 2em; height: 2em; }
.ps-ready small { display: block; opacity: .85; }
@keyframes dm-pop { from { transform: scale(.85); opacity: 0; } }
.ps-tabs { flex: none; display: flex; justify-content: space-around; background: #fff; border-top: 1px solid var(--ligne); padding: .5em .2em 1.1em; }
.ps-tabs span { display: grid; justify-items: center; gap: .15em; color: var(--ligne-forte); }
.ps-tabs small { font-size: .62em; font-weight: 600; }
.ps-tabs .on { color: var(--outremer); }
.ps-btn { border: 0; background: var(--outremer); color: #fff !important; font-weight: 700; border-radius: .8em; padding: .75em; width: 100%; margin-top: auto; transition: background .2s, opacity .2s; }
.ps-btn:disabled { opacity: .45; cursor: default; }
.ps-btn.sent { background: #1F9D6B; opacity: 1; }
.ps-btn.ghost { background: transparent; color: var(--outremer) !important; border: 1px solid var(--ligne-forte); width: auto; padding: .55em 1em; margin-top: .4em; }

/* Quiz */
.ps-body.quiz { gap: .7em; }
.ps-kicker { color: var(--corail-texte); font-weight: 700; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; }
.ps-q { font-family: var(--titre); font-size: 1.2em; line-height: 1.2; font-weight: 800; }
.ps-opts { display: grid; gap: .5em; }
.ps-opt { display: flex; gap: .6em; align-items: flex-start; text-align: left; border: 1.5px solid var(--ligne); background: #fff; border-radius: .9em; padding: .65em .7em; font-size: .9em; font-weight: 600; transition: border-color .2s, background .2s; }
.ps-opt .dot { width: 1em; height: 1em; border-radius: 50%; border: 2px solid var(--ligne-forte); flex: none; margin-top: .1em; }
.ps-opt.good { border-color: #1F9D6B; background: #F1FAF5; }
.ps-opt.good .dot { border-color: #1F9D6B; background: #1F9D6B; box-shadow: inset 0 0 0 2px #fff; }
.ps-opt.bad { border-color: var(--corail); background: #FFF1EC; animation: dm-shake .35s; }
@keyframes dm-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ps-fb { min-height: 1.4em; font-size: .9em; color: var(--encre-muted); }
.ps-fb .ok { color: #1F7A55; } .ps-fb .ko { color: var(--corail-texte); }
.ps-result { display: grid; justify-items: center; gap: .6em; text-align: center; margin: auto 0; animation: dm-pop .4s ease; }
.ps-result .dm-ring { width: 5.4em; height: 5.4em; }
.ps-result .dm-ring b { font-size: 1.1em; }
.ps-result > b { font-family: var(--titre); font-size: 1.2em; }
.ps-result small { color: var(--encre-muted); }
.ps-badge { display: inline-flex; gap: .4em; align-items: center; background: var(--lin); color: var(--lin-ink); font-weight: 700; border-radius: 1em; padding: .35em .8em; font-size: .9em; }

/* Dossier */
.ps-fields { display: grid; gap: .5em; }
.ps-field { text-align: left; border: 1.5px dashed var(--ligne-forte); background: #fff; border-radius: .8em; padding: .5em .7em; display: grid; gap: .1em; transition: border-color .2s; }
.ps-field small { color: var(--encre-muted); font-size: .74em; font-weight: 600; }
.ps-field .val { color: var(--ligne-forte); font-weight: 600; font-size: .92em; min-height: 1.3em; }
.ps-field.typing { border-style: solid; border-color: var(--outremer); }
.ps-field.typing .val::after { content: '|'; color: var(--outremer); animation: dm-blink .8s steps(1) infinite; }
@keyframes dm-blink { 50% { opacity: 0; } }
.ps-field.filled { border-style: solid; border-color: var(--ligne); cursor: default; }
.ps-field.filled .val { color: var(--encre); }
.ps-secure { display: flex; gap: .5em; align-items: flex-start; background: var(--outremer-tint); color: var(--indigo); border-radius: .8em; padding: .6em .7em; }
.ps-secure small { font-size: .78em; }

/* Pièces */
.ps-docs { display: grid; gap: .5em; }
.ps-doc { display: flex; align-items: center; gap: .6em; background: #fff; border: 1px solid var(--ligne); border-radius: .9em; padding: .6em; }
.ps-doc .ico { width: 2em; height: 2em; border-radius: .6em; display: grid; place-items: center; background: var(--lin-tint); color: var(--lin-ink); flex: none; }
.ps-doc.done .ico { background: #1F9D6B; color: #fff; }
.ps-doc .grow { flex: 1; min-width: 0; }
.ps-doc b { display: block; font-size: .9em; }
.ps-doc small { color: var(--encre-muted); font-size: .76em; }
.ps-doc.done small { color: #1F7A55; }
.ps-mini { display: inline-flex; align-items: center; gap: .3em; border: 0; background: var(--outremer); color: #fff !important; border-radius: .7em; padding: .45em .65em; font-weight: 700; font-size: .78em; }
.ps-note { display: flex; gap: .4em; align-items: center; color: var(--encre-muted); font-size: .78em; margin-top: auto; }
.ps-cam { position: absolute; inset: 0; z-index: 20; background: #10142B; color: #fff; display: grid; place-items: center; align-content: center; gap: 1.2em; padding: 1.5em; }
.ps-cam .vf { position: relative; width: 82%; aspect-ratio: 1.58; }
.ps-cam .vf i { position: absolute; width: 1.4em; height: 1.4em; border: 3px solid #fff; }
.ps-cam .vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: .5em 0 0 0; }
.ps-cam .vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 .5em 0 0; }
.ps-cam .vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 .5em; }
.ps-cam .vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 .5em 0; }
.ps-cam .doc { position: absolute; inset: 12%; border-radius: .5em; background: linear-gradient(135deg, var(--lin) 0 30%, #fff 30%); box-shadow: inset 0 -1.2em 0 rgba(46,58,135,.15); }
.ps-cam .cam-msg { display: flex; align-items: center; gap: .4em; font-size: .9em; }
.ps-cam .cam-msg .di { color: #7EE2B8; }
.ps-cam.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: dm-flash .4s ease forwards; }
@keyframes dm-flash { from { opacity: .9; } to { opacity: 0; } }

/* Livret */
.ps-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.ps-tile { aspect-ratio: 1 / .92; border: 0; border-radius: 1em; display: grid; align-content: space-between; justify-items: start; padding: .8em; text-align: left; background: var(--outremer-tint); color: var(--indigo) !important; transition: transform .15s; }
.ps-tile:hover { transform: translateY(-2px); }
.ps-tile .di { width: 1.7em; height: 1.7em; }
.ps-tile b { font-size: .9em; line-height: 1.15; }
.ps-tile.t1 { background: var(--lin); color: var(--lin-ink) !important; }
.ps-tile.t2 { background: var(--indigo); color: #fff !important; }
.ps-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 18%; z-index: 15; background: #fff; border-radius: 1.4em 1.4em 0 0; padding: 1.1em; box-shadow: 0 -10px 30px rgba(28,34,64,.2); transform: translateY(105%); transition: transform .35s ease; display: flex; flex-direction: column; gap: .6em; }
.ps-sheet.open { transform: none; }
.ps-back { align-self: flex-start; display: inline-flex; align-items: center; gap: .3em; border: 0; background: var(--coquille); border-radius: .7em; padding: .4em .7em; font-weight: 700; font-size: .85em; color: var(--outremer) !important; }
.sh-ico { width: 2.6em; height: 2.6em; border-radius: .8em; display: grid; place-items: center; background: var(--lin); color: var(--lin-ink); }
.sh-ico .di { width: 1.5em; height: 1.5em; }
.sh-t { font-family: var(--titre); font-size: 1.3em; }
.sh-p { margin: 0; color: var(--encre-muted); font-size: .92em; }

/* Couleurs de l'établissement */
.p-couleurs, [data-demo='p-couleurs'] { --brand: #2F52D6; --brand-soft: #E3E9FB; }
.ps-head.brand { background: var(--brand); transition: background .35s; }
.ps-head.brand::after { background: rgba(255,255,255,.14); }
.brand-card { display: block; border-top: .35em solid var(--brand); transition: border-color .35s; }
.brand-card .sh-lines i { background: var(--brand-soft); transition: background .35s; }
.brand-btn { background: var(--brand-soft); border-color: transparent; transition: background .35s; }
.brand-btn span { width: 2em; height: 2em; border-radius: .6em; display: grid; place-items: center; background: var(--brand); color: #fff; transition: background .35s; }
.ps-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.ps-sw { border: 0; background: none; display: grid; justify-items: center; gap: .55em; padding: .3em 0; }
.ps-sw i { width: 2.1em; height: 2.1em; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ligne); transition: box-shadow .2s, transform .2s; }
.ps-sw[aria-checked='true'] i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--encre); transform: scale(1.06); }
.ps-sw small { font-size: .62em; color: var(--encre-muted); font-weight: 600; }

/* =========================================================== Ordinateur */
.screen .frame .dm { position: relative; aspect-ratio: 16 / 10; display: grid; grid-template-columns: 4.6em 1fr; background: var(--coquille); font-size: clamp(9px, 1.45cqw, 12.5px); line-height: 1.35; color: var(--encre); overflow: hidden; text-align: left; }
.dm-side { background: var(--indigo); display: flex; flex-direction: column; align-items: center; gap: .9em; padding: 1.2em 0; }
.dm-logo { font-family: var(--titre); font-weight: 800; color: #fff; font-size: 1.15em; letter-spacing: -.04em; display: inline-flex; align-items: flex-end; gap: .08em; margin-bottom: .6em; }
.dm-logo i { width: .55em; height: .66em; border-radius: .2em; background: var(--outremer); display: inline-block; margin-bottom: .1em; }
.dm-nav { width: 2.8em; height: 2.4em; border-radius: .7em; display: grid; place-items: center; color: var(--on-indigo); position: relative; }
.dm-nav i { display: none; }
.dm-nav.on { background: #fff; color: var(--indigo); }
.dm-nav.on::before { content: ''; position: absolute; left: -.9em; top: .5em; bottom: .5em; width: .25em; border-radius: 0 .2em .2em 0; background: var(--corail); }
.dm-main { padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: 1em; min-width: 0; overflow: hidden; }
.dm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; flex-wrap: wrap; }
.dm-eyebrow { display: block; color: var(--corail-texte); font-weight: 700; font-size: .78em; text-transform: uppercase; letter-spacing: .1em; }
.dm-h { font-family: var(--titre); font-weight: 800; font-size: 1.65em; letter-spacing: -.02em; line-height: 1.1; color: var(--indigo); }
.dm-chips { display: flex; gap: .3em; background: var(--lin-tint); padding: .25em; border-radius: 1em; }
.dm-chip { border: 0; background: transparent; border-radius: .8em; padding: .35em .8em; font-weight: 600; font-size: .88em; color: var(--encre-muted) !important; }
.dm-chip[aria-selected='true'] { background: #fff; color: var(--indigo) !important; box-shadow: 0 1px 3px rgba(28,34,64,.12); }
.dm-btn { display: inline-flex; align-items: center; gap: .35em; border: 0; background: var(--outremer); color: #fff !important; border-radius: .7em; padding: .55em .95em; font-weight: 700; transition: background .15s, transform .1s; white-space: nowrap; }
.dm-btn:hover { background: var(--outremer-dark); }
.dm-btn:active { transform: scale(.97); }
.dm-btn.sm { padding: .4em .7em; font-size: .86em; }
.dm-btn.ghost { background: #fff; color: var(--outremer) !important; box-shadow: inset 0 0 0 1px var(--ligne-forte); }
.dm-btn.ghost:hover { background: var(--outremer-tint); }
.dm-btn.done { background: #E7F6EE; color: #1F7A55 !important; }
.dm-pill { display: inline-flex; align-items: center; gap: .3em; border-radius: 1em; padding: .25em .7em; font-weight: 700; font-size: .8em; background: var(--lin-tint); color: var(--lin-ink); white-space: nowrap; }
.dm-pill.ok { background: #E7F6EE; color: #1F7A55; }
.dm-pill.warn { background: #FFF1EC; color: var(--corail-texte); }
.dm-pill.muted { background: #F0F1F5; color: var(--encre-muted); }
.dm-empty { color: var(--encre-muted); margin: .5em 0; }

/* Suivi */
.dm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.dm-kpi { background: #fff; border: 1px solid var(--ligne); border-radius: 1em; padding: .8em 1em; display: grid; }
.dm-kpi b { font-family: var(--titre); font-size: 1.7em; color: var(--indigo); line-height: 1.1; }
.dm-kpi small { color: var(--encre-muted); font-size: .85em; }
.dm-kpi.dark { background: var(--indigo); border-color: var(--indigo); } .dm-kpi.dark b, .dm-kpi.dark small { color: #fff; }
.dm-kpi.lin { background: var(--lin-tint); border-color: transparent; }
.dm-rows { display: grid; gap: .45em; background: #fff; border: 1px solid var(--ligne); border-radius: 1em; padding: .6em; align-content: start; overflow: hidden; }
.dm-row { display: grid; grid-template-columns: auto minmax(0, 1.2fr) 1fr 2.8em 6.6em; align-items: center; gap: .8em; padding: .3em .4em; border-radius: .7em; animation: dm-pop .3s ease; }
.dm-row:hover { background: var(--coquille); }
.dm-row .who b { display: block; font-size: .95em; }
.dm-row .who small { color: var(--encre-muted); font-size: .8em; }
.dm-pbar { height: .5em; border-radius: 1em; background: var(--lin-tint); overflow: hidden; }
.dm-pbar i { display: block; height: 100%; border-radius: 1em; background: var(--outremer); }
.dm-row .pct { font-weight: 700; font-size: .85em; text-align: right; }
.dm-row .act { justify-self: end; }

/* Bibliothèque */
.dm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; align-content: start; }
.dm-tile { background: #fff; border: 1px solid var(--ligne); border-radius: 1em; padding: .9em; display: grid; gap: .35em; justify-items: start; transition: border-color .2s, box-shadow .2s; animation: dm-pop .3s ease; }
.dm-tile.added { border-color: #BFE6D1; box-shadow: 0 0 0 2px #E7F6EE; }
.dm-tile .ti { width: 2.4em; height: 2.4em; border-radius: .7em; display: grid; place-items: center; background: var(--outremer-tint); color: var(--outremer); }
.dm-tile .ti.t1 { background: var(--lin); color: var(--lin-ink); } .dm-tile .ti.t2 { background: #FBE5DC; color: var(--corail-texte); }
.dm-tile b { font-size: .95em; line-height: 1.2; }
.dm-tile small { display: inline-flex; align-items: center; gap: .3em; color: var(--encre-muted); font-size: .8em; }
.dm-tile small .di { width: 1em; height: 1em; }
.dm-foot { margin: auto 0 0; color: var(--encre-muted); }
.dm-foot b { color: var(--indigo); font-family: var(--titre); font-size: 1.2em; }

/* Tâches */
.dm-count { background: var(--lin); color: var(--lin-ink); font-weight: 700; border-radius: 1em; padding: .3em .8em; font-size: .85em; }
.dm-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; flex: 1; min-height: 0; }
.dm-col { background: var(--lin-tint); border-radius: 1em; padding: .6em; display: flex; flex-direction: column; gap: .5em; border-top: .3em solid var(--outremer); }
.dm-col.c1 { border-top-color: var(--corail); } .dm-col.c2 { border-top-color: #1F9D6B; }
.dm-col-h { display: flex; justify-content: space-between; align-items: center; padding: 0 .2em; }
.dm-col-h span { background: #fff; border-radius: 1em; padding: 0 .55em; font-weight: 700; font-size: .8em; }
.dm-card { display: grid; gap: .45em; text-align: left; border: 0; background: #fff; border-radius: .8em; padding: .65em .7em; box-shadow: 0 1px 2px rgba(28,34,64,.08); animation: dm-pop .25s ease; position: relative; transition: transform .15s, box-shadow .15s; }
.dm-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(28,34,64,.12); }
.dm-card b { font-size: .9em; line-height: 1.2; padding-right: 1.4em; }
.dm-col.c2 .dm-card b { color: var(--encre-muted); text-decoration: line-through; }
.dm-card .meta { display: flex; align-items: center; justify-content: space-between; }
.dm-card .meta .dm-av { width: 1.9em; height: 1.9em; font-size: .7em; }
.dm-card .due { background: var(--coquille); border-radius: .5em; padding: .1em .45em; font-weight: 700; font-size: .75em; color: var(--encre-muted); }
.dm-card .ck { position: absolute; right: .5em; top: .5em; width: 1.3em; height: 1.3em; border-radius: 50%; background: #1F9D6B; color: #fff; display: grid; place-items: center; }
.dm-card .ck .di { width: .85em; height: .85em; stroke-width: 3; }

/* Fiche */
.dm-hero { display: flex; align-items: center; gap: 1em; background: #fff; border: 1px solid var(--ligne); border-radius: 1em; padding: .9em 1em; }
.dm-hero .dm-av { width: 3.2em; height: 3.2em; font-size: 1em; }
.dm-hero .who { flex: 1; }
.dm-hero .who small { display: block; color: var(--encre-muted); }
.dm-tabs { display: flex; gap: .3em; background: var(--lin-tint); padding: .25em; border-radius: 1em; align-self: flex-start; }
.dm-tab { border: 0; background: transparent; border-radius: .8em; padding: .4em .9em; font-weight: 600; color: var(--encre-muted) !important; }
.dm-tab[aria-selected='true'] { background: #fff; color: var(--indigo) !important; box-shadow: 0 1px 3px rgba(28,34,64,.12); }
.dm-panel { display: grid; gap: .45em; align-content: start; }
.dm-doc { display: flex; align-items: center; gap: .7em; background: #fff; border: 1px solid var(--ligne); border-radius: .8em; padding: .55em .7em; animation: dm-pop .25s ease; }
.dm-doc .fi { width: 2em; height: 2em; border-radius: .6em; display: grid; place-items: center; background: var(--outremer-tint); color: var(--outremer); flex: none; }
.dm-doc .grow { flex: 1; font-size: .95em; }
.dm-doc .act { display: flex; gap: .4em; align-items: center; }
.dm-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.dm-steps span { display: flex; align-items: center; gap: .5em; background: #fff; border: 1px solid var(--ligne); border-radius: .8em; padding: .7em; font-weight: 600; color: var(--encre-muted); }
.dm-steps span i { width: 1.15em; height: 1.15em; border-radius: 50%; border: 2px solid var(--ligne-forte); }
.dm-steps span.on { color: var(--encre); background: #F1FAF5; border-color: #BFE6D1; }
.dm-steps span.on .di { color: #1F9D6B; }

/* Éditeur */
.ed-wrap { display: grid; grid-template-columns: 1fr 12em; gap: 1.2em; flex: 1; min-height: 0; }
.ed-col { display: flex; flex-direction: column; gap: .7em; min-width: 0; }
.ed-blocks { display: grid; gap: .45em; align-content: start; }
.ed-block { display: flex; align-items: center; gap: .6em; background: #fff; border: 1px solid var(--ligne); border-radius: .8em; padding: .55em .7em; }
.ed-block.new { animation: dm-pop .3s ease; border-color: var(--outremer); }
.ed-block .grip { color: var(--ligne-forte); }
.ed-block .k { width: 1.9em; height: 1.9em; border-radius: .55em; display: grid; place-items: center; background: var(--lin); color: var(--lin-ink); }
.ed-block b { flex: 1; font-size: .95em; }
.ed-x { border: 0; background: none; color: var(--ligne-forte) !important; padding: .2em; border-radius: .4em; }
.ed-x:hover { color: var(--corail-texte) !important; background: #FFF1EC; }
.ed-add { display: flex; flex-wrap: wrap; gap: .4em; padding-top: .6em; border-top: 1px dashed var(--ligne-forte); }
.ed-phone { background: var(--encre); border-radius: 1.6em; padding: .45em; align-self: start; box-shadow: 0 12px 30px rgba(28,34,64,.25); }
.ed-screen { background: var(--coquille); border-radius: 1.2em; aspect-ratio: 9 / 17; padding: 1.4em .8em .8em; display: flex; flex-direction: column; gap: .55em; overflow: hidden; }
.pv-t { font-family: var(--titre); color: var(--indigo); font-size: 1em; }
.pv-lines { display: grid; gap: .35em; } .pv-lines i { height: .4em; border-radius: 1em; background: var(--lin); display: block; }
.pv-img { border-radius: .6em; aspect-ratio: 16 / 9; background: var(--outremer-tint); color: var(--outremer); display: grid; place-items: center; flex: none; animation: dm-pop .3s ease; }
.pv-img.vid { background: var(--indigo); color: #fff; }
.pv-quiz { display: grid; gap: .3em; background: #fff; border-radius: .6em; padding: .5em; border: 1px solid var(--ligne); }
.pv-quiz i { height: .45em; width: 80%; border-radius: 1em; background: var(--indigo-tint); display: block; }
.pv-quiz span { height: 1.1em; border-radius: .4em; border: 1px solid var(--ligne); display: block; }

/* Attestation (format portrait) */
.screen .frame .dm.dm-at { aspect-ratio: 3 / 4; display: block; background: #fff; font-size: clamp(10px, 3.4cqw, 14px); }
.at { height: 100%; padding: 2em 1.8em 1.6em; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4em; position: relative; border: .5em solid var(--lin-tint); }
.at-top { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6em; }
.at-top .dm-logo { color: var(--indigo); margin: 0; font-size: 1.4em; }
.at-top small { color: var(--encre-muted); }
.at-name { font-family: var(--titre); font-size: 2em; color: var(--indigo); margin-top: .3em; }
.at p { margin: 0; color: var(--encre-muted); }
.at-f { font-family: var(--titre); font-size: 1.35em; }
.at-f::after { content: '.'; color: var(--corail); }
.at-meta { display: flex; gap: 2em; margin: 1em 0 .4em; }
.at-meta small { display: block; color: var(--encre-muted); font-size: .8em; }
.at-sig { width: 60%; height: auto; fill: none; stroke: var(--indigo); stroke-width: 2.2; stroke-linecap: round; margin-top: auto; }
.at-sig.draw path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: dm-sign 1.6s ease forwards; }
@keyframes dm-sign { to { stroke-dashoffset: 0; } }
.at-sign { color: var(--encre-muted); font-size: .8em; border-top: 1px solid var(--ligne); padding-top: .3em; width: 50%; }
.at .dm-btn { margin-top: .8em; }

/* =========================================================== Petits écrans */
@container (max-width: 560px) {
  .screen .frame .dm { aspect-ratio: auto; min-height: 0; grid-template-columns: 1fr; font-size: 11px; }
  .dm-side { display: none; }
  .dm-main { padding: 1em; }
  .dm-kpis { grid-template-columns: repeat(3, 1fr); gap: .4em; }
  .dm-kpi { padding: .5em .6em; }
  .dm-row { grid-template-columns: auto minmax(0, 1fr) 6.4em; }
  .dm-row .dm-pbar, .dm-row .pct { display: none; }
  .dm-grid { grid-template-columns: 1fr 1fr; }
  .dm-kanban { grid-template-columns: 1fr; }
  .ed-wrap { grid-template-columns: 1fr 8.5em; }
  .dm-doc .act .dm-pill.warn { display: none; }
}
@media (max-width: 520px) {
  .screen.phone-only .phone:nth-child(2) { display: none; }
  .screen.phone-only .phone { width: min(270px, 78%); }
}
@media (prefers-reduced-motion: reduce) {
  .dm-hint, .dm-hint::before { animation: none; }
  [data-demo] * { transition: none !important; animation-duration: .01ms !important; }
}

/* Bulle en haut de l'écran pour les téléphones (le bas est parfois masqué par une étiquette) */
.ps .dm-hint { bottom: auto; top: 2.1em; right: .8em; font-size: .78em; }
.dm-at .dm-hint { bottom: auto; top: 1em; }