/* Les variables --pv-* viennent de la charte partagée (habillage/charte.css).
   --don garde son nom historique mais porte désormais l'accent du site en
   variante nocturne (#1FA3B5) : le teal d'origine (#158090) ne contraste
   qu'à ~4,2:1 sur le fond nuit, sous le seuil de 4,5:1. */
:root{
  --nuit:#070B16; --nuit-2:#0D1425; --trait:#2C3A57; --trait-fort:#41557C;
  --texte:#E8E4DA; --texte-2:#93A0BA; --don:var(--pv-accent-nuit,#1FA3B5);
  --serif:var(--pv-serif,'Playfair Display',Georgia,serif);
  --sans:var(--pv-sans,'Barlow',system-ui,sans-serif);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Le vagabond garde sa teinte propre, distincte des autres accents du globe.
   La règle CSS l'emporte sur l'attribut fill historique du fichier HTML. */
#vagabond svg g{fill:#FFD333}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--nuit);color:var(--texte);font-family:var(--sans)}
#scene{position:fixed;inset:0;width:100%;height:100%;cursor:none;touch-action:none}
canvas{display:block}
/* Essai mobile autonome : le navigateur peut traiter un glissement vertical.
   Cela ne garantit pas qu'une page parente fera défiler son propre document
   à travers une iframe ; ce comportement reste à constater sur téléphone. */
@media (any-pointer:coarse){
  #scene,#scene canvas{touch-action:pan-y}
}
body.navigation-tactile #scene,body.navigation-tactile #scene canvas{touch-action:pan-y}
body.navigation-tactile #marqueurs .mq{touch-action:pan-y}

/* ---------- marqueurs au sol ---------- */
#marqueurs{position:fixed;inset:0;z-index:4;pointer-events:none}
.mq{position:absolute;transform:translate(-50%,var(--decalage-y,-50%));pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;transition:opacity .2s}
.mq .lueur{position:absolute;top:var(--centre-y,50%);left:50%;transform:translate(-50%,-50%);border-radius:50%;
  pointer-events:none;transition:opacity .2s}
.mq .noyau{border-radius:50%;transition:transform .18s;position:relative}
.mq:hover .noyau,.mq.actif .noyau{transform:scale(1.5)}
.mq:hover .lueur,.mq.actif .lueur{opacity:.9}
.mq .cercle{position:absolute;top:var(--centre-y,50%);left:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(230,235,245,.32);pointer-events:none}
.mq .etiq{margin-top:7px;font-family:var(--serif);font-size:12.5px;color:var(--texte);
  white-space:nowrap;text-shadow:0 1px 7px rgba(7,11,22,1),0 0 3px rgba(7,11,22,1);
  max-width:200px;overflow:hidden;text-overflow:ellipsis;opacity:.8;transition:opacity .2s}
.mq .etiq:empty,.mq .compte:empty{display:none}
.mq:hover .etiq,.mq.actif .etiq{opacity:1}
.mq .etiq.titre{font-style:italic;max-width:240px}
.mq .compte{font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;color:var(--texte-2);
  margin-top:2px;text-shadow:0 1px 6px rgba(7,11,22,1)}

/* ---------- libellés des constellations ---------- */
#constellations{position:fixed;inset:0;z-index:3;pointer-events:none}
.libCiel{position:absolute;transform:translate(-50%,-50%);pointer-events:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 10px 7px;
  border-radius:3px;background:radial-gradient(ellipse at center,rgba(7,11,22,.76) 0%,rgba(7,11,22,.48) 56%,rgba(7,11,22,0) 82%);
  opacity:0;transition:opacity .25s;user-select:none;-webkit-user-select:none}
.libCiel .nom{font-family:var(--serif);font-weight:600;font-variant:small-caps;letter-spacing:.14em;
  text-shadow:0 1px 2px rgba(7,11,22,1),0 0 9px rgba(7,11,22,.96),0 0 20px rgba(7,11,22,.72);white-space:nowrap;
  opacity:.92;transition:opacity .25s,text-shadow .25s}
.libCiel .nb{font-family:var(--sans);font-size:.58em;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(220,228,244,.82);font-weight:600;margin-top:3px;text-shadow:0 1px 6px rgba(7,11,22,1)}
.libCiel.vif .nom{opacity:1;text-shadow:0 0 14px currentColor,0 1px 3px rgba(7,11,22,1),0 0 14px rgba(7,11,22,.95)}
.libCiel:focus-visible{outline:1px solid rgba(232,228,218,.72);outline-offset:2px}

/* ---------- cartouche de thème ---------- */
#cartouche{position:fixed;z-index:12;width:320px;max-width:calc(100vw - 40px);max-height:62vh;
  background:rgba(11,17,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,145,190,.28);display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5);cursor:auto}
#cartouche.ouvert{display:flex}
#cartouche .tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:15px 16px 4px}
#cartouche .tete .nom{font-family:var(--serif);font-variant:small-caps;letter-spacing:.1em;font-size:19px}
#cartouche .tete .x{background:none;border:none;color:var(--texte-2);font-size:17px;cursor:pointer;line-height:1;padding:0 2px}
#cartouche .desc{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--texte-2);
  line-height:1.5;padding:2px 16px 0}
#cartouche .comptes{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2);
  padding:9px 16px 11px;border-bottom:1px solid rgba(120,145,190,.2)}
#cartouche .associes{padding:10px 16px 11px;border-bottom:1px solid rgba(120,145,190,.2);flex:0 0 auto}
#cartouche .associes[hidden]{display:none}
#cartouche .associes-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#cartouche .associes-titre{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-2)}
#cartouche #cartoucheReseau{flex:0 0 auto;background:none;border:0;border-bottom:1px solid rgba(147,160,186,.35);
  color:var(--texte-2);font-family:var(--sans);font-size:9.5px;padding:2px 0;cursor:pointer;
  transition:color .2s,border-color .2s}
#cartouche #cartoucheReseau:hover,#cartouche #cartoucheReseau.actif{color:var(--texte);border-color:var(--texte)}
#cartouche .associes-liste{display:flex;flex-wrap:wrap;gap:6px;max-height:76px;overflow-y:auto}
#cartouche .associe{min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(120,145,190,.26);background:rgba(255,255,255,.018);color:var(--texte-2);
  padding:5px 7px;font-family:var(--sans);font-size:10.5px;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s}
#cartouche .associe:hover{border-color:rgba(200,215,240,.55);background:rgba(255,255,255,.05);color:var(--texte)}
#cartouche .associe:focus-visible,#cartouche #cartoucheReseau:focus-visible{outline:1px solid var(--texte);outline-offset:2px}
#cartouche .associe .pt{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
#cartouche .associe .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cartouche .associe .nb{flex:0 0 auto;color:var(--texte-2);font-size:9.5px}
#cartouche .corps{overflow-y:auto;padding:4px 0;min-height:0}
#cartouche .item{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;cursor:pointer;transition:background .15s}
#cartouche .item:hover{background:rgba(255,255,255,.055)}
#cartouche .item .pt{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:0 0 auto}
#cartouche .item .txt{min-width:0}
#cartouche .item h4{font-family:var(--serif);font-weight:400;font-size:13.5px;line-height:1.35}
#cartouche .item .lieu2{display:block;font-size:10.5px;color:var(--texte-2);margin-top:3px}
#cartouche .actions{display:flex;gap:8px;padding:12px 16px 14px;border-top:1px solid rgba(120,145,190,.2)}
#cartouche .actions button{flex:1;font-family:var(--sans);font-size:11px;letter-spacing:.05em;
  padding:9px 6px;cursor:pointer;background:none;border:1px solid var(--trait-fort);color:var(--texte);
  transition:border-color .2s,background .2s}
#cartouche .actions button:hover{border-color:var(--texte);background:rgba(255,255,255,.05)}

/* ---------- personnes ---------- */
#personnes{position:fixed;left:30px;bottom:80px;z-index:13;width:280px;max-width:calc(100vw - 60px);
  max-height:56vh;overflow:hidden;
  background:rgba(11,17,32,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,145,190,.28);display:none;flex-direction:column}
#personnes.ouvert{display:flex}
#personnes .personnes-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px 9px;border-bottom:1px solid rgba(120,145,190,.2);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-2)}
#personnes .personnes-tete .x{background:none;border:0;color:var(--texte-2);font-size:18px;
  line-height:1;padding:0 2px;cursor:pointer;text-transform:none}
#personnes .personnes-tete .x:hover{color:var(--texte)}
#personnes .personnes-tete .x:focus-visible{outline:1px solid var(--texte);outline-offset:2px}
#personnes .personnes-chercheur{padding:8px 14px;border-bottom:1px solid rgba(120,145,190,.2)}
#personnes .personnes-chercheur input{width:100%;background:none;border:1px solid rgba(120,145,190,.3);color:var(--texte);font-family:var(--sans);font-size:12px;padding:7px 10px;outline:none}
#personnes .personnes-chercheur input::placeholder{color:var(--texte-2);font-style:italic}
#personnesCorps{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 0}
#personnes .c{display:flex;gap:10px;align-items:center;padding:8px 16px;cursor:pointer;
  width:100%;border:0;background:none;color:var(--texte);font-family:var(--sans);
  text-align:left;font-size:13px;transition:background .15s}
