/* Hauts Lieux — css/interface.css — Interface : en-tête, volet et rouleau, onglets, commandes de la carte, légende, pied du volet, écrans (aide, mentions, code, clés, partage, parrainage).
   Sorti sans réécriture de index.html 2026-10-01-j (1er octobre 2026). Les quatre feuilles se chargent dans l'ordre
   leaflet, polices, interface, pages : c'est l'ordre d'origine des règles, donc la même cascade. */
/* ---------- Header ---------- */
#header{
  position:absolute; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  background: linear-gradient(180deg, rgba(20,29,27,0.88) 0%, rgba(20,29,27,0.55) 70%, transparent 100%);
  pointer-events:none;
}
#header .brand{ display:flex; align-items:center; gap:10px; pointer-events:auto;}
#header .brand svg{ width:30px; height:30px; flex-shrink:0; }
#header h1{
  font-family:'Cormorant SC', serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size: 19px;
  letter-spacing:0.2px;
  color: var(--stone-light);
  line-height:1.1;
}
#header .sub{
  font-size:10.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color: var(--mist);
  font-weight:500;
}
.header-actions{ display:flex; align-items:center; gap:8px; pointer-events:none; }
#menuBtn, #voiceAlertBtn{
  pointer-events:auto;
  background: rgba(245,246,239,0.12);
  border: 1px solid rgba(245,246,239,0.25);
  color: var(--stone-light);
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
#menuBtn:active, #voiceAlertBtn:active{ background: rgba(245,246,239,0.22); }
#voiceAlertBtn.active{ background: var(--gold); border-color: var(--gold); color:#2c2b26; }
#voiceAlertBtn .va-dot{
  position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
  background:#5cb85c; box-shadow:0 0 0 1.5px rgba(20,29,27,0.55); display:none;
}
#voiceAlertBtn{ position:relative; }
#voiceAlertBtn.active .va-dot{ display:block; }

/* ---------- Panel ---------- */
/* Rouleau de parchemin qui se déroule. Reconstruit le 30 août 2026 d'après
   le compte rendu retrouvé sur le Bureau (parchemin_sommaire_titres_2026-08-
   29.md) : cette mécanique avait déjà été conçue, testée (28 contrôles) et
   livrée le 29 août au soir (version -m) -- puis perdue, une session
   ultérieure étant reparties d'une copie du fichier antérieure à ce travail
   sans le savoir (la version -m a été réémise pour autre chose, un vrai
   incident de perte de travail, pas une décision). Thierry l'a repérée
   manquante et redemandée telle qu'elle avait été pensée, avec les couleurs
   chaudes d'avant le passage à la palette froide « Cadastre » (lui non plus
   ne l'aimait pas) plutôt que celles, froides, en place au moment où le
   rouleau avait été construit la première fois.
   Fermé, la feuille est entièrement rentrée par un clip-path qui la découpe
   DEPUIS LA DROITE (inset sur le côté droit, pas le gauche -- une découpe à
   gauche a été essayée d'abord et donnait un déroulé qui partait du bord
   DROIT du volet vers la gauche, croisant le rouleau qui, lui, part du bord
   gauche de l'écran vers la droite : signalé par Thierry le 30 août, "comme
   si l'ouverture se croisait"). Le bord GAUCHE du volet (x=0, où le rouleau
   commence fermé) reste donc fixe tout du long ; c'est le bord droit visible
   qui avance vers la droite au fil de l'ouverture, exactement sous le
   rouleau. Ouverte, la feuille est intégralement visible. #panelHandle (plus
   bas dans le HTML, FRÈRE de #panel et non son enfant -- voir son propre
   commentaire) matérialise le rouleau : il suit ce même pourcentage de
   découpe via le sélecteur de fratrie CSS #panel.open ~ #panelHandle, pour
   rester exactement à la lisière visible/cachée, comme le bord d'une feuille
   qu'on déroule. */
/* ---------- #volet : la boîte qui bouge (6 septembre 2026 au soir) ----------
   Thierry : « la feuille qui se déroule en même temps que le rouleau se
   déplace, avec un point d'accroche pour ne pas qu'il y ait de blanc entre
   les deux, synchronisée exactement à la même vitesse ».
   Jusqu'ici la feuille était découpée (clip-path animé) et le rouleau déplacé
   (transform animé) : deux animations sur deux boîtes, à la même durée et à
   la même courbe. Cela suffit tant que le navigateur les joue au même rythme ;
   dès qu'il en retarde une -- la liste qui se peint, les tuiles, une image --
   la lisière et le rouleau se décalent, et la carte apparaît entre les deux.
   Désormais UNE SEULE boîte glisse : #volet, large comme la feuille plus le
   rouleau. Le rouleau est cloué à son bord droit (left: var(--panel-w)) et ne
   porte plus aucune animation ; la feuille est dedans, rognée par #voletClip.
   Un espace entre la feuille et le rouleau est devenu impossible : ce sont
   deux parties de la même boîte.
   Fermé, #volet est décalé de toute la largeur de la feuille vers la gauche :
   seul le rouleau dépasse, au bord de l'écran. Ouvert, il est à zéro. */
#volet{
  position:absolute; top:0; left:0; bottom:0; z-index:600;
  width: calc(var(--panel-w) + var(--rouleau-w));
  pointer-events:none; /* la boîte elle-même est transparente au doigt ; la feuille et le rouleau reprennent la main */
  transform: translateX(calc(-1 * var(--panel-w)));
  will-change: transform;
  transition: transform 0.85s cubic-bezier(.4,0,.2,1);
}
#volet.open{ transform: translateX(0); }
#volet.dragging{ transition:none; }
/* La fenêtre qui rogne la feuille : exactement la largeur de la feuille, et
   pas un pixel de plus. Son bord droit EST la lisière ; le rouleau commence
   là (left: var(--panel-w)) et n'en recouvre rien. Fermé, la feuille est donc
   entièrement hors de la fenêtre -- ce qui compte pour le chargement paresseux
   des vignettes : l'IntersectionObserver tient compte des ancêtres à
   overflow:hidden, et une feuille qui dépasserait de 62 px sous le rouleau lui
   ferait demander sept photos volet fermé (attrapé au banc d'essai). Le
   rouleau, lui, est hors de cette fenêtre (enfant direct de #volet) pour que
   son ombre portée de 26 px ne soit pas coupée. */
#voletClip{
  position:absolute; top:0; left:0; bottom:0;
  width: var(--panel-w);
  overflow:hidden; pointer-events:none;
}
/* La feuille. Pour qu'elle paraisse se DÉROULER et non glisser comme un tiroir
   (Thierry y tenait le 30 août : le bord gauche du volet reste fixe, c'est la
   lisière droite qui avance), elle porte le contre-déplacement exact de #volet :
   +largeur quand la boîte est à -largeur, zéro quand la boîte est à zéro. Sur
   l'écran, son bord gauche ne bouge donc pas. Et si ce contre-déplacement
   prenait un jour du retard sur la boîte, la feuille glisserait d'un ou deux
   pixels SOUS le rouleau -- jamais un espace ne pourrait s'ouvrir, puisque le
   rouleau la recouvre. C'est toute la différence avec l'ancien montage. */
#panel{
  position:absolute; top:0; left:0; bottom:0; z-index:1;
  width: var(--panel-w);
  pointer-events:auto;
  display:flex; flex-direction:column;
  transform: translateX(var(--panel-w));
  will-change: transform;
  transition: transform 0.85s cubic-bezier(.4,0,.2,1);
}
#volet.open #panel{ transform: translateX(0); }
#volet.dragging #panel{ transition:none; }
/* Texture de vélin -- en dégradés CSS uniquement, aucune image (le compte
   rendu du 29 août est explicite là-dessus) : deux radiaux doux pour la
   mouchure/le vieillissement inégal du parchemin, deux hachures diagonales
   fines et à peine visibles pour la fibre du papier. Posée sur #panelPaper
   (habillage visuel), pas sur #panel (qui ne porte que la découpe
   d'ouverture) -- #panelHandle est un FRÈRE de #panel, donc pas concerné par
   un clip-path ici de toute façon ; le fond, lui, reste sur ce volet
   intérieur simplement pour occuper tout l'espace flex restant sous
   .panel-head. */
/* Le crème du rouleau, depuis le 6 septembre : « la teinte choisie pour le
   rouleau n'est pas la même que pour la feuille qui s'ouvre ». Une seule
   variable pour les deux, pour qu'ils ne divergent plus jamais. */
/* Éclairci le 6 septembre au soir : « parchemin et rouleau plus clair ».
   #f4e9cb reste un crème (même teinte, 43°), trois crans plus clair que le
   #efe2c0 du matin -- et loin du #faf7f0 de --paper, que Thierry lisait gris.
   --parchemin-sombre est le même crème, un cran sous celui du matin : il sert
   au bandeau des pages, pour que la tête de page se détache du corps. */
/* Éclairci une seconde fois le 9 septembre 2026 : « blanchir encore la couleur
   crème qui est trop foncée, sur le rouleau et la feuille parchemin ». Même
   teinte (44°) et même saturation qu'au 6 septembre, quatre crans de clarté en
   plus : 87,6 % -> 92 %. --parchemin-sombre suit du même pas, pour que l'écart
   entre le corps et le bandeau des pages reste exactement celui qui avait été
   réglé (10,2 points de clarté). Le texte y gagne : le contraste du gris de
   la charte sur ce crème passe de 10,3 à 11,0. */
:root{ --parchemin: #f8f1dd; --parchemin-sombre: #e8dbb9; }
#panelPaper{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  background-color: var(--parchemin);
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255,252,240,0.5), transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(120,95,50,0.10), transparent 60%),
    repeating-linear-gradient(35deg, rgba(120,95,50,0.05) 0px, rgba(120,95,50,0.05) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-35deg, rgba(120,95,50,0.04) 0px, rgba(120,95,50,0.04) 1px, transparent 1px, transparent 3px);
  box-shadow: 8px 0 30px rgba(0,0,0,0.35);
}
/* Sur grand écran (fenêtre large, ordinateur), le panneau de base laissait beaucoup
   d'espace vide (la carte) sur toute la partie droite de la fenêtre — visuellement
   déséquilibré. Il s'élargit donc progressivement sur les écrans larges, tout en
   restant ancré à gauche (glissement d'ouverture inchangé). Paliers eux aussi
   resserrés le 30 août, avec le palier de base ci-dessus. */
