.en-scene :is(a, button):focus-visible { outline: 2px solid var(--dn-bleui-1); outline-offset: 2px; }
.en-scene { position: relative; z-index: 1; display: grid; align-items: center; min-height: min(100svh, 1000px); padding: clamp(100px, 10vw, 128px) 0 clamp(56px, 8vw, 104px); }
.en-cadre { display: grid; }
.en-scene .p-fil { grid-column: 1 / -1; margin-bottom: 6px; }

.en-grille { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 400px); justify-content: center; align-items: center; gap: 28px clamp(28px, 6vw, 104px); }
.en-grille.is-seule { grid-template-columns: minmax(0, 480px); }
.en-carte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 38px 34px 26px; border-radius: var(--dn-r-4); animation: en-pose var(--dn-t-3) var(--dn-pose) 60ms backwards; }
@keyframes en-pose { from { opacity: 0; transform: translateY(14px); } }
.en-carte::after { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #ffffffb3, transparent); transform-origin: left; animation: en-filet .9s var(--dn-levee) .2s backwards; pointer-events: none; }
@keyframes en-filet { from { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } to { transform: scaleX(1); opacity: .55; } }
.en-ichor { position: absolute; z-index: 3; top: -36px; right: 24px; display: block; width: 76px; height: 76px; pointer-events: none; filter: drop-shadow(0 14px 20px #000b); animation: en-ichor var(--dn-t-4) var(--dn-ressort) .45s backwards; }
@keyframes en-ichor { from { opacity: 0; transform: translateY(-10px) scale(.92); } }
.en-tete { display: grid; gap: 10px; }
.en-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding-right: 92px; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--dn-argent-3); }
.en-essai { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--dn-r-rond); background: linear-gradient(180deg, var(--dn-nuance-bleu-20), var(--dn-surface-3)); border: 1px solid #ffffff2e; box-shadow: inset 0 1px 0 #ffffff24; color: var(--dn-blanc); letter-spacing: .06em; }
.en-essai[hidden] { display: none; }
.en-titre { margin: 0; font: 600 clamp(34px, 3.4vw, 48px)/1.04 var(--dn-titre); letter-spacing: -.05em; text-wrap: balance; }
.en-titre > .v-plaque { display: inline-block; padding-bottom: .16em; margin-bottom: -.12em; }
.en-lede { margin: 0; max-width: 40ch; color: var(--dn-argent-2); font-size: 15.5px; line-height: 1.5; }

.en-bientot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--dn-r-2); background: #ffffff06; border: 1px solid #ffffff12; font-size: 13.5px; line-height: 1.5; color: var(--dn-argent-3); }
.en-bientot b { color: var(--dn-argent-1); font-weight: 700; }
.en-bientot-point { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--dn-bleui-1); box-shadow: 0 0 0 4px var(--dn-bleui-lueur); }