#personnes .c:hover{background:rgba(255,255,255,.055)}
#personnes .c:focus-visible{outline:1px solid var(--texte);outline-offset:-3px}
#personnes .c.coche{color:var(--don)}

/* ---------- légende des thèmes ---------- */
#legende{position:fixed;left:30px;bottom:80px;z-index:13;width:280px;max-width:calc(100vw - 60px);
  max-height:56vh;overflow:hidden;
  background:rgba(11,17,32,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,145,190,.28);display:none;flex-direction:column}
#legende.ouvert{display:flex}
#legende .legende-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px 9px;border-bottom:1px solid rgba(120,145,190,.2);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-2)}
#legende .legende-tete .x{background:none;border:0;color:var(--texte-2);font-size:18px;
  line-height:1;padding:0 2px;cursor:pointer;text-transform:none}
#legende .legende-tete .x:hover{color:var(--texte)}
#legende .legende-tete .x:focus-visible{outline:1px solid var(--texte);outline-offset:2px}
#legendeCorps{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 0}
#legende .c{display:flex;gap:10px;align-items:center;width:100%;padding:8px 16px;cursor:pointer;
  border:0;background:transparent;color:var(--texte);text-align:left;font-family:var(--sans);
  font-size:13px;transition:background .15s}
#legende .c:focus-visible{outline:2px solid var(--don);outline-offset:-2px}
#legende .c:hover{background:rgba(255,255,255,.055)}
#legende .c .pt{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
#legende .c.coche{color:var(--don)}
#legende .sep{height:1px;background:rgba(120,145,190,.2);margin:5px 0}

/* ---------- mode d’emploi ---------- */
#aide{position:fixed;right:30px;bottom:80px;z-index:13;width:370px;max-width:calc(100vw - 60px);
  max-height:min(530px,calc(100dvh - 150px));overflow:hidden;
  background:rgba(11,17,32,.87);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,145,190,.28);display:none;flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,.38)}
#aide.ouvert{display:flex}
#aide .aide-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:14px 16px 11px;border-bottom:1px solid rgba(120,145,190,.2)}
#aide .aide-surtitre{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);margin-bottom:4px}
#aide h2{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.2}
#aide .x{flex:0 0 auto;background:none;border:0;color:var(--texte-2);font-size:19px;line-height:1;padding:1px 2px;cursor:pointer}
#aide .x:hover{color:var(--texte)}
#aide .x:focus-visible{outline:1px solid var(--texte);outline-offset:2px}
#aide .aide-corps{overflow-y:auto;padding:2px 0 6px}
#aide .aide-corps section{padding:12px 16px 2px}
#aide .aide-corps h3{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-2);font-weight:500;margin-bottom:7px}
#aide .aide-corps ul{padding-left:17px;color:var(--texte-2);font-size:12px;line-height:1.45}
#aide .aide-corps li{padding:0 0 7px 1px}
#aide .aide-corps strong{color:var(--texte);font-weight:500}
#aide .aide-presentation{font:14px/1.55 var(--sans);color:var(--texte-doux);margin-bottom:8px}
#aide .aide-presentation a{color:var(--accent-lisible);text-decoration:underline;text-underline-offset:3px}
#repliGlobe[hidden]{display:none}
body.repli-sans-webgl > :not(#repliGlobe){display:none!important}
body.repli-sans-webgl #repliGlobe{
  position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;gap:12px;
  padding:16px;background:var(--nuit);color:var(--texte);font:14px/1.5 var(--sans);
}
body.repli-sans-webgl #enseigne{display:block!important;position:static;margin:0;flex:none}
body.repli-sans-webgl #enseigne h1{white-space:normal;font-size:clamp(16px,3vw,24px)}
#repliLien{color:var(--accent-lisible);min-height:44px;display:flex;align-items:center}
#repliListe{width:100%;flex:1;min-height:0;border:0;background:#fafafa}

/* ---------- enseigne, invites ---------- */
/* Pas de fond derrière l'enseigne : une ombre portée douce suffit à garder
   le texte lisible, que le globe soit clair ou sombre dessous. */
#enseigne{position:fixed;top:26px;left:30px;z-index:5;pointer-events:none;background:none}
#enseigne h1{max-width:none;white-space:nowrap;font-family:var(--serif);font-weight:300;
   font-size:clamp(10px,1.45vw,20px);line-height:1.22;letter-spacing:.035em;background:none;
   text-shadow:0 1px 10px rgba(7,11,22,.9),0 0 4px rgba(7,11,22,.8)}

#invite{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);z-index:5;
  width:max-content;max-width:min(550px,calc(100vw - 180px));text-align:center;
  display:flex;flex-direction:column;gap:5px;color:var(--texte);
  pointer-events:none;text-shadow:0 2px 12px rgba(3,7,18,.98),0 0 4px rgba(3,7,18,.9);
  transition:opacity .8s,visibility 0s .8s}
#invite.parti{opacity:0;visibility:hidden}
#invite .invite-titre{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.25}
#invite .invite-texte{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--texte-doux)}

#altitude{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
#altitude .rail{width:1px;height:150px;background:linear-gradient(to bottom,var(--trait-fort),var(--trait))}
#altitude .curseur{position:absolute;left:7px;width:7px;height:7px;border-radius:50%;background:var(--texte);transition:top .12s,transform .15s}
#altitude .bout{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);
  pointer-events:auto;cursor:pointer;transition:color .2s;
  white-space:nowrap;                /* « CIEL » ne se coupe jamais */
  min-width:2.8em;text-align:center} /* largeur minimale égale à « CIEL » */
#altitude .bout:hover{color:var(--texte)}
#altitude button.bout{border:0;background:none;padding:0;font-family:var(--sans)}
#altitude .rail-wrap{position:relative;height:150px;pointer-events:auto;cursor:pointer;
  padding:0 10px;margin:0 -10px;touch-action:none}
#altitude .rail-wrap:hover .curseur{transform:scale(1.6)}

#bandeauTag{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:11;
  display:none;align-items:center;gap:11px;padding:7px 9px 7px 15px;
  border:1px solid rgba(120,145,190,.3);background:rgba(11,17,32,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#bandeauTag.ouvert{display:flex}
#bandeauTag .lib{font-family:var(--serif);font-size:13.5px}
#bandeauTag .lib em{font-style:italic;color:var(--texte-2)}
#bandeauTag .x{background:none;border:none;color:var(--texte-2);font-size:16px;cursor:pointer;line-height:1;padding:0 3px}

#themeChoisi{position:fixed;z-index:11;bottom:96px;left:50%;transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 40px);display:flex;align-items:center;gap:12px;
  padding:9px 10px 9px 14px;border:1px solid var(--trait-lisible);
  background:rgba(11,17,32,.91);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 7px 28px rgba(0,0,0,.3)}
#themeChoisi[hidden]{display:none!important}
#themeChoisi .resume{min-width:0;max-width:220px;display:flex;flex-direction:column;gap:2px}
#themeChoisi strong{font:italic 16px/1.2 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#themeChoisi small{font:11px/1.2 var(--sans);color:var(--texte-doux)}
#themeChoisi button{min-height:38px;padding:6px 9px;border:1px solid var(--trait-lisible);
  background:rgba(27,40,64,.8);color:var(--texte);font:12px var(--sans);cursor:pointer;white-space:nowrap}
#themeChoisi button:focus-visible{outline:2px solid var(--don);outline-offset:2px}
#themeChoisiRetirer{font-size:20px!important;min-width:38px}

/* ---------- liste ---------- */
#voileListe{position:fixed;inset:0;z-index:12;border:0;padding:0;background:rgba(4,7,15,.48);
  opacity:0;visibility:hidden;pointer-events:none;cursor:pointer;
  transition:opacity .25s,visibility 0s linear .25s}
#voileListe.ouvert{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
#liste{position:fixed;top:0;right:0;width:390px;max-width:88vw;height:100vh;height:100dvh;z-index:20;
  background:var(--nuit-2);border-left:1px solid var(--trait);transform:translateX(100%);
  visibility:hidden;overflow:hidden;min-height:0;
  transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s;
  display:flex;flex-direction:column;cursor:auto}
#liste.ouvert{transform:translateX(0);visibility:visible;transition-delay:0s}
#liste header{flex:0 0 auto;padding:26px 28px 18px;border-bottom:1px solid var(--trait);
  display:flex;justify-content:space-between;align-items:baseline}
