/* L'aperçu du résultat : l'accueil Nuvio qu'on obtient à la fin du guide, sur un écran de TV. */
.voir-resultat { display: inline-flex; align-items: center; gap: 8px; font: 800 .92rem var(--body); padding: 9px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255,207,107,.55); background: rgba(255,207,107,.08); color: var(--bulb); }
.voir-resultat:hover { background: rgba(255,207,107,.16); }
.voir-resultat svg { width: 18px; height: 18px; }
/* Les boutons d’aperçu sont une TV allumée dans une salle sombre. Au repos, l’écran de l’icône vacille et sa
   lumière éclaire le bouton depuis la gauche ; un reflet de projecteur le traverse de temps en temps.
   Au survol (ou au clavier), tout le bouton devient l’écran qui s’allume, comme un vieux tube : un trait de
   lumière, qui s’ouvre en grand ; il s’éteint en se refermant. Rien ne tourne hors de l’écran (.ap-vu). */
[data-resultat] { --ap-x: 26px; position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .12s cubic-bezier(.16,1,.3,1), border-color .25s ease, color .2s ease, box-shadow .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 6px 18px -8px rgba(255,207,107,.25), inset 30px 0 26px -20px rgba(255,207,107,.22); }
.apercu-lien[data-resultat] { --ap-x: 30px; }
[data-resultat] svg { overflow: visible; flex: none; }
[data-resultat] .ap-ecran { fill: currentColor; opacity: .22; transition: opacity .2s ease, fill .2s ease; }
[data-resultat] .ap-play { transform-box: fill-box; transform-origin: center; transition: fill .2s ease, transform .35s cubic-bezier(.16,1,.3,1); }
/* L’écran allumé : un aplat doré, plus clair au centre, d’abord fermé sur un trait. */
[data-resultat]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 70% 120% at var(--ap-x) 50%, #fff4d8, var(--bulb) 46%, #f2b54e);
  clip-path: inset(50% 0 50% 0); transition: opacity .22s ease; }
/* Le reflet du projecteur */
[data-resultat]::after { content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,236,190,.3) 46%, rgba(255,250,235,.62) 50%, rgba(255,236,190,.3) 54%, transparent 68%);
  transform: translateX(-110%); }
[data-resultat].ap-vu { animation: ap-lueur 5.2s linear infinite; }
[data-resultat].ap-vu .ap-ecran { animation: ap-vacille 5.2s steps(1, end) infinite; }
[data-resultat].ap-vu::after { animation: ap-reflet 6.5s cubic-bezier(.45,0,.2,1) .8s infinite; }
@keyframes ap-lueur {
  0%, 100% { box-shadow: 0 6px 18px -8px rgba(255,207,107,.25), inset 30px 0 26px -20px rgba(255,207,107,.22); }
  18% { box-shadow: 0 7px 24px -6px rgba(255,207,107,.42), inset 40px 0 30px -18px rgba(255,207,107,.4); }
  21% { box-shadow: 0 6px 16px -8px rgba(255,207,107,.18), inset 24px 0 22px -20px rgba(255,207,107,.14); }
  24% { box-shadow: 0 7px 26px -5px rgba(255,207,107,.46), inset 44px 0 30px -18px rgba(255,207,107,.44); }
  58% { box-shadow: 0 6px 20px -7px rgba(255,170,110,.32), inset 34px 0 28px -20px rgba(255,170,110,.3); }
  76% { box-shadow: 0 8px 28px -5px rgba(255,207,107,.5), inset 48px 0 32px -18px rgba(255,207,107,.46); }
}
@keyframes ap-vacille { 0% { opacity: .3; } 18% { opacity: .6; } 21% { opacity: .18; } 24% { opacity: .7; } 40% { opacity: .42; } 58% { opacity: .34; } 76% { opacity: .75; } 88% { opacity: .4; } }
@keyframes ap-reflet { 0% { opacity: 1; transform: translateX(-110%); } 20% { opacity: 1; transform: translateX(110%); } 21%, 100% { opacity: 0; transform: translateX(110%); } }
@keyframes ap-tube { 0% { clip-path: inset(50% 46% 50% 46%); filter: brightness(1.6); } 30% { clip-path: inset(47% 0 47% 0); filter: brightness(1.5); } 100% { clip-path: inset(0); filter: none; } }
/* Survol à la souris, ou focus au clavier : l’écran s’allume. (Au doigt, pas de survol « collé » après l’appui.) */
[data-resultat]:focus-visible { border-color: var(--bulb); color: var(--ink); outline: 2px solid var(--bulb); outline-offset: 3px; transition-delay: 0s, 0s, .14s, 0s;
  box-shadow: 0 10px 34px -8px rgba(255,207,107,.65); animation: none; }