@media (min-width: 760px){
  /* Sur écran large, rien ne change depuis le 5 septembre : 62 px de rouleau
     pour 62 px de cachet, bord à bord, centré. */
  /* Resserres le 20 septembre 2026 (« reduis un peu le parchemin pour qu'il soit
     plus compact... et reduis aussi la taille du rouleau de moitie ») : la feuille
     perd 13 %, le rouleau et son cachet passent de 62 a 31 px. */
  :root{ --panel-w: min(410px, 35vw); --rouleau-w: 47px; --cachet-w: 47px; }
}
@media (min-width: 1100px){
  :root{ --panel-w: min(450px, 29vw); }
}

/* ---------- Rouleau (glisser pour ouvrir/fermer, demande du 13/08 ; devenu le
   rouleau du parchemin qui se déroule le 30 août) ----------
   FRÈRE de #panel dans le HTML, pas son enfant -- deux raisons précises à ça :
   (1) le sélecteur #panel.open ~ #panelHandle ci-dessous a besoin de cette
   fratrie directe pour faire suivre au rouleau l'état ouvert/fermé sans une
   ligne de JS ; (2) un clip-path posé sur #panel (juste au-dessus) découpe
   TOUT ce qui est peint à l'intérieur de sa boîte, y compris un enfant
   positionné hors de cette boîte -- en enfant, le rouleau aurait disparu avec
   la feuille au lieu de rester visible pour la dérouler.
   Volet fermé : le rouleau est au bord gauche de l'écran, pleine hauteur.
   Volet ouvert : il glisse jusqu'au bord droit du volet (via --panel-w,
   partagée avec #panel). On peut le tirer du doigt comme un vrai rouleau
   qu'on déroule, ou simplement le toucher/cliquer comme le bouton menu. */
/* left ne s'anime pas sur le même thread que clip-path : left redéclenche un calcul
   de mise en page à chaque image (thread principal), alors que clip-path (comme
   transform) peut être confié au compositeur (thread séparé, GPU). Même durée et
   même easing sur les deux ne suffisent donc pas à les garder synchronisés dès que
   le thread principal est occupé ailleurs (tuiles de carte, JS...) : le rouleau
   prenait du retard sur la découpe du volet -- signalé par Thierry le 30 août
   ("le volet s'ouvre plus vite que la barre du parchemin"). Remplacé par
   transform:translateX, qui anime sur le même thread que clip-path et reste donc
   à la même image que la découpe en toutes circonstances. */
/* Couleur du rouleau : demande d'Iload 24 le 30 août ("pas brune, pas marron,
   pas dans les tons que tu as utilisés") -- le dégradé de bois brun d'origine
   est remplacé par la même couleur de fond que le parchemin (var(--paper)) et
   les deux mêmes radiaux doux que #panelPaper ci-dessus, pour que le rouleau
   se lise comme la tranche de la même feuille plutôt que comme une baguette
   de bois rapportée.
   Signalé ensuite par Thierry ("le volet n'est pas encore bien accroché au
   rouleau, décalage constaté sur les deux") : #panel et #panelHandle sont deux
   boîtes distinctes, chacune avec son propre fond -- les deux hachures diagonales
   de #panelPaper (35deg/-35deg, motif répété tous les 3px) reprenaient donc
   à zéro à l'origine du rouleau au lieu de continuer celles de la feuille,
   ce qui créait un décalage visible du motif pile à la jointure, sur les deux
   diagonales. Simplement retirées ici (le rouleau ne garde que les radiaux,
   sans hachures) : plus de motif à raccorder, donc plus de décalage possible,
   et la jointure reste discrète (mêmes teintes des deux côtés). */
#panelHandle{
  /* Cloué au bord droit de #volet : left = largeur de la feuille. Aucune
     animation ici depuis le 6 septembre au soir -- c'est #volet qui bouge. */
  position:absolute; top:0; left:var(--panel-w); bottom:0; z-index:2;
  pointer-events:auto;
  /* 26 px auparavant : le sceau n'y tenait qu'en 19 px, taille à laquelle la
     chapelle gravée n'était qu'une tache. Élargi pour que le glyphe se lise.
     Élargi une seconde fois le 5 septembre 2026, puis une troisième le même
     soir : 62 px de rouleau pour un cachet de 62 px, bord à bord.
     Vieilli le soir même, à la demande de Thierry : « des taches, un peu user ce
     parchemin ». Les six taches ci-dessous sont posées à des endroits fixes et
     dissymétriques — une répartition régulière se lit tout de suite comme un
     motif, donc comme une impression, jamais comme une usure. Les deux ombres
     internes sur les bords longs donnent la courbure du cylindre : c'est elle
     qui fait le rouleau, plus que la couleur. */
  width:var(--rouleau-w);
  /* Crème, et non plus var(--paper). Thierry, 6 septembre : « une couleur crème
     pour le parchemin, parce que là, pour moi, c'est gris ». Il avait raison :
     #faf7f0 est un blanc cassé, et posé sur une carte claire, entre deux ombres
     internes, il ne restait de lui qu'un gris. #efe2c0 est un vrai crème, dans
     la famille du --stone-light de la charte mais deux crans plus chaud. */
  background-color: var(--parchemin);
  /* Les taches ont vécu une soirée. Elles ont été grossies le 6 septembre au
     matin, à la taille du cachet, parce que les précédentes ne se voyaient pas
     -- et retirées le 6 septembre au soir, sur jugement de Thierry : « enlève
     les taches du rouleau finalement, les ombres portées suffisent ». Il a
     raison, et cela se raisonne : ce qui fait le rouleau, c'est la courbure,
     donnée par les deux ombres internes des bords longs et par la bande claire
     ci-dessous ; les taches ne s'ajoutaient pas à cette lecture, elles la
     brouillaient. Le crème reste, l'usure part.
     (Le tracé exact des huit taches est conservé dans le patch du 6 septembre
     au matin, si l'envie revenait un jour.) */
  background-image:
    radial-gradient(ellipse 24px 62% at 31% 50%, rgba(255,250,232,0.60), transparent 72%);
  /* Ombre élargie et foncée le 5 septembre au soir, à la demande de Thierry :
     de 14 px à 26 px de diffusion, et de 0,28 à 0,44 d'opacité. Le rouleau se
     décolle franchement de la carte au lieu d'y être posé. */
  box-shadow:
    inset 7px 0 11px -7px rgba(92,72,38,0.34),
    inset -7px 0 11px -7px rgba(92,72,38,0.38),
    7px 0 26px rgba(0,0,0,0.44);
  border-right: 1px solid rgba(120,95,50,0.22);
  display:flex; align-items:center; justify-content:center;
  cursor:grab;
  touch-action:none;
}
/* ---------- Les deux bouts du rouleau (5 septembre 2026) ----------
   « Une vague qui descend et qui remonte en haut et en bas, pour montrer le
   contour du parchemin un peu allumé. » Chaque bout est une découpe en vagues
   dans la couleur du papier, doublée d'un filet clair qui l'allume : c'est le
   filet qui fait lire la courbe, pas la découpe. Ils sont posés en pointer-events
   none pour ne pas voler le glissement du rouleau. */
/* Refaites le 6 septembre. « Les pointes des vagues, celles qui vont vers
   l'extérieur du rouleau, touchent les bords. » Elles ne les touchaient pas :
   l'ancienne découpe partait d'un bord plat en y=0 et n'ondulait que par en
   dessous, si bien qu'on voyait un filet clair flotter au milieu du papier et
   pas un bout de rouleau. Ce sont maintenant trois lobes suspendus au bord :
   la courbe REVIENT à y=0 en x=0, à un tiers, à deux tiers et en x=62 -- ses
   quatre pointes touchent donc le bord haut, dont les deux du coin. Entre elles
   la courbe plonge de treize pixels, et c'est ce creux qui fait la vague. Le
   filet clair la suit pour l'allumer. En bas, le même dessin retourné. */
/* 21 septembre 2026, demande de Thierry : « une vague type sinusoïde simple, de
   chaque côté ». Les trois festons suspendus du 6 septembre (arcs qui revenaient
   toucher le bord) deviennent une vraie sinusoïde : une seule ondulation (une période) sur la
   largeur, amplitude 4,5 autour du milieu de la bande, tracé calculé point par
   point (4-scripts/2026-09-21-d_vague.py) et non plus approché par des courbes de
   Bézier. Le filet clair garde son épaisseur quelle que soit la largeur du rouleau
   (vector-effect non-scaling-stroke) : l'image est étirée en largeur, pas le trait. */
/* 23 septembre 2026 (21-s), Thierry : « la couleur au-dessus de la vague du rouleau
   et en dessous de la vague du rouleau, de la même couleur que le rouleau ». Les deux
   bouts étaient remplis d'un tan sombre (#c4a877 à 72 %) qui les détachait du
   parchemin ; ils prennent son crème exact. Ne restent, pour dire la courbe, le filet
   clair et l'ombre portée — ce qui était déjà l'intention du 5 septembre : « c'est le
   filet qui fait lire la courbe, pas la découpe ». La valeur est écrite en dur dans les
   deux data-URI (une variable CSS n'a pas cours dans une image) : si --parchemin change,
   #f8f1dd est à changer ici aussi, aux deux endroits. */
