/* Essai « fusion » (version d'essai seulement, ?essai=fusion) : le fond est une scène unique, voir fusion.js. */
.fusion #ciel{background:#050b22}
.fusion .ciel-repli{display:none}
/* pas de fondu à l'arrivée sur une page : le ciel, identique, doit sembler ne jamais partir */
.fusion #ciel canvas{transition:none}
#terre{position:fixed;inset:0;z-index:0}
#terre canvas{display:block;width:100%;height:100%}

/* accueil : en haut de page, le titre sur le ciel ; plus bas, la carte de la page posée sur la France du fond.
   Les limites des départements sont dessinées par le fond, et seulement par lui : la carte de la page
   ne dessine aucun trait, elle ne fait que surligner (survol, département choisi) et porter les points.
   Deux projections légèrement différentes ne peuvent pas superposer deux traits au pixel près ;
   des aplats doux, eux, ne laissent rien voir. */
html.fusion{scroll-behavior:smooth}
/* la grande bannière du parti reste posée sur le ciel, comme sur le fond retenu */
.fusion-carte .banniere{padding-top:clamp(10px,1.75vw,26px)}
/* l'en-tête sans bandeau : seulement les liens et le bouton, posés sur le fond */
.fusion .entete{background:none;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:var(--ombre-texte)}
.fusion .entete nav a{color:var(--texte)}
.fusion-carte .entete{max-width:1232px;margin:0 auto}
.fusion-carte main>*:not(.colonnes){max-width:1200px;margin-left:auto;margin-right:auto}
.fusion-carte .intro.cadre{background:none;border-color:transparent;padding:2px 0 40px;align-items:flex-start;min-height:34vh;text-shadow:0 1px 3px rgba(2,4,14,.9),0 0 22px rgba(2,4,14,.85)}
.fusion-carte .intro .chapeau,.fusion-carte .intro .chiffres p{color:var(--texte)}
.fusion-carte .intro .chiffres{margin-top:12px}
.fusion-descendre{display:inline-block;margin-top:26px;padding:9px 16px;border:1px solid rgba(220,228,255,.4);border-radius:10px;color:var(--texte);text-decoration:none;background:rgba(6,11,28,.45)}
.fusion-descendre:hover{background:rgba(6,11,28,.7)}
.fusion-carte .colonnes>section:first-child{background:none;border-color:transparent;padding:0;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;text-shadow:0 1px 3px rgba(2,4,14,.9),0 0 16px rgba(2,4,14,.8)}
/* la France est un fond figé : le cadre de la carte est épinglé au milieu de l'écran (fusion.js le dimensionne),
   derrière le contenu qui défile ; il s'efface quand la caméra est au ciel */
.fusion-carte .carte-zone{position:fixed;z-index:-1;margin:0;opacity:var(--fusion,0)}
.fusion:not(.fusion-posee) .carte-zone{pointer-events:none}
/* les conteneurs transparents posés au-dessus du fond laissent passer les clics vers la carte ;
   tout ce qui a un vrai contenu les garde */
.fusion-carte .page,.fusion-carte main,.fusion-carte .colonnes,.fusion-carte .colonnes>section:first-child{pointer-events:none}
.fusion-carte .page>*:not(main),.fusion-carte main>*:not(.colonnes),.fusion-carte .colonnes>section:last-child,.fusion-carte .colonnes>section:first-child>*{pointer-events:auto}
.fusion-repli .carte-zone{position:static;opacity:1;width:auto!important;height:auto!important}
.fusion-carte #carte-svg{width:100%;height:100%;overflow:visible}
.fusion-carte #carte-titre{display:none}
.fusion-carte .carte-tete{position:fixed;top:84px;left:var(--fusion-centre,50%);transform:translateX(-50%);z-index:6}
/* le calque des départements est purement cliquable : il ne dessine RIEN (le pays vu du dessus est une
   sphère en perspective, la carte plate serait décalée de quelques pixels vers les bords, Corse comprise).
   Le survol se lit dans l'info-bulle, le choix dans la liste filtrée et le bouton Retour. */