#liste header h2{font-family:var(--serif);font-weight:300;font-size:19px}
#liste .fermer{background:none;border:none;color:var(--texte-2);font-size:22px;cursor:pointer;line-height:1}
#filtres{flex:0 0 auto;padding:16px 28px;border-bottom:1px solid var(--trait);display:flex;flex-wrap:wrap;gap:7px}
.filtre{background:none;border:1px solid var(--trait);color:var(--texte-2);font-family:var(--sans);
  font-size:11px;padding:5px 11px;cursor:pointer}
.filtre.actif{border-color:var(--texte);color:var(--texte)}
#articles{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;padding:8px 0}
.ligne{display:block;width:100%;background:none;color:var(--texte);font:inherit;text-align:left;border:0;padding:15px 28px;border-bottom:1px solid rgba(44,58,87,.5);cursor:pointer;transition:background .15s}
.ligne:focus-visible{outline:2px solid var(--texte);outline-offset:-3px}
.ligne:hover{background:rgba(255,255,255,.03)}
.ligne .titre{display:block;font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.35;margin-bottom:6px}
.ligne .meta{display:block;font-size:11px;color:var(--texte-2)}
.ligne .pastille{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:middle}

/* ---------- groupe ---------- */
#grappe{position:fixed;z-index:12;width:300px;max-width:calc(100vw - 40px);max-height:56vh;
  background:rgba(11,17,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,145,190,.28);display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
#grappe.ouvert{display:flex}
#grappe .tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:14px 16px 11px;border-bottom:1px solid rgba(120,145,190,.2)}
#grappe .tete .zone{font-family:var(--serif);font-size:15px}
#grappe .tete .nb{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2)}
#grappe .tete .x{background:none;border:none;color:var(--texte-2);font-size:17px;cursor:pointer;line-height:1;padding:0 2px;min-width:44px;min-height:44px}
#grappe .corps{overflow-y:auto;padding:4px 0}
#grappe .item{display:flex;width:100%;min-height:44px;gap:10px;align-items:center;padding:10px 16px;
  border:0;background:none;color:var(--texte);font-family:var(--sans);text-align:left;cursor:pointer;transition:background .15s}
#grappe .item:hover{background:rgba(255,255,255,.055)}
#grappe .item .pt{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
#grappe .item .txt{min-width:0}
#grappe .item .titre{display:block;font-family:var(--serif);font-weight:400;font-size:13.5px;line-height:1.35}
#grappe .item .lieu2{display:block;font-size:10.5px;color:var(--texte-2);margin-top:3px}
#grappeZoomer{display:block;align-self:stretch;min-height:44px;margin:0 12px 8px;padding:8px 12px;
  border:1px solid var(--trait-fort);background:rgba(255,255,255,.025);color:var(--texte);
  font-family:var(--sans);text-align:left;cursor:pointer}
#grappeZoomer:hover{border-color:var(--texte);background:rgba(255,255,255,.055)}
#grappeZoomer[hidden]{display:none}

/* ---------- fiche ---------- */
#fiche{position:fixed;left:30px;bottom:88px;z-index:10;width:352px;max-width:calc(100vw - 60px);
  background:rgba(13,20,37,.94);border:1px solid var(--trait);padding:22px 24px 20px;
  visibility:hidden;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s;cursor:auto}
#fiche.visible{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
#fiche .cat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
#fiche h2{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.32;margin-bottom:10px}
#fiche .lieu{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--texte-2);margin-bottom:14px}
#fiche .personnes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#fiche .personne{font-size:10.5px;color:var(--texte);border:1px solid var(--trait-fort);padding:3px 8px;border-radius:12px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;background:none}
#fiche .personne:hover{border-color:var(--texte);background:rgba(255,255,255,.05)}
#fiche .personne.actif{border-color:var(--don);color:var(--don)}
#fiche .personne.statique{cursor:default;color:var(--texte-2);border-style:dotted}
#fiche .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
#fiche .tag{font-size:10px;color:var(--texte-2);border:1px solid var(--trait);padding:3px 8px;
  cursor:pointer;transition:border-color .2s,color .2s}
#fiche .tag:hover{border-color:var(--texte-2);color:var(--texte)}
#fiche .chiffres{display:flex;gap:18px;font-size:11px;color:var(--texte-2);border-top:1px solid var(--trait);padding-top:13px}
#fiche .don{color:var(--don)}
#fiche .fermer{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--texte-2);font-size:18px;cursor:pointer}

#suite{margin-top:15px;padding-top:13px;border-top:1px solid var(--trait);cursor:pointer;display:none}
#suite.montre{display:block}
#suite .lib{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);margin-bottom:5px}
#suite .cible{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.35;color:var(--texte);
  transition:color .2s}
#suite:hover .cible{color:var(--don)}

#soutien{margin-top:14px;padding-top:14px;border-top:1px solid var(--trait);display:none}
#soutien.ouvert{display:block}
#soutien p{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--texte-2);margin-bottom:11px;line-height:1.5}
#soutien .montants{display:flex;gap:7px;margin-bottom:10px}
#soutien .montants button{flex:1;font-family:var(--sans);font-size:12px;padding:9px 0;cursor:pointer;
  background:none;border:1px solid var(--trait);color:var(--texte);transition:border-color .2s,color .2s}
#soutien .montants button:hover,#soutien .montants button.choisi{border-color:var(--don);color:var(--don)}
#soutien .avis{font-size:10px;letter-spacing:.05em;color:var(--texte-2);opacity:.75}

/* ---------- divers ---------- */
#outils{position:fixed;left:30px;bottom:26px;z-index:13;display:flex;gap:10px}
.outil{position:relative;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(11,17,32,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(120,145,190,.28);cursor:pointer;transition:border-color .2s,background .2s}
.outil:hover,.outil.actif{border-color:rgba(200,215,240,.65);background:rgba(11,17,32,.82)}
.outil:focus-visible{outline:1px solid var(--texte);outline-offset:3px}
.outil::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%);padding:6px 8px;white-space:nowrap;pointer-events:none;
  border:1px solid rgba(120,145,190,.32);background:rgba(11,17,32,.94);color:var(--texte);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.04em;line-height:1;
  opacity:0;visibility:hidden}
.outil:hover::after,.outil:focus-visible::after{opacity:1;visibility:visible}
#outilListe::after{left:0;transform:none}
#outilAide::after{left:auto;right:0;transform:none}
#outilAide{position:fixed;right:30px;bottom:26px}
.outil svg{width:18px;height:18px;stroke:var(--texte);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.outil.actif svg{stroke:var(--don)}
.outil .pastille{position:absolute;width:7px;height:7px;border-radius:50%;transform:translate(13px,-13px)}

#chercheur{position:fixed;left:30px;bottom:80px;z-index:13;width:330px;max-width:calc(100vw - 60px);
  background:rgba(11,17,32,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,145,190,.28);display:none;flex-direction:column;overflow:hidden}
#chercheur.ouvert{display:flex}
#chercheur input{background:none;border:none;border-bottom:1px solid rgba(120,145,190,.2);outline:none;
  padding:14px 16px;font-family:var(--serif);font-size:15px;color:var(--texte);width:100%}
#chercheur input::placeholder{color:var(--texte-2);font-style:italic}
#resultats{max-height:44vh;overflow-y:auto}
#resultats .r{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;cursor:pointer;transition:background .15s}
#resultats .r:hover{background:rgba(255,255,255,.055)}
#resultats .r .pt{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:0 0 auto}
#resultats .r .titre{font-family:var(--serif);font-weight:400;font-size:13.5px;line-height:1.35}
#resultats .r span{display:block;font-size:10.5px;color:var(--texte-2);margin-top:3px}
#resultats button.r{width:100%;border:0;background:none;color:var(--texte);font-family:var(--sans);text-align:left}
#resultats button.r:focus-visible{outline:1px solid var(--texte);outline-offset:-3px}
#resultats .r.personne-r .pt-pers{margin-top:2px;flex:0 0 auto;color:var(--texte-2);display:flex}
#resultats .vide{padding:14px 16px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--texte-2)}

.meta-lens{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:12px;color:var(--texte-2);font-size:12px}

#murmure{position:fixed;z-index:7;pointer-events:none;font-family:var(--serif);font-style:italic;
  font-size:15px;color:#F4F0E5;max-width:min(300px,calc(100vw - 48px));line-height:1.38;
  padding:9px 12px 10px 13px;border-left:1px solid rgba(232,228,218,.55);border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,rgba(7,11,22,.94) 0%,rgba(7,11,22,.83) 78%,rgba(7,11,22,.12) 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.3);text-shadow:0 1px 1px rgba(0,0,0,.9);
  opacity:0;transform:translateY(5px);transition:opacity 1.1s,transform .45s}