#panelHandle::before, #panelHandle::after{
  content:''; position:absolute; left:0; right:0; height:16px;
  pointer-events:none; z-index:2;
  background-repeat:no-repeat; background-size:100% 100%;
}
#panelHandle::before{
  top:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='16' viewBox='0 0 62 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 8 1.29 7.41 2.58 6.84 3.88 6.28 5.17 5.75 6.46 5.26 7.75 4.82 9.04 4.43 10.33 4.1 11.62 3.84 12.92 3.65 14.21 3.54 15.5 3.5 16.79 3.54 18.08 3.65 19.38 3.84 20.67 4.1 21.96 4.43 23.25 4.82 24.54 5.26 25.83 5.75 27.12 6.28 28.42 6.84 29.71 7.41 31 8 32.29 8.59 33.58 9.16 34.88 9.72 36.17 10.25 37.46 10.74 38.75 11.18 40.04 11.57 41.33 11.9 42.62 12.16 43.92 12.35 45.21 12.46 46.5 12.5 47.79 12.46 49.08 12.35 50.38 12.16 51.67 11.9 52.96 11.57 54.25 11.18 55.54 10.74 56.83 10.25 58.12 9.72 59.42 9.16 60.71 8.59 62 8 L62 0 Z' fill='%23f8f1dd'/%3E%3Cpath d='M0 8 1.29 7.41 2.58 6.84 3.88 6.28 5.17 5.75 6.46 5.26 7.75 4.82 9.04 4.43 10.33 4.1 11.62 3.84 12.92 3.65 14.21 3.54 15.5 3.5 16.79 3.54 18.08 3.65 19.38 3.84 20.67 4.1 21.96 4.43 23.25 4.82 24.54 5.26 25.83 5.75 27.12 6.28 28.42 6.84 29.71 7.41 31 8 32.29 8.59 33.58 9.16 34.88 9.72 36.17 10.25 37.46 10.74 38.75 11.18 40.04 11.57 41.33 11.9 42.62 12.16 43.92 12.35 45.21 12.46 46.5 12.5 47.79 12.46 49.08 12.35 50.38 12.16 51.67 11.9 52.96 11.57 54.25 11.18 55.54 10.74 56.83 10.25 58.12 9.72 59.42 9.16 60.71 8.59 62 8' fill='none' stroke='%23fffaea' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 2px rgba(92,72,38,0.26));
}
#panelHandle::after{
  bottom:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='16' viewBox='0 0 62 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L0 8 1.29 8.59 2.58 9.16 3.88 9.72 5.17 10.25 6.46 10.74 7.75 11.18 9.04 11.57 10.33 11.9 11.62 12.16 12.92 12.35 14.21 12.46 15.5 12.5 16.79 12.46 18.08 12.35 19.38 12.16 20.67 11.9 21.96 11.57 23.25 11.18 24.54 10.74 25.83 10.25 27.12 9.72 28.42 9.16 29.71 8.59 31 8 32.29 7.41 33.58 6.84 34.88 6.28 36.17 5.75 37.46 5.26 38.75 4.82 40.04 4.43 41.33 4.1 42.62 3.84 43.92 3.65 45.21 3.54 46.5 3.5 47.79 3.54 49.08 3.65 50.38 3.84 51.67 4.1 52.96 4.43 54.25 4.82 55.54 5.26 56.83 5.75 58.12 6.28 59.42 6.84 60.71 7.41 62 8 L62 16 Z' fill='%23f8f1dd'/%3E%3Cpath d='M0 8 1.29 8.59 2.58 9.16 3.88 9.72 5.17 10.25 6.46 10.74 7.75 11.18 9.04 11.57 10.33 11.9 11.62 12.16 12.92 12.35 14.21 12.46 15.5 12.5 16.79 12.46 18.08 12.35 19.38 12.16 20.67 11.9 21.96 11.57 23.25 11.18 24.54 10.74 25.83 10.25 27.12 9.72 28.42 9.16 29.71 8.59 31 8 32.29 7.41 33.58 6.84 34.88 6.28 36.17 5.75 37.46 5.26 38.75 4.82 40.04 4.43 41.33 4.1 42.62 3.84 43.92 3.65 45.21 3.54 46.5 3.5 47.79 3.54 49.08 3.65 50.38 3.84 51.67 4.1 52.96 4.43 54.25 4.82 55.54 5.26 56.83 5.75 58.12 6.28 59.42 6.84 60.71 7.41 62 8' fill='none' stroke='%23fffaea' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  filter: drop-shadow(0 -2px 2px rgba(92,72,38,0.26));
}
#panelHandle:active{ cursor:grabbing; }
/* Cachet de cire du rouleau — refait le 3 septembre 2026.
   Il remplace le disque rouge à croix posé le 30 août, dessiné en dégradés
   CSS : joli de loin, mais sans rapport avec l'identité de la marque.
   Celui-ci porte le vrai sceau (identite-visuelle/logo/sceau-impression.svg),
   frappé dans une coulée de cire dont le contour est un tracé unique — deux
   formes empilées laisseraient une arête visible à leur jonction.
   Il garde son rôle d'avant : le repère qui dit « c'est ici qu'on attrape le
   rouleau ». */
#panelHandle .ph-seal{
  /* Le cachet prend maintenant toute la largeur visible du rouleau (54 px pour
     58 px de large, soit 2 px de marge de chaque côté) : c'est ce débordement
     jusqu'aux bords qui donne l'effet de cire pressée sur le rouleau plutôt que
     de pastille posée dessus. L'ombre est doublée : une courte et dense pour le
     relief de la cire, une longue et diffuse pour l'asseoir sur le papier. */
  /* Bord à bord le 5 septembre au soir : « qu'il remplisse vraiment la largeur
     du rouleau ». La cire touche les deux côtés, ce qui la fait lire comme
     pressée dans le parchemin et non posée dessus. */
  position:relative; z-index:3;
  width:var(--cachet-w); height:var(--cachet-w); flex-shrink:0;
  filter: drop-shadow(0 1px 1.5px rgba(60,20,12,.55))
          drop-shadow(0 4px 7px rgba(60,20,12,.34));
}
#panelHandle .ph-seal svg{ width:100%; height:100%; display:block; }
#panelHandle:active .ph-seal{ transform: scale(.96); }

/* ---------- Téléphone : le rouleau à 22 px, le cachet coupé (9 septembre 2026)
   Thierry : « diminuer l'épaisseur du rouleau encore de moitié ; le cachet, le
   laisser de cette même taille et voir seulement un morceau, que la partie à
   gauche soit un peu coupée ».

   Le cachet est donc calé sur le bord DROIT de la bande et déborde de 22 px
   vers la gauche. Volet fermé, ces 22 px sortent de l'écran et sont coupés par
   le bord : on ne voit que la moitié droite de la cire, comme un sceau glissé
   sous le rouleau. Volet ouvert, ils passent sur la feuille -- la cire est
   alors à cheval sur la lisière, ce qui est le geste juste : un sceau ferme le
   bord d'un parchemin, il ne flotte pas à côté.

   Positionné en absolu plutôt qu'en flex : avec justify-content:center, un
   enfant plus large que son parent déborde des DEUX côtés, moitié-moitié.
   Il fallait tout le débordement d'un seul côté.

   Le :active reprend le translateY, sans quoi le scale de l'appui effacerait
   le centrage vertical et le cachet sauterait au clic. */
/* 21 septembre 2026 (21-h), Thierry : « décaler le cachet de cire vers la droite pour
   qu'on le voie un peu mieux, plus centré ». Le centre de la cire s'était alors posé
   sur la lisière du rouleau : moitié sur le rouleau, moitié sur la carte.
   23 septembre 2026 (21-s), Thierry : « déplacer le cachet de cire au centre du
   rouleau ». Il revient donc au milieu de la bande, comme sur écran large. Centré
   par left:50% et non par un décalage calculé sur les deux largeurs : le cachet
   reste au milieu quoi qu'il advienne de --rouleau-w et de --cachet-w.
   La cire (44 px) est plus large que la bande (33 px) : elle déborde de 5,5 px de
   chaque côté, et volet fermé ces 5,5 px de gauche sortent de l'écran. C'est ce
   débordement qui la fait lire comme pressée dans le parchemin et non posée dessus. */
@media (max-width: 759px){
  #panelHandle .ph-seal{
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  }
  #panelHandle:active .ph-seal{ transform:translate(-50%, -50%) scale(.96); }
}

#panel .panel-head{
  padding: 20px 18px 0;
  background: var(--parchemin);
  border-bottom: 1px solid #e4dccb;
  position:relative;
}
#panel .panel-head h2{
  font-family:'Cormorant SC', serif;
  font-weight:700;
  font-size:21px;
  color: var(--granite-dark);
  margin-bottom:4px;
  /* 2 octobre 2026 : le titre dit maintenant le type affiché (« Montagne / Colline sacrée ») ; il laisse la
     place des icônes du bandeau et passe à la ligne plutôt que de glisser dessous. */
  padding-right:118px; line-height:1.15; overflow-wrap:anywhere;
}
#panel .panel-head p{
  font-size:12px; color:#78735f; margin-bottom:14px;
}
/* Les deux icônes du bandeau : à gauche de la croix, à la même hauteur, et
   assez grandes pour le pouce (36 px de cible tactile). */
.ph-actions{
  position:absolute; top:13px; right:42px; z-index:2;
  display:flex; gap:0;
}
/* À six icônes, un téléphone étroit ne peut plus les tenir sur la même ligne que
   le titre. Mesuré : « Hauts Lieux » fait 133 px à lui seul en Cormorant SC 21,
   et sur un volet de 281 px il ne resterait que seize pixels par icône. Sous
   440 px de fenêtre, elles descendent donc sur leur propre ligne, alignées à
   droite, entre le compte de sites et les onglets -- exactement là où elles sont
   déjà écrites dans le HTML, il suffit de leur rendre le flux. La croix de
   fermeture, elle, reste en haut à droite : c'est sa place partout ailleurs. */
