@property --o-s { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --o-k { syntax: "<number>"; inherits: true; initial-value: 1; }

.e-oppf .e-defile { padding-bottom: 0; }
.e-oppf .e-of-filtres { display: grid; margin-top: 14px; }
.e-of-puces { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }
.e-of-puces--avant .e-puce::after { content: "⌄"; margin-top: -5px; color: var(--dn-argent-3); }
.e-of-puces--apres .e-puce { color: #fff; border-color: #ffffff5c; background: linear-gradient(180deg, #ffffff24, #ffffff0a); }
.e-of-puces--apres .e-puce i { width: 10px; height: 10px; opacity: .7; background: linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%); }
.e-oppf:not(.e-1) .e-of-puces--apres .e-puce { opacity: 0; scale: .6; }
.e-oppf.e-1 .e-of-puces--avant { opacity: 0; }
.e-oppf .e-of-tri { display: grid; margin-top: 12px; font-size: 13px; color: var(--dn-argent-3); }
.e-of-tri > span { grid-area: 1 / 1; }
.e-of-tri b { color: #fff; font-weight: 650; border-bottom: 1px solid #ffffff4d; }
.e-oppf:not(.e-2) .e-of-tri-apres, .e-oppf.e-2 .e-of-tri-avant { opacity: 0; }

.e-oppf .e-of-rangs { position: relative; height: calc(var(--n0) * 78px); margin-top: 12px; }
.e-of-l { position: absolute; left: 0; right: 0; top: calc(var(--r0) * 78px); grid-template-columns: 58px minmax(0, 1fr) 46px; }
.e-oppf.e-2 .e-of-l { top: calc(max(var(--r1), 0) * 78px); }
.e-oppf.e-1 .e-of-l--hors { opacity: .32; filter: grayscale(1); }
.e-oppf.e-2 .e-of-l--hors { top: calc(var(--r0) * 78px); opacity: 0; scale: .92; visibility: hidden; }
.e-of-l .e-prod-delai { white-space: nowrap; }
.e-of-score { grid-column: 3; grid-row: 1 / 3; position: relative; display: grid; place-items: center; width: 46px; height: 46px; }
.e-of-score svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.e-of-score-fond { fill: none; stroke: #ffffff1a; stroke-width: 3; }
.e-of-score-arc { fill: none; stroke: #e8ebee; stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--s) 100; }
.e-of-score b { position: relative; font: 600 15px/1 var(--dn-titre); letter-spacing: -.04em; color: #fff; }
.e-of-l--pepite .e-or { opacity: 0; scale: .6; }
.e-oppf.e-3 .e-of-l--pepite { border-color: var(--dn-or-lumiere); box-shadow: 0 0 0 1px #00000080, 0 0 30px -6px var(--dn-or-lueur), inset 0 1px 0 #f0c86a40; }
.e-oppf.e-3 .e-of-l--pepite .e-or { opacity: 1; scale: 1; }
.e-oppf.e-3 .e-of-l--pepite .e-of-score-arc { stroke: var(--dn-or-vif); }
.e-oppf.e-3 .e-of-l--pepite .e-of-score b { color: var(--dn-or-vif); }
.e-of-l--pepite::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 35%, #f0c86a2e 46%, #fff8e04d 50%, #f0c86a2e 54%, transparent 65%) 0 0 / 260% 100% no-repeat; }

.e-of-fiche { position: absolute; z-index: 4; left: 14px; right: 14px; top: 8px; bottom: 112px; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 26px; background: linear-gradient(180deg, #1a1c20, #0c0d10); border: 1px solid #ffffff26; box-shadow: 0 40px 70px -20px #000, inset 0 1px 0 #ffffff1a; }
.e-oppf:not(.e-4) .e-of-fiche { visibility: hidden; opacity: 0; clip-path: inset(204px 0 calc(100% - 274px) 0 round 18px); }
.e-of-fiche-photo { position: relative; flex: none; height: 214px; border-radius: 18px; overflow: hidden; background: #ececec; }
.e-of-fiche-photo img { width: 100%; height: 100%; object-fit: cover; }
.e-of-fiche-photo .e-or { top: 12px; right: 12px; }
.e-of-fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.e-of-fiche-tete .e-of-score { width: 56px; height: 56px; }
.e-of-fiche-tete .e-of-score-arc { stroke: var(--dn-or-vif); }
.e-of-fiche-tete .e-of-score b { font-size: 18px; color: var(--dn-or-vif); }
.e-oppf .e-of-fiche .e-vitesses { margin-top: 0 !important; }
.e-of-fiche .e-vitesses li { padding-block: 9px 10px; }
.e-oppf .e-of-achat { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; border-radius: 14px; background: #ffffff08; border: 1px solid #ffffff14; font-size: 13px; color: var(--dn-argent-3); }
.e-of-achat b { font: 600 21px/1 var(--dn-titre); letter-spacing: -.04em; color: #fff; }
.e-of-marge { margin-left: auto; font-weight: 700; color: var(--dn-argent-2); }
.e-of-fiche .e-btn { flex: none; margin-top: auto; }

html.t-anime .e-oppf .e-of-puces--avant { transition: opacity calc(.35s * var(--e-t, 1)) ease calc(.1s * var(--e-t, 1)); }
html.t-anime .e-oppf .e-of-puces--apres .e-puce { transition: opacity calc(.4s * var(--e-t, 1)) ease calc((.15s + var(--i, 0) * .12s) * var(--e-t, 1)), scale calc(.6s * var(--e-t, 1)) var(--e-ressort) calc((.15s + var(--i, 0) * .12s) * var(--e-t, 1)); }
html.t-anime .e-oppf.is-vol.e-1 .e-of-puces--apres .e-puce { transition-delay: calc(.78s + var(--i, 0) * .09s); }
html.t-anime .e-oppf .e-of-tri > span { transition: opacity calc(.4s * var(--e-t, 1)) ease calc(.55s * var(--e-t, 1)); }
html.t-anime .e-oppf .e-of-l { transition: top calc(.9s * var(--e-t, 1)) var(--e-ressort) calc(.42s * var(--e-t, 1)), opacity calc(.4s * var(--e-t, 1)) ease, scale calc(.4s * var(--e-t, 1)) ease, filter calc(.4s * var(--e-t, 1)) ease, border-color calc(.6s * var(--e-t, 1)) ease, box-shadow calc(.6s * var(--e-t, 1)) ease, visibility 0s linear; }
html.t-anime .e-oppf.e-1 .e-of-l--hors { transition-delay: 0s, calc(.55s * var(--e-t, 1)), 0s, calc(.55s * var(--e-t, 1)); }
html.t-anime .e-oppf.e-2 .e-of-l--hors { transition: opacity calc(.38s * var(--e-t, 1)) ease, scale calc(.38s * var(--e-t, 1)) ease, filter 0s, visibility 0s linear calc(.38s * var(--e-t, 1)); }
html.t-anime .e-oppf .e-of-l--pepite .e-or { transition: opacity calc(.35s * var(--e-t, 1)) ease, scale calc(.6s * var(--e-t, 1)) var(--e-ressort); }
html.t-anime .e-oppf.e-3 .e-of-l--pepite .e-or { transition-delay: calc(.25s * var(--e-t, 1)); }
html.t-anime .e-oppf .e-of-score-arc { transition: stroke calc(.5s * var(--e-t, 1)) ease; }
html.t-anime .e-oppf.e-3:not(.e-4) .e-of-l--pepite::after { animation: e-of-lame calc(1.2s * var(--e-t, 1)) var(--dn-glisse) calc(.1s * var(--e-t, 1)) both; }
@keyframes e-of-lame { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
html.t-anime .e-oppf .e-of-fiche { transition: clip-path calc(.85s * var(--e-t, 1)) var(--dn-levee) calc(.5s * var(--e-t, 1)), opacity calc(.3s * var(--e-t, 1)) ease calc(.5s * var(--e-t, 1)), visibility 0s linear calc(.5s * var(--e-t, 1)); }
html.t-anime .e-oppf:not(.e-4) .e-of-fiche { transition-delay: 0s, 0s, calc(.3s * var(--e-t, 1)); }
html.t-anime .e-oppf .e-of-fiche > * { transition: opacity calc(.5s * var(--e-t, 1)) ease calc((.85s + var(--j, 0) * .07s) * var(--e-t, 1)), translate calc(.7s * var(--e-t, 1)) var(--dn-levee) calc((.85s + var(--j, 0) * .07s) * var(--e-t, 1)); }
html.t-anime .e-oppf:not(.e-4) .e-of-fiche > * { opacity: 0; translate: 0 14px; transition-delay: 0s; }
.e-of-fiche > :nth-child(2) { --j: 1; } .e-of-fiche > :nth-child(3) { --j: 2; } .e-of-fiche > :nth-child(4) { --j: 3; } .e-of-fiche > :nth-child(5) { --j: 4; } .e-of-fiche > :nth-child(6) { --j: 5; }

.o-tag b { font: 600 1.08em/1 var(--dn-titre); letter-spacing: -.03em; }

.o-phrase { margin: 22px 0 0; max-width: 46ch; padding: 18px 20px; border-radius: 20px; background: linear-gradient(180deg, #16181cf2, #0e1013f2); box-shadow: inset 0 1px 0 #ffffff17, 0 0 0 1px #ffffff12; font-size: 16px; line-height: 2.1; color: var(--dn-argent-2); }
.o-phrase b { padding: 5px 11px; border-radius: var(--dn-r-rond); border: 1px solid #ffffff3d; background: linear-gradient(180deg, #ffffff1c, #ffffff08); color: #fff; font-weight: 700; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.o-phrase b.is-part { animation: o-part .7s var(--dn-levee); }
@keyframes o-part { 30% { border-color: #fff; box-shadow: 0 0 18px #ffffff66; } }
.o-tri { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 22px 0 0; font-size: 14px; color: var(--dn-argent-3); }
.o-tri > span { padding: 8px 14px; border-radius: var(--dn-r-rond); border: 1px solid #ffffff1f; }
.o-tri > span:last-child { border-color: #ffffff5c; background: linear-gradient(180deg, #ffffff1f, #ffffff08); color: #fff; }
.o-tri > i { width: 26px; height: 1.5px; background: linear-gradient(90deg, #ffffff40, #fff); position: relative; }
.o-tri > i::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; rotate: 45deg; }
.o-mini { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 8px; margin-top: 22px; }
.o-mini li { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: #ffffff08; border: 1px solid #ffffff14; }
.o-mini small { font: 700 12px/1 var(--dn-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--dn-argent-3); white-space: nowrap; }
.o-mini b { font: 600 22px/1 var(--dn-titre); letter-spacing: -.04em; color: #fff; white-space: nowrap; }
@media (max-width: 520px) { .o-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o-vol { position: fixed; z-index: 70; left: 0; top: 0; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--dn-r-rond); border: 1px solid #ffffff73; background: linear-gradient(180deg, #2c2f35, #131518); color: #fff; font: 650 13px/1 var(--dn-texte); white-space: nowrap; pointer-events: none; transform-origin: 0 0; box-shadow: 0 18px 30px -12px #000, 0 0 22px -6px #ffffff73; }


.o-score-tete { max-width: 820px; }
.o-chapo { margin: 22px 0 0; max-width: 62ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--dn-argent-2); text-wrap: pretty; }
.o-choix { min-width: 0; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; border: 0; }
.o-choix legend { margin-bottom: 14px; padding: 0; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--dn-argent-3); }
.o-choix legend span { font-weight: 600; letter-spacing: .02em; text-transform: none; }
.o-choix-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.o-choix-m { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 5px 18px 5px 5px; border-radius: var(--dn-r-rond); border: 1px solid #ffffff1f; background: #ffffff08; color: var(--dn-argent-2); font-size: 14px; font-weight: 650; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.o-choix-m input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.o-choix-img { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #ececec; }
.o-choix-img img { width: 100%; height: 100%; object-fit: cover; }
.o-choix-img svg { width: 26px; color: var(--dn-argent-3); }
.o-choix-img:has(svg) { background: radial-gradient(circle at 50% 35%, #2a2d33, #121417); border: 1px dashed #ffffff33; }
.o-choix-m b { font: 600 15px/1 var(--dn-titre); letter-spacing: -.03em; color: var(--dn-argent-1); }
.o-choix-m:hover { border-color: #ffffff3d; color: #fff; }
.o-choix-m.is-choisi, .o-choix-m:has(input:checked) { border-color: #ffffff6b; background: linear-gradient(180deg, #ffffff1f, #ffffff08); color: #fff; box-shadow: inset 0 1px 0 #ffffff2e, 0 0 26px -8px #ffffff59; }
.o-choix-m--pepite.is-choisi, .o-choix-m--pepite:has(input:checked) { border-color: var(--dn-or-lumiere); box-shadow: inset 0 1px 0 #f0c86a40, 0 0 26px -8px var(--dn-or-lueur); }
.o-choix-m--pepite.is-choisi b, .o-choix-m--pepite:has(input:checked) b { color: var(--dn-or-vif); }
.o-choix-m:has(input:focus-visible) { outline: 2px solid var(--dn-bleui-1); outline-offset: 3px; }

.o-cadran-scene { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 104px); margin-top: clamp(28px, 3.4vw, 48px); }
.o-cadran { margin: 0; display: grid; gap: 22px; justify-items: center; }
.o-cadran-disque { position: relative; width: min(100%, 470px); aspect-ratio: 1; }
.o-cadran-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.o-grad line { stroke: #f4f6f8; stroke-width: 2; stroke-linecap: round; opacity: clamp(.13, var(--o-s) - var(--n), 1); }
.o-grad line:nth-child(10n + 1) { stroke-width: 2.6; }
.o-arc-fond { fill: none; stroke: #ffffff12; stroke-width: 3; }
.o-arc { fill: none; stroke: #e8ebee; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: var(--o-s) 100; filter: drop-shadow(0 0 6px #ffffff80); transition: stroke .4s ease; }
.o-cadran.is-pepite .o-arc { stroke: var(--dn-or-vif); filter: drop-shadow(0 0 7px #f0c86ab3); }
.o-cadran.is-muet .o-arc { opacity: 0; }
.o-medaillon { position: absolute; left: 50%; top: 50%; width: 54%; aspect-ratio: 1; translate: -50% -55%; overflow: hidden; border-radius: 50%; background: #ececec; box-shadow: 0 0 0 6px #0b0c0e, 0 0 0 7px #ffffff2e, 0 40px 60px -30px #000; }
.o-medaillon img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: opacity .13s ease, scale .32s var(--dn-levee); }
.o-medaillon img.is-sort { opacity: 0; scale: .94; transition-duration: .13s; }
.o-medaillon .o-cadran-vide { display: none; }
.o-cadran.is-muet .o-medaillon { background: radial-gradient(circle at 50% 35%, #23262b, #0d0f12); }
.o-cadran.is-muet .o-medaillon img { visibility: hidden; }
.o-cadran.is-muet .o-cadran-vide { display: block; position: absolute; left: 20%; top: 30%; width: 60%; color: var(--dn-argent-4); }
.o-plaque { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; display: flex; align-items: baseline; gap: 4px; margin: 0; padding: 10px 20px 12px; border-radius: 22px; background: linear-gradient(180deg, #17191df0, #0b0c0ef5); border: 1px solid #ffffff2e; box-shadow: inset 0 1px 0 #ffffff26, 0 24px 40px -18px #000; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.o-plaque b { font: 600 clamp(40px, 4.6vw, 62px)/.92 var(--dn-titre); letter-spacing: -.06em; color: transparent; background-image: var(--dn-chrome-reflet), var(--dn-chrome-chiffre); -webkit-background-clip: text; background-clip: text; padding-bottom: .04em; }
.o-plaque span { font: 600 16px/1 var(--dn-titre); color: var(--dn-argent-3); }
.o-cadran.is-pepite .o-plaque { border-color: var(--dn-or-lumiere); box-shadow: inset 0 1px 0 #f0c86a40, 0 0 30px -8px var(--dn-or-lueur), 0 24px 40px -18px #000; }
.o-cadran.is-pepite .o-plaque b { background-image: var(--dn-or-reflet); }
.o-badge { position: absolute; left: 50%; top: 8.5%; translate: -50% 0; margin: 0; padding: 6px 12px; border-radius: var(--dn-r-rond); background: var(--dn-charbon); border: 1px solid var(--dn-or-lumiere); color: var(--dn-or-vif); font: 800 12px/1 var(--dn-texte); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 20px var(--dn-or-lueur); opacity: 0; scale: .7; transition: opacity .3s ease, scale .45s var(--dn-ressort); }
.o-cadran.is-pepite .o-badge { opacity: 1; scale: 1; }
.o-cadran-ichor { position: absolute; right: 4%; top: 6%; width: 56px; height: 56px; }
.o-cadran-ichor > span { display: block; width: 100%; height: 100%; }
.o-cadran-ichor.is-hop { animation: o-hop .7s var(--dn-ressort); }
.o-cadran-ichor.is-hoche { animation: o-hoche .6s ease-in-out; }
.o-cadran-ichor.is-doute { animation: o-doute .9s ease-in-out; }
@keyframes o-hop { 35% { translate: 0 -14px; scale: 1.06 .94; } 60% { translate: 0 0; scale: .96 1.04; } }
@keyframes o-hoche { 30% { rotate: 8deg; } 65% { rotate: -4deg; } }
@keyframes o-doute { 20% { rotate: -10deg; translate: -3px 0; } 45% { rotate: 9deg; translate: 3px 0; } 70% { rotate: -5deg; } }
.o-cadran-dit { display: grid; gap: 6px; justify-items: center; max-width: 40ch; text-align: center; }
.o-cadran-nom { font: 600 22px/1.1 var(--dn-titre); letter-spacing: -.04em; color: var(--dn-argent-1); }
.o-cadran-nom small { display: block; margin-bottom: 4px; font: 700 12px/1 var(--dn-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--dn-argent-3); }
.o-cadran-verdict { font-size: 15px; line-height: 1.5; color: var(--dn-argent-2); text-wrap: balance; }
html.v-pret .o-cadran:not(.is-vu) { --o-s: 0 !important; }
html.t-anime .o-cadran { transition: --o-s 1.25s var(--dn-levee) .15s; }
html.t-anime .o-cadran.is-change { transition: --o-s .48s var(--dn-levee); }

.o-raisons { display: grid; gap: 14px; }
.o-raison { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; padding: 22px 24px; border-radius: 22px; background: linear-gradient(180deg, #15171bf2, #0d0f12f2); box-shadow: inset 0 1px 0 #ffffff17, 0 0 0 1px #ffffff12; }
.o-raison-ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(160deg, #2a2e34, #121417); box-shadow: inset 0 1px 0 #ffffff26, 0 0 0 1px #ffffff14; }
.o-raison-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.o-raison-nom { margin: 0; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--dn-argent-3); }
.o-raison-v { margin: 0; font-size: 15px; line-height: 1.45; color: var(--dn-argent-2); }
.o-raison-v b { margin-right: 4px; font: 600 clamp(26px, 2.3vw, 34px)/1 var(--dn-titre); letter-spacing: -.05em; color: #fff; }
@media (min-width: 900px) {
  .o-raison::before { content: ""; position: absolute; right: 100%; top: 50%; width: clamp(28px, 5vw, 96px); height: 1px; background: linear-gradient(90deg, transparent, #ffffff4d); }
  .o-raison::after { content: ""; position: absolute; right: calc(100% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }
}
html.v-pret .o-raison { transition: opacity .6s ease calc(.35s + var(--i) * .12s), translate .8s var(--dn-levee) calc(.35s + var(--i) * .12s); }
html.v-pret .o-cadran-scene:not(.is-vu) .o-raison { opacity: 0; translate: 24px 0; }

.o-regle { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 72px); margin-top: clamp(56px, 7vw, 104px); padding: clamp(24px, 3.4vw, 44px); border-radius: 32px; background: radial-gradient(120% 140% at 0% 0%, #1b1e22, #0c0d10 60%); box-shadow: inset 0 1px 0 #ffffff1a, 0 0 0 1px #ffffff12, 0 50px 80px -50px #000; }
.o-regle-texte h3 { margin: 0; font: 600 clamp(24px, 2.4vw, 34px)/1.08 var(--dn-titre); letter-spacing: -.045em; color: var(--dn-argent-1); text-wrap: balance; }
.o-regle-texte p { margin: 12px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--dn-argent-3); }
.o-lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--dn-argent-1); font-weight: 700; text-decoration: none; }
.o-lien span { transition: translate .25s var(--dn-levee); }
.o-lien:hover span { translate: 4px 0; }
.o-lien:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.o-vitesses { min-width: 0; margin: 0; padding: 0; border: 0; }
.o-vitesses legend { margin-bottom: 8px; padding: 0; font-size: 15px; font-weight: 700; color: var(--dn-argent-2); }
.o-piste { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 34px; }
.o-piste-rail { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 14px; height: 6px; border-radius: 6px; background: #ffffff14; box-shadow: inset 0 1px 2px #000; }
.o-piste-plein { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--o-k) * 50%); border-radius: inherit; background: linear-gradient(90deg, #8d949c, #f4f6f8); box-shadow: 0 0 12px #ffffff40; }
.o-v { position: relative; display: grid; justify-items: center; gap: 5px; min-height: 64px; padding: 10px 4px; border-radius: 16px; text-align: center; cursor: pointer; }
.o-v input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.o-v-mot { font: 600 16px/1 var(--dn-titre); letter-spacing: -.03em; color: var(--dn-argent-3); transition: color .25s ease; }
.o-v-delai { font-size: 13px; color: var(--dn-argent-3); }
.o-v:hover .o-v-mot, .o-v.is-choisi .o-v-mot, .o-v:has(input:checked) .o-v-mot { color: #fff; }
.o-v:has(input:focus-visible) { outline: 2px solid var(--dn-bleui-1); outline-offset: 2px; }
.o-piste.is-tenu .o-v:not(.is-choisi) .o-v-mot { color: var(--dn-argent-3); }
.o-perle { position: absolute; z-index: 2; top: 5px; left: calc(100% / 6 + var(--o-k) * 100% / 3); width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #c9ced3 40%, #6c737b 75%, #2a2e33); box-shadow: 0 0 0 5px #ffffff14, 0 6px 14px #000c, 0 0 20px #ffffff4d; cursor: grab; touch-action: none; }
.o-perle::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
html.t-anime .o-piste:not(.is-tenu) { transition: --o-k .55s var(--dn-ressort); }
.o-piste.is-tenu .o-perle { cursor: grabbing; scale: 1.12; }
.o-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 24px 0 0; }
.o-res > div { padding: 16px 16px 18px; border-radius: 18px; background: #ffffff08; border: 1px solid #ffffff14; }
.o-res dt { font: 700 12px/1.2 var(--dn-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--dn-argent-3); }
.o-res dd { margin: 8px 0 0; font: 600 clamp(24px, 2.2vw, 32px)/1 var(--dn-titre); letter-spacing: -.05em; color: #fff; }
.o-res-marge dd { color: transparent; background-image: var(--dn-chrome-reflet), var(--dn-chrome-chiffre); -webkit-background-clip: text; background-clip: text; padding-bottom: .04em; }
.o-regle.is-muet :is(.o-res, .o-piste) { opacity: .32; pointer-events: none; }
.o-regle-vide { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--dn-argent-2); }
.o-regle .v-demo { margin-top: 16px; }

@media (max-width: 899.98px) {
  .o-cadran-scene, .o-regle { grid-template-columns: minmax(0, 1fr); }
  .o-cadran-disque { width: min(100%, 400px); }
}

.o-profils-tete { max-width: 820px; }
.o-profils-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 56px); }
.o-profils-choix { display: grid; gap: 10px; }
.o-profil { position: relative; display: grid; gap: 6px; width: 100%; padding: 18px 22px 20px; border: 0; border-radius: 20px; background: linear-gradient(180deg, #15171bf2, #0d0f12f2); box-shadow: inset 0 1px 0 #ffffff14, 0 0 0 1px #ffffff12; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .3s ease, background .3s ease, translate .3s var(--dn-levee); }
.o-profil:hover { box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 1px #ffffff2e; }
.o-profil[aria-pressed="true"] { background: linear-gradient(180deg, #25282df5, #121418f5); box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 1px #ffffff5c, 0 24px 40px -24px #000; }
.o-profil::before { content: ""; position: absolute; left: -1px; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #fff, #9aa0a7); box-shadow: 0 0 12px #ffffff80; opacity: 0; scale: 1 .4; transition: opacity .3s ease, scale .45s var(--dn-ressort); }
.o-profil[aria-pressed="true"]::before { opacity: 1; scale: 1; }
.o-profil:focus-visible { outline: 2px solid var(--dn-bleui-1); outline-offset: 3px; }
.o-profil-puce { font: 600 18px/1.15 var(--dn-titre); letter-spacing: -.03em; color: var(--dn-argent-1); }
.o-profil-phrase { font-size: 14.5px; line-height: 1.5; color: var(--dn-argent-3); }
.o-profil-phrase b { font-weight: 700; color: var(--dn-argent-1); }
.o-profil-offre { font-size: 13px; font-weight: 700; color: var(--dn-argent-3); }
.o-podium-carte { position: sticky; top: 104px; padding: clamp(20px, 2.6vw, 32px); border-radius: 28px; background: radial-gradient(120% 120% at 100% 0%, #1e2126, #0c0d10 62%); box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px #ffffff14, 0 60px 90px -50px #000; }
.o-podium-phrase { min-height: 3em; margin: 0; font-size: 16px; line-height: 1.5; color: var(--dn-argent-2); }
.o-podium-phrase b { color: #fff; }
.o-podium { position: relative; height: 242px; margin-top: 18px; }
.o-podium-l { position: absolute; left: 0; right: 0; top: calc(var(--r) * 84px); display: grid; grid-template-columns: 22px 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; height: 74px; padding: 8px 18px 8px 12px; border-radius: 18px; background: linear-gradient(180deg, #1a1c20, #111316); border: 1px solid #ffffff17; transition: top .75s var(--dn-ressort), opacity .4s ease .3s, scale .45s var(--dn-levee) .3s; }
.o-podium-l.is-hors { opacity: 0; scale: .94; visibility: hidden; transition: opacity .25s ease, scale .25s ease, visibility 0s linear .25s; }
.o-podium-l.is-entre { opacity: 0; scale: .94; transition: none; }
.o-podium-rang { grid-row: span 2; font: 600 17px/1 var(--dn-titre); color: var(--dn-argent-3); text-align: center; }
.o-podium-l img { grid-row: span 2; width: 56px; height: 56px; border-radius: 13px; object-fit: cover; background: #ececec; }
.o-podium-nom { align-self: end; min-width: 0; overflow: hidden; font: 650 16px/1.15 var(--dn-texte); color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.o-podium-nom small { display: block; font-size: 12px; font-weight: 700; color: var(--dn-argent-3); }
.o-podium-delai { grid-column: 3; align-self: start; font-size: 13px; color: var(--dn-argent-3); }
.o-podium-score { grid-column: 4; grid-row: 1 / 3; font: 600 28px/1 var(--dn-titre); letter-spacing: -.05em; color: #fff; }
.o-podium-l--pepite { border-color: var(--dn-or-lumiere); box-shadow: 0 0 26px -8px var(--dn-or-lueur); }
.o-podium-l--pepite .o-podium-score { color: transparent; background: var(--dn-or-reflet); -webkit-background-clip: text; background-clip: text; }
.o-podium-offre { margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff14; }
.o-offre-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.o-offre-l[hidden] { display: none; }
.o-offre-l p { margin: 0; font-size: 15px; color: var(--dn-argent-2); }
.o-offre-l p b { font: 600 18px/1 var(--dn-titre); letter-spacing: -.03em; color: #fff; }
.o-offre-l p span { display: block; margin-top: 6px; font-size: 14px; color: var(--dn-argent-3); }
.o-offre-l:not([hidden]) { animation: p-monte .45s var(--dn-levee) both; }
.o-podium-carte .v-demo { margin-top: 18px; }
html.v-pret .o-profils-choix[data-v-entre] > .o-profil { transition: opacity .5s ease calc(var(--i) * 60ms), translate .6s var(--dn-levee) calc(var(--i) * 60ms), box-shadow .3s ease, background .3s ease; }
html.v-pret .o-profils-choix[data-v-entre]:not(.is-vu) > .o-profil { opacity: 0; translate: -16px 0; }
@media (max-width: 899.98px) {
  .o-profils-grille { grid-template-columns: minmax(0, 1fr); }
  .o-profils-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-profil { align-content: center; min-height: 64px; padding: 14px 16px; }
  .o-profil-puce { font-size: 14px; letter-spacing: -.02em; }
  html.v-pret .o-profil-phrase, html.v-pret .o-profil-offre { display: none; }
  .o-podium-carte { position: relative; top: auto; }
  .o-podium-l { padding-right: 14px; column-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .o-score *, .o-profils *, .o-vol { transition: none !important; animation: none !important; }
  .o-cadran, .o-piste { transition: none !important; }
}

.o-cadran.is-bientot .o-grad line { opacity: .36; }
.o-cadran.is-bientot .o-grad line:nth-child(10n + 1) { opacity: .62; }
.o-cadran.is-bientot.is-vu .o-grad line { animation: o-grad-bientot .9s ease-out calc(var(--n) * 16ms) 1; }
@keyframes o-grad-bientot { 25% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .o-cadran.is-bientot.is-vu .o-grad line { animation: none; } }
.o-cadran.is-bientot .o-plaque b { font-size: clamp(25px, 2.7vw, 36px); letter-spacing: -.03em; line-height: 1; padding-block: .08em; }
.o-choix-annonces small { font: 600 11px/1 var(--dn-texte); letter-spacing: 0; color: var(--dn-argent-3); }
.o-raison-v b.v-bientot { margin: 0 6px 0 0; vertical-align: .12em; }
.o-regle-suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 0; padding: 12px 16px; border-radius: 18px; background: #ffffff08; border: 1px solid #ffffff14; font-size: 14px; line-height: 1.35; color: var(--dn-argent-2); }
.e-of-score--prix { width: auto; height: auto; }
.e-of-score--prix b { font-size: 14px; }