/* Politoscope, gabarits 1.1.0 : bloc « Dans le viseur » de l'accueil (radar, lunette, oscilloscope), aux jetons de la charte « Veille de nuit ». */

.pol-scope { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 85% at 76% 50%, var(--ut) 0%, var(--pol-nuit) 72%); border-bottom: 1px solid var(--pol-filet); transition: background-color .8s ease; }
.pol-scope-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; align-items: center; min-height: 600px; padding-top: 44px; padding-bottom: 20px; }
.pol-scope-texte { display: flex; flex-direction: column; gap: 18px; max-width: 610px; }
.pol-scope-texte > * { transition: opacity .32s ease, transform .32s ease; }
.pol-scope-change .pol-scope-texte > * { opacity: 0; transform: translateY(8px); }
html.pol-scope-js .pol-scope:not(.pol-scope-pret) .pol-scope-texte { visibility: hidden; }
.pol-scope-titre { margin: 0; font: 600 54px/1.04 var(--pol-serif); letter-spacing: -.018em; color: var(--pol-titre); text-wrap: balance; }
.pol-scope-titre a { color: inherit !important; text-decoration: none; }
.pol-scope-titre a:hover { color: var(--pol-sable) !important; }
.pol-scope-chapeau { margin: 0; font: italic 400 20px/1.5 var(--pol-serif); color: var(--pol-texte); max-width: 560px; }
.pol-scope-chapeau:empty { display: none; }
.pol-scope-autre span { font-size: 17px; line-height: 1; }
.pol-scope-legende { margin: 0 auto; padding-bottom: 24px; font: 500 13px/1.45 var(--pol-sans); color: var(--pol-discret); }
.pol-scope-legende:empty { display: none; }
.pol-scope-instrument { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; justify-self: end; }

/* Infobulles et lecture des instruments */
.pol-infobulle { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: max-content; max-width: 230px; padding: 7px 11px; border-radius: 9px; background: rgba(15,18,25,.94); border: 1px solid var(--pol-filet); font: 600 12.5px/1.3 var(--pol-sans); color: var(--pol-titre); text-align: center; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 5; }
button:hover > .pol-infobulle, button:focus-visible > .pol-infobulle { opacity: 1; }
.pol-instrument-lecture { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font: 700 11px/1 var(--pol-sans); font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; color: var(--pol-discret); white-space: nowrap; pointer-events: none; }