@media (max-width: 440px){
  .ph-actions{
    position:static; justify-content:flex-end;
    margin:-2px 0 6px;
  }
  /* Les icônes sont sur leur propre ligne : le titre du volet a toute la largeur. */
  #panel .panel-head h2{ padding-right:0; }
  /* Une ligne à elles seules, donc de la place : on en profite pour passer de
     33 à 36 px, la cible tactile recommandée -- c'est précisément sur téléphone
     qu'elle compte. */
  .ph-actions .pa-btn{ width:36px; height:36px; }
  .ph-actions .pa-ico{ width:20px; height:20px; }
}
.pa-btn{
  width:33px; height:33px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; cursor:pointer; border-radius:50%;
  color:#8a8570; padding:0;
}
.pa-btn:hover{ background:rgba(243,236,221,0.9); color:#5a5646; }
/* Une couleur par fonction, dans le registre de la charte : vert-de-gris pour
   l'aide, laiton pour le partage, bleu d'eau pour la géolocalisation, sceau pour
   le signalement. Quatre icônes grises seraient illisibles d'un coup d'œil. */
#aidePanelBtn{ color:var(--moss-light); }
#sharePanelBtn{ color:var(--gold); }
/* Le prune de l'axe marial : la sixième couleur de la charte encore libre. */
#btnSon{ color:#8f4f6b; }
#btnSon .son-barre{ opacity:0; }
#btnSon.coupe{ color:#a8a293; }
#btnSon.coupe .son-onde{ opacity:0; }
#btnSon.coupe .son-barre{ opacity:1; }
#btnSon .son-onde, #btnSon .son-barre{ transition:opacity .18s ease; }
#btnMaPosition{ color:var(--moss); }
/* Reprend l'état du rond vert de la carte : en recherche il pulse, une fois
   situé il reste allumé. Sans cela, l'utilisateur clique et rien ne bouge dans
   le volet, alors que la géolocalisation travaille derrière. */
#btnMaPosition.actif{ background:rgba(138,155,78,0.18); }
#btnMaPosition.cherche{ animation: pulsePosition 1.2s ease-in-out infinite; }
@keyframes pulsePosition{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
#btnAutourDeMoi.pa-btn{ color:#4f8fa8; }
#infobulle{
  position:fixed; z-index:3000; max-width:min(78vw, 300px); box-sizing:border-box;
  background:var(--granite-dark, #232a27); color:#fdfbf5;
  font-size:13px; line-height:1.35; font-weight:600; padding:8px 12px; border-radius:9px;
  box-shadow:0 6px 18px rgba(0,0,0,.28); pointer-events:none;
  opacity:0; transform:translateY(-4px); transition:opacity .18s, transform .18s;
}
#infobulle.vue{ opacity:1; transform:none; }
#infobulle::before{ content:''; position:absolute; top:-6px; left:calc(var(--pointe, 50%) - 6px);
  border:6px solid transparent; border-top:0; border-bottom-color:var(--granite-dark, #232a27); }
@media (prefers-reduced-motion: reduce){ #infobulle{ transition:none; } }
#btnContribuer.pa-btn{ color:var(--bracken); }
.pa-ico{ width:19px; height:19px; display:block; }
#closePanel{
  position:absolute; top:16px; right:14px; z-index:2;
  background:none; border:none; cursor:pointer;
  color:#78735f; font-size:20px; line-height:1;
}
#tabs{
  /* Chaque onglet prenait exactement un quart de la barre (flex:1), largeur
     insuffisante pour le plus long mot — « Géobiologie » débordait déjà en
     français avant l'ajout de l'allemand et du néerlandais (mesuré le
     3 sept. 2026 : barre de 284 px, onglet coupé). Les onglets se dimensionnent
     désormais sur leur texte et se partagent le reste ; la barre défile
     horizontalement si une langue les rend vraiment trop larges. */
  display:flex; gap:2px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
#tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex:1 0 auto; text-align:center; white-space:nowrap;
  padding: 10px 3px;
  font-size:12.5px; font-weight:600;
  color:#8a8570; background:none; border:none; cursor:pointer;
  border-bottom: 2px solid transparent;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
/* Chaque clé a désormais sa propre couleur (registre « Cadastre », 29 août) :
   sceau pour Histoire, vert-de-gris pour Mythologie, laiton pour Géobiologie.
   Le point reste visible même quand l'onglet n'est pas sélectionné, pour
   qu'on puisse reconnaître une clé au premier coup d'œil dans toute l'appli. */
.tab-btn .key-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; opacity:0.55; }
.tab-btn.active .key-dot{ opacity:1; }
.tab-btn[data-tab="histoire"] .key-dot{ background: var(--bracken); }
.tab-btn[data-tab="mythologie"] .key-dot{ background: var(--moss); }
.tab-btn[data-tab="energie"] .key-dot{ background: var(--gold); }
.tab-btn.active{ color: var(--moss); border-bottom-color: var(--moss); }
.tab-btn[data-tab="histoire"].active{ color: var(--bracken); border-bottom-color: var(--bracken); }
.tab-btn[data-tab="mythologie"].active{ color: var(--moss); border-bottom-color: var(--moss); }
.tab-btn[data-tab="energie"].active{ color: var(--gold); border-bottom-color: var(--gold); }

.tab-panel{ display:none; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.tab-panel.active{ display:flex; }

/* --- onglet Sites --- */
/* Réagencé le 30 août (demande d'Iload 24, en suite du signalement "j'ai tapé le
   nom d'une chapelle et il ne s'est rien passé" -- voir renderList()) : #sitesTop
   ne porte plus que la recherche, #list la suit immédiatement, et les boutons
   secondaires (Autour de moi, Reliques, pastilles de type, Signaler) sont
   descendus dans #sitesBottom, sous la liste -- "laisser en haut seulement le
   bouton de recherche", plutôt que les cacher seulement pendant qu'on tape. */
#sitesTop{ flex-shrink:0; }
#searchBox{ margin:14px 18px 8px; position:relative; }
#searchBox input{
  width:100%; padding:9px 12px 9px 34px;
  border:1px solid #dcd3bf; border-radius:9px;
  background:#fff; font-family:'Spectral'; font-size:13.5px; outline:none;
}
#searchBox input:focus{ border-color: var(--moss-light); }
#searchBox svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; opacity:0.45;}

#typeFilters{ display:flex; gap:6px; flex-wrap:wrap; margin: 8px 18px 4px; }
/* Signalé par Thierry le 29 août (capture d'écran, version ordinateur) : les pastilles
   de type ici doublonnent la légende de carte (#legend), qui existe déjà pour faire ce
   travail sur écran large (voir son commentaire ligne ~1406) — et leurs cinq rangées
   (17 types) heurtaient le pied du volet (« Comment ça marche », etc.) faute de place.
   Sur téléphone elles restent la seule porte de filtre (la légende y est masquée), donc
   on ne les retire qu'à partir du même seuil que la légende. */
@media (min-width: 760px){ #typeFilters{ display:none; } }
.chip{
  font-size:11px; font-weight:500; padding:5px 10px; border-radius:20px;
  border:1px solid #dcd3bf; background:#fff; color:#5a5646; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:4px;
}
.chip.active{ background: var(--stone); border-color:#c2b8a3; color: var(--granite); font-weight:600; }
.chip .chip-check{ font-size:10px; font-weight:700; margin-left:1px; }

.fiche-attente{ color:#8a9a92; font-style:italic; }
.folk-hint{
  margin: 2px 18px 8px; padding:10px 12px; border-radius:10px;
  background: rgba(138,114,51,0.1); border:1px solid rgba(138,114,51,0.35);
  font-size:12px; line-height:1.4; color:#5a5646; cursor:pointer;
}
.folk-hint b{ color: var(--gold); }
.folk-hint u{ text-decoration:underline; text-decoration-color: var(--gold); }
.match-tag{
  font-size:9.5px; font-weight:600; color: var(--gold); background: rgba(138,114,51,0.14);
  padding:2px 6px; border-radius:8px; white-space:nowrap;
}
/* min-height : sans ça, sur un écran très bas (fenêtre ordinateur redimensionnée
   très courte, ou un futur mobile en paysage), la liste -- flex-basis:0 via
   flex:1 -- se voyait entièrement sacrifiée par le calcul de rétrécissement
   flexbox face à #sitesBottom juste en dessous (flex-basis:auto, donc prioritaire
   pour garder sa taille) : le premier résultat se retrouvait tronqué à quelques
   pixels, écrasé par "Autour de moi" juste après -- constaté à l'audit du 30 août
   qui a suivi le déplacement de ces boutons sous la liste (voir #sitesBottom).
   Ce plancher garantit toujours au moins un résultat pleinement lisible ; le
   reste du manque d'espace est absorbé par #sitesBottom, prévu pour ça. */
#list{ flex:1; overflow-y:auto; padding: 6px 10px 20px; min-height:130px; }
/* Signalé par Thierry le 29 août (très petit téléphone, type iPhone SE) : sur un
   écran vraiment bas, ce bloc (Autour de moi, Reliques, pastilles de type,
   Signaler un haut lieu -- descendus ici depuis #sitesTop le 30 août, voir plus
   haut) peut à lui seul dépasser la hauteur disponible dans .tab-panel — et
   comme celui-ci coupe net (overflow:hidden), la fin des pastilles et le bouton
   Signaler deviendraient inatteignables, pas juste visuellement décalés.
   min-height:0 l'autorise à se comprimer sous sa taille naturelle, et un
   défilement propre à lui prend le relais quand ça ne suffit plus. Sur un écran
   normal, rien ne change : le bloc tient toujours en entier, sans barre de
   défilement. Le liseré du haut le sépare visuellement de la liste qui défile
   juste au-dessus. */
#sitesBottom{ min-height:0; overflow-y:auto; flex-shrink:1; border-top:1px solid #e4dccb; padding-top:2px; }
/* Deux fois plus de lieux a l'ecran (20 septembre 2026, demande de Thierry :
   « reduis la taille du listing pour afficher au moins le double de sites »).
   La carte passe d'environ 78 px de haut a 37 : vignette de 52 a 26 px, marges
   et interligne resserres, nom et commune sur une seule ligne chacun (coupes aux
   points de suspension plutot que de repasser a la ligne -- c'est le retour a la
   ligne qui faisait grandir les cartes de facon imprevisible). */
/* 23 septembre 2026 (21-t), Thierry : « augmente la taille des sites sur le volet
   roulant, tu augmentes de 1,5 ». Le resserrement du 20 septembre avait gagné le
   double de lieux à l'écran, mais au prix d'une carte de 37 px où le nom se lisait
   mal en marchant. Tout ce qui fait la taille d'une carte — vignette, glyphe,
   badge, textes, marges et arrondis — est désormais exprimé en multiples de
   --liste-site, qui vaut 1,2 (1,5 a l'essai du 23 septembre, jugee trop grande). Les nombres de base restent ceux du 20 septembre :
   remettre --liste-site à 1 rend exactement la liste dense, et un autre facteur
   se règle ici, en un seul endroit, sans toucher à vingt valeurs. */
:root{ --liste-site: 1.2; }
.menhir-card{
  display:flex; gap:calc(7px * var(--liste-site)); align-items:center;
  padding: calc(3px * var(--liste-site)) calc(8px * var(--liste-site));
  border-radius:calc(8px * var(--liste-site)); cursor:pointer;
  margin-bottom:calc(2px * var(--liste-site));
  border:1px solid transparent; transition: background 0.15s;
}
.menhir-card:hover, .menhir-card.selected{ background: var(--stone-light); border-color:#e4dccb; }
.menhir-card .thumb{
  width:calc(26px * var(--liste-site)); height:calc(26px * var(--liste-site));
  border-radius:calc(6px * var(--liste-site)); flex-shrink:0; position:relative;
  background: var(--stone) center top/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.menhir-card .thumb svg{ width:calc(16px * var(--liste-site)); height:calc(21px * var(--liste-site)); opacity:0.92; }
/* La goutte d'eau (20 septembre 2026) : badge au coin haut droit de la vignette, photo ou dessin. */
.menhir-card .thumb .eau-badge{ position:absolute; top:calc(-3px * var(--liste-site)); right:calc(-3px * var(--liste-site)); width:calc(12px * var(--liste-site)); height:calc(12px * var(--liste-site)); border-radius:50%; background:#faf7f0; border:1px solid #2c2b26; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.menhir-card .thumb .eau-badge svg{ width:calc(6px * var(--liste-site)); height:calc(8px * var(--liste-site)); opacity:1; }
.menhir-card .thumb.avec-photo .eau-badge svg{ display:block; }
/* Le glyphe du type est dessiné dans toutes les vignettes et n'est effacé que
   lorsque la photo est arrivée pour de bon (voir chargerVignette). Une photo qui
   n'arrive pas laisse donc le dessin, et non plus un carré gris. */
.menhir-card .thumb.avec-photo > svg{ display:none; }
.menhir-card .info{ min-width:0; flex:1; }
.menhir-card .name{ font-family:'Cormorant SC', serif; font-weight:600; font-size:calc(12.5px * var(--liste-site)); line-height:1.15; color: var(--granite-dark); margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* La ligne du dessous passe au retour à la ligne (23 septembre 2026, 21-t). En un
   seul trait, à 1,5, elle ne tenait plus : les deux pastilles font 110 px chacune
   et n'ont pas de mot à raccourcir, si bien que la commune — la seule à pouvoir
   céder — tombait à dix pixels, c'est-à-dire à rien. Ce n'est pas le retour à la
   ligne que Thierry avait écarté le 20 septembre, c'était celui du NOM, qui faisait
   grandir les cartes de façon imprévisible ; le nom reste sur une ligne, coupé aux
   points de suspension. Ici le repli est borné à deux lignes : type et commune sur
   la première, pastille de clé sur la seconde, et seulement pour les sites qui en
   portent une. Rien ne disparaît. */
.menhir-card .meta{ font-size:calc(9.6px * var(--liste-site)); line-height:1.25; color:#8a8570; display:flex; gap:calc(5px * var(--liste-site)); align-items:center; flex-wrap:wrap; row-gap:2px; overflow:hidden; white-space:nowrap; }
/* Les deux pastilles ne suivent pas le facteur. Essayé d'abord : tout grandissait
   ensemble, et la ligne du dessous n'y tenait plus — la commune, qui peut se
   raccourcir, disparaissait entièrement au profit de deux étiquettes qui, elles,
   ne se raccourcissent pas. Ce qu'on lit sur la route, c'est le nom et la commune ;
   les pastilles disent un type et un verrou qu'on reconnaît à leur forme. Elles
   gardent donc leur taille, et la place gagnée va à la commune. */
.menhir-card .type-tag{ font-size:8px; line-height:1.5; padding:0 4px; letter-spacing:0.3px; flex-shrink:0; }
/* La commune tient toujours compagnie à la pastille de type, sur la première ligne :
   base zéro puis elle prend toute la place restante. Sans cela, une commune longue
   (Duilhac-sous-Peyrepertuse) passait à la ligne pour elle seule et la carte faisait
   trois lignes au lieu de deux — la hauteur redevenait imprévisible, ce que le
   resserrement du 20 septembre avait justement corrigé. Deux lignes au plus,
   toujours : type et commune, puis la pastille de clé s'il y en a une. */
.menhir-card .meta > span:not(.type-tag):not(.lock-tag){ flex:1 1 12ch; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.menhir-card .lock-tag{ flex-shrink:0; }
.type-tag{
  font-size:9.5px; text-transform:uppercase; letter-spacing:0.4px; font-weight:700;
  padding:1px 6px; border-radius:6px; background: var(--mist); color:var(--granite-dark);
}
.menhir-card .dist{ color: var(--moss); font-family:'JetBrains Mono', monospace; font-weight:500; }
.lock-tag{
  font-size:9.5px; font-weight:600; color:#fff; background: var(--granite-dark);
  padding:2px 6px; border-radius:8px; white-space:nowrap; display:inline-flex; align-items:center; gap:3px;
}
.marker-wrap{ position:relative; }
.marker-locked .menhir-marker{ filter: grayscale(85%) opacity(0.62); }
.marker-lock-badge{
  position:absolute; top:-3px; right:-3px; line-height:1;
  background: #fff; border-radius:50%; width:14px; height:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(31,43,40,.25);
  border: 1px solid rgba(138,114,51,.35); color: var(--gold);
}
.marker-lock-badge svg{ width:9px; height:9px; display:block; }
.locked-site-wrap{ padding:6px 0 2px; }
.pw-lever .txt em.lever-count{ color: var(--gold); }

/* --- onglet Lexique --- */
.lex-item{ margin-bottom:16px; }
.lex-item dt{ font-family:'Cormorant SC', serif; font-weight:700; font-size:15px; color: var(--granite-dark); margin-bottom:3px; }
.lex-item dd{ font-size:13px; line-height:1.55; color:#5a5646; }

/* --- onglet Histoire --- */
#histoireContent, #energieContent{ flex:1; overflow-y:auto; padding: 14px 18px 24px; }
#histoireContent h3, #energieContent h3{ font-family:'Cormorant SC', serif; font-size:15.5px; font-weight:700; color:var(--granite-dark); margin: 16px 0 6px; }
#histoireContent h3:first-child, #energieContent h3:first-child{ margin-top:2px; }
#histoireContent p, #energieContent p{ font-size:13px; line-height:1.6; color:#5a5646; margin-bottom:6px; }
.disclaimer{
  background:#f1ece0; border:1px solid #e0d5bd; border-left:3px solid #b8863b;
  border-radius:8px; padding:12px 14px; margin-bottom:14px;
}
.disclaimer p{ font-size:12.5px !important; color:#5a5140 !important; margin-bottom:0 !important; }
.disclaimer .d-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; color:#96702e; margin-bottom:5px; }
.toggle-wrap{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid #dcd3bf; border-radius:10px;
  padding:12px 14px; margin: 6px 0 16px;
}
.toggle-wrap .lt-text{ font-size:13px; font-weight:600; color:var(--granite-dark); }
.toggle-wrap .lt-sub{ font-size:11px; color:#8a8570; margin-top:2px; }
.switch{ position:relative; width:44px; height:24px; flex-shrink:0; margin-left:12px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:#dcd3bf; border-radius:24px; cursor:pointer; transition:0.2s; }
.switch .slider::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.2s; }
.switch input:checked + .slider{ background: var(--bracken); }
.switch input:checked + .slider::before{ transform: translateX(20px); }
.ppn-block{ margin:0 0 16px; padding:14px; background:var(--paper); border:1px solid #e3ddc9; border-radius:10px; }
.ppn-block h4{ font-family:'Cormorant SC',serif; font-size:14.5px; font-weight:600; color:var(--granite-dark); margin:0 0 8px; }
.ppn-block p{ font-size:13px; line-height:1.6; color:#3a3830; margin:0 0 10px; }
.ppn-sources{ font-size:11.5px; color:#8a8570; margin-top:8px; line-height:1.5; }
.ppn-sitelist .el-item{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.esprit-grid{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.esprit-card{ background:#fff; border:1px solid #e3ddc9; border-radius:10px; overflow:hidden; }
.esprit-photo{
  width:100%; height:150px; background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:#e4dccb;
  /* contain plutôt que cover, comme la grande photo de fiche de site : on préfère un léger
     bandeau neutre au-dessus/dessous plutôt que de rogner une partie de l'illustration. */
}
.esprit-photo-credit{
  font-size:9.5px; color:#a19c86; text-align:right; padding: 3px 12px 0; font-style:italic;
  /* certaines de ces illustrations sont génériques (illustration d'ambiance tirée d'un livre
     illustré ancien) plutôt qu'une représentation attestée de la créature précise — la légende
     le précise alors explicitement, dans le même esprit de transparence que la fiche de site. */
}
.esprit-body{ padding:10px 12px 12px; }
.esprit-name{ font-family:'Cormorant SC',serif; font-weight:700; font-size:14px; color:var(--granite-dark); }
.esprit-meta{ font-size:11px; color:#8a8570; margin:2px 0 7px; }
.esprit-meta .esprit-famille{ font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.3px; font-size:10px; }
.esprit-body p{ font-size:12.8px; line-height:1.55; color:#3a3830; margin:0 0 7px; }
.esprit-histoire{ font-style:italic; color:#5a5646; }
.esprit-body .ppn-sources{ margin-top:2px; }
.geo-diagram{ margin:16px 0; padding:16px 16px 14px; background:linear-gradient(180deg, var(--paper), #f4efe0); border:1px solid #e3ddc9; border-radius:14px; box-shadow:0 3px 12px rgba(31,43,40,0.07); }
.geo-diagram-title{ font-family:'Cormorant SC',serif; font-size:13.5px; font-weight:700; color:var(--granite-dark); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #e6dfc9; }
.geo-diagram svg{ width:100%; height:auto; display:block; }
.geo-diagram-caption{ margin-top:10px; font-size:11.5px; color:#8a8570; line-height:1.55; }
.geo-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; padding-top:9px; border-top:1px dashed #e3ddc9; font-size:11px; color:#5a5140; }
.geo-legend span{ display:inline-flex; align-items:center; gap:5px; }
.geo-legend i{ width:14px; height:2px; display:inline-block; border-radius:2px; }
.geo-diagram-photo{ width:100%; border-radius:10px; display:block; box-shadow:0 3px 10px rgba(31,43,40,0.14); }
.geo-diagram-photo-credit{ font-size:10px; color:#a39d87; margin-top:6px; text-align:right; }
.energie-list{ margin-top:6px; }
.energie-list .el-item{ padding:9px 0; border-top:1px solid #e4dccb; font-size:12.5px; color:#5a5646; }
.energie-list .el-item b{ color:var(--granite-dark); font-family:'Cormorant SC',serif; }

/* --- onglet Mythologie --- */
#mythologieContent{ flex:1; overflow-y:auto; padding: 14px 18px 24px; }
.myth-card{
  background:#fff; border:1px solid #e4dccb; border-radius:12px;
  padding:14px 15px; margin-bottom:12px;
}
.myth-card .myth-site{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; color:var(--moss); margin-bottom:4px; cursor:pointer; }
.myth-card h4{ font-family:'Cormorant SC',serif; font-weight:700; font-size:15px; color:var(--granite-dark); margin-bottom:6px; }
.myth-card p{ font-size:12.5px; line-height:1.55; color:#5a5646; margin-bottom:8px; }
.myth-card a.myth-link{ font-size:11.5px; font-weight:600; color:var(--bracken); text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
.myth-card a.myth-link:hover{ text-decoration:underline; }
.timeline{ margin-top:10px; border-left:2px solid var(--mist); padding-left:14px; }
.timeline .tl-item{ margin-bottom:14px; position:relative; }
.timeline .tl-item::before{ content:''; position:absolute; left:-18.5px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--moss); }
.timeline .tl-date{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--moss); font-weight:600; }
.timeline .tl-text{ font-size:12.5px; color:#5a5646; line-height:1.5; }

/* ---------- Locate button ---------- */

/* ---------- Colonne des commandes de la carte (20 septembre 2026) ---------- */
#mapActions{
  position:absolute; z-index:500; right:18px; top: calc(70px + env(safe-area-inset-top));
  display:flex; flex-direction:column; gap:8px;
}
.ma-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(44,43,38,0.18); cursor:pointer; padding:0;
  background:rgba(250,247,240,0.94); box-shadow:0 3px 10px rgba(0,0,0,0.22);
  display:flex; align-items:center; justify-content:center; color:#8a8570;
}
.ma-btn:hover{ background:#faf7f0; }
.ma-btn .pa-ico{ width:20px; height:20px; display:block; }
#btnFrance.ma-btn{ color:#2c5a8a; }
/* 20 septembre 2026 : le contour de la France (metropole et Corse) remplace
   l'hexagone approximatif, avec le point de recadrage au centre du pays. Le
   trace est projete depuis de vraies coordonnees (4-scripts/icones/france.py),
   pas dessine a main levee ; il est plus fin que les autres icones (1,1 au lieu
   de 1,8) parce qu'il porte beaucoup plus de detail dans le meme cadre. */
#btnFrance .ico-france{ width:22px; height:22px; }
#aidePanelBtn.ma-btn{ color:var(--moss); }
#sharePanelBtn.ma-btn{ color:var(--gold); }
#btnSon.ma-btn{ color:#8f4f6b; }
#btnSon.ma-btn.coupe{ color:#a8a293; }
body.dossier-ouvert #mapActions{ display:none; }

/* ---------- Alertes vocales, à côté de la géolocalisation (20 septembre 2026) ---------- */
#voiceAlertBtn{
  position:absolute; z-index:500; bottom: calc(31px + env(safe-area-inset-bottom)); right: 80px;
  width:46px; height:46px; border-radius:50%; pointer-events:auto;
  background:rgba(250,247,240,0.94); border:1px solid rgba(44,43,38,0.18); color:#8a8570;
  box-shadow:0 3px 10px rgba(0,0,0,0.22); backdrop-filter:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#voiceAlertBtn:active{ background:#faf7f0; }
#voiceAlertBtn.active{ background: var(--gold); border-color: var(--gold); color:#2c2b26; }
#voiceAlertBtn .va-dot{ top:5px; right:5px; box-shadow:0 0 0 1.5px rgba(250,247,240,0.9); }
/* 20 septembre 2026, demande de Thierry : le haut-parleur devient « quelqu'un qui met sa main
   sur le cote de sa bouche comme pour prevenir ». La tete et la main sont une silhouette PLEINE
   -- un contour de profil se brouille a 18 px, une silhouette tient -- et les ondes restent au
   trait, comme sur le bouton du son juste a cote. L'icone passe de 18 a 22 px dans le rond de
   46 px : elle porte plus de detail que le haut-parleur qu'elle remplace. */
#voiceAlertBtn svg{ width:22px; height:22px; }
body.dossier-ouvert #voiceAlertBtn{ display:none; }
#locateBtn{
  position:absolute; z-index:500; bottom: calc(28px + env(safe-area-inset-bottom)); right: 16px;
  width:52px; height:52px; border-radius:50%;
  background: var(--moss); border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#locateBtn svg{ width:24px; height:24px; }
#locateBtn.active{ background: var(--bracken); }
#locateBtn .pulse{
  position:absolute; inset:-2px; border-radius:50%; border: 2px solid var(--moss);
  animation: pulseRing 1.8s ease-out infinite; opacity:0;
}
#locateBtn.searching .pulse{ animation: pulseRing 1.4s ease-out infinite; opacity:1;}
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:0.6;} 100%{ transform:scale(1.9); opacity:0;} }

#geoStatus{
  position:absolute; z-index:500; bottom: 90px; right:16px; max-width: 220px;
  background: rgba(20,29,27,0.9); color: var(--stone-light);
  font-size:11.5px; padding:8px 12px; border-radius:10px; display:none; line-height:1.4;
}
#geoStatus.show{ display:block; }

/* ---------- Legend ---------- */
/* Bascule de langue FR/EN, juste au-dessus du bandeau de version (phase 1 du
   chantier bilinguisme, 2 sept. 2026 -- voir claude/plan-bilinguisme-fr-en-2026-09-01.md).
   Deux boutons plutôt qu'un simple inverseur : plus explicite, et prêt pour
   une troisième langue le jour où il y en aurait une. */
/* ---------- Pied du volet, refait le 5 septembre 2026 ----------
   Avant : « Comment ça marche », le partage, les langues, la mise à jour et les
   mentions légales, cinq blocs empilés, environ 210 px de hauteur pris à la
   liste dans chaque onglet. Après : deux icônes dans le bandeau et une seule
   ligne ici. La liste de géobiologie y gagne de quoi montrer quatre entrées de
   plus sans faire défiler. */
#panelPied{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  padding:7px 14px; border-top:1px solid rgba(200,186,150,0.4);
  background: rgba(250,247,240,0.35);
}
#panelPied .pp-droite{ display:flex; align-items:center; gap:4px; margin-left:auto; }
#panelPied .pp-droite button{
  border:none; background:none; font-family:inherit; font-size:11px;
  color:#8a8570; cursor:pointer; padding:4px 6px; border-radius:6px; line-height:1.3;
}
#panelPied .pp-droite button:hover{ background:rgba(243,236,221,0.8); color:#5a5646; }
#panelPied .pp-droite button[disabled]{ opacity:.55; cursor:default; }

/* ---------- Mode touristique / mode expert (25 septembre 2026) ----------
   Demande de Thierry : « deux modes, un mode touristique et un mode expert ;
   dans le mode touristique, les sites les plus touristiques connus ». Choix au
   premier lancement, bascule ensuite en bas du volet, à côté des langues. */
#modeScreen .ai-dedans{ max-width:560px; width:100%; }
#modeScreen{ display:none; }
#modeScreen.show{ display:flex; align-items:center; }
#modeScreen .md-choix{ display:grid; gap:12px; margin:22px 0 14px; }
#modeScreen .md-carte{
  display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background: rgba(245,246,239,0.05); color: var(--stone-light);
  border:1px solid rgba(199,205,184,0.22); border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0; padding:14px 16px;
}
#modeScreen .md-carte:hover, #modeScreen .md-carte:focus-visible{ background: rgba(245,246,239,0.10); outline:none; border-color: var(--gold); }
#modeScreen .md-carte b{ display:block; font-family:'Cormorant SC', serif; font-size:18px; color: var(--gold); margin-bottom:4px; }
#modeScreen .md-carte span{ display:block; font-size:13px; line-height:1.55; color:#ddd7c6; }
#modeScreen .md-carte .md-nb{ display:inline; font-weight:700; color: var(--stone-light); }
#modeScreen .ai-note{ text-align:center; }
#modeSwitch{ flex-shrink:0; display:flex; gap:5px; align-items:center; width:100%; }
#modeSwitch .ms-lib{ font-size:11px; color:#8a8570; margin-right:2px; }
#modeSwitch button{
  border:1px solid rgba(200,186,150,0.6); background:transparent;
  border-radius:999px; padding:3px 12px; font-family:inherit;
  font-size:11.5px; color:#8a8570; cursor:pointer;
}
#modeSwitch button.active{ background: var(--moss, #4f6b3f); border-color: var(--moss, #4f6b3f); color:#f5f1e4; font-weight:600; }
#modeNoteRech{ cursor:pointer; }
#langSwitch{
  flex-shrink:0; display:flex; gap:5px; justify-content:flex-start;
  padding:0; border-top:none; background:none;
}
#langSwitch button{
  border:1px solid rgba(200,186,150,0.6); background:transparent;
  border-radius:999px; padding:3px 12px; font-family:'DM Mono', monospace;
  font-size:11px; letter-spacing:0.5px; color:#a19c86; cursor:pointer;
}
#langSwitch button.active{
  background: var(--gold); border-color: var(--gold); color:#2b2410; font-weight:600;
}

/* Bouton de mise à jour (4 septembre 2026). Même discrétion que les mentions
   légales juste au-dessus : ce n'est pas une action du quotidien, mais elle
   doit être trouvable sans chercher. */
/* #majBtn : remplacé le 5 septembre 2026, voir #panelPied et .pa-btn */

#majBtn:hover{ background:rgba(243,236,221,0.65); color:#5a5646; }
#majBtn[disabled]{ opacity:.55; cursor:default; }
/* L'état ne prend de la place que lorsqu'il a quelque chose à dire : vide, il
   ne laisse pas un blanc sous le bouton. */
#majEtat:empty{ display:none; }
#majEtat{
  flex-shrink:0; padding:0 18px 8px; background:rgba(250,247,240,0.35);
  font-size:11px; line-height:1.45; color:#8a8570;
}
#majEtat.trouvee{ color: var(--bracken); }

/* Lien vers l'index des lieux (7 septembre 2026). Discret, mais c'est un vrai
   <a href> dans le HTML servi : c'est par lui que Googlebot passe de la carte
   aux 139 pages de département et aux 1 209 fiches. Sans lui, ces adresses
   n'existaient que dans le sitemap — la Search Console les rangeait toutes
   sous « Détectée, actuellement non indexée ». */
#lienIndex{
  flex-shrink:0; display:block; padding:7px 18px 0;
  font-size:11px; line-height:1.4; color:#a19c86; text-align:center;
  text-decoration:none;
}
#lienIndex:hover{ color:#5a5646; text-decoration:underline; }

/* Bandeau de version, en bas du volet de menu. Discret mais lisible : c'est le
   seul moyen de savoir de quelle copie du fichier on parle. */
#versionApp{
  flex-shrink:0; padding: 8px 18px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(200,186,150,0.4); background: rgba(250,247,240,0.35);
  font-family:'DM Mono', monospace; font-size:10px; letter-spacing:0.4px;
  color:#a19c86; text-align:center;
}


/* ---------- Page d'aide : « Comment ça marche » ----------
   Même convention que les autres écrans pleine page (#paywallScreen,
   #voiceScreen, #shareScreen) : fond sombre, fermeture en haut à droite.
   Elle s'ouvre d'elle-même au tout premier lancement, puis à la demande
   depuis le pied du menu — c'est la première chose que voit quelqu'un qui
   découvre l'application, et il ne doit pas avoir à la chercher. */
/* #aidePanelBtn : remplacé le 5 septembre 2026, voir #panelPied et .pa-btn */

#aidePanelBtn:hover{ background:rgba(243,236,221,0.65); }
#aidePanelBtn .sp-ico{ width:20px; height:20px; flex-shrink:0; color:var(--moss-light); }
#aidePanelBtn .sp-sub{ display:block; color:#8a8570; font-size:11.5px; }

.ecran-texte{
  position:fixed; inset:0; z-index:900; display:none;
  background: linear-gradient(180deg, var(--granite-dark) 0%, #201f1b 100%);
  color: var(--stone-light);
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.ecran-texte.show{ display:block; }
.ecran-texte .ai-close{
  float:right; background:none; border:none; color: var(--mist);
  font-size:22px; line-height:1; cursor:pointer; padding:0 0 4px 12px;
}
.ecran-texte .ai-dedans{ max-width:520px; margin:0 auto; }
.ecran-texte h2{
  font-family:'Cormorant SC', serif; font-weight:700; font-size:23px;
  text-align:center; margin:6px 0 6px; clear:both;
}
.ecran-texte .ai-lead{
  text-align:center; font-size:13px; color: var(--mist); line-height:1.55;
  margin-bottom:26px;
}
.ecran-texte h3{
  font-family:'Cormorant SC', serif; font-weight:600; font-size:16px;
  color: var(--gold); margin:26px 0 8px; padding-top:16px;
  border-top:1px solid rgba(199,205,184,0.16);
}
.ecran-texte h3:first-of-type{ border-top:none; padding-top:0; }
.ecran-texte p{ font-size:13.5px; line-height:1.62; color:#ddd7c6; margin-bottom:10px; }
.ecran-texte p.ai-note{ font-size:12px; color:#a8a08c; }
.ecran-texte b{ color: var(--stone-light); }
.ecran-texte ul{ margin:0 0 12px 0; padding:0; list-style:none; }
.ecran-texte li{
  font-size:13.5px; line-height:1.6; color:#ddd7c6;
  padding-left:16px; position:relative; margin-bottom:7px;
}
.ecran-texte li::before{
  content:"—"; position:absolute; left:0; color: var(--gold); opacity:0.7;
}
.ecran-texte .ai-nb{ font-weight:700; color: var(--stone-light); }
.ecran-texte .ai-legende{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:6px 12px; margin:10px 0 14px;
}
.ecran-texte .ai-legende span{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:#ddd7c6; }
.ecran-texte .ai-pastille{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.ecran-texte .ai-encadre{
  background: rgba(138,114,51,0.12); border:1px solid rgba(138,114,51,0.32);
  border-radius:10px; padding:12px 14px; margin:14px 0;
}
.ecran-texte .ai-encadre p{ margin-bottom:0; font-size:12.5px; }
.ecran-texte .ai-cle{
  background: rgba(245,246,239,0.05); border-left:2px solid var(--gold);
  border-radius:0 8px 8px 0; padding:10px 12px; margin-bottom:9px;
}
.ecran-texte .ai-cle b{ display:block; color: var(--gold); font-size:13.5px; margin-bottom:2px; }
.ecran-texte .ai-cle span{ font-size:12.5px; color:#c3bda9; line-height:1.5; }
.ecran-texte .ai-fin{
  text-align:center; margin:30px 0 6px; padding-top:18px;
  border-top:1px solid rgba(199,205,184,0.16);
}
.ecran-texte .ai-btn{
  width:100%; max-width:320px; border-radius:10px; padding:13px;
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  background: var(--gold); border:1px solid var(--gold); color:#2c2b26;
}

/* Écran des clés en mode « code seul » (4 septembre 2026). Ouvert par le
   bandeau du mode correction, pour essayer un code pendant que la vente est
   gelée. On masque tout ce qui parle d'achat plutôt que de le griser : un prix
   affiché sous un bouton inactif se lit comme une offre, et il n'y en a pas. */
#paywallScreen.code-seul .pw-levers,
#paywallScreen.code-seul .pw-plans,
#paywallScreen.code-seul #paywallCta{ display:none; }
#pwSousTitreCode{
  font-size:.62em; letter-spacing:.5px; color:#8a8570; font-weight:400;
  text-transform:none; display:block; margin-top:2px;
}
#paywallScreen:not(.code-seul) #pwSousTitreCode{ display:none; }

/* ---------- Mentions légales et confidentialité ----------
   L'écran partage l'habillage de la page d'aide (.ecran-texte). Le lien qui
   y mène est volontairement discret, au pied du menu, sous la version : on
   ne le cherche que quand on le cherche, mais il est toujours là. */
/* #legalPanelBtn : remplacé le 5 septembre 2026, voir #panelPied et .pa-btn */

#legalPanelBtn:hover{ background:rgba(243,236,221,0.65); color:#5a5646; }
.ecran-texte .lg-fiche{
  background: rgba(245,246,239,0.05); border-left:2px solid var(--gold);
  border-radius:0 8px 8px 0; padding:11px 13px; margin:10px 0 14px;
  font-size:12.5px; color:#c3bda9; line-height:1.65;
}
.ecran-texte .lg-fiche b{ color: var(--stone-light); }
.ecran-texte .lg-date{
  font-family:'JetBrains Mono', monospace; font-size:11px; color:#8a8570;
  text-align:center; margin-top:22px;
}

/* ---------- Saisie d'un code d'accès ----------
   Placée sous les trois cartes de clés : on la voit en cherchant, sans qu'elle
   crie plus fort que la présentation des clés elles-mêmes. */
#paywallScreen .pw-code{
  max-width:380px; margin:18px auto 0; padding-top:16px;
  border-top:1px solid rgba(199,205,184,0.16);
}
#paywallScreen .pw-code label{
  display:block; font-size:11.5px; letter-spacing:0.5px; text-transform:uppercase;
  color:#8a8570; margin-bottom:7px; font-weight:700;
}
#paywallScreen .pw-code .rangee{ display:flex; gap:8px; }
#paywallScreen .pw-code input{
  flex:1; min-width:0; border-radius:9px; padding:11px 12px; font-size:14px;
  font-family:'JetBrains Mono', monospace; letter-spacing:1px; text-transform:uppercase;
  border:1px solid rgba(199,205,184,0.28); background:rgba(245,246,239,0.06);
  color: var(--stone-light);
}
#paywallScreen .pw-code input::placeholder{ color:#6f6a5c; letter-spacing:1px; }
#paywallScreen .pw-code button{
  flex-shrink:0; border-radius:9px; padding:11px 16px; font-family:inherit;
  font-size:13.5px; font-weight:600; cursor:pointer;
  background: var(--gold); border:1px solid var(--gold); color:#2c2b26;
}
#paywallScreen .pw-code button:disabled{ opacity:0.55; cursor:progress; }
#paywallScreen .pw-code .msg{ font-size:12px; line-height:1.5; margin-top:9px; min-height:16px; }
#paywallScreen .pw-code .msg.bien{ color:#9db87f; }
#paywallScreen .pw-code .msg.mal{ color:#d08a72; }
#paywallScreen .pw-code .aide{ font-size:11.5px; color:#8a8570; margin-top:8px; line-height:1.5; }

/* ---------- Clés : ordinateur et téléphone (27 septembre 2026, 27-c, porté de Menhirs) ----------
   Sur ordinateur, pas de parrainage : les clés s'y ouvrent avec un code, ou arrivent du téléphone
   par un code de transfert (QR + huit caractères). body.sur-ordi est posé au démarrage. */
body.sur-ordi .pour-telephone{ display:none !important; }
body:not(.sur-ordi) .pour-ordi{ display:none !important; }
body.sur-ordi #sharePanelBtn{ display:none !important; }
#paywallScreen .pw-appairage p{ font-size:12px; color:#a9a38f; line-height:1.5; margin:0 0 10px; }
#paywallScreen .pw-code .pw-app-btn{ width:100%; background:none; color:var(--gold); }
#paywallScreen .pw-code .pw-app-btn:hover{ background:rgba(138,114,51,0.16); }
#paywallScreen .pw-app-zone{ text-align:center; margin-top:14px; }
#paywallScreen .pw-app-qr{
  position:relative; box-sizing:border-box; width:200px; min-height:200px; margin:0 auto; padding:14px;
  background:var(--paper); border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
#paywallScreen .pw-app-qr.attente::after{
  content:"…"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#8a8570; font-size:28px;
}
#paywallScreen .pw-app-qr .qr{ display:block; width:100%; height:auto; }
#paywallScreen .pw-app-jeton{
  font-family:'JetBrains Mono', monospace; font-size:24px; letter-spacing:3px; color:var(--gold);
  margin-top:12px; font-weight:600; font-variant-numeric:tabular-nums;
}
#paywallScreen .pw-app-etat{ font-size:12px; color:#a9a38f; margin-top:6px; min-height:16px; line-height:1.5; }
#paywallScreen .pw-app-etat.bien{ color:#9db87f; }
#paywallScreen .pw-app-etat.mal{ color:#d08a72; }

/* ---------- Partage : bouton en pied de menu et écran au QR code ----------
   Le QR est un SVG écrit en dur dans la page : rien à charger, donc il
   s'affiche hors ligne — c'est justement en balade, sans réseau, qu'on veut
   montrer l'application à quelqu'un. */
/* #sharePanelBtn : remplacé le 5 septembre 2026, voir #panelPied et .pa-btn */

#sharePanelBtn:hover{ background:rgba(243,236,221,0.65); }
#sharePanelBtn .sp-ico{ width:20px; height:20px; flex-shrink:0; color:var(--gold); }
#sharePanelBtn .sp-sub{ display:block; color:#8a8570; font-size:11.5px; }

#shareScreen{
  position:fixed; inset:0; z-index:900; display:none;
  background: linear-gradient(180deg, var(--granite-dark) 0%, #201f1b 100%);
  color: var(--stone-light);
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
#shareScreen.show{ display:flex; flex-direction:column; }
#shareScreen .sh-close{
  align-self:flex-end; background:none; border:none; color: var(--mist);
  font-size:22px; line-height:1; cursor:pointer; margin-bottom:4px;
}
#shareScreen .pw-glyph{ width:36px; height:48px; margin: 2px auto 16px; opacity:0.9; }
#shareScreen h2{ font-family:'Cormorant SC', serif; font-weight:700; font-size:23px; text-align:center; margin-bottom:8px; }
#shareScreen .sh-lead{
  text-align:center; font-size:13px; color: var(--mist); margin-bottom:22px;
  line-height:1.5; max-width:340px; margin-left:auto; margin-right:auto;
}
/* Le cadre clair n'est pas décoratif : un QR ne se lit que sur fond clair, et
   la norme exige une marge blanche d'au moins quatre modules tout autour. */
#shareScreen .sh-cadre{
  background: var(--paper); border-radius:14px; padding:18px;
  width:min(260px, 68vw); margin:0 auto; box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
#shareScreen .qr{ display:block; width:100%; height:auto; }
#shareScreen .sh-url{
  display:block; margin:18px auto 0; max-width:340px; text-align:center;
  font-family:'DM Mono', monospace; font-size:12px; letter-spacing:0.2px;
  color: var(--gold); word-break:break-all; text-decoration:none;
}
#shareScreen .sh-actions{
  margin-top:auto; padding-top:22px; max-width:380px; margin-left:auto; margin-right:auto;
  width:100%; display:flex; flex-direction:column; gap:10px;
}
#shareScreen .sh-btn{
  width:100%; border-radius:10px; padding:13px; font-family:inherit; font-size:14px;
  font-weight:600; cursor:pointer; border:1px solid var(--gold); background:none;
  color: var(--gold);
}
#shareScreen .sh-btn.primaire{ background: var(--gold); border-color: var(--gold); color:#2c2b26; }
#shareScreen .sh-btn:hover{ opacity:0.88; }
#shareScreen .sh-fine{ text-align:center; font-size:10.5px; color:#8a8570; margin-top:4px; min-height:14px; }


/* ---------- Parrainage : progression et récompense ---------- */
#shareScreen .sh-cadre{ position:relative; }
#shareScreen .sh-cadre.attente::after{
  content:"…"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#8a8570; font-size:28px;
}
#shareScreen .sh-jauge{
  display:flex; gap:7px; justify-content:center; margin:18px auto 0;
}
#shareScreen .sh-pastille{
  width:13px; height:13px; border-radius:50%; border:1.5px solid #6b6755; background:none;
}
#shareScreen .sh-pastille.pleine{ background: var(--gold); border-color: var(--gold); }
/* Grade (28 août) : un badge quand un palier est atteint, et l'échelle des
   quatre — Explorateur/Éclaireur/Guide/Ambassadeur — avec le palier en cours
   distingué des trois autres états (atteint / à venir / prochain). */
#shareScreen .sh-grade{ text-align:center; margin:16px auto 0; max-width:380px; }
#shareScreen .sh-grade-badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 16px; border-radius:20px;
  background: rgba(138,114,51,0.16); border:1px solid var(--gold); color: var(--gold);
  font-weight:700; font-size:14px; font-family:'Cormorant SC', serif; margin-bottom:8px;
}
#shareScreen .sh-echelle{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  font-size:10.5px; color:#6b6755;
}
#shareScreen .sh-echelle span.atteint{ color: var(--gold); font-weight:700; }
#shareScreen .sh-echelle span.prochain{ color: var(--stone-light); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:2px; }
#shareScreen .sh-compte{
  text-align:center; font-size:13px; color: var(--stone-light); margin-top:10px; line-height:1.5;
}
#shareScreen .sh-compte b{ color: var(--gold); }
#shareScreen .sh-hors-ligne{ display:block; font-size:11px; color:#8a8570; margin-top:4px; }
#shareScreen .sh-recompense{
  max-width:380px; margin:16px auto 0; padding:12px 14px; border-radius:10px;
  background: rgba(138,114,51,0.12); border:1px solid rgba(138,114,51,0.35);
  font-size:12.5px; color: var(--mist); line-height:1.55; text-align:center;
}
#shareScreen .sh-recompense b{ color: var(--gold); }
#shareScreen .sh-choix{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
#shareScreen .sh-choix button{
  width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--gold);
  background:none; color: var(--stone-light); font-family:inherit; font-size:13px;
  cursor:pointer; text-align:left; line-height:1.4;
}
#shareScreen .sh-choix button:hover{ background: rgba(138,114,51,0.16); }
#shareScreen .sh-choix button b{ color: var(--gold); display:block; font-size:13.5px; }
#shareScreen .sh-choix button span{ font-size:11.5px; color:#a8a08c; }

#legend{
  /* En bas à DROITE : en bas à gauche, le volet ouvert (z-index 600) la
     recouvrait — elle était invisible depuis toujours, trouvé à la sonde le
     28 août. Au-dessus du bouton de localisation. */
  position:absolute; z-index:500; bottom:96px; right:16px;
  background: rgba(20,29,27,0.85); color:var(--stone-light);
  border-radius:12px; padding:0 0 6px; font-size:10.5px; line-height:1.9;
  backdrop-filter: blur(6px); display:none;
  min-width:150px; user-select:none; -webkit-user-select:none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
/* Écrans larges seulement : sur téléphone le volet couvre la carte, et ses
   pastilles — même porte de filtre — y font le même travail. */
/* 21 septembre 2026 : sur tous les écrans. Le téléphone n'a plus de pastilles
   dans le volet ; c'est ici qu'on choisit le type. */
#legend.show{ display:block; }
#legend .lg-tete{
  display:flex; align-items:center; gap:7px; padding:6px 6px 5px 10px; margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,0.14);
  cursor:grab; touch-action:none;
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
}
#legend.deplace .lg-tete{ cursor:grabbing; }
#legend.deplace{ box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
#legend .lg-prise{ display:flex; opacity:.75; }
#legend .lg-prise svg{ width:7px; height:12px; display:block; }
#legend .lg-plier{
  margin-left:auto; background:none; border:0; color:var(--stone-light); cursor:pointer;
  font-size:12px; line-height:1; min-width:26px; min-height:24px; padding:0; border-radius:6px;
}
#legend .lg-plier:hover{ background:rgba(255,255,255,0.08); }
#legend .lg-corps{ padding:0 12px; }
#legend.pliee .lg-tete{ margin-bottom:3px; }
#legend .lg-row.on{ background:rgba(184,134,59,0.24); font-weight:700; }
#legend .lg-region{ margin:0 12px 4px; padding:3px 6px; border-radius:6px; font-size:9.5px; line-height:1.5; color:var(--gold); background:rgba(184,134,59,0.14); }
#legend .lg-region.lien{ cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
#legend.tous .lg-row.off{ opacity:1; }
#legend.tous .lg-row.on{ background:none; font-weight:inherit; }
#legend .lg-row:focus-visible, #legend .lg-plier:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
@media (max-width: 759px){
  #legend{ bottom: calc(92px + env(safe-area-inset-bottom)); right:12px; font-size:10.5px; }
  #legend .lg-row{ min-height:24px; }
}
/* 20 septembre 2026, demande de Thierry : « que le petit encadre des sites reste
   actif sur la carte lorsque la carte de France est en plein ecran ». La legende
   n'apparaissait que volet OUVERT et onglet Sites actif ; volet ferme -- c'est-a-dire
   quand la carte occupe tout l'ecran -- elle disparaissait, et avec elle le seul
   filtre par type accessible sur ordinateur (les pastilles du volet y sont masquees
   depuis le 29 aout). Elle reste donc affichee volet ferme, et ne se retire que
   lorsque le volet est ouvert sur un AUTRE onglet (Histoire, Mythes, Geobiologie),
   ou sous un dossier plein ecran. */