[data-resultat]:focus-visible::before { opacity: 1; animation: ap-tube .5s cubic-bezier(.16,1,.3,1) both; }
[data-resultat]:focus-visible::after { animation: none; opacity: 0; }
[data-resultat]:focus-visible .ap-ecran { fill: var(--ink); opacity: 1; animation: none; }
[data-resultat]:focus-visible .ap-play { fill: var(--bulb); transform: scale(1.2); }
@media (hover: hover) {
  [data-resultat]:hover { border-color: var(--bulb); color: var(--ink); box-shadow: 0 10px 34px -8px rgba(255,207,107,.65); animation: none;
    transition: transform .12s cubic-bezier(.16,1,.3,1), border-color .25s ease, color .16s ease .14s, box-shadow .35s cubic-bezier(.16,1,.3,1); }
  [data-resultat]:hover::before { opacity: 1; animation: ap-tube .5s cubic-bezier(.16,1,.3,1) both; }
  [data-resultat]:hover::after { animation: none; opacity: 0; }
  [data-resultat]:hover .ap-ecran { fill: var(--ink); opacity: 1; animation: none; transition-delay: .14s; }
  [data-resultat]:hover .ap-play { fill: var(--bulb); transform: scale(1.2); }
}
/* Au clic, le bouton s’enfonce. */
[data-resultat]:active { transform: scale(.96); transition-duration: .06s; }
@media (prefers-reduced-motion: reduce) {
  [data-resultat].ap-vu, [data-resultat].ap-vu .ap-ecran, [data-resultat].ap-vu::after { animation: none; }
  [data-resultat] .ap-ecran { opacity: .45; }
  [data-resultat]::before { clip-path: none; transition: opacity .2s ease; }
  [data-resultat]:hover::before, [data-resultat]:focus-visible::before { animation: none; }
  [data-resultat]:active { transform: none; }
}
.resultat { position: fixed; inset: 0; z-index: 86; display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; background: rgba(5,3,4,.97); animation: rise .3s ease both; }
.resultat .tv { width: min(1180px, calc(100vw - 32px), calc((100vh - 170px) * 16 / 9)); padding: 10px; border-radius: 16px; background: #050304; box-shadow: 0 0 0 2px #2b1820, 0 30px 80px rgba(0,0,0,.7); }
.resultat .ecran { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0D0D0D; container-type: inline-size; }
/* Sous l'écran : la télécommande (Retour) et les mêmes réglages d'affichage qu'en salle 2 */
.r-outils { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.r-outils .seg { display: inline-flex; border: 1px solid var(--seat); border-radius: 10px; overflow: hidden; }
.r-outils button { font: 700 .85rem var(--body); padding: 8px 14px; border: 0; background: var(--velvet); color: var(--dim); cursor: pointer; }
.r-outils .seg button + button { border-left: 1px solid var(--seat); }
.r-outils button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.r-outils .pp, .r-outils .retour { border: 1px solid var(--seat); border-radius: 10px; }
.r-outils .retour { color: var(--cream); }
.resultat .legende { margin: 0; max-width: 66ch; text-align: center; color: var(--dim); font-size: .95rem; }
.resultat .legende a { color: var(--bulb); }
.resultat .fermer { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font: 800 1.3rem/1 var(--body); cursor: pointer; }
.apercu-lien[data-resultat] { font-family: var(--body); cursor: pointer; }
/* Avant / après : Nuvio de base à gauche du trait (découpé à --aa-x), l'accueil du guide à droite. */
.r-outils .aa-bouton { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,207,107,.6); border-radius: 10px; background: rgba(255,207,107,.1); color: var(--bulb); }
.r-outils .aa-bouton svg { width: 18px; height: 18px; flex: none; }
.r-outils .aa-bouton[aria-pressed="true"] { background: var(--bulb); border-color: var(--bulb); color: var(--ink); }
.resultat .ecran { --aa-x: 50%; }
.aa-avant { position: absolute; inset: 0; z-index: 9; clip-path: inset(0 calc(100% - var(--aa-x)) 0 0); }
.aa-trait { position: absolute; z-index: 10; top: 0; bottom: 0; left: var(--aa-x); width: 0; touch-action: none; cursor: ew-resize; }
.aa-trait::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--bulb); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 14px rgba(255,207,107,.6); }
/* Une bande invisible de 28 px autour du trait : facile à attraper, au doigt comme à la souris. */
.aa-trait::after { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 28px; }
.aa-poignee { position: absolute; z-index: 1; top: 50%; left: 0; width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  background: var(--bulb); color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.5); transition: transform .15s ease; }
.aa-poignee svg { width: 24px; height: 24px; }
.aa-poignee:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.aa-trait:hover .aa-poignee, .aa-tire .aa-poignee { transform: translate(-50%, -50%) scale(1.08); }
.aa-etiq { position: absolute; z-index: 11; top: 10px; padding: 4px 10px; border-radius: 99px; pointer-events: none; font: 800 .78rem/1.3 var(--body); letter-spacing: .02em; white-space: nowrap;
  background: rgba(10,6,8,.78); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: opacity .2s ease; }
.aa-etiq.g { left: 10px; }
.aa-etiq.d { right: 10px; color: var(--bulb); box-shadow: inset 0 0 0 1px rgba(255,207,107,.45); }
.aa-etiq.loin { opacity: 0; }
.aa-tire, .aa-tire * { user-select: none; }
/* À l'arrivée : le trait part de la droite et balaie l'écran jusqu'au milieu. */
.ecran.aa-balaye .aa-avant { animation: aa-coupe .9s cubic-bezier(.65,0,.25,1) both; }
.ecran.aa-balaye .aa-trait { animation: aa-glisse .9s cubic-bezier(.65,0,.25,1) both; }
@keyframes aa-coupe { from { clip-path: inset(0 0 0 0); } }
@keyframes aa-glisse { from { left: 100%; } }
@media (max-width: 560px) { .aa-etiq { top: 6px; padding: 2px 7px; font-size: .68rem; } .aa-etiq.g { left: 6px; } .aa-etiq.d { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .ecran.aa-balaye .aa-avant, .ecran.aa-balaye .aa-trait { animation: none; } .aa-poignee { transition: none; } }
/* Doigt plutôt que souris : cibles plus grandes, champs en 16 px (sinon iOS zoome dans la page). */
@media (hover: none), (pointer: coarse) {
  .r-outils button { min-height: 44px; }
  .resultat .nvo-rech input { font-size: 16px; }
  .resultat .fermer { width: 44px; height: 44px; }
}