.d-masque { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vt [hidden] { display: none !important; }

.d-heros { padding-block: clamp(104px, 11vw, 150px) clamp(40px, 5vw, 80px); }
.d-heros-grille { --d-tw: clamp(270px, min(25vw, (100svh - 150px) * .46), 350px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 6vw, 112px); width: min(100%, var(--v-large)); margin-inline: auto; padding-inline: var(--v-g); }
.d-heros .p-fil { margin-bottom: 14px; }
.d-titre { margin-top: 16px; font-size: clamp(40px, 4.5vw, 72px); }
.d-heros .v-lede { margin-top: 22px; max-width: 46ch; }

.d-guichet { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 640px; margin-top: 30px; padding: 8px; border-radius: 24px; background: linear-gradient(180deg, #1a1c20, #0e1013); border: 1px solid #ffffff21; box-shadow: inset 0 1px 0 #ffffff14, 0 0 0 6px #ffffff06, 0 30px 50px -26px #000; }
.d-guichet-boite { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 0 14px; border-radius: 16px; background: #08090b; box-shadow: inset 0 2px 6px #000; color: var(--dn-argent-2); transition: box-shadow var(--dn-t-2, .25s) ease; }
.d-guichet-boite:focus-within { box-shadow: inset 0 2px 6px #000, 0 0 0 2px var(--dn-bleui-1); }
.d-guichet-boite:has(input[aria-invalid="true"]) { box-shadow: inset 0 2px 6px #000, 0 0 0 2px var(--dn-erreur); }
.d-guichet-boite svg { flex: none; }
.d-guichet-boite input { flex: 1; width: 100%; min-width: 0; min-height: 52px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--dn-blanc); font: 500 16px/1.2 var(--dn-texte); outline: none; text-overflow: ellipsis; }
.d-guichet-btn.dn-btn { min-height: 54px; padding-inline: 22px; }
.d-guichet-aide { grid-column: 1 / -1; margin: 2px 10px 4px; font-size: 13px; line-height: 1.45; color: var(--dn-argent-3); }

.d-exemples { display: flex; flex-wrap: wrap; gap: 8px; max-width: 660px; margin-top: 16px; }
.d-exemple { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 16px 4px 4px; border-radius: var(--dn-r-rond, 999px); border: 1px solid #ffffff1f; background: var(--dn-satin-fond); color: var(--dn-argent-2); font: 600 14px/1.2 var(--dn-texte); cursor: pointer; transition: border-color var(--dn-t-2, .25s) ease, background var(--dn-t-2, .25s) var(--dn-pose), color var(--dn-t-2, .25s) ease; }
.d-exemple img, .d-exemple-vide { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #e9ebee; box-shadow: 0 0 0 1px #000; }
.d-exemple-vide { background: repeating-linear-gradient(45deg, #ffffff14 0 2px, transparent 2px 6px), #16181c; box-shadow: inset 0 0 0 1px #ffffff1f; }
.d-exemple b { font-weight: 700; color: var(--dn-argent-1); }
.d-exemple:hover { border-color: #ffffff47; }
.d-exemple[aria-pressed="true"] { border-color: transparent; background: var(--dn-acier-brosse); color: #2a2e33; box-shadow: var(--dn-acier-ombre); }
.d-exemple[aria-pressed="true"] b { color: var(--dn-charbon); }
.d-exemple:focus-visible { outline: 2px solid var(--dn-bleui-1); outline-offset: 2px; }
.d-demo { display: block; margin-top: 18px; max-width: 60ch; line-height: 1.7; }
.d-demo::before { content: none; }
.d-demo-puce { display: inline-flex; align-items: center; min-height: 24px; margin-right: 6px; padding: 0 10px; border-radius: var(--dn-r-rond, 999px); border: 1px dashed #ffffff4d; color: var(--dn-argent-1); font: 700 12px/1 var(--dn-texte); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.d-scene { position: relative; display: grid; place-items: center; padding-block: 12px 24px; isolation: isolate; }
.d-scene::before { content: ""; position: absolute; z-index: -1; inset: 6% -24% 10%; border-radius: 50%; background: radial-gradient(closest-side, #ffffff17, #ffffff06 60%, transparent); filter: blur(12px); pointer-events: none; }

.d-ecran-modele { margin-top: 10px !important; font: 600 15px/1.2 var(--dn-texte); color: var(--dn-argent-1); }
.d-ecran-modele small { margin-right: 4px; font: 700 12px/1 var(--dn-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--dn-argent-3); }
.d-ecran .e-verdict-prix { margin-top: 8px !important; }
.d-ecran .e-verdict-ecart { top: 84px; }
.d-ecran .e-histo-toi, .d-ecran .e-histo-med { translate: -50% 0; white-space: nowrap; }
.d-ecran-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 4px 0 !important; }
.d-ecran-infos > span { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: #ffffff0a; border: 1px solid #ffffff17; text-align: left; }
.d-ecran-infos small { font: 700 12px/1 var(--dn-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--dn-argent-3); }
.d-ecran-infos b { font: 600 22px/1 var(--dn-titre); letter-spacing: -.04em; color: #fff; }
.d-ecran-peu { display: none; margin-top: 18px !important; padding: 0 12px; font-size: 15px; line-height: 1.45; color: var(--dn-argent-2); }
.d-ecran.d-v-dans .e-verdict-sceau::before { width: 11px; height: 0; border-left: 0; border-bottom-width: 2.2px; rotate: 0deg; translate: 0 0; }
.d-ecran:is(.d-v-dessus, .d-v-aucun) .e-verdict-sceau { border-color: #ffffff38; background: #ffffff08; color: var(--dn-argent-2); box-shadow: none; }
.d-ecran:is(.d-v-dessus, .d-v-aucun) .e-verdict-sceau::before { width: 7px; height: 7px; border: 0; border-radius: 50%; background: currentColor; rotate: 0deg; translate: 0 0; }
.d-ecran.d-v-aucun .e-verdict-sceau { border-style: dashed; }
.d-ecran.d-v-dessus .e-verdict-ecart { background: #2a2d32; color: #fff; box-shadow: inset 0 0 0 1px #ffffff2e, 0 12px 20px -8px #000; }
.d-ecran.d-v-aucun :is(.e-verdict-ecart, .e-histo, .d-ecran-infos) { display: none; }
.d-ecran.d-v-aucun .d-ecran-peu { display: block; }
.d-ecran-inconnu { display: none; margin-top: 26px !important; padding: 24px 18px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, #16181c, #0e1013); border: 1px dashed #ffffff3d; }
.d-ecran.d-v-inconnu .e-verdict { display: none; }
.d-ecran.d-v-inconnu .d-ecran-inconnu { display: block; }
.d-ecran-inconnu-sceau { display: inline-flex; padding: 8px 14px; border-radius: 999px; border: 1px dashed #ffffff4d; color: #fff; font: 800 12px/1 var(--dn-texte); letter-spacing: .14em; text-transform: uppercase; }
.d-ecran-inconnu-dit { margin-top: 14px !important; font-size: 16px; line-height: 1.45; color: var(--dn-argent-2); }
.d-ecran-inconnu .e-btn { margin-top: 16px; }
html.t-anime .d-ecran.e-3 .d-ecran-modele { animation: e-monte calc(.8s * var(--e-t, 1)) var(--dn-levee) calc(2s * var(--e-t, 1)) backwards; }
html.t-anime .d-ecran.e-3 :is(.d-ecran-infos, .d-ecran-peu) { animation: e-monte calc(.7s * var(--e-t, 1)) var(--dn-levee) calc(3.05s * var(--e-t, 1)) backwards; }
html.t-anime .d-ecran .d-ecran-inconnu { transition: opacity .5s ease .45s, translate .7s var(--dn-levee) .45s; }
html.t-anime .d-ecran.d-v-inconnu:not(.e-2) .d-ecran-inconnu { opacity: 0; translate: 0 18px; }

.d-lecture { padding-top: 0; }
.d-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px clamp(28px, 4vw, 56px); align-items: start; padding: clamp(22px, 3vw, 40px); border-radius: 28px; border: 1px solid transparent; background: linear-gradient(180deg, #121417, #0d0f12) padding-box, linear-gradient(150deg, #ffffff4d, #ffffff0f 34%, #ffffff08 64%, #ffffff33) border-box; box-shadow: 0 50px 90px -50px #000; }
.d-carte-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--dn-argent-3); }
.d-carte-mot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.d-carte-quoi { font: 600 clamp(20px, 2.1vw, 30px)/1.15 var(--dn-titre); letter-spacing: -.035em; color: var(--dn-argent-1); }
.d-carte-dit { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--dn-argent-2); max-width: 50ch; text-wrap: pretty; }
.d-sceau { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin: 0; padding: 0 14px; border-radius: var(--dn-r-rond, 999px); border: 1px solid #ffffff59; background: linear-gradient(180deg, #ffffff26, #ffffff0a); color: #fff; font: 800 12px/1 var(--dn-texte); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.d-sceau::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.d-sceau--petit { min-height: 28px; padding: 0 11px; }
:is(.d-v-dessus, .d-regle--dessus, .d-v-aucun) .d-sceau { border-color: #ffffff38; background: #ffffff08; color: var(--dn-argent-2); }
.d-v-aucun .d-sceau { border-style: dashed; }
.d-faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.d-faits > div { padding: 14px 16px; border-radius: 16px; background: #ffffff08; border: 1px solid #ffffff0f; }
.d-faits dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dn-argent-3); }
.d-faits dd { margin: 8px 0 0; font: 600 clamp(22px, 2.2vw, 30px)/1.05 var(--dn-titre); letter-spacing: -.04em; color: var(--dn-argent-1); font-variant-numeric: tabular-nums; }
.d-fait-max { background: radial-gradient(120% 120% at 100% 0%, #ffffff12, transparent 55%), #ffffff08 !important; border-color: #ffffff29 !important; }
.d-fait-max dd > span { color: transparent; background-image: var(--dn-chrome-chiffre); -webkit-background-clip: text; background-clip: text; }
.d-fait-dit { display: block; margin-top: 8px; font: 500 13px/1.4 var(--dn-texte); letter-spacing: 0; color: var(--dn-argent-3); }
.d-marges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 18px; border-top: 1px solid #ffffff0f; }
.d-marges-dit { margin-right: 6px; font: 700 12px/1 var(--dn-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--dn-argent-3); }
.d-marges button { min-height: 44px; min-width: 56px; padding: 0 16px; border-radius: var(--dn-r-rond, 999px); border: 1px solid #ffffff1f; background: var(--dn-satin-fond); color: var(--dn-argent-2); font: 700 14px/1 var(--dn-texte); cursor: pointer; transition: background var(--dn-t-2, .25s) var(--dn-pose), color var(--dn-t-2, .25s) ease, border-color var(--dn-t-2, .25s) ease; }
.d-marges button:hover { border-color: #ffffff47; color: var(--dn-blanc); }
.d-marges button[aria-pressed="true"] { border-color: transparent; background: var(--dn-acier-brosse); color: var(--dn-charbon); box-shadow: var(--dn-acier-ombre); }
.d-marges button:focus-visible { outline: 2px solid var(--dn-bleui-1); outline-offset: 2px; }

.d-inconnu { padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; border: 1px dashed #ffffff3d; background: radial-gradient(90% 120% at 0% 0%, #ffffff10, transparent 55%), #0d0f12; }
.d-inconnu-sur { margin: 0; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--dn-argent-3); }
.d-inconnu-titre { margin: 12px 0 0; font: 600 clamp(24px, 3vw, 40px)/1.1 var(--dn-titre); letter-spacing: -.045em; color: var(--dn-argent-1); max-width: 22ch; outline: none; }
.d-inconnu-dit { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--dn-argent-2); max-width: 56ch; }
.d-inconnu-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.d-inconnu-cta .dn-btn { min-height: 48px; }

.d-regles { border-top: 1px solid #ffffff0f; }
.d-regles .v-texte { margin-top: 18px; }
.d-regles-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.d-regle { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; padding: 22px; border-radius: var(--dn-r-4, 24px); background: var(--dn-surface); border: 1px solid #ffffff14; }
.d-regle-dit { margin: 0; font-size: 16px; line-height: 1.5; color: var(--dn-argent-1); }
.d-regle-ex { margin: auto 0 0; font-size: 13px; color: var(--dn-argent-3); }
.d-regles-note { max-width: 74ch; margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--dn-argent-3); }
.d-regles-note b { color: var(--dn-argent-1); }

.d-tous { border-top: 1px solid #ffffff0f; }
.d-tous .v-texte { margin-top: 18px; }
.d-tous .v-texte a { color: var(--dn-argent-1); text-underline-offset: 3px; }
.d-tableau { margin-top: clamp(24px, 3vw, 36px); overflow: hidden; border-radius: 20px; border: 1px solid #ffffff17; }
.d-tableau table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.d-tableau th, .d-tableau td { padding: 14px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid #ffffff12; }
.d-tableau thead th { font: 700 12px/1.25 var(--dn-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--dn-argent-3); background: #ffffff08; }
.d-tableau tbody th { font-weight: 700; color: var(--dn-argent-1); }
.d-tableau tbody td { color: var(--dn-argent-2); }
.d-tableau tbody td small { font-size: 13px; color: var(--dn-argent-3); }
.d-tableau tbody tr:last-child > * { border-bottom: 0; }
.d-tableau-marque { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dn-argent-3); }

.d-vrai { border-top: 1px solid #ffffff0f; }
.d-vrai-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.d-vrai .v-texte { margin-top: 18px; }
.d-vrai-cta { margin-top: 26px; }
.d-vrai-cta .dn-btn { min-height: 48px; }
.d-vrai .v-garantie { margin-top: 16px; }
.d-vrai-liste { display: grid; gap: 10px; }
.d-vrai-liste li { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: var(--dn-surface); border: 1px solid #ffffff14; }
.d-vrai-liste b { font: 600 18px/1.2 var(--dn-titre); letter-spacing: -.03em; color: var(--dn-argent-1); }
.d-vrai-liste span { font-size: 15px; line-height: 1.5; color: var(--dn-argent-3); }

.d-faq { margin-top: clamp(28px, 4vw, 40px); }
.d-faq a { color: var(--dn-argent-1); }
.d-mention { max-width: 880px; margin: 28px 0 0; font-size: 13px; line-height: 1.6; color: var(--dn-argent-3); }

@media (max-width: 1100px) {
  .d-regles-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .d-heros-grille { --d-tw: min(300px, calc(100vw - 2 * var(--v-g) - 40px)); grid-template-columns: minmax(0, 1fr); }
  .d-scene { padding-top: 8px; }
  .d-carte { grid-template-columns: minmax(0, 1fr); }
  .d-vrai-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .d-tableau table, .d-tableau tbody, .d-tableau tr, .d-tableau th, .d-tableau td { display: block; width: auto; }
  .d-tableau thead { display: none; }
  .d-tableau tr { padding: 14px 18px; border-bottom: 1px solid #ffffff12; }
  .d-tableau tbody tr:last-child { border-bottom: 0; }
  .d-tableau th, .d-tableau td { padding: 3px 0; border: 0; }
  .d-tableau tbody th { margin-bottom: 6px; }
  .d-tableau td::before { content: attr(data-col) " · "; font-weight: 700; color: var(--dn-argent-3); }
}
@media (max-width: 520px) {
  .d-guichet { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .d-guichet-btn.dn-btn { width: 100%; justify-content: center; }
  .d-regles-liste { grid-template-columns: minmax(0, 1fr); }
  .d-faits dd { font-size: 22px; }
  .d-exemple { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .d-exemple, .d-marges button, .d-guichet-boite { transition: none !important; }
}