.en-form { display: grid; gap: 16px; }
.en-champ { display: grid; gap: 7px; min-width: 0; }
.en-libelle { font-size: 13px; font-weight: 700; color: var(--dn-argent-2); }
.en-input.dn-input { padding-right: 4px; }
.en-input input { height: 48px; font-size: 16px; color: var(--dn-argent-1); } 
.en-input input:focus { color: var(--dn-blanc); }
.en-input:has(input[aria-invalid="true"]) { border-color: color-mix(in srgb, var(--dn-erreur) 70%, transparent); }
.en-input:has(input[aria-invalid="true"]):focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dn-erreur) 18%, transparent); }
.en-oeil { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--dn-argent-3); cursor: pointer; }
.en-oeil[hidden] { display: none; }
.en-oeil:hover, .en-oeil[aria-pressed="true"] { color: var(--dn-blanc); }
.en-oeil .en-oeil-barre { display: none; }
.en-oeil[aria-pressed="true"] .en-oeil-barre { display: inline; }
.en-erreur { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: #f5a3a3; }
.en-erreur[hidden] { display: none; }
.en-erreur::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: color-mix(in srgb, var(--dn-erreur) 22%, transparent); color: #ffc9c9; font: 800 11px/1 var(--dn-texte); }
.en-suggestion { margin: 0; font-size: 13px; color: var(--dn-argent-2); }
.en-suggestion[hidden] { display: none; }
.en-suggestion button, .en-lien { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: none; color: var(--dn-blanc); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--dn-bleui-2); text-underline-offset: 4px; cursor: pointer; }
.en-lien[hidden] { display: none; }
.en-apres { display: flex; justify-content: flex-end; margin-top: -8px; }
.en-apres .en-lien { font-size: 13px; font-weight: 600; color: var(--dn-argent-2); text-decoration-color: #ffffff40; }
.en-apres .en-lien:hover { color: var(--dn-blanc); text-decoration-color: var(--dn-bleui-1); }

.en-force { display: grid; gap: 7px; }
.en-jauge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.en-jauge i { height: 4px; border-radius: 2px; background: var(--dn-filet-fort); transform-origin: left; }
.en-force[data-score="1"] .en-jauge i:nth-child(-n+1), .en-force[data-score="2"] .en-jauge i:nth-child(-n+2),
.en-force[data-score="3"] .en-jauge i:nth-child(-n+3), .en-force[data-score="4"] .en-jauge i { background: var(--dn-bleui-2); animation: en-plein var(--dn-t-2) var(--dn-pose); }
.en-force[data-score="1"] .en-jauge i:nth-child(1) { background: var(--dn-alerte); }
.en-force[data-score="3"] .en-jauge i:nth-child(-n+3), .en-force[data-score="4"] .en-jauge i { background: var(--dn-bleui-1); box-shadow: 0 0 10px -2px var(--dn-bleui-2); }
@keyframes en-plein { from { transform: scaleX(.2); opacity: .4; } }
.en-force-mots { font-size: 12.5px; color: var(--dn-argent-3); }
.en-force-mots b { color: var(--dn-argent-1); font-weight: 700; }
.en-force[data-score="1"] .en-force-mots b { color: var(--dn-alerte); }

.en-envoyer.dn-btn { width: 100%; min-height: 52px; font-size: 14px; }
.en-legal { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dn-argent-3); }
.en-legal a { color: var(--dn-argent-1); text-decoration: underline; text-decoration-color: #ffffff40; text-underline-offset: 3px; }
.en-legal a:hover { text-decoration-color: var(--dn-bleui-1); }

.en-reponse:empty { display: none; }
.en-reponse-carte { display: grid; gap: 8px; padding: 16px 16px 14px; border-radius: var(--dn-r-3); background: linear-gradient(180deg, #ffffff0d, #ffffff05); border: 1px solid #ffffff1f; box-shadow: inset 0 1px 0 #ffffff14; animation: en-pose var(--dn-t-3) var(--dn-pose); }
.en-reponse-titre { margin: 0; font: 600 16px/1.25 var(--dn-titre); letter-spacing: -.02em; color: var(--dn-blanc); }
.en-reponse-texte { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dn-argent-2); }
.en-reponse-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.en-reponse-liens .dn-btn { min-height: 44px; }

.en-bascules { display: grid; gap: 0; margin-top: -4px; padding-top: 10px; border-top: 1px solid #ffffff10; }
.en-bascule { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin: 0; font-size: 13.5px; color: var(--dn-argent-3); }
.en-bascule a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--dn-blanc); font-weight: 700; text-decoration: underline; text-decoration-color: #ffffff40; text-underline-offset: 4px; }
.en-bascule a:hover { text-decoration-color: var(--dn-bleui-1); }
.en-bascule a svg { width: 15px; height: 15px; transition: translate var(--dn-t-3) var(--dn-ressort); }
.en-bascule a:hover svg { translate: 3px 0; }

.en-cote { display: grid; gap: 28px; align-self: center; animation: en-entre .48s var(--dn-pose) .3s backwards; }
@keyframes en-entre { from { opacity: 0; transform: translateY(12px); } }
.en-cote-titre { margin: 0 0 14px; font: 700 12px var(--dn-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--dn-argent-3); }
.en-debloque ul { display: grid; gap: 18px; }
.en-debloque li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; }
.en-debloque li > span:last-child { display: grid; gap: 3px; }
.en-debloque b { font-size: 15px; color: var(--dn-blanc); }
.en-debloque small { font-size: 13px; color: var(--dn-argent-3); }
.en-debloque-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--dn-bleui-1); background: radial-gradient(circle at 34% 26%, #ffffff1f, transparent 55%), var(--dn-surface-3); box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px #000, 0 10px 20px -12px #000; }
.en-debloque-essai { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--dn-filet); font-size: 13.5px; line-height: 1.6; color: var(--dn-argent-3); }
.en-debloque-essai b { color: var(--dn-blanc); }

@media (max-width: 1000px) {
  .en-grille, .en-grille.is-seule { grid-template-columns: minmax(0, 480px); }
  .en-cote { align-self: start; padding: 4px 4px 0; }
}
@media (max-width: 760px) {
  .en-scene { min-height: 0; padding-top: 96px; }
  .en-grille { row-gap: 34px; }
  .en-carte { gap: 20px; padding: 32px 18px 18px; border-radius: 22px; }
  .en-ichor { top: -36px; right: 12px; }
  .en-sur { padding-right: 74px; }
  .en-titre { font-size: clamp(32px, 9vw, 40px); }
  .en-lede { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .en-carte, .en-carte::after, .en-ichor, .en-cote, .en-jauge i, .en-reponse-carte { animation: none !important; }
  .en-bascule a svg { transition: none; }
}