/* 1. Le radar */
.pol-radar-ecran { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, color-mix(in srgb, var(--u) 9%, transparent) 0%, rgba(11,13,19,.85) 72%); border: 1px solid color-mix(in srgb, var(--u) 35%, var(--pol-filet)); box-shadow: inset 0 0 90px rgba(0,0,0,.65), 0 0 0 12px rgba(255,255,255,.018), 0 0 0 13px var(--pol-filet); }
.pol-radar-grille { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--u) 30%, var(--pol-filet)); stroke-width: .25; }
.pol-radar-grille .pol-radar-fin { stroke-dasharray: .6 1.6; opacity: .6; }
.pol-radar-balai { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 292deg, color-mix(in srgb, var(--u) 4%, transparent) 292deg, color-mix(in srgb, var(--u) 38%, transparent) 360deg); will-change: transform; }
.pol-radar-balai::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; background: linear-gradient(to top, transparent, var(--u)); box-shadow: 0 0 12px var(--u); }
.pol-radar-points { position: absolute; inset: 0; }
.pol-blip { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border: 0; border-radius: 50%; background: var(--u); opacity: .42; cursor: pointer; transition: opacity .5s ease, transform .3s ease; }
.pol-blip::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.pol-blip.ping { opacity: 1; animation: pol-ping 1.5s ease-out; }
.pol-blip:hover, .pol-blip:focus-visible, .pol-blip.actif { opacity: 1; transform: scale(1.35); }
@keyframes pol-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--u) 75%, transparent); } 100% { box-shadow: 0 0 0 20px transparent; } }
.pol-mire { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 1.5px solid var(--pol-titre); pointer-events: none; transition: left 1.1s cubic-bezier(.65,0,.2,1), top 1.1s cubic-bezier(.65,0,.2,1), border-color .4s; }
.pol-mire::before, .pol-mire::after { content: ""; position: absolute; background: var(--pol-titre); }
.pol-mire::before { left: 50%; top: -10px; bottom: -10px; width: 1.5px; margin-left: -.75px; -webkit-mask: linear-gradient(#000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px)); mask: linear-gradient(#000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px)); }
.pol-mire::after { top: 50%; left: -10px; right: -10px; height: 1.5px; margin-top: -.75px; -webkit-mask: linear-gradient(90deg, #000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px)); mask: linear-gradient(90deg, #000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px)); }
.pol-mire-verrou { border-color: var(--u); animation: pol-verrou .9s ease-out; }
@keyframes pol-verrou { 0% { transform: scale(1.6); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }

/* 2. La lunette */
.pol-ciel { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse at 30% 18%, #1b2236 0%, #0b0d13 72%); border: 1px solid var(--pol-filet); box-shadow: inset 0 0 80px rgba(0,0,0,.6); }
.pol-ciel-fond, .pol-ciel-lignes { position: absolute; inset: 0; width: 100%; height: 100%; }
.pol-ciel-lignes line { stroke: var(--u); stroke-opacity: .28; stroke-width: .22; stroke-dasharray: .8 .9; }
.pol-ciel-astres { position: absolute; inset: 0; }
.pol-astre { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; padding: 0; border: 0; border-radius: 50%; background: var(--u); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--u) 55%, transparent); cursor: pointer; animation: pol-scintille 3.2s ease-in-out infinite; animation-delay: var(--delai, 0s); }
.pol-astre::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.pol-astre:hover, .pol-astre:focus-visible, .pol-astre.actif { animation: none; transform: scale(1.5); box-shadow: 0 0 16px 4px color-mix(in srgb, var(--u) 70%, transparent); }
@keyframes pol-scintille { 50% { opacity: .55; transform: scale(.8); } }
.pol-lunette { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; pointer-events: none; box-shadow: 0 0 0 2px var(--pol-ambre), 0 0 0 9px rgba(11,13,19,.82), 0 0 0 10px var(--pol-filet), 0 24px 60px rgba(0,0,0,.6); transition: left 1.4s cubic-bezier(.65,0,.2,1), top 1.4s cubic-bezier(.65,0,.2,1); z-index: 4; }
.pol-lunette-image { position: absolute; inset: 0; background: #11141c center / cover no-repeat; background-position: 65% 35%; filter: grayscale(1) contrast(1.12) brightness(.82); transition: opacity .5s ease; }
.pol-lunette::after { content: ""; position: absolute; inset: 0; background: var(--u); mix-blend-mode: color; opacity: .7; }
.pol-lunette::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle, transparent 52%, rgba(11,13,19,.88) 100%); }
.pol-lunette-mire { position: absolute; inset: 0; z-index: 3; }
.pol-lunette-mire::before, .pol-lunette-mire::after { content: ""; position: absolute; background: rgba(245,241,234,.55); }
.pol-lunette-mire::before { left: 50%; top: 8%; bottom: 8%; width: 1px; -webkit-mask: linear-gradient(#000 0 38%, transparent 38% 62%, #000 62%); mask: linear-gradient(#000 0 38%, transparent 38% 62%, #000 62%); }
.pol-lunette-mire::after { top: 50%; left: 8%; right: 8%; height: 1px; -webkit-mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62%); mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62%); }
.pol-ciel .pol-instrument-lecture { left: 22px; bottom: 18px; transform: none; z-index: 5; }

/* 3. L'oscilloscope */
.pol-oscillo { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; }
.pol-oscillo-ecran { position: relative; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #151a24 0%, #0b0d13 78%); border: 10px solid #1a1f2b; box-shadow: inset 0 0 70px rgba(0,0,0,.85), 0 0 0 1px var(--pol-filet), 0 22px 50px rgba(0,0,0,.5); }
.pol-oscillo-ecran canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pol-oscillo-haut { position: absolute; left: 18px; top: 16px; font: 600 11.5px/1 var(--pol-sans); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--pol-doux); }
.pol-oscillo-haut b { color: var(--pol-ambre); font-weight: 700; }
.pol-oscillo .pol-oscillo-bas { left: auto; right: 18px; bottom: 16px; transform: none; color: var(--pol-ambre); opacity: .85; }
.pol-oscillo-canaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pol-canal { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--pol-filet); background: var(--pol-nuit-2); color: var(--pol-texte); font: 700 11.5px/1.1 var(--pol-sans); font-stretch: 85%; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.pol-canal i { width: 8px; height: 8px; border-radius: 50%; background: var(--u); flex: none; }
.pol-canal:hover { color: var(--pol-titre); border-color: color-mix(in srgb, var(--u) 60%, var(--pol-filet)); }
.pol-canal[aria-pressed="true"] { color: var(--pol-titre); border-color: var(--u); background: color-mix(in srgb, var(--u) 12%, var(--pol-nuit-2)); }

/* Tablette et téléphone */
@media (max-width: 960px) {
  .pol-scope-in { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding-top: 28px; }
  .pol-scope-instrument { order: -1; justify-self: center; max-width: 420px; }
  .pol-scope-titre { font-size: 40px; }
}
@media (max-width: 760px) {
  .pol-scope-instrument { max-width: 340px; }
  .pol-scope-titre { font-size: 32px; line-height: 1.08; }
  .pol-scope-chapeau { font-size: 17.5px; }
  .pol-oscillo-canaux { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pol-canal { font-size: 10px; padding: 0 4px; gap: 5px; }
  .pol-infobulle { max-width: 170px; }
}

/* Mouvement réduit : tout reste utilisable, rien ne bouge seul. */
@media (prefers-reduced-motion: reduce) {
  .pol-astre, .pol-blip.ping, .pol-mire-verrou { animation: none; }
  .pol-mire, .pol-lunette, .pol-scope-texte > * { transition: none; }
}
.pol-ciel .pol-instrument-lecture { top: 18px; bottom: auto; left: auto; right: 20px; }
/* 1.1.1 : titres longs (plus de 80 signes) ramenés à une taille qui laisse respirer le bloc. */
.pol-scope-titre.pol-long { font-size: 40px; line-height: 1.08; }
@media (max-width: 960px) { .pol-scope-titre.pol-long { font-size: 32px; } }
@media (max-width: 760px) { .pol-scope-titre.pol-long { font-size: 26px; } }
/* 1.1.2 : la légende passe au-dessus de l'instrument (demande de Frédéric, 05/11/2026, 15 h 42). */
.pol-scope-in { padding-bottom: 44px; }
.pol-scope-colonne { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 540px; justify-self: end; }
.pol-scope-colonne .pol-scope-legende { margin: 0; padding: 0; font: 500 13.5px/1.4 var(--pol-sans); color: var(--pol-discret); }
.pol-scope-colonne .pol-scope-instrument { max-width: none; justify-self: auto; }
@media (max-width: 960px) {
  .pol-scope-colonne { order: -1; justify-self: center; max-width: 420px; }
  .pol-scope-colonne .pol-scope-instrument { order: 0; max-width: none; }
}
@media (max-width: 760px) {
  .pol-scope-colonne { max-width: 340px; }
  .pol-scope-colonne .pol-scope-legende { font-size: 12.5px; text-align: center; }
}