#murmure.montre{opacity:.97;transform:translateY(0)}
#murmure.a-gauche{border-left:0;border-right:1px solid rgba(232,228,218,.55);
  border-radius:3px 0 0 3px;background:linear-gradient(270deg,rgba(7,11,22,.94) 0%,rgba(7,11,22,.83) 78%,rgba(7,11,22,.12) 100%)}
#murmure em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(220,228,244,.82);margin-top:6px}

#etiquette{position:fixed;z-index:8;pointer-events:none;font-family:var(--serif);font-size:14px;
  background:rgba(7,11,22,.9);border:1px solid var(--trait);padding:6px 11px;opacity:0;
  transition:opacity .16s;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
#etiquette.visible{opacity:1}

#vagabond{position:fixed;z-index:9;pointer-events:none;width:40px;height:35px;margin-left:-20px;margin-top:-31px;
  filter:drop-shadow(0 1px 4px rgba(7,11,22,.9))}
#vagabond svg{width:100%;height:100%;display:block}
#vagabond.pose{animation:pas .9s ease-in-out infinite}
@keyframes pas{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){#vagabond.pose{animation:none}}

#chargement{position:fixed;inset:0;z-index:30;background:var(--nuit);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--texte-2);transition:opacity .7s}
#chargement.parti{opacity:0;pointer-events:none}

@media (max-width:760px){
  #enseigne{top:18px;left:20px}
  #altitude{right:16px} #fiche{left:16px;right:16px;width:auto;bottom:82px;padding:18px 18px 16px}
  #outils{left:16px;bottom:18px}
  #chercheur,#legende,#personnes{left:16px;bottom:70px;max-width:calc(100vw - 32px)}
  #aide{right:16px;bottom:70px;max-width:calc(100vw - 32px)}
  #outilAide{right:16px;bottom:18px}
  #scene{cursor:auto}
  .mq .etiq{font-size:11.5px;max-width:130px}
  .libCiel{padding:5px 8px 6px}
  #murmure{font-size:14px;max-width:calc(100vw - 40px);padding:8px 10px 9px 11px}
  #liste{width:100vw;max-width:100vw}
}

/* ---------- lisibilité — couche éditoriale nocturne ----------
   Cette couche conserve la transparence et la hiérarchie du globe, mais
   établit un plancher de lecture à 12px, renforce les surfaces derrière les
   textes et donne aux contrôles une cible confortable. */
:root{
  --texte-fort:#F3EFE7;
  --texte-doux:#B8C2D6;
  --surface-panneau:rgba(10,17,33,.94);
  --surface-levée:rgba(18,28,50,.96);
  --trait-lisible:rgba(132,153,192,.52);
  --trait-subtil:rgba(132,153,192,.34);
  --accent-lisible:#35B7C5;
}

button,input{font:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{
  outline:2px solid var(--accent-lisible);
  outline-offset:3px;
}

/* Le globe reste visible : seuls les pixels sous une information gagnent
   une nappe sombre plus dense et une bordure discrète. */
#cartouche,#personnes,#legende,#aide,#chercheur,#grappe{
  background:var(--surface-panneau);
  border-color:var(--trait-lisible);
  box-shadow:0 18px 48px rgba(0,0,0,.56);
}
#cartouche .desc,#aide .aide-corps ul,#soutien p,
#fiche .lieu,#murmure em{color:var(--texte-doux)}
#cartouche .comptes,#cartouche .associes-titre,#cartouche #cartoucheReseau,
#personnes .personnes-tete,#legende .legende-tete,#aide .aide-surtitre,
#aide .aide-corps h3,#fiche .cat,#suite .lib{color:var(--texte-doux)}

/* Textes sur le globe : le contraste vient d'abord du poids et de l'ombre,
   pas d'un voile qui ferait disparaître le contenu WebGL. */
#enseigne h1{color:var(--texte-fort);font-size:clamp(14px,1.45vw,20px);font-weight:400}
.mq .etiq{font-size:14px;color:var(--texte-fort);opacity:.94;text-shadow:0 2px 10px rgba(3,6,14,1),0 0 5px rgba(3,6,14,1)}
.mq .compte{font-size:12px;color:var(--texte-doux);text-shadow:0 2px 8px rgba(3,6,14,1)}
.libCiel{background:radial-gradient(ellipse at center,rgba(5,10,22,.9) 0%,rgba(5,10,22,.68) 58%,rgba(5,10,22,0) 84%)}
.libCiel .nb{font-size:.72em;color:var(--texte-doux)}
#murmure{color:var(--texte-fort);background:linear-gradient(90deg,rgba(5,10,22,.97),rgba(5,10,22,.9) 80%,rgba(5,10,22,.2))}
#etiquette{color:var(--texte-fort);background:rgba(5,10,22,.96);border-color:var(--trait-lisible)}

/* Cartouches et fiches : titres éditoriaux, métadonnées lisibles, rythme
   plus ample pour les scans rapides. */
#cartouche .tete{padding:17px 18px 6px}
#cartouche .tete .nom{font-size:21px;color:var(--texte-fort)}
#cartouche .tete .x,#personnes .personnes-tete .x,#legende .legende-tete .x,
#aide .x,#bandeauTag .x,#grappe .tete .x,#fiche .fermer,#liste .fermer{color:var(--texte-doux);min-width:32px;min-height:32px}
#cartouche .desc{font-size:14px;line-height:1.55;padding:3px 18px 0}
#cartouche .comptes{font-size:12px;padding:10px 18px 12px}
#cartouche .associes{padding:12px 18px 13px}
#cartouche .associes-titre,#cartouche #cartoucheReseau{font-size:12px}
#cartouche #cartoucheReseau{padding:5px 0}
#cartouche .associe{font-size:12px;padding:7px 9px;border-color:var(--trait-subtil);color:var(--texte-doux)}
#cartouche .associe .nb{font-size:11px}
#cartouche .item{padding:12px 18px}
#cartouche .item h4,#resultats .r .titre,#grappe .item .titre{font-size:15px;line-height:1.4}
#cartouche .item .lieu2,#grappe .item .lieu2,#resultats .r span{font-size:12px;color:var(--texte-doux);line-height:1.35}
#resultats .r .titre{font-size:15px;color:var(--texte);line-height:1.4;margin-top:0}
#cartouche .actions{padding:14px 18px 16px}
#cartouche .actions button{font-size:12px;min-height:42px}

#fiche{background:rgba(13,20,37,.97);border-color:var(--trait-lisible);padding:24px 25px 22px;box-shadow:0 18px 48px rgba(0,0,0,.55)}
#fiche .cat{font-size:12px;margin-bottom:10px}
#fiche h2{font-size:21px;line-height:1.34}
#fiche .lieu{font-size:15px;line-height:1.4}
#fiche .personne,#fiche .tag{font-size:12px;padding:6px 9px}
#fiche .chiffres{font-size:12px;color:var(--texte-doux);line-height:1.4}
#suite .lib{font-size:12px}
#suite .cible{font-size:15px}
#soutien p{font-size:14px}
#soutien .montants button{font-size:13px;min-height:40px}
#soutien .avis{font-size:12px;opacity:1;color:var(--texte-doux)}

/* Outils, sélecteurs et liste : labels secondaires ne sont plus des notes
   décoratives et les zones activables respectent une cible de 40px. */
.outil{width:46px;height:46px;border-color:var(--trait-lisible);background:rgba(10,17,33,.72)}
.outil:hover,.outil.actif{border-color:var(--texte-fort);background:var(--surface-levée)}
.outil::after{font-size:12px;line-height:1.2;padding:8px 10px;border-color:var(--trait-lisible)}
#personnes .personnes-tete,#legende .legende-tete{font-size:12px;padding:13px 16px 11px}
#personnes .personnes-chercheur{padding:10px 16px}
#personnes .personnes-chercheur input,#personnes .c{font-size:14px}
#personnes .personnes-chercheur input{padding:10px 11px;border-color:var(--trait-lisible)}
#personnes .c,#legende .c{padding:11px 18px;min-height:42px}
#legende .c{font-size:14px}
#chercheur{border-color:var(--trait-lisible)}
#chercheur input{font-size:16px;padding:16px 18px}
#chercheur input::placeholder{color:var(--texte-doux)}
#resultats .r{padding:12px 18px}
#resultats .vide{font-size:14px;color:var(--texte-doux)}
#grappe .tete{padding:16px 18px 13px}
#grappe .tete .zone{font-size:17px}
#grappe .tete .nb{font-size:12px;color:var(--texte-doux)}
#grappe .item{padding:12px 18px}
#grappeZoomer{min-height:44px;margin-right:14px;margin-left:14px;font-size:14px}

#aide .aide-tete{padding:16px 18px 13px}
#aide .aide-surtitre{font-size:12px;margin-bottom:6px}
#aide h2{font-size:22px}
#aide .aide-corps section{padding:15px 18px 3px}
#aide .aide-corps h3{font-size:12px;margin-bottom:8px}
#aide .aide-corps ul{font-size:14px;line-height:1.58}
#aide .aide-corps li{padding-bottom:9px}

#liste{background:rgba(11,18,34,.98);border-left-color:var(--trait-lisible)}
#liste header{padding:28px 30px 20px}
#liste header h2{font-size:22px}
#filtres{padding:17px 30px;gap:8px}
.filtre{font-size:12px;min-height:38px;padding:7px 12px;border-color:var(--trait-lisible);color:var(--texte-doux)}
.ligne{padding:17px 30px}
.ligne .titre{font-size:18px;line-height:1.4}
.ligne .meta{font-size:12px;color:var(--texte-doux);line-height:1.4}

#bandeauTag{background:var(--surface-panneau);border-color:var(--trait-lisible)}
#bandeauTag .lib{font-size:15px}
#altitude .bout{font-size:12px;color:var(--texte-doux)}

@media (max-width:760px){
  #enseigne h1{font-size:15px;max-width:calc(100vw - 70px);white-space:normal}
  .mq .etiq{font-size:13px}
  .mq .compte{font-size:12px}
  #fiche{padding:20px 19px 18px}
  #fiche h2{font-size:20px}
  #cartouche,#grappe{max-width:calc(100vw - 24px)}
  #cartouche .tete .nom{font-size:19px}
  #liste header{padding:23px 22px 17px}
  #filtres{padding:14px 22px}
  .ligne{padding:15px 22px}
  .ligne .titre{font-size:17px}
  #aide .aide-corps ul{font-size:14px}
  #outils{gap:8px}
}

/* Plancher explicite pour les informations secondaires : les capitales
   restent aérées grâce au letter-spacing, jamais grâce à une taille minuscule. */
#cartouche .associes-titre,#cartouche #cartoucheReseau,
#cartouche .associe .nb,#cartouche .comptes,
#personnes .personnes-tete,#legende .legende-tete,
#aide .aide-surtitre,#aide .aide-corps h3,
#altitude .bout,.filtre,.ligne .meta,#grappe .tete .nb,
#fiche .cat,#suite .lib,#soutien .avis,.outil::after,
#murmure em{font-size:12px}

/* ---------- proposition de lisibilité retenue ----------
   Adaptée aux ancrages et contrôles du globe réel. Cette section reste après
   les styles communs afin de préserver la cascade validée. */
:root{
  --texte:#f2eee4;--texte-2:#b9c4d6;--don:#35bfca;
  --texte-doux:#b9c4d6;--trait-lisible:rgba(132,153,192,.62);
  --surface-panneau:rgba(10,17,33,.97);--or-lecture:#e8b66c;
}
body{font-size:16px;letter-spacing:.01em}
button,input{font:inherit}
#enseigne{
  display:flex;flex-direction:column;gap:6px;
  top:28px;left:34px;max-width:510px;padding:15px 19px 16px;
  border-left:2px solid var(--don);
  background:linear-gradient(90deg,rgba(5,10,22,.94),rgba(5,10,22,.68) 78%,transparent);
}
.brand-kicker{
  color:var(--don);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
#enseigne h1{
  max-width:470px;white-space:normal;color:var(--texte);
  font-size:21px;line-height:1.28;letter-spacing:.015em;text-shadow:none;font-weight:400;
}
.libCiel{
  padding:12px 17px 13px;min-width:156px;
  border:1px solid rgba(132,153,192,.42);border-radius:2px;
  background:rgba(5,10,22,.88);box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.libCiel .nom{font-size:17px;line-height:1.25;letter-spacing:.08em;text-shadow:none}
.libCiel .nb{margin-top:7px;font-size:12px;color:var(--texte-2)}
/* Ne pas ajouter de padding au conteneur .mq : son noyau est ancré
   exactement à la projection géographique par marqueurs.js. */
.mq .etiq,.mq .compte{
  padding:4px 9px;background:rgba(5,10,22,.88);border-radius:2px;text-shadow:none;
}
.mq .etiq{margin-top:8px;color:var(--texte);font-size:15px;opacity:1}
.mq .compte{margin-top:3px;color:var(--texte-2);font-size:12px}
#altitude{
  right:35px;gap:13px;padding:13px 12px;
  background:rgba(5,10,22,.78);border:1px solid rgba(132,153,192,.34);
}
#altitude .bout{color:var(--texte);font-size:12px;font-weight:600;letter-spacing:.13em}
/* Le curseur utilise la hauteur relative du rail, y compris en paysage. */
#altitude .rail{background:linear-gradient(var(--don),var(--trait))}
#altitude .curseur{background:var(--texte);box-shadow:0 0 0 3px var(--don)}
#outils{left:34px;bottom:28px;gap:12px}
.outil{
  width:50px;height:50px;border-radius:3px;
  background:rgba(11,17,32,.9);border:1px solid rgba(132,153,192,.58);
}
.outil:hover,.outil.actif{background:rgba(24,39,64,.98);border-color:var(--don)}
button:focus-visible,input:focus-visible,a:focus-visible,[role="button"]:focus-visible,
#ficheDetails summary:focus-visible{
  outline:2px solid var(--don)!important;outline-offset:4px;
}
.outil svg{width:21px;height:21px}
.outil::after{
  bottom:calc(100% + 12px);padding:9px 11px;background:#0b1120;
  border-color:rgba(132,153,192,.58);font-size:12px;
}
#outilAide{right:34px;bottom:28px}
#fiche{
  left:34px;bottom:101px;width:430px;padding:26px 28px 24px;
  max-height:calc(100dvh - 125px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface-panneau);border:1px solid var(--trait-lisible);
  box-shadow:0 20px 55px rgba(0,0,0,.62);
}
#fiche .fermer{top:16px;right:17px;min-width:44px;min-height:44px;font-size:25px}
#cartouche .tete .x,#personnes .personnes-tete .x,#legende .legende-tete .x,
#aide .x,#bandeauTag .x,#grappe .tete .x,#liste .fermer{
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
}
#fiche .cat{
  margin-bottom:14px;padding-right:35px;color:var(--or-lecture);
  font-size:12px;font-weight:700;letter-spacing:.14em;
}
#fiche h2{max-width:350px;margin-bottom:12px;font-size:24px;line-height:1.25;overflow-wrap:anywhere}
#fiche .lieu{margin-bottom:17px;color:var(--texte-2);font-size:16px;line-height:1.45}
#fiche .personnes,#fiche .tags{gap:7px;margin-bottom:15px}
#fiche .personne,#fiche .tag{padding:8px 10px;font-size:12px;max-width:100%;overflow-wrap:anywhere}
#fiche .chiffres{flex-wrap:wrap;gap:24px;padding-top:15px;color:var(--texte-2);font-size:12px;line-height:1.4}
#fiche .chiffres b{display:block;margin-bottom:2px;color:var(--texte);font-size:14px;font-weight:600}
#suite{margin-top:18px;padding-top:15px}
#suite .lib{margin-bottom:7px;font-size:12px;color:var(--texte-2)}
#suite .cible{font-size:16px;line-height:1.4}
#chercheur,#legende,#personnes,#aide{bottom:101px;max-height:calc(100dvh - 125px)}
#cartouche,#grappe{overflow-y:auto;overscroll-behavior:contain}
/* La liste forme un seul flux défilable : sur les écrans bas, les filtres
   ne peuvent plus prendre toute la hauteur et rendre les articles inaccessibles. */