body.dossier-ouvert #legend{ display:none; }

/* ---------- La flèche qui montre le rouleau (21 septembre 2026) ----------
   Thierry : « une petite flèche clignotante qui indique l'endroit pour ouvrir
   le volet roulant ; elle ne s'affichera que la première fois, jusqu'à ce que
   le volet soit ouvert une fois ». Posée à droite du rouleau, à hauteur du
   cachet, pointe vers la gauche. Au-dessus du volet (600), sous la fiche (700)
   et sous les écrans pleins (900) : elle ne recouvre jamais rien qu'on lise.
   Le clignotement est une pulsation d'opacité doublée d'un petit mouvement vers
   le rouleau -- c'est le mouvement qui dit « par ici ». Sans animation pour qui
   l'a demandé au système. */
#flecheVolet{
  position:fixed; z-index:610; left:0; top:50%;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border-radius:50%;
  border:1px solid rgba(120,95,50,0.35);
  background:var(--parchemin); color:#9c3b2e;
  box-shadow:0 3px 10px rgba(0,0,0,0.28);
  cursor:pointer;
  animation: flecheVoletBat 1.1s ease-in-out infinite;
}
#flecheVolet svg{ width:22px; height:22px; display:block; }
#flecheVolet:focus-visible{ outline:2px solid #9c3b2e; outline-offset:3px; }
@keyframes flecheVoletBat{
  0%, 100% { opacity:1;   transform:translateX(0); }
  50%      { opacity:.35; transform:translateX(7px); }
}
@media (prefers-reduced-motion: reduce){ #flecheVolet{ animation:none; } }
body.dossier-ouvert #flecheVolet{ display:none; }
#legend .lg-row{ display:flex; align-items:center; gap:7px; }
.pg-icones{ display:inline-flex; align-items:flex-end; gap:2px; flex-shrink:0; }
.pg-icones svg{ display:block; }
#legend .lg-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
#legend .lg-row{ cursor:pointer; border-radius:6px; padding:0 4px; margin:0 -4px; }
#legend .lg-row:hover{ background:rgba(255,255,255,0.08); }
#legend .lg-row.off{ opacity:0.66; }
#legend .lg-reset{ cursor:pointer; margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.18); color:var(--gold); font-weight:600; }