/* Démo passe 5 (écran de chargement, colonnes)  ; base passe 4 (VULCAN, 06.11.2026). Rien ici ne survit à l'intro : à la fin, aucune de ces classes ne reste et la page est l'accueil. */

/* avant demo.js : rien de la page finie ne s'affiche */
html.dm-pre body { visibility: hidden; }

/* la page entière vue de loin, posée sur un fond neutre */
html.dm-intro { overflow-x: clip; overflow-y: scroll; background: var(--nuit); scroll-behavior: auto; } /* passe 14 : la piste de défilement reste, comme sur l'accueil : aucune largeur ne change à la fin */
html.dm-intro body { transform-origin: 0 0; cursor: default; overflow: hidden; }
html.dm-intro .curseur { opacity: 0; } /* passe 14 : le point violet de l'accueil arrive en fondu pendant la remontée, il n'apparaît pas d'un coup à la fin */

/* 0. bloc pas encore commencé : un cadre pointillé vide */
.dm-vide { background: var(--dm-bg, #eeece8) !important; outline: 3px dashed #b9b3a9; outline-offset: -3px; }
.dm-vide * { visibility: hidden !important; }
.dm-vide::before, .dm-vide::after { opacity: 0 !important; }

/* 1. maquette grise */
.dm-gris { background: var(--dm-bg, #dedad3) !important; color: #8d877d !important; }
.dm-gris::before, .dm-gris::after, .dm-gris *::before, .dm-gris *::after { opacity: 0 !important; }
.dm-gris * { box-shadow: none !important; text-shadow: none !important; background-image: none !important; }
.dm-gris :where(article, details, form, input, textarea, select, button, .bouton, .ecran__corps, .carte__face, .tarifs__fiche, .garanties, .realisations__tous, .comparaison) {
  background-color: #ece9e4 !important; border-color: #bdb6ab !important; }
.dm-gris .dm-nofill, .dm-sombre.dm-gris .dm-nofill { background-color: transparent !important; border-color: transparent !important; } /* suite passe 19 */
.dm-deco { opacity: 0 !important; }

/* textes pas encore écrits : une barre */
.dm-t { color: transparent !important; -webkit-text-fill-color: transparent !important; background-color: #c4beb4 !important;
  background-clip: border-box !important; -webkit-background-clip: border-box !important; border-radius: 6px; }
.dm-t * { color: transparent !important; -webkit-text-fill-color: transparent !important; }

/* images pas encore posées */
.dm-i { opacity: 0 !important; }
svg.dm-i { opacity: 1 !important; }
svg.dm-i, svg.dm-i * { stroke: transparent !important; fill: transparent !important; }

/* curseurs anonymes et coches (transform et opacity seulement) */
.dm-curs { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; overflow: hidden; contain: strict; }
.dm-c { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.dm-c svg { display: block; width: 30px; height: 30px; fill: #17151d; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.dm-c b { position: absolute; left: 24px; top: 26px; padding: 5px 11px; border-radius: 0 7px 7px 7px; background: #17151d; color: #fff;
  font: 600 15px/1.25 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.dm-c .dm-anneau { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #17151d; opacity: 0; }
.dm-ok { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; padding: 4px 11px 4px 7px; border-radius: 99px;
  background: #fff; color: #17151d; font: 600 13px/1.25 Inter, system-ui, sans-serif; box-shadow: 0 2px 8px rgba(20,18,30,.14);
  opacity: 0; transition: opacity .3s cubic-bezier(.22,1,.36,1); }
.dm-ok svg { width: 14px; height: 14px; fill: none; stroke: #1f8a4c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dm-ok.est-la { opacity: 1; }
.dm-part .dm-ok { opacity: 0; transition-duration: .25s; }

/* écran de chargement, dans le style de l'accueil (nuit, Fraunces, Inter) */
.dm-charge { display: none; }
html.dm-pre .dm-charge, html.dm-intro .dm-charge { position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; visibility: visible;
  background: var(--nuit); color: var(--texte); font: 400 16px/1.5 var(--sans); transition: opacity .5s cubic-bezier(.22,1,.36,1); }
.dm-charge.dm-sort { opacity: 0; pointer-events: none; }
.dm-charge__boite { position: absolute; left: 50%; top: calc(50% + 86px); width: min(520px, 86vw); transform: translateX(-50%); text-align: center; }
.dm-charge__goutte { position: absolute; left: calc(50% - 50.4px); top: calc(50% - 50.4px); width: 100.8px; height: 100.8px; overflow: visible; }
.dm-charge__niv { transform: translateY(25px); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.dm-charge__vague { fill: var(--violet, #9b6bff); animation: dmVague 1.6s linear infinite; }
@keyframes dmVague { to { transform: translateX(-24px); } }
.dm-charge__contour { fill: none; stroke: rgba(236,233,246,.85); stroke-width: .12; stroke-linejoin: round; }
.dm-charge__logo { display: inline-block; font: 600 17px/1 var(--sans); letter-spacing: -.01em; opacity: .9; }
.dm-charge__logo b { font-weight: 800; }
.dm-charge__titre { margin: 18px 0 20px; font: 300 italic clamp(30px, 2.6vw, 44px)/1.05 var(--serif); }
.dm-charge__etat em { font-style: normal; color: var(--texte); }
.dm-charge__barre { width: 280px; margin: 0 auto; height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; }
.dm-charge__barre i { display: block; height: 100%; background: var(--violet, #9b6bff); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s ease-out; }
.dm-charge__etat { display: flex; justify-content: space-between; gap: 20px; width: 280px; margin: 14px auto 0; color: var(--doux); font-size: 13px; font-variant-numeric: tabular-nums; }
#dmQuoi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* passe 6 : voile, goutte, cadre tracé, pastille de couleurs */
.dm-curs > * { position: absolute; }
.dm-voile { inset: 0; background: var(--nuit, #0d0b14); opacity: 0; }
.dm-goutte { inset: 0; width: 100%; height: 100%; overflow: visible; }
.dm-g-fond { fill: var(--violet, #9b6bff); opacity: 0; }
.dm-g-trait { fill: none; stroke: #fff; stroke-width: .12; stroke-linejoin: round; stroke-dashoffset: 9999; }
.dm-cadre { opacity: 0; border: 1.5px dashed #3b5bdb; background: rgba(59,91,219,.06); box-sizing: border-box; }
.dm-cadre i { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #3b5bdb; box-sizing: border-box; margin: -4.5px 0 0 -4.5px; }
.dm-cadre i.n { left: 50%; top: 0; } .dm-cadre i.s { left: 50%; top: 100%; }
.dm-cadre i.o { left: 0; top: 50%; } .dm-cadre i.e { left: 100%; top: 50%; }
.dm-cadre i.no { left: 0; top: 0; } .dm-cadre i.ne { left: 100%; top: 0; }
.dm-cadre i.so { left: 0; top: 100%; } .dm-cadre i.se { left: 100%; top: 100%; }
.dm-cadre i.dm-rot { left: 50%; top: -26px; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; }
.dm-cadre i.dm-rot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 15px; border-left: 1px solid #3b5bdb; margin-left: -.5px; }
.dm-cadre i.dm-arr { left: 14px; top: 14px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ffd24a; border-color: #3b5bdb; }
.dm-cadre i.agi { background: #3b5bdb; }
.dm-pal { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(20,18,30,.22); opacity: 0; }
.dm-pal span { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.dm-pal span.choisi { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #17151d; }
.dm-c b { transition: opacity .3s; }
.dm-nuee .dm-c b, .dm-nuee .dm-ok { opacity: 0; }
.dm-attend b { opacity: 0; }
.dm-nuee .dm-pal, .dm-nuee .dm-cadre { opacity: 0 !important; }
.dm-g-trait { opacity: 0; }

/* passe 7 : poignée de redimensionnement et largeur lue, espace réglé avec sa valeur, ombre posée */
.dm-cadre em { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 12px); white-space: nowrap; padding: 3px 9px; border-radius: 6px; background: #3b5bdb; color: #fff;
  font: 600 13px/1.3 Inter, system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s; }
.dm-cadre.dm-redim em, .dm-cadre.dm-trace em { opacity: 1; }
.dm-cadre:not(.dm-redim) i:not(.no):not(.se) { opacity: 0; }
.dm-esp { opacity: 0; box-sizing: border-box; background: rgba(155,107,255,.16); border-top: 1px dashed #6b4fd8; border-bottom: 2px solid #6b4fd8; }
.dm-esp b { position: absolute; left: calc(50% - 130px); bottom: 6px; padding: 3px 9px; border-radius: 6px; background: #6b4fd8; color: #fff;
  font: 600 13px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.dm-so { box-shadow: none !important; }
.dm-nuee .dm-esp { opacity: 0 !important; }
.dm-c.dm-gauche b { left: auto; right: 14px; border-radius: 7px 0 7px 7px; }

/* passe 8 : croix de visée, règles et repères, fantôme de doublon, emplacement d'image, liquide de la goutte, ouverture */
.dm-c .dm-x { position: absolute; left: -9px; top: -10px; width: 26px; height: 26px; opacity: 0; transition: opacity .15s; }
.dm-c .dm-x::before, .dm-c .dm-x::after { content: ""; position: absolute; background: #17151d; box-shadow: 0 0 0 1px #fff; }
.dm-c .dm-x::before { left: 12px; top: 0; width: 2px; height: 26px; }
.dm-c .dm-x::after { top: 12px; left: 0; height: 2px; width: 26px; }
.dm-c > svg { transition: opacity .15s; }
.dm-croix > svg { opacity: 0; }
.dm-croix .dm-x { opacity: 1; }
.dm-regle { background-color: rgba(250,249,247,.94); z-index: 1; transition: opacity .5s; }
.dm-regle-h { left: 16px; right: 0; top: 0; height: 16px; border-bottom: 1px solid #cfc9bf;
  background-image: linear-gradient(90deg, #9d968b 1px, transparent 1px), linear-gradient(90deg, #c8c2b8 1px, transparent 1px);
  background-size: 100px 16px, 10px 5px; background-repeat: repeat-x; background-position: -16px 0, -16px 11px; }
.dm-regle-h span { position: absolute; top: 2px; margin-left: 3px; font: 500 9px/1 Inter, system-ui, sans-serif; color: #8d877d; font-variant-numeric: tabular-nums; transform: translateX(-16px); }
.dm-regle-v { left: 0; top: 0; bottom: 0; width: 16px; border-right: 1px solid #cfc9bf;
  background-image: linear-gradient(#9d968b 1px, transparent 1px), linear-gradient(#c8c2b8 1px, transparent 1px);
  background-size: 16px 100px, 5px 10px; background-repeat: repeat-y; background-position: 0 0, 11px 0; }
.dm-rsel { z-index: 2; background: rgba(107,79,216,.28); opacity: 0; }
.dm-rsel-h { top: 0; height: 16px; }
.dm-rsel-v { left: 0; width: 16px; }
.dm-ouv .dm-regle, .dm-nuee .dm-regle, .dm-nuee .dm-rsel, .dm-nuee .dm-guide, .dm-nuee .dm-fant, .dm-nuee .dm-place { opacity: 0 !important; }
.dm-guide { left: 16px; right: 0; height: 0; border-top: 1px solid #6b4fd8; opacity: 0; }
.dm-guide b { position: absolute; left: 4px; top: 3px; padding: 1px 6px; border-radius: 4px; background: #6b4fd8; color: #fff; font: 600 11px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.dm-fant { box-sizing: border-box; border: 2px dashed #17151d; border-radius: 10px; background: rgba(23,21,29,.06); opacity: 0; }
.dm-place { box-sizing: border-box; border: 1.5px solid #b9b3a9; opacity: 0;
  background: linear-gradient(to top right, transparent calc(50% - .75px), #b9b3a9 50%, transparent calc(50% + .75px)),
              linear-gradient(to bottom right, transparent calc(50% - .75px), #b9b3a9 50%, transparent calc(50% + .75px)), #ebe8e3; }
.dm-place b { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 5px; background: #fff; color: #6f695f; font: 600 11px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.dm-dup { opacity: 0 !important; }
.dm-liq { fill: url(#dmGrad); opacity: 0; }
.dm-reflet { fill: none; stroke: #fff; stroke-width: .45; stroke-linecap: round; opacity: 0; }
.dm-gt { fill: #b48cff; opacity: 0; }
.dm-ouv .dm-g-fond { fill: var(--violet, #9b6bff); }

/* passe 9 : fin sur le papier avec la couleur du logo, légende de la nuée, étiquettes au-dessus des champs */
.dm-voile { background: #f4f1ea; }
.dm-g-trait { stroke: #31285d; stroke-width: .16; }
.dm-gt { fill: #31285d; }
.dm-reflet { stroke: rgba(255,255,255,.55); }
.dm-c { z-index: 5; }
.dm-leg { z-index: 3; left: 28px; bottom: 18px; min-width: 190px; padding: 9px 12px 8px; border-radius: 10px; background: rgba(23,21,29,.86); color: #fff;
  font: 500 12px/1.35 Inter, system-ui, sans-serif; box-shadow: 0 4px 14px rgba(20,18,30,.2); transition: opacity .4s; opacity: 0; }
.dm-leg p { margin: 0 0 4px; font-weight: 600; color: #cfc5ff; letter-spacing: .02em; }
.dm-leg ul { margin: 0; padding: 0; list-style: none; }
.dm-leg li { display: flex; gap: 8px; white-space: nowrap; }
.dm-leg li b { min-width: 14px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-leg .dm-leg-r { opacity: .55; }
.dm-ouv .dm-leg, .dm-nuee .dm-leg { opacity: 0 !important; }

/* passe 13 : la couleur d'un pointeur (--pc) est celle de tout ce qu'il produit ; contour blanc franc sur le curseur */
.dm-c svg { fill: var(--pc, #17151d); stroke: #fff; stroke-width: 2; paint-order: stroke; }
.dm-c b { background: var(--pc, #17151d); box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0,0,0,.25); }
.dm-c .dm-anneau { border-color: var(--pc, #17151d); }
.dm-c .dm-x::before, .dm-c .dm-x::after { background: var(--pc, #17151d); }
.dm-cadre, .dm-esp, .dm-guide, .dm-pal, .dm-fant, .dm-place, .dm-ok, .dm-rsel { --pc: #8a8f9c; }
.dm-cadre { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 9%, transparent); }
.dm-cadre i { border-color: var(--pc); }
.dm-cadre i.dm-rot::after { border-left-color: var(--pc); }
.dm-cadre i.dm-arr { border-color: var(--pc); background: #fff; }
.dm-cadre i.agi, .dm-cadre i.dm-arr.agi { background: var(--pc); }
.dm-cadre em { background: var(--pc); box-shadow: 0 0 0 2px #fff; }
.dm-esp { background: color-mix(in srgb, var(--pc) 16%, transparent); border-top-color: var(--pc); border-bottom-color: var(--pc); }
.dm-esp b { background: var(--pc); box-shadow: 0 0 0 2px #fff; }
.dm-guide { border-top-color: var(--pc); }
.dm-guide b { background: var(--pc); box-shadow: 0 0 0 2px #fff; }
.dm-fant { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 8%, transparent); }
.dm-place { border-color: var(--pc); }
.dm-place b { color: var(--pc); box-shadow: inset 0 0 0 1px var(--pc); }
.dm-pal span.choisi { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pc); }
.dm-pal { box-shadow: 0 0 0 2px var(--pc), 0 6px 20px rgba(20,18,30,.22); }
.dm-ok { box-shadow: 0 0 0 2px var(--pc), 0 2px 8px rgba(20,18,30,.14); }
.dm-rsel { background: color-mix(in srgb, var(--pc) 32%, transparent); }

.dm-acc { border-top-style: dashed; }
.dm-acc b { left: auto; right: 4px; top: -9px; }
.dm-nuee .dm-acc { opacity: 0 !important; }

/* passe 14 : le fond de chaque bloc est d'abord SA couleur unie (bleu nuit en haut, beige seulement aux sections beiges) ; lumières, dégradés, ombres arrivent ensuite en fondu */
.dm-sombre.dm-vide { outline-color: rgba(155,107,255,.38); }
.dm-sombre.dm-gris { color: #8f8aa8 !important; }
.dm-sombre .dm-t { background-color: rgba(255,255,255,.13) !important; }
.dm-sombre.dm-gris :where(article, details, form, input, textarea, select, button, .bouton, .ecran__corps, .carte__face, .tarifs__fiche, .garanties, .realisations__tous, .comparaison) { background-color: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.16) !important; }
html.dm-intro :is(main > *, header.barre, footer.pied) { transition: background-color 1s ease, color 1s ease, outline-color 1s ease; }
html.dm-intro :is(main > *, header.barre, footer.pied, main > * *)::before, html.dm-intro :is(main > *, header.barre, footer.pied, main > * *)::after { transition: opacity 1.2s cubic-bezier(.22,1,.36,1); }
html.dm-intro .dm-deco { transition: opacity 1.2s cubic-bezier(.22,1,.36,1); }
.dm-vide #pluie, .dm-gris #pluie { visibility: visible !important; }
#pluie { transition: none; }
.dm-passer { z-index: 5; right: 28px; bottom: 18px; pointer-events: auto; cursor: pointer; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4); background: rgba(23,21,29,.86); color: #fff; font: 600 13px/1.2 Inter, system-ui, sans-serif; opacity: .85; transition: opacity .2s; }
.dm-passer:hover, .dm-passer:focus-visible { opacity: 1; }
.dm-ouv .dm-passer, .dm-nuee .dm-passer { opacity: 0 !important; pointer-events: none; }

/* passe 15 : préambule du haut : couleur unie (cadre invisible), puis lumière et dégradé en fondu */
html.dm-uni .dm-vide { outline-color: transparent !important; }
.dm-lum .ouverture__halo { visibility: visible !important; opacity: 1 !important; background-image: radial-gradient(circle, rgba(91,75,214,.55), rgba(91,75,214,0) 65%) !important; transition: opacity 1.8s cubic-bezier(.22,1,.36,1) !important; }
html.dm-intro .dm-lum::after { transition-duration: 1.8s; }
.dm-lum.dm-vide::after, .dm-lum.dm-gris::after { opacity: 1 !important; }

/* passe 15 suite : fondu des dégradés de cartes */
.dm-degr { background-image: none !important; isolation: isolate; }
.dm-degr-rel { position: relative; }

/* passe 18 : une pièce par élément. Avant son cadre : rien ; pendant la frappe : gris neutre ; cadre, poignées, cote, barre de saisie, inspecteur à la couleur du pointeur */
.dm-p0 { visibility: hidden !important; }
.dm-pt, .dm-pt * { color: #8d877d !important; -webkit-text-fill-color: #8d877d !important; }
.dm-pc { left: 0; top: 0; opacity: 0; box-sizing: border-box; border: 1.5px solid var(--pc, #0d99ff); }
.dm-pc i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; box-sizing: border-box; background: #fff; border: 1.5px solid var(--pc, #0d99ff); }
.dm-pc i.n { left: 50%; top: 0; } .dm-pc i.s { left: 50%; top: 100%; } .dm-pc i.o { left: 0; top: 50%; } .dm-pc i.e { left: 100%; top: 50%; }
.dm-pc i.no { left: 0; top: 0; } .dm-pc i.ne { left: 100%; top: 0; } .dm-pc i.so { left: 0; top: 100%; } .dm-pc i.se { left: 100%; top: 100%; }
.dm-pc.dm-tr i:not(.no):not(.se) { opacity: 0; }
.dm-pc i.arr { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; }
.dm-pc.dm-ra i.arr { opacity: 1; background: var(--pc, #0d99ff); border-color: #fff; }
.dm-pc em { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 7px); padding: 2px 7px; border-radius: 5px; background: var(--pc, #0d99ff); color: #fff;
  font: 600 12px/1.35 Inter, system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-car { left: 0; top: 0; width: 2px; opacity: 0; background: var(--pc, #0d99ff); border-radius: 1px; }
.dm-car.dm-cl { animation: dmCl 1.06s steps(1, end) infinite; }
@keyframes dmCl { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.dm-ins { left: 0; top: 0; opacity: 0; display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: #fff; box-shadow: 0 4px 16px rgba(20,18,30,.25);
  font: 500 12px/1.3 Inter, system-ui, sans-serif; color: #3d3a47; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-ins span { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: #f1eff4; transition: background-color .15s, color .15s; }
.dm-ins span.on { background: var(--pc, #0d99ff); color: #fff; }
.dm-ins i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px #fff; }
.dm-ins u { text-decoration: none; text-transform: uppercase; }
.dm-nuee .dm-pc, .dm-nuee .dm-car, .dm-nuee .dm-ins { opacity: 0 !important; }
/* pointeur qui tape : barre en I à la place de la flèche */
.dm-c .dm-ibeam { display: none; }
.dm-ib > svg { opacity: 0; }
.dm-ib::before { content: ""; position: absolute; left: -1px; top: -2px; width: 2px; height: 22px; background: #17151d; box-shadow: 0 0 0 1px #fff; }
.dm-ib::after { content: ""; position: absolute; left: -5px; top: -3px; width: 10px; height: 24px; border-top: 2px solid #17151d; border-bottom: 2px solid #17151d; box-sizing: border-box; }
.dm-sous b { opacity: 0 !important; transition: none !important; }
/* passe 19 (P0) : le panneau de fond d'une section (::after crème) naît d'un geste : tracé, couleur versée, arrondi */
html.dm-intro .dm-pan::after, html.dm-intro .dm-pan.dm-vide::after, html.dm-intro .dm-pan.dm-gris::after { opacity: var(--dm-po, 0) !important; clip-path: var(--dm-clip, none); border-radius: var(--dm-pr, 0px) !important; transition: none !important; }
.dm-pot { left: 0; top: 0; opacity: 0; display: flex; align-items: center; gap: 8px; padding: 6px 11px 6px 6px; border-radius: 10px; background: #fff; font: 600 12px/1 Inter, system-ui, sans-serif; color: #17151d;
  box-shadow: 0 0 0 2px var(--pc, #0d99ff), 0 6px 20px rgba(20,18,30,.22); }
.dm-pot i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.dm-pot.dm-pris i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pc, #0d99ff); }
.dm-nuee .dm-pot { opacity: 0 !important; }