#liste{
  display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin;
  scrollbar-color:rgba(185,196,214,.5) transparent;
}
#liste header{
  position:sticky;top:0;z-index:2;background:rgba(11,18,34,.98);
}
#filtres{display:flex}
#filtres label{flex:0 0 auto;align-self:center;color:var(--texte-doux);font-size:13px;font-weight:600}
#filtres select{
  flex:1 1 auto;min-width:0;min-height:44px;padding:8px 12px;
  border:1px solid var(--trait-lisible);border-radius:2px;
  background:var(--nuit-2);color:var(--texte);font-family:var(--sans);font-size:15px;
  cursor:pointer;
}
#filtres select:focus-visible{outline:2px solid var(--accent-lisible);outline-offset:2px}
#filtres select option{background:var(--nuit-2);color:var(--texte)}
#articles{min-height:auto;overflow:visible}
#liste::-webkit-scrollbar{width:8px}
#liste::-webkit-scrollbar-track{background:transparent}
#liste::-webkit-scrollbar-thumb{background:rgba(185,196,214,.42);border-radius:4px}
#liste::-webkit-scrollbar-thumb:hover{background:rgba(185,196,214,.68)}
@media(max-width:760px){
  #enseigne{top:16px;left:16px;right:16px;padding:12px 14px}
  #enseigne h1{font-size:18px;max-width:none}
  #fiche{left:16px;right:16px;bottom:85px;width:auto;max-width:none;padding:22px 20px;max-height:calc(100dvh - 105px)}
  #fiche h2{font-size:24px}
  #outils{left:16px;bottom:16px;gap:7px}
  .outil{width:44px;height:44px}
  #outilAide{right:16px;bottom:16px}
  #chercheur,#legende,#personnes,#aide{bottom:76px;max-height:calc(100dvh - 96px)}
  #altitude{right:16px;padding:8px 6px}
}
@media(max-width:380px){
  #outils{left:10px;gap:3px}
  #outilAide{right:10px}
}
@media(max-height:500px){
  #enseigne{top:10px;padding:8px 12px}
  #enseigne h1{font-size:16px}
  #altitude{gap:4px;padding:5px}
}

