/* Observatoire électoral du Millénaire, exploration « facettes ».
   Deux variantes d'une même direction graphique inspirée d'une référence
   fournie par William (« FRANCE 2027 ») : silhouette géographique en
   facettes fines dorées sur fond d'espace, composition centrée. La
   silhouette reste une géométrie réelle (Natural Earth via world-atlas,
   la même donnée que la carte plate et le globe couleur) ; seul le
   maillage de facettes à l'intérieur est décoratif, pas une donnée :
   chaque triangle relie le centroïde réel d'un pays à un échantillon de
   ses propres sommets, rien n'est une frontière inventée.

   Chaque section est plus haute que l'écran (220vh) et sa scène (fond
   étoilé, carte ou globe) reste fixe à l'écran pendant le défilement
   (`position:sticky`), pendant que le bloc de texte s'efface et remonte
   au-dessus d'elle (_facettes.js, initFacettesScrollFade()) : à la fin
   du défilement de la section, il ne reste que la carte ou le globe et
   le bouton du calendrier complet, qui lui ne bouge pas.
   ============================================================ */

.hero-facettes{position:relative;height:220vh;background:#050810}

.fac-pin{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;isolation:isolate}
.fac-pin:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 24% 68%,#dfe4ec,transparent),
    radial-gradient(1.8px 1.8px at 38% 8%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 52% 44%,#c9d1e0,transparent),
    radial-gradient(1.4px 1.4px at 66% 82%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 78% 24%,#dfe4ec,transparent),
    radial-gradient(1.6px 1.6px at 88% 58%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 6% 84%,#c9d1e0,transparent),
    radial-gradient(1.3px 1.3px at 95% 92%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 46% 92%,#dfe4ec,transparent);
  background-repeat:repeat;background-size:520px 520px}

.fac-etiquette{position:absolute;top:18px;left:20px;z-index:5;font:600 9.5px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:#5c6b8a}

/* La scène : carte plate ou globe, centrée, plein cadre. Agrandie à la
   demande de William pour occuper presque tout l'écran. La carte plate a un
   cadre fixe 1000x500 (rapport 2:1) : la contraindre en largeur seule
   (98vw) pouvait dépasser la hauteur de l'écran et se faire couper par
   .fac-pin (overflow:hidden) sur un écran large et bas. width:min(98vw,
   196vh,1900px) borne donc aussi par la hauteur (196vh = 98vh x 2, le
   rapport 2:1 du cadre) : la carte grandit au maximum sans jamais dépasser
   ni la largeur ni la hauteur de l'écran, donc jamais de coupure. Le globe
   est déjà borné en largeur ET hauteur (voir plus bas), pas de coupure
   possible non plus. */
.fac-scene{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(98vw,196vh,1900px)}
.fac-scene svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 60px rgba(201,162,76,.08))}
.hero-facettes-globe .fac-scene{width:min(96vw,94vh,1450px);height:min(96vw,94vh,1450px)}
.hero-facettes-globe .fac-scene svg{width:100%;height:100%;cursor:grab;touch-action:none}
.hero-facettes-globe .fac-scene.tire svg{cursor:grabbing}

/* Le maillage de facettes reste doré partout (décoratif, cf. plus haut) ;
   le remplissage, lui, reprend désormais les mêmes trois couleurs de
   niveau que le globe et la carte en production (_carte-maquette.css,
   .globe-pays/.pays-svg), pour que la scène porte la même information
   qu'ailleurs sur le site. Un pays hors fenêtre garde le remplissage doré
   quasi transparent d'origine, neutre. */
.fac-contour{fill:rgba(201,162,76,.045);stroke:rgba(216,182,112,.8);stroke-width:.9;transition:fill .15s}
.fac-rayons{fill:none;stroke:rgba(201,162,76,.4);stroke-width:.45;pointer-events:none}
.fac-contour.n-recense{fill:rgba(47,174,122,.55);stroke:#6fe0ac}
.fac-contour.n-suivi{fill:rgba(232,182,74,.6);stroke:#f5d385}
.fac-contour.n-modelise{fill:rgba(164,20,31,.62);stroke:#e17982}
.fac-contour.on{stroke:#fff}
.fac-limbe{fill:rgba(15,63,96,.4);stroke:rgba(216,182,112,.5);stroke-width:1.2}

/* La colonne de texte : centrée par-dessus la scène. .fac-menu (titre,
   sous-titre, note, devise) s'efface au défilement ; .fac-cta n'est pas
   dans .fac-menu et reste affiché tel quel, seul élément qui subsiste
   une fois le reste effacé. */
.fac-colonne{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 24px;pointer-events:none}
.fac-colonne .fac-cta{pointer-events:auto}

.fac-menu{display:flex;flex-direction:column;align-items:center;will-change:transform,opacity}

.fac-t2{margin:0;max-width:760px;font:700 clamp(46px,7.5vw,92px)/1.05 var(--titre);color:#fff;letter-spacing:.01em}

.fac-sous{margin:18px 0 0;max-width:480px;font:600 20px/1.4 var(--titre);color:#e7ecf4}

.fac-note{margin-top:26px;width:100%;max-width:480px;text-align:left;border:1px solid rgba(216,182,112,.22);
  border-radius:10px;background:rgba(10,16,28,.6);backdrop-filter:blur(3px);padding:14px 16px}
.fac-note-tete{display:flex;align-items:center;gap:8px;font:600 9.5px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:8px}
.fac-note-tete i{width:6px;height:6px;border-radius:50%;background:#c0303f;flex:none}
.fac-note-tete .live{color:#e7b96a}
.fac-note-tete .date{color:#5c6b8a;font-weight:500;text-transform:none;letter-spacing:0}
.fac-note-frac{margin-left:auto;color:#5c6b8a;font-weight:500}
.fac-note p{margin:0;font:400 13px/1.55 var(--txt);color:#c9d1e0}
.fac-note b{color:#fff;font-weight:600}
.fac-note .n{color:var(--rouge);font-weight:700}

.fac-motto{margin-top:26px;display:flex;gap:16px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.fac-motto span:nth-child(1){color:#8b96a8}
.fac-motto span:nth-child(2){color:#e8b64a}
.fac-motto span:nth-child(3){color:#e05a63}

.fac-cta{margin-top:26px;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#0b1220;border-radius:999px;padding:13px 24px;text-decoration:none;cursor:pointer;
  border:none;font:800 12px var(--txt);letter-spacing:.05em;text-transform:uppercase;transition:transform .15s}
.fac-cta:hover{transform:translateY(-1px)}

/* Sous 900px, on renonce à l'épinglage : la scène perdrait tout son sens
   à l'échelle mobile (défilement déjà réduit, glisser au doigt qui
   conflit avec le défilement de page). Retour au flux normal, texte
   d'abord puis scène, comme le reste du site sur petit écran. */
@media(max-width:900px){
  .hero-facettes{height:auto;min-height:100vh}
  .fac-pin{position:relative;top:auto;height:auto;min-height:0;
    display:flex;flex-direction:column;padding:26px 0 30px;overflow:visible}
  .fac-colonne{order:1;position:static;inset:auto;padding:0 clamp(20px,5vw,40px);pointer-events:auto}
  .fac-menu{transform:none !important;opacity:1 !important}
  .fac-scene{order:2;position:static;right:auto;top:auto;left:auto;transform:none;margin:20px auto 0;
    width:min(84vw,560px)}
  .hero-facettes-globe .fac-scene{width:min(78vw,420px);height:min(78vw,420px)}
  .fac-t2{font-size:clamp(32px,9vw,44px);max-width:100%}
  .fac-sous{font-size:17px;max-width:100%}
  .fac-note{max-width:100%;padding:12px 14px}
}