/* Guestion — page Démos par métier (/demos/). Chargée sur cette page seulement. */
.dm-note{font-size:13.5px;color:var(--muted);text-align:center;max-width:640px;margin:0 auto}
.dm-list{display:flex;flex-direction:column;gap:120px;margin-top:72px}
.dm{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:72px;align-items:center}
.dm.rev .dm-v{order:2}

/* Visuel : fenêtre de navigateur sur le site d’exemple + notification Guestion */
.dm-v{position:relative;padding:0 0 34px}
.dm-frame{border-radius:18px;background:#fff;overflow:hidden;box-shadow:var(--sh-3)}
.dm-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:#F6F7F9;border-bottom:1px solid var(--line)}
.dm-bar .dots{display:flex;gap:7px}
.dm-bar .dots i{width:11px;height:11px;border-radius:50%;background:#DADFE6}
.dm-url{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;max-width:320px;margin:0 auto;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.07);font-size:12.5px;color:var(--muted);letter-spacing:-.005em}
.dm-url svg{width:12px;height:12px;stroke-width:2.2;color:var(--green-t)}
.dm-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--soft-2)}
.dm-shot>img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.dm:hover .dm-shot>img{transform:scale(1.025)}
.dm-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,17,31,0) 55%,rgba(7,17,31,.28) 100%);pointer-events:none}
.dm-logo{position:absolute;left:18px;top:18px;z-index:1;display:flex;align-items:center;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 8px 24px -10px rgba(7,17,31,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dm-logo img{height:var(--lh,40px);width:auto;max-width:220px}
.dm-card{position:absolute;right:-18px;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;min-width:270px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:var(--sh-2)}
.dm.rev .dm-card{right:auto;left:-18px}
.dm-card b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.dm-card div span{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.dm-card em{margin-left:auto;align-self:flex-start;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}

/* Site en ligne : vraies captures. Accueil du site + tableau de bord Guestion + mail reçu sur le téléphone ; tailles en % pour garder la composition à toutes les largeurs. */
.dm-v.has-cap{padding:0 0 21%}
.has-cap .dm-frame{width:88%}
.dm.rev .has-cap .dm-frame{margin-left:auto}
.has-cap .dm-shot::after{display:none}
.has-cap .dm-shot>img{object-fit:cover;object-position:50% 0}
.dm-win{position:absolute;right:0;bottom:0;z-index:1;width:56%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.06),0 24px 60px -18px rgba(7,17,31,.42),0 8px 20px -10px rgba(7,17,31,.2)}
.dm.rev .dm-win{right:auto;left:0}
.dm-win .dm-bar{height:28px;gap:10px;padding:0 10px}
.dm-win .dm-bar .dots{gap:5px}.dm-win .dm-bar .dots i{width:8px;height:8px}
.dm-win .dm-url{height:18px;max-width:200px;font-size:10.5px;border-radius:6px}
.dm-win img{display:block;width:100%;height:auto}
.dm-ph{position:absolute;left:5%;bottom:-6px;z-index:3;width:25%;padding:2.2%;border-radius:15%/7%;background:linear-gradient(145deg,#3B4250 0%,#1A1F28 30%,#0E1218 60%,#2C323C 100%);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 0 1px #0B0E13,0 26px 50px -16px rgba(11,19,36,.55),0 50px 90px -40px rgba(11,19,36,.45)}
.dm.rev .dm-ph{left:auto;right:5%}
.dm-ph-s{position:relative;border-radius:12%/5.6%;overflow:hidden;background:#fff}
.dm-ph-s img{display:block;width:100%;height:auto}
.dm-ph-i{position:absolute;left:50%;top:2.6%;z-index:1;width:31%;height:3.4%;border-radius:99px;background:#0B0E13;transform:translateX(-50%)}
.dm-v.has-cap{container-type:inline-size}
.has-cap .dm-card{top:auto;bottom:calc(35cqw + 44px);right:-18px}
.dm.rev .has-cap .dm-card{right:auto;left:-18px}

/* Texte */
.dm-k{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-d)}
.dm-k span{display:block;margin-top:4px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.dm-t h2{font-family:var(--display);font-weight:800;font-size:40px;line-height:1.08;letter-spacing:-.03em;margin-top:14px}
.dm-but{font-size:18px;line-height:1.6;color:#475569;margin-top:14px;text-wrap:pretty}
.dm-t .checks{margin-top:22px}
.dm-offre{margin-top:22px;font-size:14.5px;color:var(--muted)}
.dm-offre::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:9px;vertical-align:1px}
.dm-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.dm-ctas .btn{height:48px;padding:0 22px;font-size:15px}
.dm-soon{flex-basis:100%;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.dm-soon svg{width:16px;height:16px}

@media (max-width:980px){
 .dm-list{gap:88px;margin-top:56px}
 .dm{grid-template-columns:1fr;gap:40px}
 .dm.rev .dm-v{order:0}
 .dm-card,.dm.rev .dm-card{right:12px;left:auto}
 .has-cap .dm-card,.dm.rev .has-cap .dm-card{right:-8px;left:auto}
 .dm.rev .has-cap .dm-frame{margin-left:0}.dm.rev .dm-win{left:auto;right:0}.dm.rev .dm-ph{right:auto;left:5%}
}
@media (max-width:760px){
 .dm-list{gap:72px;margin-top:44px}
 .dm-t h2{font-size:32px}
 .dm-but{font-size:16.5px}
 .dm-bar{height:34px;padding:0 10px}
 .dm-bar .dots i{width:9px;height:9px}
 .dm-url{height:22px;font-size:11.5px}
 .dm-logo{left:12px;top:12px;padding:8px 12px;border-radius:12px}
 .dm-logo img{height:calc(var(--lh,40px)*.72);max-width:160px}
 .dm-card,.dm.rev .dm-card{left:12px;right:12px;min-width:0}
 .has-cap .dm-card,.dm.rev .has-cap .dm-card{display:none}
 .dm-win{border-radius:10px}.dm-win .dm-bar{height:20px;padding:0 7px;gap:6px}.dm-win .dm-bar .dots{gap:4px}.dm-win .dm-bar .dots i{width:6px;height:6px}.dm-win .dm-url{height:13px;font-size:8px;border-radius:4px}
 .dm-ph{bottom:-4px}
 .dm-ctas .btn{flex:1 1 100%}
}