/* Fiche éditoriale compacte : le titre mène à la lecture, les filtres
   restent des boutons, les informations secondaires se déplient. */
#fiche{padding:20px 24px;width:430px}
#fiche [hidden]{display:none!important}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
#fiche .fermer{top:7px;right:8px}
#fiche .contexte{
  display:flex;flex-wrap:wrap;gap:3px 8px;padding-right:30px;
  margin-bottom:10px;color:var(--texte-2);font-size:13px;line-height:1.5;
}
#ficheAge::before{content:"·";margin-right:8px}
#fiche h2{max-width:none;margin:0 0 14px;font-size:23px;line-height:1.3}
#ficheLire{
  color:var(--texte);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:rgba(185,196,214,.45);text-underline-offset:4px;
}
#ficheLire:hover{color:var(--don);text-decoration-color:currentColor}
#fiche .lien-externe{font-family:var(--sans);font-size:16px;color:var(--don);white-space:nowrap}
#fiche .ligne-info{display:flex;align-items:baseline;gap:10px;margin-top:5px;font-size:13px;line-height:1.5}
#fiche .libelle{flex:0 0 48px;color:var(--texte-2)}
#fiche .personnes,#fiche .tags{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:0 12px;margin:0}
#fiche .personne,#fiche .tag{
  font:inherit;font-size:13px;line-height:1.5;color:var(--texte-2);
  border:0;border-radius:0;background:none;padding:3px 0;min-height:28px;
  text-align:left;text-decoration:underline;text-decoration-color:rgba(185,196,214,.4);
  text-underline-offset:3px;
}
#fiche .personne{color:var(--texte)}
#fiche .personne:hover,#fiche .tag:hover{color:var(--don);background:none}
#fiche [aria-pressed="true"]{color:var(--don);font-weight:600;text-decoration-thickness:2px}
#fiche .personne.statique{text-decoration:none;cursor:default}
#ficheDetails{margin-top:8px;color:var(--texte-2);font-size:13px;line-height:1.5}
#ficheDetails summary{width:fit-content;cursor:pointer;padding:5px 0;min-height:30px}
#ficheDetails summary:hover{color:var(--texte)}
#ficheDetails summary:focus-visible{outline:2px solid var(--don);outline-offset:3px}
#ficheChiffres:not(:empty){margin-top:5px}
#ficheRoles{margin:5px 0 0}
#ficheRoles dt{margin-top:6px;color:var(--texte);font-weight:500}
#ficheRoles dd{margin:0;overflow-wrap:anywhere}
#suite{margin-top:13px;padding-top:11px;cursor:default}
#suite .lib{font-size:12px;letter-spacing:.03em;text-transform:none;margin-bottom:3px}
#suite .cible{
  display:block;width:100%;border:0;background:none;padding:4px 0;min-height:32px;
  color:var(--texte);font-family:var(--serif);font-size:16px;font-style:normal;
  text-align:left;line-height:1.4;cursor:pointer;overflow-wrap:anywhere;
}
#suite .cible::after{content:" →";color:var(--don)}
@media(max-width:760px){
  #fiche{
    width:auto;padding:18px 20px;
    padding-bottom:max(20px,calc(12px + env(safe-area-inset-bottom)));
    max-height:calc(100dvh - 100px - env(safe-area-inset-bottom));
  }
  #fiche h2{font-size:22px}
  #outils,#outilAide{bottom:max(16px,env(safe-area-inset-bottom))}
  #chercheur,#legende,#personnes,#aide{
    bottom:max(76px,calc(60px + env(safe-area-inset-bottom)));
    max-height:calc(100dvh - 120px - env(safe-area-inset-bottom));
  }
  #cartouche,#grappe{max-height:calc(100dvh - 120px - env(safe-area-inset-bottom))}
  #invite{
    bottom:max(93px,calc(81px + env(safe-area-inset-bottom)));
    max-width:calc(100vw - 68px);
  }
  #invite .invite-titre{font-size:19px}
  #invite .invite-texte{font-size:13px}
}

/* Dans la lightbox, la largeur utile est celle de l'iframe et non de la
   fenêtre Wix. À moins de 700 px, la fiche s'ancre au bas du cadre. */
@media(max-width:699px){
  /* L'enseigne reste sur ordinateur, mais libère la scène dans l'iframe mobile. */
  #enseigne{display:none}
  #bandeauTag{top:calc(12px + env(safe-area-inset-top,0px))}
  #altitude{display:none}
  #outils{
    left:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:4px;
    max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;
  }
  #outils::-webkit-scrollbar{display:none}
  #outils .outil{flex:0 0 40px;width:40px;height:44px}
  #outils .outil svg{width:19px;height:19px}
  #outilAide{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}
  /* Aucun outil flottant ne doit recouvrir le bas de la fiche ouverte. */
  body:has(#fiche.visible) #outils,
  body:has(#fiche.visible) #outilAide{display:none}
  #fiche{
    left:0;right:0;bottom:0;width:100%;max-width:none;
    max-height:min(68dvh,calc(100dvh - 64px));padding:17px 18px max(18px,env(safe-area-inset-bottom));
  }
  #fiche h2{font-size:20px}
  #invite{bottom:max(76px,calc(64px + env(safe-area-inset-bottom)))}
}
@media(max-width:699px) and (max-height:400px){
  #enseigne{top:6px;padding:6px 10px}
  #enseigne h1{font-size:14px}
  #fiche{max-height:calc(100dvh - 50px)}
}

/* ---------- commandes tactiles et navigation portrait ----------
   Le dock narratif reste réservé au portrait étroit ; les rails tactiles
   sont aussi disponibles sur tablette et sur les appareils hybrides. */