.fusion-carte .dep,.fusion-carte .dep:hover,.fusion-carte .dep.actif,.fusion-carte .dep.attenue{fill:transparent;stroke:transparent}
.fusion-carte .bulle{font-size:14px;background:rgba(8,12,30,.92)}
/* retour à la France entière : un vrai bouton, à côté du nom du département */
.fusion-carte #retour{text-decoration:none;text-shadow:none;padding:8px 16px;border-radius:10px;background:var(--accent);color:var(--accent-fonce);font-weight:600;font-size:14.5px}
.fusion-carte #retour:hover{background:#DDD3FF}
.fusion-carte .aide,.fusion-carte .outre-mer,.fusion-carte .legende{text-align:center}
/* le pied de carte : une seule ligne le long du bas de l'écran, répartie sur la largeur libre */
@media (min-width:1100px){
  .fusion-carte .carte-pied{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 30px;margin-bottom:26px}
  .fusion-carte .carte-pied p{margin-top:8px!important}
  .fusion-carte .carte-pied .aide{flex-basis:100%;text-align:center}
  .fusion-carte .aide{font-size:12.5px;color:var(--texte-doux)}
}
@media (min-width:1100px){
  .fusion-carte .page{max-width:min(1800px,100% - 24px)}
  .fusion-carte .colonnes{grid-template-columns:minmax(0,1fr) minmax(330px,410px)}
  .fusion-carte .colonnes>section:first-child{grid-column:1;grid-row:1;width:100%}
  .fusion-carte .colonnes>section:last-child{grid-column:2;grid-row:1;position:sticky;top:96px;z-index:1;margin-top:60px}
}
@media (prefers-reduced-motion:reduce){html.fusion{scroll-behavior:auto}}
/* le contenu de l'accueil arrive avec la descente */
.fusion-carte.fusion-prete .colonnes,.fusion-carte.fusion-prete .colonnes~*{opacity:var(--fusion,1)}

/* petit panneau d'essai */
.fusion-panneau{position:fixed;left:12px;bottom:10px;z-index:7;width:250px;padding:8px 12px;font-size:12.5px;
  background:#0B1330;border:1px solid rgba(220,228,255,.25);border-radius:12px;color:var(--texte-doux)}
.fusion-panneau summary{color:var(--texte);font-weight:500;cursor:pointer}
.fusion-panneau[open] summary{margin-bottom:6px}
.fusion-panneau label,.fusion-panneau p{margin-top:6px}
.fusion-panneau button{width:100%;margin-top:8px}
.fusion-panneau:not([open]){width:auto}
.fusion-panneau label{display:grid;grid-template-columns:1fr auto;gap:2px 8px}
.fusion-panneau input{grid-column:1/-1;width:100%;accent-color:var(--accent)}
.fusion-panneau output,.fusion-panneau span{color:var(--texte);font-variant-numeric:tabular-nums}
.fusion-panneau button{background:rgba(255,255,255,.05);border:1px solid rgba(220,228,255,.25);color:var(--texte);font:inherit;padding:6px 8px;border-radius:8px;cursor:pointer}
@media (max-width:720px){.fusion-panneau{width:180px}}
/* téléphone : la carte tient dans la largeur, la liste passe dessous, le titre prend moins de hauteur */
@media (max-width:1099px){
  .fusion-carte .intro.cadre{min-height:0;padding-top:2px}
  .fusion-carte .intro .chiffres{margin-top:20px}
  .fusion-carte .colonnes>section:last-child{margin-top:8px}
  .fusion-carte .carte-tete{top:118px}
}
/* le cosmos de la maquette, posé sur le vrai ciel (copie du fond retenu sur /essai-fonds) */
#cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to top,transparent 7%,#000 46%);mask-image:linear-gradient(to top,transparent 7%,#000 46%)}
#cosmos canvas{position:absolute;inset:0;width:100%;height:100%}
/* page qui s'ouvre directement sur la France : le ciel ne doit jamais apparaître, même le temps du chargement */
.fusion-sol #ciel,.fusion-sol #cosmos{visibility:hidden}
.fusion-repli #ciel,.fusion-repli #cosmos{visibility:visible!important}

/* encadré conférence de presse posé sur l'océan Atlantique, à gauche de la France (demande du 29/10/2026).
   Il arrive avec la carte (opacité héritée des colonnes) ; à retirer après le 9 novembre. */
@media (min-width:1100px){
  .fusion-carte .conf-ocean{position:fixed;left:clamp(16px,3vw,60px);top:56%;transform:translateY(-50%);max-width:310px;margin:0;padding:18px 22px;text-align:center;text-shadow:none}
  /* pas la place entre le bord de l'écran et la côte (fusion.js mesure) : il repasse sous la carte */
  .fusion-carte.conf-etroit .conf-ocean{position:static;transform:none;max-width:440px;margin:0 auto 12px}
}
@media (max-width:1099px){
  .fusion-carte .conf-ocean{display:block;max-width:440px;margin:0 auto 12px;text-align:center;text-shadow:none}
}

/* en-tête lisible une fois la page défilée (audit du 4/10/2026, constat 07) */
.fusion .entete.defilee{background:rgba(8,12,36,.78);border-bottom-color:rgba(255,255,255,.06)}
@supports (backdrop-filter: blur(4px)){.fusion .entete.defilee{background:rgba(8,12,36,.55);backdrop-filter:blur(8px)}}

/* flou derrière les panneaux : 0 par défaut ; réglable en mode essai (constat 22) */
.fusion .cadre:not(.intro){-webkit-backdrop-filter:blur(var(--flou,0px));backdrop-filter:blur(var(--flou,0px))}
.fusion-niveaux{display:flex;gap:6px;flex-wrap:wrap}.fusion-niveaux button{font:inherit;font-size:12px;padding:4px 8px;border-radius:8px;border:1px solid var(--bord);background:none;color:var(--texte);cursor:pointer}