#mobileNav,#inclinaisonMobile,#decouverte,#ficheLireBouton,#ficheThemePrincipal,#cartouchePlus,#inviteMobile{display:none}
#ficheSecondaire>summary{display:none}
/* Le toucher peut exister sur une grande tablette ou un ordinateur hybride.
   Seule la présentation du dock reste liée à la largeur et au portrait. */
  body.navigation-tactile #inclinaisonMobile{
    position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:12;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    width:44px;pointer-events:none;
  }
  #inclinaisonMobile button{
    width:44px;min-height:44px;padding:0;border:0;background:none;
    color:var(--texte-2);font:10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
    text-shadow:0 1px 5px var(--nuit);cursor:pointer;touch-action:manipulation;
    pointer-events:auto;
  }
  #inclinaisonMobile button:hover,#inclinaisonMobile button:focus-visible{color:var(--texte)}
  #inclinaisonPiste{
    position:relative;width:44px;height:132px;touch-action:none;cursor:ns-resize;
    pointer-events:auto;
  }
  #inclinaisonPiste::before{
    content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px;
    transform:translateX(-50%);background:linear-gradient(to bottom,var(--trait-fort),var(--trait));
  }
  #inclinaisonCurseur{
    position:absolute;left:50%;top:var(--inclinaison-position,50%);
    width:8px;height:8px;transform:translate(-50%,-50%);
    border-radius:50%;background:var(--texte);box-shadow:0 0 0 2px rgba(7,11,22,.85);
  }
  #inclinaisonPiste:focus-visible{outline:1px solid var(--trait-fort);outline-offset:-3px}
  body.navigation-tactile:not(.mobile-portrait) #altitude{
    display:flex;right:48px;top:50%;width:44px;padding:0;gap:6px;z-index:12;
    border:0;background:none;
  }
  body.navigation-tactile #altitude .bout{
    width:44px;min-height:44px;font-size:10px;font-weight:400;letter-spacing:.12em;
    color:var(--texte-2);text-shadow:0 1px 5px var(--nuit);touch-action:manipulation;
  }
  body.navigation-tactile #altitude .rail-wrap{
    width:44px;height:132px;padding:0;margin:0;cursor:ns-resize;
  }
  body.navigation-tactile #altitude .rail{
    position:absolute;left:50%;top:12px;bottom:12px;height:auto;
    background:linear-gradient(to bottom,var(--trait-fort),var(--trait));
  }
  body.navigation-tactile #altitude .curseur{
    left:50%;width:8px;height:8px;transform:translateX(-50%);
    box-shadow:0 0 0 2px rgba(7,11,22,.85);transition:none;
  }
  body.navigation-tactile #altitude .rail-wrap:hover .curseur{transform:translateX(-50%)}
  #altitudePiste:focus-visible{outline:1px solid var(--trait-fort);outline-offset:-3px}
  body.navigation-tactile:has(#fiche.visible,
    #decouverte.ouvert,#liste.ouvert,#chercheur.ouvert,#legende.ouvert,
    #personnes.ouvert,#aide.ouvert,#cartouche.ouvert,#grappe.ouvert)
    :is(#inclinaisonMobile,#altitude){visibility:hidden;pointer-events:none}
@media (max-height:400px){
  body.navigation-tactile #inclinaisonMobile,
  body.navigation-tactile:not(.mobile-portrait) #altitude{top:calc(50% - 20px)}
  body.navigation-tactile #inclinaisonPiste,
  body.navigation-tactile #altitude .rail-wrap{height:clamp(52px,16vh,90px)}
}
/* Une iframe presque carrée et étroite en paysage n'a pas la place pour
   deux colonnes de 44px. Les cibles restent supérieures à 24px de large. */
@media (max-width:459px) and (orientation:landscape){
  body.navigation-tactile #inclinaisonMobile,
  body.navigation-tactile #inclinaisonMobile button,
  body.navigation-tactile #inclinaisonPiste{width:28px}
  body.navigation-tactile:not(.mobile-portrait) #altitude{right:32px;width:28px}
  body.navigation-tactile #altitude .bout,
  body.navigation-tactile #altitude .rail-wrap{width:28px}
  body.navigation-tactile #inclinaisonMobile button,
  body.navigation-tactile #altitude .bout{font-size:9px}
}
@media (max-width:699px) and (orientation:portrait){
  body.mobile-portrait{
    --mobile-gouttiere:12px;
    --mobile-nav-hauteur:62px;
    --mobile-bas:calc(var(--mobile-nav-hauteur) + env(safe-area-inset-bottom,0px) + 12px);
  }
  body.mobile-portrait #scene{cursor:auto}
  body.mobile-portrait #outils,
  body.mobile-portrait #outilAide,
  body.mobile-portrait #altitude,
  body.mobile-portrait #murmure,
  body.mobile-portrait #etiquette,
  body.mobile-portrait #vagabond{display:none!important}

  body.mobile-portrait #invite{
    /* Le globe de départ occupe au plus 60 % du petit côté : placer la
       consigne au-dessus de son bord, sans la coller au dock mobile. */
    bottom:auto;top:max(16px,calc(50% - 30vmin - 80px));
    left:50%;width:max-content;
    max-width:calc(100vw - 32px);gap:0;padding:6px 10px;
    border:1px solid rgba(132,153,192,.22);background:rgba(7,11,22,.65);
    text-shadow:none;
  }
  body.mobile-portrait #invite .invite-titre{display:none}
  body.mobile-portrait #invite .invite-texte{display:none}
  body.mobile-portrait #inviteMobile{
    display:block;
    font-size:12px;line-height:1.35;color:var(--texte-doux);
  }
  body.mobile-portrait:has(#fiche.visible) #invite,
  body.mobile-portrait.mobile-panneau-ouvert #invite{opacity:0;visibility:hidden;pointer-events:none}

  /* Les points conservent leurs coordonnées : seuls les libellés cèdent de
     la place. Les noyaux et zones interactives restent sur le globe. */
  body.mobile-portrait .mq .etiq{display:none}
  body.mobile-portrait .mq.actif .etiq{display:block;max-width:145px;font-size:12px}
  body.mobile-portrait .mq .compte{font-size:12px;padding:3px 6px}
  body.mobile-portrait .libCiel{
    min-width:0;max-width:138px;padding:5px 8px;
    background:rgba(5,10,22,.7);border-color:rgba(132,153,192,.25);
    box-shadow:none;
  }
  body.mobile-portrait .libCiel .nom{font-size:12px;line-height:1.2}
  body.mobile-portrait .libCiel .nb{display:none}
  body.mobile-portrait #bandeauTag{
    left:12px;right:12px;
    transform:none;max-width:calc(100vw - 24px);justify-content:space-between;
  }
  body.mobile-portrait #bandeauTag .lib{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
  body.mobile-portrait #bandeauTag .x{flex:0 0 44px;min-height:44px}
  body.mobile-portrait #themeChoisi{
    top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;
    left:12px;transform:none;max-width:calc(100vw - 24px);width:calc(100vw - 24px);
    gap:8px;padding:7px 9px;
  }
  body.mobile-portrait #themeChoisi .resume{flex:1}
  body.mobile-portrait #themeChoisi button{min-height:44px}

  /* Une seule rangée de commandes explicites. Le panneau ne recouvre jamais
     le dock : son bord bas est au-dessus de la zone de sécurité. */
  body.mobile-portrait #mobileNav{
    position:fixed;left:0;right:0;bottom:0;z-index:25;
    display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:5px;
    min-width:0;height:var(--mobile-bas);
    padding:8px var(--mobile-gouttiere) calc(12px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(132,153,192,.36);
    background:rgba(7,11,22,.94);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  body.mobile-portrait #mobileNav button{
    min-width:0;min-height:44px;padding:6px 8px;
    border:1px solid rgba(132,153,192,.44);border-radius:2px;
    background:rgba(27,40,64,.4);color:var(--texte);
    font:600 13px/1.2 var(--sans);letter-spacing:.025em;
    cursor:pointer;white-space:nowrap;
  }
  body.mobile-portrait #mobileNav button.actif,
  body.mobile-portrait #mobileNav button[aria-pressed="true"],
  body.mobile-portrait #mobileNav button[aria-expanded="true"]{
    border-color:var(--don);color:var(--texte-fort);
    background:rgba(31,163,181,.19);
  }
  body.mobile-portrait #mobileDecouvrir{
    border-color:rgba(53,191,202,.7)!important;
  }

  /* Tous les panneaux partagent la même emprise, sans écraser le globe.
     !important sur left/top neutralise les coordonnées de points calculées
     en ligne pour cartouche et grappe, qui n'ont plus de sens en bottom-sheet. */
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide){
    position:fixed!important;top:auto!important;left:0!important;right:0!important;
    bottom:var(--mobile-bas)!important;width:100%!important;max-width:100%!important;
    height:auto!important;max-height:min(60dvh,calc(100dvh - var(--mobile-bas) - env(safe-area-inset-top,0px) - 48px))!important;
    min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;touch-action:pan-y;
    border:1px solid var(--trait-lisible);border-bottom:0;border-radius:12px 12px 0 0;
    background:rgba(10,17,33,.97);
    box-shadow:0 -12px 34px rgba(0,0,0,.4);
  }
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide) *,
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide) *::before,
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide) *::after{
    max-width:100%;overflow-wrap:anywhere;
  }
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide) button,
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide) summary,
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide) input,
  body.mobile-portrait :is(#decouverte,#fiche,#cartouche,#grappe,#liste,#chercheur,#legende,#personnes,#aide) select{
    min-height:44px;
  }
  body.mobile-portrait :is(#cartouche,#grappe,#chercheur,#legende,#personnes,#aide){z-index:20}
  body.mobile-portrait #decouverte{z-index:21;display:none;padding:18px 16px 20px}
  body.mobile-portrait #decouverte.ouvert{display:block}
  body.mobile-portrait #decouverte[hidden]{display:none}
  body.mobile-portrait #decouverteFermer{
    position:absolute;right:12px;top:8px;min-width:44px;
    display:grid;place-items:center;border:0;background:none;color:var(--texte);
    cursor:pointer;
  }
  body.mobile-portrait #decouverte :is(h2,h3){
    padding-right:46px;margin-bottom:12px;font:400 21px/1.25 var(--serif);
  }
  body.mobile-portrait #decouverte :is(#mobileRechercher,#mobileArticles,#mobileThemes,#mobilePersonnes,#mobileHasard,#mobileAide){
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;min-height:48px;padding:10px 12px;margin:0 0 6px;
    border:1px solid var(--trait-subtil);border-radius:2px;
    background:rgba(30,44,69,.42);color:var(--texte);
    text-align:left;font:500 14px/1.35 var(--sans);cursor:pointer;
  }
  body.mobile-portrait #decouverte :is(#mobileRechercher,#mobileArticles,#mobileThemes,#mobilePersonnes,#mobileHasard,#mobileAide):active{
    background:rgba(53,191,202,.18);
  }
  body.mobile-portrait #decouverte [hidden],
  body.mobile-portrait #fiche [hidden],
  body.mobile-portrait #cartouche [hidden]{display:none!important}

  body.mobile-portrait #fiche{
    z-index:19;display:block;padding:16px 18px 18px;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(12px);
    transition:opacity .24s,transform .24s,visibility 0s linear .24s;
  }
  body.mobile-portrait #fiche.visible{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
    transition-delay:0s;
  }
  body.mobile-portrait.mobile-panneau-ouvert #fiche{
    opacity:0;visibility:hidden;pointer-events:none;
  }
  body.mobile-portrait #fiche .fermer{top:8px;right:10px}
  body.mobile-portrait #fiche .contexte{margin-bottom:6px;padding-right:44px;font-size:12px}
  body.mobile-portrait #fiche h2{margin:0 44px 12px 0;font-size:21px;line-height:1.28}
  body.mobile-portrait #ficheThemePrincipal{
    display:block;margin:0 0 12px;color:var(--don);font-size:13px;line-height:1.4;
  }
  body.mobile-portrait #ficheLireBouton{
    display:flex;align-items:center;justify-content:center;width:100%;
    min-height:48px;padding:11px 16px;border:1px solid var(--don);
    border-radius:2px;background:var(--don);color:var(--nuit);
    text-align:center;text-decoration:none;font:700 14px/1.3 var(--sans);
    cursor:pointer;
  }
  body.mobile-portrait #ficheSecondaire{
    margin-top:13px;border-top:1px solid var(--trait-subtil);
    color:var(--texte-doux);font-size:13px;
  }
  body.mobile-portrait #ficheSecondaire summary{
    display:flex;align-items:center;cursor:pointer;padding:9px 0;
    color:var(--texte);font-weight:600;list-style:none;
  }
  body.mobile-portrait #ficheSecondaire summary::-webkit-details-marker{display:none}
  body.mobile-portrait #ficheSecondaire summary::after{
    content:"+";margin-left:auto;font:400 20px/1 var(--sans);color:var(--don);
  }
  body.mobile-portrait #ficheSecondaire[open] summary::after{content:"−"}
  body.mobile-portrait #fiche .ligne-info{flex-wrap:wrap;gap:0 8px}
  body.mobile-portrait #fiche .personne,
  body.mobile-portrait #fiche .tag,
  body.mobile-portrait #suite .cible{min-height:44px;display:inline-flex;align-items:center}
  body.mobile-portrait #ficheDetails summary{min-height:44px}

  body.mobile-portrait #cartouche{padding:0;display:none}
  body.mobile-portrait #cartouche.ouvert{display:flex}
  body.mobile-portrait #cartouche .tete{align-items:center;padding:10px 12px 2px 16px}
  body.mobile-portrait #cartouche .tete .nom{min-width:0;font-size:20px}
  body.mobile-portrait #cartouche .desc{padding:3px 16px 0;font-size:13px}
  body.mobile-portrait #cartouche .comptes{padding:8px 16px;font-size:12px}
  body.mobile-portrait #cartouchePlus{
    display:block;flex:0 0 auto;margin:8px 16px;padding:8px 12px;
    border:1px solid var(--trait-lisible);background:transparent;color:var(--texte);
    font-size:13px;text-align:left;cursor:pointer;
  }
  body.mobile-portrait #cartouche:not(.complet) .associes{display:none}
  body.mobile-portrait #cartouche .corps{flex:0 0 auto;overflow-y:auto;max-height:145px}
  body.mobile-portrait #cartouche.complet .corps{max-height:none;overflow:visible}
  body.mobile-portrait #cartouche .item,
  body.mobile-portrait #grappe .item{min-height:48px;padding:11px 16px}
  body.mobile-portrait #cartouche .actions{
    position:sticky;bottom:0;flex:0 0 auto;padding:9px 16px 12px;
    background:rgba(10,17,33,.98);
  }
  body.mobile-portrait #cartouche .actions button{min-height:44px}
  body.mobile-portrait #cartouche .associe,
  body.mobile-portrait #cartouche #cartoucheReseau{min-height:44px}
  body.mobile-portrait #grappe{padding:0;display:none}
  body.mobile-portrait #grappe.ouvert{display:flex}
  body.mobile-portrait #grappe .tete{align-items:center;padding:10px 12px 6px 16px}
  body.mobile-portrait #grappe .tete .zone{min-width:0}
  body.mobile-portrait #grappe .corps{min-height:0;overflow-y:auto}
  body.mobile-portrait #grappeZoomer{min-height:48px;margin:0 16px 8px}

  /* La liste devient elle aussi un tiroir inférieur plutôt qu'une page
     plein écran ; son contenu garde un seul flux défilable. */
  body.mobile-portrait #voileListe{display:none}
  body.mobile-portrait #liste{
    z-index:22;display:block;visibility:hidden;pointer-events:none;
    transform:translateY(105%);transition:transform .3s,visibility 0s linear .3s;
  }
  body.mobile-portrait #liste.ouvert{
    visibility:visible;pointer-events:auto;transform:translateY(0);
    transition-delay:0s;
  }
  body.mobile-portrait #liste header{padding:9px 12px 8px 18px}
  body.mobile-portrait #liste header h2{font-size:21px}
  body.mobile-portrait #filtres{padding:10px 18px;gap:6px}
  body.mobile-portrait .filtre{min-height:44px}
  body.mobile-portrait .ligne{min-height:56px;padding:12px 18px}
  body.mobile-portrait #articles{overflow:visible}

  body.mobile-portrait #chercheur{padding:0;display:none}
  body.mobile-portrait #chercheur.ouvert{display:flex}
  body.mobile-portrait #chercheur input{flex:0 0 auto;padding:12px 16px;font-size:16px}
  body.mobile-portrait #resultats{min-height:0;max-height:none;overflow-y:auto}
  body.mobile-portrait #resultats .r{min-height:48px;padding:11px 16px}
  body.mobile-portrait :is(#legende,#personnes,#aide){display:none}
  body.mobile-portrait :is(#legende,#personnes,#aide).ouvert{display:flex}
  body.mobile-portrait :is(#legendeCorps,#personnesCorps,#aide .aide-corps){
    min-height:0;overflow-y:auto;
  }
  body.mobile-portrait #personnes .personnes-chercheur input{min-height:44px}
  body.mobile-portrait :is(#personnes .c,#legende .c){min-height:48px}
}

@media (max-width:699px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  body.mobile-portrait :is(#fiche,#liste){transition:none}
}

/* Entre 700 et 1100 px, réserver l'espace à droite des six outils.
   Monter l'invitation ne suffisait pas sur les fenêtres peu hautes. */
@media (min-width:700px) and (max-width:1100px){
  #invite{
    left:auto;right:90px;transform:none;bottom:34px;
    max-width:calc(100vw - 522px);
  }
}
@media (min-width:1101px) and (max-width:1360px){
  #invite{
    left:auto;right:210px;transform:none;
    max-width:calc(100vw - 642px);
  }
}

/* ---------- signature de conception ----------
   L'aide reste dans la rangée de gauche ; la signature occupe le coin droit.
   Sur une fenêtre étroite ou basse, elle reste dans l'aide (ou Découvrir),
   plutôt que de réduire l'espace réservé à l'invitation et aux rails. */
#outils #outilAide{position:relative;inset:auto}
.signature-conception{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:152px;max-width:100%;color:var(--texte-doux);
  font:400 12px/16px var(--sans);letter-spacing:.04em;cursor:auto;
}
.signature-conception a{
  display:flex;align-items:center;min-height:44px;width:100%;padding:4px 0;
  background:none;border:0;text-decoration:none;touch-action:manipulation;
}
.signature-conception img{
  display:block;width:100%;height:auto;opacity:.85;
}
.signature-conception a:hover img,.signature-conception a:focus-visible img{opacity:1}
.signature-conception a:focus-visible{outline:2px solid var(--don);outline-offset:4px}
#signatureConception{
  position:fixed;right:34px;bottom:28px;z-index:5;
}
#signatureConception a{min-height:50px}
.signature-conception--panneau{
  width:152px;margin:12px 18px 8px;padding-top:12px;
  border-top:1px solid var(--trait-subtil);
}
#decouverte .signature-conception--panneau{margin:12px 0 0}
/* Une surface ouverte reste prioritaire et ne partage pas sa cible tactile
   avec une signature flottante. L'aide conserve sa propre signature. */
body:has(#fiche.visible,#liste.ouvert,#aide.ouvert,#cartouche.ouvert,
  #grappe.ouvert,#chercheur.ouvert,#personnes.ouvert,#legende.ouvert) #signatureConception{display:none}
@media (max-width:1100px){
  #signatureConception{display:none}
}
@media (min-width:700px) and (max-width:1100px) and (min-height:720px){
  #signatureConception{
    display:flex;right:34px;bottom:28px;
  }
  /* La signature apparaît dans le coin droit seulement après l'invitation ;
     même un texte d'arrivée sur plusieurs lignes conserve sa place. */
  body:has(#invite:not(.parti)) #signatureConception{display:none}
}
@media (min-width:700px) and (max-width:760px) and (min-height:720px){
  #signatureConception{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
  #signatureConception a{min-height:44px}
}
@media (max-height:659px){
  #signatureConception{display:none}
}