/* Hauts Lieux — css/pages.css — Fiche, dossiers et grandes histoires en pleine page, magazine, cases par clé, outils d'auteur, alertes, frise, installation, navigation.
   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. */
/* ---------- Detail sheet ---------- */
/* Le bouton « vue d'ensemble » : une icône de carte dans une case standard
   de barre Leaflet, au-dessus des boutons de zoom. */
.btn-vue-ensemble svg{ width:16px; height:16px; vertical-align:middle; }

#sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:700;
  max-width:480px; margin:0 auto; /* évite que la fiche (et donc la photo) s'étire sur toute la largeur d'un écran d'ordinateur */
  background: var(--paper); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 34px rgba(0,0,0,0.35);
  transform: translateY(105%); transition: transform 0.32s cubic-bezier(.4,0,.2,1);
  max-height: 78vh; max-height: 78dvh; display:flex; flex-direction:column;
}
#sheet.open{ transform: translateY(0); }
#sheet.dragging{ transition:none; }
/* Sur grand écran, la fiche ne monte plus du bas : elle se range sur le côté
   droit, en panneau pleine hauteur, et laisse la carte — et le site que l'on
   vient de cliquer — visibles à sa gauche. Demande de Thierry du 27 août :
   « pas l'ouverture de la fiche en plein milieu du site ». Le seuil de 760 px
   est celui que le volet de menu emploie déjà. */
@media (min-width: 760px){
  #sheet{
    left:auto; right:0; top:0; bottom:0;
    margin:0; width:min(440px, 44vw); max-width:none; max-height:none;
    border-radius:0;
    transform: translateX(105%);
    box-shadow: -12px 0 34px rgba(0,0,0,0.32);
  }
  #sheet.open{ transform: translateX(0); }
  #sheet .handle{ display:none; }
}
#sheet .handle{ width:38px; height:4px; background:#dcd3bf; border-radius:3px; margin: 10px auto 0; flex-shrink:0; }
#sheet .sheet-inner{ overflow-y:auto; }
#sheet .photo{
  width:100%; height:300px; object-fit:contain; background: linear-gradient(180deg, #e4dccb 0%, #d8cfb8 100%);
  margin-top:8px; display:block;
  /* object-fit:contain plutôt que cover : les photos de la base n'ont pas toutes le même
     cadrage (certaines sont des portraits d'édifices où le sommet compte, d'autres des vues
     larges avec beaucoup de ciel et le sujet en bas) — un seul recadrage fixe coupait toujours
     quelque chose selon les cas. "contain" montre la photo entière, quitte à laisser un bandeau
     neutre au-dessus/dessous ou sur les côtés plutôt que de rogner une partie du sujet. */
}
#sheet .photo-credit{
  font-size:9.5px; color:#a19c86; text-align:right; padding: 3px 22px 0; font-style:italic;
}
#sheet .sheet-text{ padding: 12px 22px calc(26px + env(safe-area-inset-bottom)); }
#sheet .eyebrow{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color: var(--moss); font-weight:600; margin-bottom:6px; display:flex; gap:8px; align-items:center;}
#sheet h2{ font-family:'Cormorant SC', serif; font-weight:700; font-size:24px; color: var(--granite-dark); margin-bottom:4px; }
#sheet .commune{ font-size:13px; color:#8a8570; margin-bottom:14px; }

/* Ambiance sonore de la fiche (29 août — demande d'Iload 24). Libre, non
   liée aux clés : un simple bouton bascule play/pause sur UN SEUL lecteur
   partagé (cf. basculerAmbiance() / arreterAmbiance()) — jamais deux sons
   en même temps si on change de fiche sans avoir coupé le premier. */
#sheet .amb-bouton{
  display:inline-flex; align-items:center; gap:8px; margin:-4px 0 14px;
  padding:7px 14px 7px 11px; border-radius:999px; border:1px solid #dcd3bf;
  background:#fff; color:var(--granite-dark); font-size:12.5px; font-weight:600;
  cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#sheet .amb-bouton svg{ width:16px; height:16px; flex:none; }
#sheet .amb-bouton .amb-onde{ opacity:0; transition:opacity .2s ease; }
#sheet .amb-bouton.joue{ background:var(--moss); color:#fff; border-color:var(--moss); }
#sheet .amb-bouton.joue .amb-onde{ opacity:1; }
#sheet .amb-bouton.joue .amb-haut-parleur{ animation: amb-pulse 1.6s ease-in-out infinite; }
@keyframes amb-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
#sheet .amb-credit{ font-size:10.5px; color:#a19c86; font-style:italic; margin:-10px 0 14px; }
#sheet .amb-credit a{ color:inherit; text-decoration:underline dotted; }
@media (prefers-reduced-motion: reduce){
  #sheet .amb-bouton.joue .amb-haut-parleur{ animation:none; }
}
#sheet .stats{ display:flex; gap:18px; flex-wrap:wrap; padding: 12px 0; margin-bottom:12px; border-top:1px solid #e4dccb; border-bottom:1px solid #e4dccb; }
#sheet .stat .label{ font-size:10px; text-transform:uppercase; letter-spacing:0.8px; color:#a19c86;}
#sheet .stat .value{ font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--granite-dark); font-weight:500; margin-top:2px;}
#sheet .desc{ font-size:14px; line-height:1.6; color:#4a4738; margin-bottom:16px;}
/* L'accroche : une ligne libre, au-dessus de la description. Ces quatre-vingt-
   sept phrases étaient vendues avec la clé Géobiologie jusqu'au 26 août 2026,
   où l'audit a montré qu'elles ne nommaient aucune lecture — ni praticien, ni
   réseau, ni tradition. Ce sont des lignes d'accroche, pas des relevés : elles
   sont désormais gratuites et visibles de tous. */
#sheet .accroche{
  font-family:'Cormorant SC', serif; font-size:15.5px; line-height:1.45; font-style:italic;
  color: var(--bracken); margin-bottom:12px;
}
/* Dossiers transversaux (onglets Histoire et Géobiologie). */
/* ---------- Dossier en pleine page ----------
   Demande de Thierry du 5 septembre 2026 : « je voudrais que chaque dossier
   s'ouvre dans une page à part, plein écran, présenté comme la charte au
   cachet ». Un dossier fait plusieurs milliers de signes ; le lire dans un
   volet de 360 px, replié sous deux autres dossiers, c'est le condamner. La
   page reprend le vocabulaire de la charte de marque : bandeau d'encre au
   sceau, titre en Cormorant petites capitales, filet au sceau, colonne de
   lecture à 66 caractères. La couleur du bandeau suit la clé — sceau pour
   Histoire, vert-de-gris pour Mythologie, laiton pour Géobiologie — comme
   « trois cachets différents dans un même registre ». */
#dossierPage{
  position:fixed; inset:0; z-index:1900; display:none;
  background:var(--paper, #faf7f0); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#dossierPage.open{ display:block; }
body.dossier-ouvert{ overflow:hidden; }
/* Le bandeau était d'encre (#2c2b26), titre en papier dessus. Thierry, 6
   septembre : « un bandeau gris foncé, qu'il serait bien de mettre dans les
   couleurs plutôt crème de l'application ». Il est donc dans le crème du
   rouleau, titre en granit, et la couleur de la clé -- sceau, vert-de-gris,
   laiton -- passe sur le cachet, le sur-titre et le filet, qui sont ce qui
   distingue encore un onglet de l'autre. Le grand cercle en filigrane reste,
   à peine plus marqué pour qu'on le voie sur un fond clair. */
#dossierPage .dp-mast{
  /* Plus sombre que le crème de la feuille depuis le 6 septembre au soir :
     « que la couleur des pages sur l'encadré en haut soit un peu plus sombre
     que la couleur crème actuelle ». Le bandeau était dans le crème du
     rouleau ; il descend d'un cran pour se détacher du corps de la page. */
  background:linear-gradient(160deg, #e9dbb5 0%, var(--parchemin-sombre, #e3d3a8) 100%);
  color:var(--granite-dark, #2c2b26); padding:56px 26px 44px; text-align:center;
  position:relative; overflow:hidden;
  border-bottom:1px solid rgba(120,95,50,0.18);
}
#dossierPage .dp-mast::before{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  border:1px solid rgba(120,95,50,0.14); left:50%; top:-300px; transform:translateX(-50%);
}
#dossierPage .dp-sceau{ width:92px; height:92px; margin:0 auto 22px; display:block; position:relative; }
#dossierPage .dp-kicker{
  font-family:'Cormorant SC', Georgia, serif; font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; margin-bottom:12px; position:relative;
}
#dossierPage .dp-titre{
  font-family:'Cormorant SC', Georgia, serif; font-weight:600; font-size:34px;
  letter-spacing:0.04em; margin:0; position:relative; text-wrap:balance; line-height:1.15;
}
#dossierPage .dp-filet{ width:96px; height:1px; margin:18px auto; opacity:0.9; position:relative; }
#dossierPage .dp-chapeau{
  font-size:14px; line-height:1.6; color:#5a5646; max-width:52ch;
  margin:0 auto; position:relative;
}
#dossierPage .dp-fermer{
  position:fixed; top:12px; right:12px; z-index:2; width:40px; height:40px;
  border:0; border-radius:50%; background:rgba(44,43,38,0.10); color:#2c2b26;
  font-size:24px; line-height:1; cursor:pointer; backdrop-filter:blur(3px);
}
#dossierPage.defile .dp-fermer{ background:#2c2b26; color:#faf7f0; box-shadow:0 2px 10px rgba(0,0,0,0.25); }
/* ---------- La colonne de lecture, 5 septembre 2026 ----------
   Elle faisait 640 px, soit environ 66 signes par ligne — la mesure classique de
   la typographie de livre. Thierry la trouve trop serrée à l'écran : « plus large
   de deux centimètres de chaque côté ». D'où le calc() ci-dessous, écrit en
   centimètres réels plutôt qu'en pixels convertis, pour que l'intention reste
   lisible dans le code : 640 px + 4 cm, soit environ 791 px et 82 signes.
   Le max-width ne mord QUE sur les écrans plus larges que cela : sur un téléphone,
   c'est le padding de 26 px qui commande, et rien ne change. L'interlignage passe
   de 1,72 à 1,78 : une ligne plus longue demande un peu plus d'air entre les
   lignes, sinon l'œil perd le début de la suivante en revenant à la marge. */
#dossierPage .dp-corps{ max-width:calc(640px + 4cm); margin:0 auto; padding:34px 26px 96px; }
#dossierPage .dp-corps > *:first-child{ margin-top:0; }
#dossierPage .dp-corps h3{ font-family:'Cormorant SC', Georgia, serif; font-size:23px;
  letter-spacing:0.02em; color:#2c2b26; margin:34px 0 10px; }
#dossierPage .dp-corps h4{ font-size:15px; margin:22px 0 6px; color:#2c2b26; }
#dossierPage .dp-corps p{ font-size:16px; line-height:1.78; color:#47463f; margin-bottom:15px; }
#dossierPage .dp-corps li{ font-size:16px; line-height:1.7; color:#47463f; margin-bottom:8px; }
#dossierPage .dp-corps ul, #dossierPage .dp-corps ol{ margin:0 0 14px 20px; }
#dossierPage .dp-corps figure.ill{ margin:22px 0 12px; }
/* ---------- Réserve de fin et signature de l'auteur, 7 septembre 2026 ----------
   La réserve : un dossier existant employait déjà <p class="bv-reserve"> pour
   dire ses sources et ses incertitudes, mais la seule règle qui visait cette
   classe était rangée sous #sheet .bovis-case — elle ne s'appliquait donc pas
   dans la page de dossier, où le paragraphe sortait en texte courant. Les deux
   dossiers y gagnent.
   La signature : Thierry, 7 septembre — « j'aimerais qu'il soit signé ». Aucun
   des dossiers précédents ne l'était ; celui des cloches inaugure l'usage, et
   la règle est écrite ici pour que les suivants n'aient rien à réinventer. */
#dossierPage .dp-corps p.bv-reserve{
  margin:26px 0 0; padding-top:14px; border-top:1px dashed #d8cdb0;
  font-size:14px; line-height:1.62; color:#7a7566; font-style:italic;
}
#dossierPage .dp-corps p.dos-signature{
  margin:30px 0 0; text-align:right; font-family:'Cormorant SC', Georgia, serif;
  font-size:19px; letter-spacing:0.05em; color:#2c2b26;
}
#dossierPage .dp-corps p.dos-signature span{
  display:block; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:#8a7f6a; margin-bottom:3px;
}
#dossierPage .dp-corps figure.ill img{ width:100%; border-radius:3px; display:block; }
/* Un dessin plutôt qu'une photo : même place, même largeur, mais pas de coin
   arrondi — un schéma n'est pas une image encadrée, c'est du texte en dessin. */
#dossierPage .dp-corps figure.ill svg{ width:100%; height:auto; display:block; }
#dossierPage .dp-corps figure.ill figcaption{ font-size:12.5px; line-height:1.5; color:#6f6a58; margin-top:7px; }
#dossierPage .dp-corps figure.ill .ill-credit{ display:block; font-size:10.5px; color:#94907f; margin-top:3px; }
#dossierPage .dp-corps table.dos-table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px; }
#dossierPage .dp-corps .dos-lexique dt{ font-family:'Cormorant SC', Georgia, serif; font-size:15px; }
#dossierPage .dp-corps .dos-lexique dd{ font-size:14.5px; line-height:1.6; }
/* Fin de page. Les trois points de suspension d'origine sont remplacés le
   5 septembre 2026 par le cachet lui-même (« mettre un cachet de cire à la fin
   de chaque page ») : le lecteur referme la page sur la marque de la maison,
   comme on brise un sceau à l'envers. Le cachet du bandeau est clair sur fond
   sombre ; celui-ci est encré dans la couleur de la clé sur le parchemin —
   c'est le même dessin, à l'encre inversée (voir sceauEncre()). */
#dossierPage .dp-fin{
  border-top:1px solid #ddd4c2; margin-top:44px; padding-top:28px;
  padding-bottom:8px; text-align:center;
}
#dossierPage .dp-fin .dp-sceau-fin{
  width:56px; height:56px; margin:0 auto; display:block; opacity:0.92;
}
@media (min-width:900px){
  #dossierPage .dp-fin .dp-sceau-fin{ width:68px; height:68px; }
}
/* Le renvoi vers la page pleine, posé sur une case de fiche de site ou sous la
   description : même pavé que « Voir sur la fiche du site → », même famille. */
/* L'entrée en matière : le texte s'éteint vers le bas plutôt que de s'arrêter
   net, et toute la case devient cliquable. Le curseur et le renvoi disent que la
   suite est ailleurs. */
.case-card.entree{ cursor:pointer; }
.case-card.entree:hover{ background:rgba(243,236,221,0.5); }
.cc-entree{
  position:relative; max-height:5.4em; overflow:hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.cc-lire{
  margin-top:8px; font-size:12px; font-weight:600; color:var(--bracken);
  display:inline-flex; align-items:center; gap:5px;
}
.case-card.entree:hover .cc-lire{ text-decoration:underline; }
.cc-pleinepage{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  padding:9px 12px; background:#f1ece0; border:none; border-radius:9px;
  font-family:inherit; font-size:12px; color:var(--bracken); font-weight:600;
  cursor:pointer;
}
.cc-pleinepage:hover{ background:#e9e1cf; }
@media (min-width:900px){
  #dossierPage .dp-mast{ padding:76px 26px 60px; }
  #dossierPage .dp-titre{ font-size:44px; }
  #dossierPage .dp-sceau{ width:120px; height:120px; }
}
.dossier{
  border:1px solid #ddd3bf; border-radius:12px; background:#fbf8f1;
  margin: 4px 0 16px; overflow:hidden;
}
.dossier .dos-header{ padding:12px 14px; cursor:pointer; }
/* Couvertures (21-j), mises en page « comme dans un article de journal » le 22 septembre
   (21-k, Thierry : « des photos un peu plus petites ») : une vignette posée à droite,
   la photo entière à ses propres proportions, un filet fin autour, le crédit en légende
   dessous ; le titre et le chapeau coulent à gauche et reprennent toute la largeur
   sous la photo. */
.dos-couv, .gh-couv{ float:right; width:34%; max-width:132px; margin:2px 0 6px 12px; }
.dos-couv img, .gh-couv img{ width:100%; height:auto; max-height:150px; object-fit:contain; display:block;
  border:1px solid #d8ccb0; padding:2px; background:#fffdf7; box-sizing:border-box; }
.couv-credit{ display:block; margin-top:3px; font-size:8.5px; line-height:1.25; color:#9a927c; font-style:italic;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dossier .dos-header::after, .gh-htext::after{ content:''; display:block; clear:both; }
#dossierPage .dp-corps figure.dp-photo-site{ float:right; }
#dossierPage .dp-corps figure.dp-couv{ float:right; width:44%; max-width:300px; margin:4px 0 10px 16px; }
#dossierPage .dp-corps figure.dp-couv img{ border:1px solid #d8ccb0; padding:3px; background:#fffdf7; box-sizing:border-box; }
#dossierPage .dp-corps figure.dp-couv figcaption{ margin-top:4px; }
#dossierPage .dp-corps figure.dp-couv .ill-credit{ font-size:9.5px; font-style:italic; line-height:1.3; }
#dossierPage .dp-corps h2, #dossierPage .dp-corps h3, #dossierPage .dp-corps figure.ill:not(.dp-couv), #dossierPage .dp-corps .dp-carte, #dossierPage .dp-fin{ clear:both; }
#dossierPage .dp-corps figure.dp-suite.a-gauche{ float:left; margin:4px 16px 10px 0; }

/* ---------- Grandes histoires « magazine » (27 septembre 2026, 27-b) ----------
   Thierry : « ajoute des photos, des dessins aux pages d'histoire, que ça ait l'air d'articles de journaux et
   de magazines ». Tout est rangé sous #dossierPage.mag, classe posée par dossierPageRemplir() quand le récit
   porte ses propres figures : les dossiers et les autres histoires ne bougent pas. Les images sont des
   gravures, lithographies, cartes postales et photographies anciennes du domaine public, ou des photos
   libres des lieux, chacune regardée et créditée ; aucune n'est dessinée ou reconstituée pour l'occasion. */
#dossierPage.mag .dp-corps h4{ font-family:'Cormorant SC', Georgia, serif; font-weight:600; font-size:23px; line-height:1.2;
  letter-spacing:0.02em; color:#2c2b26; margin:42px 0 12px; padding-top:18px; border-top:1px solid #ddd4c2; clear:both; text-wrap:balance; }
#dossierPage.mag .dp-corps p.mag-ouverture::first-letter{ float:left; font-family:'Cormorant SC', Georgia, serif; font-weight:600;
  font-size:4.7em; line-height:0.8; margin:0.07em 0.09em 0 0; color:#8a5a3c; }
#dossierPage.mag .dp-corps p.mag-ouverture::first-line, #dossierPage.mag .dp-corps p.mag-attaque::first-line{ font-variant:small-caps; letter-spacing:0.03em; color:#2c2b26; }
#dossierPage.mag .dp-corps figure.mag-fig img{ width:100%; height:auto; display:block; border:1px solid #d8ccb0; padding:4px;
  background:#fffdf7; box-sizing:border-box; border-radius:0; }
#dossierPage.mag .dp-corps figure.mag-fig figcaption{ font-family:'Spectral', Georgia, serif; font-style:italic; font-size:13.5px;
  line-height:1.55; color:#5a5646; margin-top:9px; padding-left:11px; border-left:2px solid #8a5a3c; }
#dossierPage.mag .dp-corps figure.mag-fig .ill-credit{ font-style:normal; font-size:10.5px; letter-spacing:0.02em; color:#94907f; margin-top:4px; }
#dossierPage.mag .dp-corps figure.mag-large{ clear:both; margin:32px 0 28px; }
#dossierPage.mag .dp-corps figure.mag-large img{ width:auto; max-width:100%; max-height:74vh; margin:0 auto; }
/* La photo de couverture ouvre l'article en grand, comme une une de magazine, au lieu de la vignette à droite. */
#dossierPage.mag .dp-corps figure.dp-couv{ float:none; width:auto; max-width:none; margin:0 0 30px; }
#dossierPage.mag .dp-corps figure.dp-couv img{ width:auto; max-width:100%; max-height:60vh; margin:0 auto; display:block; }
#dossierPage.mag .dp-corps figure.dp-couv figcaption{ text-align:center; }
#dossierPage.mag .dp-corps figure.mag-portrait{ float:right; width:38%; max-width:250px; margin:6px 0 14px 24px; }
#dossierPage.mag .dp-corps figure.mag-portrait.a-gauche{ float:left; margin:6px 24px 14px 0; }
#dossierPage.mag .dp-corps figure.mag-portrait figcaption{ font-size:12.5px; }
#dossierPage.mag .dp-corps blockquote.mag-exergue{ clear:both; max-width:30em; margin:34px auto; padding:20px 8px 16px;
  text-align:center; border-top:1px solid #8a5a3c; border-bottom:1px solid #8a5a3c; }
#dossierPage.mag .dp-corps blockquote.mag-exergue p{ font-family:'Spectral', Georgia, serif; font-style:italic; font-size:24px;
  line-height:1.38; color:#2c2b26; margin:0 0 10px; text-wrap:balance; }
#dossierPage.mag .dp-corps blockquote.mag-exergue cite{ display:block; font-style:normal; font-family:'Cormorant SC', Georgia, serif;
  font-weight:600; font-size:13.5px; letter-spacing:0.07em; color:#8a5a3c; }
#dossierPage.mag .dp-corps aside.mag-encadre{ clear:both; margin:28px 0 30px; padding:18px 22px 16px; background:#f1ead9;
  border-top:3px solid #8a5a3c; }
#dossierPage.mag .dp-corps .mag-encadre-titre{ font-family:'Cormorant SC', Georgia, serif; font-weight:600; font-size:20px;
  letter-spacing:0.03em; color:#2c2b26; margin-bottom:12px; }
#dossierPage.mag .dp-corps aside.mag-encadre dl{ display:grid; grid-template-columns:minmax(0, 12.5em) 1fr; gap:7px 18px; margin:0;
  font-size:14.5px; line-height:1.45; font-variant-numeric:tabular-nums; }
#dossierPage.mag .dp-corps aside.mag-encadre dt{ font-weight:500; color:#2c2b26; }
#dossierPage.mag .dp-corps aside.mag-encadre dd{ margin:0; color:#5a5646; }
@media (min-width:900px){
  #dossierPage.mag .dp-corps figure.mag-large{ margin-left:-44px; margin-right:-44px; }
  #dossierPage.mag .dp-corps figure.mag-large figcaption{ margin-left:44px; margin-right:44px; }
}
@media (max-width:560px){
  #dossierPage.mag .dp-corps figure.mag-portrait{ width:44%; margin-left:14px; }
  #dossierPage.mag .dp-corps figure.mag-portrait.a-gauche{ margin-left:0; margin-right:14px; }
  #dossierPage.mag .dp-corps blockquote.mag-exergue p{ font-size:20px; }
  #dossierPage.mag .dp-corps aside.mag-encadre{ padding:16px 16px 12px; }
  #dossierPage.mag .dp-corps aside.mag-encadre dl{ grid-template-columns:1fr; gap:0; }
  #dossierPage.mag .dp-corps aside.mag-encadre dd{ margin-bottom:9px; }
}
#dossierPage .dp-icone{ border-radius:50%; box-shadow:0 3px 10px rgba(70,52,30,.28), 0 0 0 2px rgba(255,253,247,.85), 0 0 0 3px rgba(120,95,60,.55); }
.dossier .dos-titre{
  font-family:'Cormorant SC', serif; font-size:15px; font-weight:700; color:var(--granite-dark);
}
.dossier .dos-chapeau{ font-size:12.5px; line-height:1.5; color:#6f6a58; margin-top:4px; }
.dossier .dos-plus{
  font-size:11px; text-transform:uppercase; letter-spacing:0.7px; font-weight:700;
  color:#96702e; margin-top:8px;
}
.dossier .dos-corps{ display:none; padding:0 14px 14px; border-top:1px solid #e8e0cd; }
.dossier.open .dos-corps{ display:block; }
.dossier .dos-corps h3{ margin-top:16px; }
.dossier .dos-corps h4{
  font-family:'Cormorant SC', serif; font-size:13.5px; font-weight:700;
  color:var(--granite-dark); margin:14px 0 5px;
}
.dossier .dos-corps p{ font-size:13px; line-height:1.6; color:#5a5646; margin-bottom:7px; }
.dossier .dos-corps ul{ margin:0 0 8px 18px; }
.dossier .dos-corps .dos-lexique{ margin:10px 0 0; }
.dossier .dos-corps .dos-lexique dt{ font-family:'Cormorant SC', serif; font-size:13.5px;
  font-weight:600; color:#4a4335; margin-top:12px; }
.dossier .dos-corps .dos-lexique dd{ margin:2px 0 0; padding-left:11px;
  border-left:2px solid #e0d5bd; font-size:12.5px; line-height:1.55; color:#5a5646; }
.dossier .dos-corps li{ font-size:13px; line-height:1.55; color:#5a5646; margin-bottom:4px; }
.dossier .dos-corps figure.ill{ margin:10px 0 6px; }
.dossier .dos-corps figure.ill img{
  width:100%; height:auto; display:block; border-radius:8px; background:#e9e3d5;
  max-height:70vh; object-fit:contain;
}
.dossier .dos-corps figure.ill svg{ width:100%; height:auto; display:block; }
.dossier .dos-corps figure.ill figcaption{ font-size:11.5px; line-height:1.45; color:#6f6a58; margin-top:5px; }
.dossier .dos-corps figure.ill .ill-credit{ display:block; font-size:10px; color:#94907f; margin-top:3px; }
.dossier .dos-corps table.dos-table{ width:100%; border-collapse:collapse; margin:8px 0 10px; font-size:12px; }
.dossier .dos-corps table.dos-table th{
  text-align:left; padding:5px 6px; border-bottom:2px solid #ddd3bf; color:var(--granite-dark);
}
.dossier .dos-corps .dos-site{
  display:inline-block; margin-left:2px; padding:0 4px; border-radius:5px;
  background:#f1ece0; color:var(--bracken); font-weight:700; font-size:11px;
  cursor:pointer; vertical-align:1px;
}
.dossier .dos-corps .dos-site:hover{ background:#e4dbc6; }
.dossier .dos-corps table.dos-table td{ padding:5px 6px; border-bottom:1px solid #ece5d6; color:#5a5646; }
/* Figures du contenu réservé (architecture, géométrie sacrée). */
#sheet .sous-case{ margin: 2px 0 10px; }
#sheet .bovis-case .bv-releve{ margin:6px 0 0; padding-left:9px; border-left:2px solid #cbb98d; }
#sheet .bovis-case .bv-valeur{ font-family:'Cormorant SC', serif; font-size:15px; font-weight:600; color:#7a5a24; }
#sheet .bovis-case .bv-objet{ font-size:12px; color:#5a5140; margin-top:1px; }
#sheet .bovis-case .bv-source{ font-size:11px; color:#8a8570; margin-top:2px; }
#sheet .bovis-case .bv-source a{ color:var(--bracken); text-decoration:none; font-weight:700; }
#sheet .bovis-case .bv-reserve{ margin:9px 0 0; padding-top:7px; border-top:1px dashed #d8cdb0;
  font-size:11px; line-height:1.5; color:#8a8570; font-style:italic; }
#sheet .sous-case .sc-label{
  font-size:10px; text-transform:uppercase; letter-spacing:0.8px; font-weight:700;
  color:#96702e; margin: 8px 0 4px;
}
#sheet figure.ill{ margin: 10px 0 4px; }
#sheet figure.ill img{
  width:100%; height:auto; display:block; border-radius:8px; background:#e9e3d5;
  /* Une image très haute — un folio de manuscrit, un plan en pied — ne doit pas
     chasser le texte hors de l'écran : on la borne, quitte à la voir plus petite. */
  max-height:70vh; object-fit:contain;
}
#sheet figure.ill figcaption{
  font-size:11.5px; line-height:1.45; color:#6f6a58; margin-top:5px;
}
#sheet figure.ill .ill-credit{
  display:block; font-size:10px; color:#94907f; margin-top:3px;
}
#sheet .energie-box{
  background: #f1ece0; border:1px solid #e0d5bd; border-left:3px solid #b8863b;
  border-radius:8px; padding:10px 12px; margin: -4px 0 16px;
}
#sheet .energie-box .eb-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; color:#96702e; margin-bottom:4px; }
#sheet .energie-box p{ font-size:12.5px; line-height:1.55; color:#5a5140; }

/* ---------- Cases empilées par clé (Histoire / Mythologie & Folklore / Géobiologie /
   Patrimoine) sur la fiche d'un site — chacune déverrouillée indépendamment des autres,
   contrairement à l'ancien modèle où toute la fiche était verrouillée d'un bloc. ---------- */
#sheet .case-card{ border-radius:8px; padding:10px 12px; margin: -4px 0 12px; }
#sheet .case-card.unlocked{ background:#f1ece0; border:1px solid #e0d5bd; border-left:3px solid #b8863b; }
#sheet .case-card.unlocked .case-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; color:#96702e; margin-bottom:4px; display:flex; align-items:center; gap:5px; }
/* Couleur propre par clé (registre « Cadastre », 29 août), même logique que
   les onglets du panneau : sceau / vert-de-gris / laiton. */
#sheet .case-card.unlocked[data-lever="histoire"]{ border-left-color: var(--bracken); }
#sheet .case-card.unlocked[data-lever="histoire"] .case-label{ color: var(--bracken); }
#sheet .case-card.unlocked[data-lever="mythologie"]{ border-left-color: var(--moss); }
#sheet .case-card.unlocked[data-lever="mythologie"] .case-label{ color: var(--moss); }
#sheet .case-card.unlocked[data-lever="energie"]{ border-left-color: var(--gold); }
#sheet .case-card.unlocked[data-lever="energie"] .case-label{ color: var(--gold); }
#sheet .case-card .case-body{ font-size:12.5px; line-height:1.55; color:#5a5140; }
#sheet .case-card .case-body p{ margin:0 0 8px; }
#sheet .case-card .case-body p:last-child{ margin-bottom:0; }
/* Un récit de mythologie en forme de fable (6 septembre 2026) : le titre nomme
   les acteurs, le récit se lit en paragraphes, et la chute — quatre ou six vers
   de huit pieds — referme, en italique, après un blanc. Dans la fiche comme en
   pleine page. */
#sheet .case-body .myth-recit + .myth-recit{ margin-top:14px; padding-top:10px; border-top:1px solid #e6dfcf; }
#sheet .case-body .mr-titre{ font-family:'Cormorant SC', Georgia, serif; font-size:15px; font-weight:600; color:#3a3328; margin:0 0 6px; }
#sheet .case-body .mr-chute{ font-style:italic; color:#4a4030; margin:12px 0 0 !important; padding-left:12px; border-left:2px solid #cbb98d; line-height:1.6; }
#sheet .case-body .mr-source{ font-size:11px; color:#8a8570; margin-top:8px !important; }
#sheet .case-body .mr-source a{ color:var(--bracken); text-decoration:none; font-weight:700; }
#dossierPage .dp-corps .myth-recit + .myth-recit{ margin-top:36px; padding-top:26px; border-top:1px solid #e6dfcf; }
#dossierPage .dp-corps .mr-titre{ font-family:'Cormorant SC', Georgia, serif; font-size:24px; font-weight:600; letter-spacing:0.02em; color:#2c2b26; margin:0 0 14px; }
#dossierPage .dp-corps .mr-chute{ font-style:italic; font-size:17px; line-height:1.75; color:#3d3a33; margin:30px 0 0; padding-left:18px; border-left:2px solid #cbb98d; }
#dossierPage .dp-corps .mr-source{ font-size:13px; color:#8a8570; margin-top:18px; }
#dossierPage .dp-corps .mr-source a{ color:var(--bracken); text-decoration:none; font-weight:700; }
#sheet .case-card.locked{ background:#f6f3ea; border:1px dashed #d8cdb0; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
#sheet .case-card.locked .cc-text{ flex:1; min-width:150px; }
#sheet .case-card.locked .cc-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; color:#8a8570; margin-bottom:2px; display:flex; align-items:center; gap:5px; }
#sheet .case-card.locked .cc-desc{ font-size:11.5px; color:#8a8570; line-height:1.4; }
.lectures-block{ margin:10px 0 16px; padding-top:9px; border-top:1px dashed #d8cdb0; }
.lectures-title{ font-size:10px; text-transform:uppercase; letter-spacing:0.7px; font-weight:700; color:#96702e; margin-bottom:5px; }
.lectures-list{ margin:0; padding:0; list-style:none; }
.lectures-list li{ margin-bottom:4px; font-size:12px; }
.lectures-list li:last-child{ margin-bottom:0; }
.lectures-list a{ color:var(--bracken); font-weight:600; text-decoration:none; }
.lectures-list a:hover{ text-decoration:underline; }
/* Le sceau rouge remplace l'encre neutre pour ce bouton : c'est la seule
   action qui « débloque » quelque chose sur la fiche, elle doit se voir. */
#sheet .case-card.locked button{ flex-shrink:0; background:var(--bracken); color:#faf7f0; font-weight:600; font-size:11.5px; padding:8px 12px; border-radius:8px; border:none; cursor:pointer; font-family:'Spectral'; }
/* Renvoi depuis l'onglet général vers la fiche d'un site — utilisé pour le contenu
   propre à un seul site (ex. le cas d'école Chartres), déplacé hors de l'onglet. */
.site-caselink{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:9px 12px; background:#f1ece0; border-radius:9px; font-size:12px; color:var(--bracken); font-weight:600; cursor:pointer; }
.site-caselink:hover{ background:#e9e1cf; }
#sheet .actions{ display:flex; gap:10px; }
#sheet .btn{ flex:1; text-align:center; padding:11px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; border:none; text-decoration:none; display:block; }
#sheet .btn.primary{ background:var(--moss); color:#fff; }
#sheet .btn.ghost{ background:#fff; color:var(--granite-dark); border:1px solid #dcd3bf; }
/* Le bouton « vue d'ensemble » de la fiche : sur téléphone, la fiche ouverte
   recouvre celui de la carte — celui-ci est donc toujours sous le doigt. */
#vueEnsembleFiche{ position:absolute; top:14px; right:52px; background:rgba(255,255,255,0.85); border:none; width:28px; height:28px; border-radius:50%; cursor:pointer; color:#78735f; z-index:2; padding:0;}
#vueEnsembleFiche svg{ width:15px; height:15px; vertical-align:middle; }
#closeSheet{ position:absolute; top:14px; right:16px; background:rgba(255,255,255,0.85); border:none; width:28px; height:28px; border-radius:50%; cursor:pointer; color:#78735f; font-size:16px; z-index:2;}


/* ---------- Mode correction (outils d'auteur) ---------- */
body.mode-edition #map{ box-shadow: inset 0 0 0 3px #a8452f; }
#mbEditBar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:1600;
  display:flex; align-items:center; gap:8px; max-width:calc(100vw - 20px);
  background:#2c2b26; color:#f3efe4; border-radius:999px; padding:7px 8px 7px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.32); font-size:12.5px;
}
#mbEditBar .eb-pastille{ width:8px; height:8px; border-radius:50%; background:#a8452f; flex-shrink:0; animation:ebPulse 1.8s infinite; }
@keyframes ebPulse{ 0%,100%{opacity:1} 50%{opacity:0.35} }
#mbEditBar .eb-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mbEditBar button{
  border:0; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:600;
  background:#47463f; color:#f3efe4; cursor:pointer; flex-shrink:0; font-family:inherit;
}
#mbEditBar button[data-act="export"]{ background:#6b8f3f; }
#mbEditBar button.cles-on{ background:#b8863b; color:#2c2b26; }
#mbEditBar button.cles-off{ background:#5f5c50; }
#mbToast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(14px); bottom:64px; z-index:1700;
  background:#2c2b26; color:#f3efe4; padding:9px 16px; border-radius:10px; font-size:13px;
  max-width:calc(100vw - 32px); text-align:center; box-shadow:0 6px 18px rgba(0,0,0,0.3);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
}
#mbToast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.ed-bloc{ border:1px dashed #c9b89a; border-radius:10px; padding:10px 12px; margin:10px 0 14px; background:#faf7f0; }
.ed-titre{ font-size:10.5px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#a8452f; margin-bottom:8px; font-family:'JetBrains Mono',monospace; }
.ed-galerie{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.ed-vignette{ position:relative; width:84px; height:84px; border-radius:8px; overflow:hidden; background:#e9e1cf; }
.ed-vignette img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.ed-suppr{ position:absolute; top:2px; right:2px; width:20px; height:20px; border:0; border-radius:50%; background:rgba(31,43,40,0.78); color:#fff; font-size:14px; line-height:1; cursor:pointer; padding:0; }
.ed-ligne{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ed-coord{ font-size:12px; color:#5a5646; font-family:'JetBrains Mono',monospace; line-height:1.5; }
.ed-badge{ display:inline-block; background:#6b8f3f; color:#fff; font-size:9.5px; padding:1px 5px; border-radius:4px; margin-left:5px; vertical-align:middle; letter-spacing:0.4px; }
.ed-orig{ color:#a39d87; font-size:11px; }
.ed-aide{ font-size:11.5px; color:#8a8570; line-height:1.5; margin:8px 0 0; }
.ed-ajout{ display:block; text-align:center; margin-top:10px; padding:9px; border-radius:8px; background:#e9e1cf; color:#5a5646; font-size:12.5px; font-weight:600; cursor:pointer; }
.ed-input{ display:none; }


/* ---------- Contribution des visiteurs et boussole ----------
   Ces deux boutons étaient des pavés à bord tireté sous la liste. Depuis le
   5 septembre au soir ils sont deux icônes du bandeau, habillées par .pa-btn ;
   il ne reste ici que ce qu'une icône seule ne saurait dire. */
#btnAutourDeMoi.pa-btn.actif{
  background:rgba(79,143,168,0.16);
  box-shadow: inset 0 0 0 1px rgba(79,143,168,0.45);
}
#btnAutourDeMoi.pa-btn.actif:hover{ background:rgba(79,143,168,0.24); color:#4f8fa8; }
/* Le bouton-filtre "Reliques & artefacts" (#btnTresors) a été retiré le 30 août
   (demande d'Iload 24 : "en trop") -- la petite étiquette .tresor-tag ci-dessous,
   elle, reste : elle signale juste, sur une fiche qui en a un, qu'il y a une
   relique ou un artefact documenté, ce n'est pas un filtre. */
.eau-wrap{ display:inline-block; margin-left:5px; vertical-align:-1px; line-height:0; }
.eau-goutte{ width:11px; height:14px; }
#sheet h2 .eau-goutte{ width:14px; height:18px; }
.tresor-tag{
  font-size:9.5px; font-weight:600; color:#fff; background: var(--bracken);
  padding:2px 6px; border-radius:8px; white-space:nowrap; display:inline-flex; align-items:center; gap:3px;
}
.ns-contrib{ background:#f6f1e6; border-radius:8px; padding:10px 12px; font-size:11.5px; color:#8a8570; line-height:1.55; margin-top:14px; }
/* ---------- Création d'un nouveau site ---------- */
body.pointage #map{ cursor:crosshair; }
body.pointage #map::after{
  content:"Touche l'emplacement du monument"; position:absolute; top:70px; left:50%;
  transform:translateX(-50%); background:#2c2b26; color:#f3efe4; padding:7px 14px;
  border-radius:999px; font-size:12.5px; z-index:1500; white-space:nowrap; pointer-events:none;
}
.marqueur-brouillon{ filter:drop-shadow(0 0 0 #a8452f); opacity:0.88; }
.marqueur-brouillon::after{
  content:""; position:absolute; inset:-4px; border:2px dashed #a8452f; border-radius:50%;
}
#mbNouveauSite{ display:none; position:fixed; inset:0; z-index:1800; }
#mbNouveauSite.show{ display:block; }
#mbNouveauSite .ns-fond{ position:absolute; inset:0; background:rgba(14,20,19,0.55); }
#mbNouveauSite .ns-boite{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(460px, 100%); max-height:92vh; display:flex; flex-direction:column;
  background:var(--paper); border-radius:16px 16px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,0.3);
}
#mbNouveauSite .ns-tete{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px; border-bottom:1px solid #e9e1cf; }
#mbNouveauSite .ns-tete h3{ font-family:'Cormorant SC',serif; font-size:17px; margin:0; color:var(--granite-dark); }
#mbNouveauSite .ns-fermer{ border:0; background:none; font-size:26px; line-height:1; color:#8a8570; cursor:pointer; padding:0 4px; }
#mbNouveauSite .ns-corps{ overflow-y:auto; padding:12px 16px; }
#mbNouveauSite .ns-lab{ display:block; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#8a8570; margin:12px 0 5px; font-family:'JetBrains Mono',monospace; }
#mbNouveauSite .ns-oblig{ color:#a8452f; text-transform:none; letter-spacing:0; font-weight:600; }
#mbNouveauSite .ns-champ{ width:100%; border:1px solid #ddd3bd; border-radius:8px; padding:9px 10px; font-size:13.5px; font-family:inherit; background:#fff; color:var(--granite-dark); box-sizing:border-box; }
#mbNouveauSite .ns-zone{ min-height:76px; resize:vertical; }
#mbNouveauSite .ns-duo{ display:flex; gap:10px; }
#mbNouveauSite .ns-duo > div{ flex:1; min-width:0; }
#mbNouveauSite .ns-coordbtns{ display:flex; gap:8px; margin-top:7px; }
#mbNouveauSite .ns-mini{ flex:1; border:1px solid #ddd3bd; background:#f6f1e6; border-radius:8px; padding:7px; font-size:12px; font-family:inherit; color:#5a5646; cursor:pointer; }
#mbNouveauSite .ns-aide{ font-size:11.5px; color:#a39d87; line-height:1.5; margin:6px 0 0; }
#mbNouveauSite .ns-types{ display:flex; flex-wrap:wrap; gap:6px; }
#mbNouveauSite .ns-type{ display:flex; align-items:center; gap:6px; border:1px solid #ddd3bd; background:#fff; border-radius:999px; padding:6px 11px; font-size:12.5px; font-family:inherit; color:#5a5646; cursor:pointer; }
#mbNouveauSite .ns-type.actif{ border-color:var(--granite-dark); background:var(--granite-dark); color:#f3efe4; }
#mbNouveauSite .ns-pastille{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
#mbNouveauSite summary{ font-size:12.5px; color:var(--bracken); cursor:pointer; margin-top:12px; font-weight:600; }
#mbNouveauSite .ns-note{ font-size:11.5px; color:#8a8570; line-height:1.55; background:#f6f1e6; border-radius:8px; padding:9px 11px; margin:14px 0 0; }
#mbNouveauSite .ns-erreur{ color:#a8452f; font-size:12.5px; margin-top:8px; line-height:1.5; }
#mbNouveauSite .ns-pied{ display:flex; gap:10px; padding:12px 16px; border-top:1px solid #e9e1cf; }
#mbNouveauSite .ns-pied .btn{ flex:1; }

/* ---------- Visionneuse plein écran (photos et illustrations) ---------- */
#sheet .photo, .esprit-photo{ cursor: zoom-in; }
#photoLightbox{
  position:fixed; inset:0; z-index:1000; display:none;
  background: rgba(13,18,17,0.96);
  flex-direction:column; align-items:center; justify-content:center;
  touch-action:none; /* le zoom/pan est géré à la main en JS (le viewport de l'appli est en user-scalable=no) */
}
#photoLightbox.show{ display:flex; }
#lightboxStage{
  flex:1; width:100%; display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
#lightboxImg{
  max-width:94vw; max-height:80vh; object-fit:contain;
  transform-origin: 0 0; will-change: transform;
  user-select:none; -webkit-user-drag:none;
}
#lightboxImg.dragging, #lightboxImg.pinching{ transition:none !important; }
#lightboxClose{
  position:absolute; top: calc(14px + env(safe-area-inset-top)); right:16px; z-index:2;
  background:rgba(255,255,255,0.12); border:none; width:34px; height:34px; border-radius:50%;
  cursor:pointer; color:#faf7f0; font-size:20px; line-height:1;
}
#lightboxCredit{
  font-size:11px; color:#a19c86; text-align:center; font-style:italic; padding: 10px 24px calc(6px + env(safe-area-inset-bottom));
  max-width:520px;
}
#lightboxHint{
  font-size:10.5px; color:#75705f; text-align:center; padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* ---------- Leaflet marker override ---------- */
.menhir-marker{ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.user-marker{ width:16px; height:16px; border-radius:50%; background: #2f7fd6; border:3px solid #fff; box-shadow: 0 0 0 4px rgba(47,127,214,0.3); }
.leaflet-popup-content-wrapper{ border-radius:10px; font-family:'Spectral'; }
.leaflet-popup-content{ margin:10px 12px; font-size:13px; }
.leaflet-popup-content b{ font-family:'Cormorant SC', serif; font-size:14.5px; }

/* Noms des lieux sur la carte, en calligraphie médiévale (29 août — demande
   de Thierry). Étiquette permanente sous chaque marqueur, dans la police
   Cormorant SC déjà embarquée pour les titres — pas de boîte ni de flèche
   (on retire le style par défaut du tooltip Leaflet), juste le texte en
   petites capitales gravées avec un double liseré clair pour rester lisible
   sur un fond de carte dont la teinte varie (parchemin, eau, forêt...).
   N'apparaît qu'à partir d'un zoom assez rapproché (cf. #map.zoom-proche
   dans updateAllMarkerSizes) : à l'échelle région, des dizaines de noms
   superposés rendraient la carte illisible — aucun outil ici pour éviter
   les collisions comme le ferait un vrai rendu vectoriel. */
.leaflet-tooltip.nom-site-carte{
  background:transparent; border:none; box-shadow:none; padding:0; margin-top:2px;
  font-family:'Cormorant SC', serif; font-variant:small-caps; letter-spacing:0.04em;
  font-size:13px; font-weight:600; color: var(--granite-dark);
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 5px var(--paper), 0 1px 2px rgba(0,0,0,0.2);
  pointer-events:none; white-space:nowrap;
  opacity:0 !important; transition:opacity .25s ease;
}
.leaflet-tooltip.nom-site-carte::before{ display:none; }
/* !important nécessaire : Leaflet fixe l'opacité du tooltip en style
   inline (option "opacity", 0.9 par défaut) — une règle de feuille de
   style ordinaire ne suffirait pas à la surclasser. */
#map.zoom-proche .leaflet-tooltip.nom-site-carte{ opacity:1 !important; }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background:#dcd3bf; border-radius:3px; }

@media (max-width:480px){ #header h1{ font-size:16px; } }


/* ---------- Abonnement "Gardien des Lieux" ---------- */
/* Cadenas d'onglet retirés (portage du 16 août 2026, décision Menhirs du 15 août) : ils
   encombraient une barre déjà à l'étroit et le verrouillage se comprend de toute
   façon à l'ouverture de l'onglet. Le balisage et la classe « locked » sont
   conservés — c'est uniquement l'affichage de l'icône qui est neutralisé, donc
   réversible en remettant « inline-block » sur les deux règles ci-dessous. */
.tab-btn .lock-ico{ width:9px; height:9px; opacity:0.7; display:none; margin-left:3px; vertical-align:-1px; }
/* Visibles uniquement en mode correction : l'auteur veut pouvoir comparer d'un
   coup d'œil le rendu avec et sans clé, le visiteur n'a pas à voir de cadenas. */
body.mode-edition .tab-btn.locked .lock-ico{ display:inline-block; }
/* Les cadenas ajoutent des icônes dans une barre déjà pleine : en mode
   correction seulement, un demi-point de police en moins leur fait la place. */
body.mode-edition .tab-btn, body.mode-edition .tab-group .tab-btn{ font-size:10.5px; }
.tab-group{ display:flex; align-items:center; gap:0; flex:2.15; min-width:0; }
.tab-group .tab-btn{ padding-left:1px; padding-right:1px; font-size:10.5px; white-space:nowrap; }
.tab-group .tg-sep{ font-size:10px; font-weight:600; color:#b3ac93; padding:0 1px; flex-shrink:0; }
.tab-group .tab-group-lock{ width:9px; height:9px; opacity:0.65; display:none; margin-left:1px; color: var(--gold); vertical-align:-1px; }
body.mode-edition .tab-group.locked .tab-group-lock{ display:inline-block; }

/* Depuis le 29/30 août : une clé fermée ne tronque plus le texte libre de l'onglet
   (il n'y avait d'ailleurs, depuis la sortie du contenu du fichier le 22-23 août, plus
   rien de payant à cacher dessous -- tronquer du texte gratuit ne protégeait rien).
   #histoireContent.gated etc. ne coupent donc plus la hauteur ; ils affichent en tête
   le sommaire de la clé (.cle-sommaire-wrap, cf. plus bas) suivi normalement du texte
   libre existant. */
.cle-sommaire-wrap{ margin-bottom:18px; }
.cle-sommaire{
  background: var(--stone-light); border:1px solid #e4dccb; border-radius:12px;
  padding:14px 16px 6px; margin-bottom:12px;
}
.cs-titre{
  font-family:'Cormorant SC', serif; font-weight:700; font-size:15px;
  color: var(--granite-dark); margin-bottom:2px;
}
.cs-sub{ font-size:11.5px; color:#8a8570; margin-bottom:10px; }
.cs-rubrique{ margin-bottom:10px; }
.cs-rubrique-head{
  display:flex; align-items:baseline; gap:6px; font-size:12.5px; font-weight:600;
  color:#5a5646; margin-bottom:4px;
}
.cs-rubrique-head .cs-count{
  font-family:'DM Mono', monospace; font-weight:500; font-size:11px; color: var(--gold);
}
.cs-items{ display:flex; flex-direction:column; gap:3px; }
.cs-item{ font-size:11.5px; line-height:1.4; color:#7a7561; padding-left:10px; position:relative; }
.cs-item::before{ content:"—"; position:absolute; left:0; color:#c9c0a4; }
.cs-item b{ color:#5a5646; font-weight:600; }
/* L'index ouvert (21 septembre 2026, -e) : un bandeau discret en tête d'onglet,
   un petit cadenas sur ce qui ne s'ouvre qu'avec la clé. */
.cle-bandeau{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: var(--stone-light); border:1px solid #e4dccb; border-radius:10px;
  padding:9px 12px; margin:0 0 14px; font-size:11.5px; line-height:1.4; color:#5a5646;
}
.cle-bandeau p{ flex:1 1 180px; margin:0; }
.cle-bandeau .ix-cadenas{ width:14px; height:14px; color: var(--gold); flex-shrink:0; }
.cle-bandeau .unlock-btn{
  background: var(--bracken); color: var(--paper); border:none; border-radius:8px;
  font-family:'Spectral'; font-weight:600; font-size:11.5px; padding:6px 10px; cursor:pointer;
}
.ix-cadenas{ width:11px; height:11px; vertical-align:-1px; margin-right:5px; color: var(--gold); }
.dossier.verrou .dos-plus{ color:#8a7a52; }
.gh-card.verrou .gh-cle{ margin-top:6px; font-size:11px; color:#8a7a52; }
.dossier.verrou .dos-header:focus-visible, .gh-card.verrou .gh-header:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:8px; }
.unlock-overlay{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding-bottom:4px; pointer-events:auto;
}
.unlock-card{
  pointer-events:auto;
  width: calc(100% - 24px); max-width:320px;
  background: var(--granite-dark); border-radius:14px;
  padding:16px 16px 14px; text-align:center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.unlock-card .lock-badge{
  width:30px; height:30px; border-radius:50%; background: var(--gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto 8px;
}
.unlock-card .gel-note{font-size:12px;line-height:1.45;color:#71897f;margin:6px 0 10px}
    .unlock-card h4{ font-family:'Cormorant SC', serif; font-size:14px; color: var(--stone-light); margin-bottom:4px; }
.unlock-card p{ font-size:11px; color: var(--mist); margin-bottom:10px; line-height:1.4; }
.unlock-card button{
  width:100%; background: var(--bracken); color: var(--paper); font-weight:600; font-size:12.5px;
  padding:10px 12px; border-radius:9px; border:none; cursor:pointer; font-family:'Spectral';
}

#paywallScreen{
  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;
}
#paywallScreen.show{ display:flex; flex-direction:column; }
#paywallScreen .pw-close{
  align-self:flex-end; background:none; border:none; color: var(--mist);
  font-size:22px; line-height:1; cursor:pointer; margin-bottom:4px;
}
#paywallScreen .pw-glyph{ width:36px; height:48px; margin: 2px auto 16px; opacity:0.9; }
#paywallScreen h2{ font-family:'Cormorant SC', serif; font-weight:700; font-size:23px; text-align:center; margin-bottom:8px; }
#paywallScreen .pw-lead{ text-align:center; font-size:13px; color: var(--mist); margin-bottom:24px; line-height:1.5; max-width:340px; margin-left:auto; margin-right:auto; }
.pw-benefit{ display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; max-width:380px; margin-left:auto; margin-right:auto; width:100%; }
.pw-benefit .dot{
  width:22px; height:22px; border-radius:50%; background: rgba(138,114,51,0.18); color: var(--gold);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px;
}
.pw-benefit .txt b{ display:block; font-size:13.5px; color: var(--stone-light); margin-bottom:1px; }
.pw-benefit .txt span{ font-size:11.5px; color: var(--mist); line-height:1.4; }
.pw-levers{ max-width:380px; margin:0 auto 4px; width:100%; }
.pw-lever{
  display:flex; gap:12px; align-items:flex-start; border:1.5px solid rgba(245,246,239,0.18);
  border-radius:12px; padding:12px 14px; margin-bottom:9px; cursor:pointer;
}
.pw-lever.selected{ border-color: var(--gold); background: rgba(138,114,51,0.1); }
.pw-lever.suggested{ border-color: var(--gold); box-shadow: 0 0 0 2px rgba(138,114,51,0.35); }
.pw-lever .lever-check{
  width:20px; height:20px; border-radius:6px; border:1.5px solid rgba(245,246,239,0.35);
  flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.pw-lever.selected .lever-check{ background: var(--gold); border-color: var(--gold); color:#2c2b26; }
.pw-lever.selected .lever-check::after{ content:"\2713"; }
.pw-lever .txt b{ display:block; font-size:13.5px; color: var(--stone-light); margin-bottom:1px; }
.pw-lever .txt span{ font-size:11.5px; color: var(--mist); line-height:1.4; }
.pw-lever .txt em{ display:block; font-size:10px; color: var(--gold); font-style:normal; font-weight:600; margin-top:3px; }
.pw-unlocked{
  max-width:380px; margin:2px auto 14px; width:100%; text-align:center;
  font-size:11.5px; color: var(--gold); font-weight:600; line-height:1.4;
}
#paywallScreen .pw-plans{ margin-top:auto; padding-top:18px; max-width:380px; margin-left:auto; margin-right:auto; width:100%; }
.pw-plan{
  border:1.5px solid rgba(245,246,239,0.18); border-radius:12px; padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; cursor:pointer;
}
.pw-plan.selected{ border-color: var(--gold); background: rgba(138,114,51,0.1); }
.pw-plan .l1{ font-size:13px; font-weight:600; }
.pw-plan .l2{ font-size:10.5px; color: var(--mist); }
.pw-plan .price{ font-size:14px; font-weight:700; color: var(--stone-light); }
.pw-save{ font-size:9px; font-weight:700; color:#2c2b26; background: var(--gold); padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:2px; }
#paywallScreen .pw-cta{
  width:100%; background: var(--bracken); color: var(--paper); text-align:center; padding:14px;
  border-radius:11px; font-weight:700; font-size:14px; margin-top:8px; border:none; cursor:pointer; font-family:'Spectral';
}
#paywallScreen .pw-cta:disabled{ opacity:0.5; cursor:not-allowed; }
#paywallScreen .pw-fine{ text-align:center; font-size:10px; color:#8a8570; margin-top:10px; }
.pw-reset{
  display:block; margin:14px auto 0; background:none; border:none; text-decoration:underline;
  color: var(--mist); font-size:11px; font-family:'Spectral'; cursor:pointer; padding:4px;
}

/* ---------- Alertes vocales de proximité ---------- */
#voiceScreen{
  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;
}
#voiceScreen.show{ display:flex; flex-direction:column; }
#voiceScreen .va-close{
  align-self:flex-end; background:none; border:none; color: var(--mist);
  font-size:22px; line-height:1; cursor:pointer; margin-bottom:4px;
}
#voiceScreen .pw-glyph{ width:36px; height:48px; margin: 2px auto 16px; opacity:0.9; }
#voiceScreen h2{ font-family:'Cormorant SC', serif; font-weight:700; font-size:23px; text-align:center; margin-bottom:8px; }
#voiceScreen .pw-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; }
.va-toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1.5px solid rgba(245,246,239,0.18); border-radius:12px; padding:14px 16px;
  max-width:380px; margin:0 auto 18px; width:100%;
}
.va-toggle-txt b{ display:block; font-size:13.5px; color: var(--stone-light); margin-bottom:2px; }
.va-toggle-txt span{ display:block; font-size:11.5px; color: var(--mist); }
.va-switch{ position:relative; display:inline-block; width:50px; height:29px; flex-shrink:0; }
.va-switch input{ opacity:0; width:0; height:0; position:absolute; }
.va-slider{ position:absolute; cursor:pointer; inset:0; background:rgba(245,246,239,0.22); transition:.25s; border-radius:30px; }
.va-slider::before{ content:""; position:absolute; height:23px; width:23px; left:3px; top:3px; background:var(--stone-light); transition:.25s; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.va-switch input:checked + .va-slider{ background: var(--gold); }
.va-switch input:checked + .va-slider::before{ transform: translateX(21px); background:#2c2b26; }
.va-radius-block{ max-width:380px; margin:0 auto 18px; width:100%; }
.va-radius-block > b{ display:block; font-size:12.5px; color: var(--stone-light); margin-bottom:9px; }
.va-radius-options{ display:flex; gap:8px; }
.va-radius-btn{
  flex:1; border:1.5px solid rgba(245,246,239,0.18); border-radius:10px; background:none;
  color: var(--mist); font-family:'Spectral'; font-size:12.5px; font-weight:600; padding:10px 6px; cursor:pointer;
}
.va-radius-btn.selected{ border-color: var(--gold); background: rgba(138,114,51,0.12); color: var(--stone-light); }
.va-note{
  max-width:380px; margin:0 auto; width:100%; font-size:11.5px; color: var(--mist); line-height:1.55;
  background: rgba(245,246,239,0.06); border-radius:10px; padding:12px 14px;
}
.va-note b{ color: var(--stone-light); }
#voiceScreen .pw-cta{ max-width:380px; margin:22px auto 0; width:100%; }

/* ---------- Suggestions d'amélioration (privé) & Ressentis (publics, modérés) ---------- */
#suggestScreen, #ressentiScreen{
  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;
}
#suggestScreen.show, #ressentiScreen.show{ display:flex; flex-direction:column; }
#suggestScreen .cm-close, #ressentiScreen .cm-close{
  align-self:flex-end; background:none; border:none; color: var(--mist);
  font-size:22px; line-height:1; cursor:pointer; margin-bottom:4px;
}
#suggestScreen .pw-glyph, #ressentiScreen .pw-glyph{ width:36px; height:48px; margin: 2px auto 16px; opacity:0.9; }
#suggestScreen h2, #ressentiScreen h2{ font-family:'Cormorant SC', serif; font-weight:700; font-size:23px; text-align:center; margin-bottom:6px; }
.cm-site{ text-align:center; font-size:12.5px; color: var(--gold); font-weight:600; margin-bottom:14px; }
#suggestScreen .pw-lead, #ressentiScreen .pw-lead{ text-align:center; font-size:13px; color: var(--mist); margin-bottom:20px; line-height:1.5; max-width:380px; margin-left:auto; margin-right:auto; }
.cm-hp{ position:absolute; left:-9999px; top:auto; }
.cm-field{ max-width:380px; margin:0 auto 14px; width:100%; }
.cm-field label{ display:block; font-size:12.5px; font-weight:600; color: var(--stone-light); margin-bottom:6px; }
.cm-field textarea, .cm-field input[type=text]{
  width:100%; background:rgba(245,246,239,0.06); border:1.5px solid rgba(245,246,239,0.18); border-radius:10px;
  padding:11px 12px; color: var(--stone-light); font-family:'Spectral'; font-size:13px; resize:vertical; box-sizing:border-box;
}
.cm-field textarea{ min-height:84px; }
.cm-field textarea::placeholder, .cm-field input::placeholder{ color:#8a8570; }
.cm-gps-row{ display:flex; gap:8px; }
.cm-gps-row input{ flex:1; min-width:0; }
.cm-gps-btn{
  display:block; width:100%; margin-top:8px; border:1.5px solid rgba(245,246,239,0.18); border-radius:10px; background:none;
  color: var(--gold); font-family:'Spectral'; font-size:12px; font-weight:600; padding:10px 12px; cursor:pointer;
}
.cm-gps-btn.done{ border-color: var(--gold); background: rgba(138,114,51,0.12); }
.cm-file-label{
  display:block; border:1.5px dashed rgba(245,246,239,0.3); border-radius:10px; padding:14px 12px;
  text-align:center; font-size:12px; color: var(--mist); cursor:pointer;
}
.cm-file-label.has-file{ border-style:solid; border-color: var(--gold); color: var(--stone-light); }
.cm-field input[type=file]{ display:none; }
#suggestScreen .pw-cta, #ressentiScreen .pw-cta{ max-width:380px; margin:8px auto 0; width:100%; }
#suggestScreen .pw-cta:disabled, #ressentiScreen .pw-cta:disabled{ opacity:0.5; cursor:not-allowed; }
.cm-privacy{
  max-width:380px; margin:14px auto 0; width:100%; font-size:11px; color: var(--mist); line-height:1.5;
  background: rgba(245,246,239,0.06); border-radius:10px; padding:11px 13px; text-align:center;
}
.cm-status{ max-width:380px; margin:12px auto 0; width:100%; text-align:center; font-size:12px; font-weight:600; line-height:1.5; min-height:0; }
.cm-status.ok{ color: var(--gold); }
.cm-status.err{ color:#c0644a; font-weight:500; }
.cm-status a{ color: var(--gold); }

.reviews-block{ margin-top:18px; }
.reviews-block h4{ font-family:'Cormorant SC', serif; font-size:15px; color: var(--granite-dark); margin-bottom:10px; }
.review-card{ background:#f3efe1; border-radius:10px; padding:11px 13px; margin-bottom:9px; }
.review-card .rv-txt{ font-size:12.5px; color:#4a4738; line-height:1.5; }
.review-card .rv-meta{ font-size:10.5px; color:#8a8570; margin-top:6px; font-weight:600; }

.gh-section-title{ margin-top:22px; }
.gh-intro{ font-size:12.5px; color:#5a5646; line-height:1.6; margin-bottom:14px; }
.gh-themes{ border:1px solid #e4dccb; border-radius:12px; background:var(--paper); padding:12px 14px 6px; margin:0 0 18px; }
.gh-raccourci{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin:0 0 14px; padding:9px 13px;
  background:var(--paper); border:1px solid #e4dccb; border-radius:10px; cursor:pointer; text-align:left;
  font-family:'Cormorant SC',serif; font-weight:700; font-size:14.5px; line-height:1.3; color:var(--granite-dark); }
.gh-raccourci .ghr-fleche{ font-family:inherit; font-size:16px; color:#9c3b2e; flex:none; }
.gh-raccourci:hover, .gh-raccourci:focus-visible{ border-color:#9c3b2e; color:#9c3b2e; }
.gh-themes:focus{ outline:none; }
.gh-themes .ght-titre{ font-family:'Cormorant SC',serif; font-weight:700; font-size:15px; color:var(--granite-dark); letter-spacing:0.3px; }
.gh-themes .ght-intro{ font-size:11.5px; color:#6f6a58; line-height:1.5; margin:2px 0 8px; }
.gh-themes .ght-theme{ padding:7px 0 8px; border-top:1px solid #efe8d8; }
.gh-themes .ght-nom{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; color:var(--moss); font-weight:600; margin-bottom:3px; }
.gh-themes .ght-titres{ font-size:13.5px; line-height:1.55; color:#47463f; }
.gh-themes .ght-lien{ font:inherit; color:#2c2b26; background:none; border:0; padding:2px 0; margin:0; cursor:pointer; text-align:left;
  text-decoration:underline; text-decoration-color:#d9ccb0; text-underline-offset:3px; }
.gh-themes .ght-lien:hover, .gh-themes .ght-lien:focus-visible{ color:#9c3b2e; text-decoration-color:#9c3b2e; }
.gh-themes .ght-sep{ color:#b9ae94; }
.gh-card.ght-vise{ animation:ghtVise 1.6s ease-out 1; }
@keyframes ghtVise{ 0%,35%{ box-shadow:0 0 0 3px #9c3b2e55; border-color:#9c3b2e; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce){ .gh-card.ght-vise{ animation:none; border-color:#9c3b2e; } }
/* ---------- Grande histoire en pleine page, et mode parcours ----------
   Demande de Thierry du 5 septembre 2026 : la grande histoire s'ouvre comme un
   dossier ; ses interrupteurs et son lien direct sont posés à la fin du récit ;
   les activer emmène sur la carte où l'on ne voit plus QUE cette ligne et QUE
   ses sites ; un bouton ramène à l'histoire. */
#dossierPage .dp-periode{
  font-family:'Cormorant SC', Georgia, serif; font-size:12.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:#6f6a58; margin-top:14px; position:relative;
}
#dossierPage .dp-sources{ margin:10px 0 0; }
#dossierPage .dp-sources .gh-source{ font-size:13.5px; line-height:1.55; color:#6f6a58; margin-bottom:8px; }
#dossierPage .dp-etapes{ margin:10px 0 0; }
#dossierPage .dp-ordre{
  margin:8px 0 14px; font-size:12.5px; line-height:1.5; color:#8a8570;
  font-style:italic; padding-left:2px;
}
#dossierPage .dp-etape{
  display:flex; gap:12px; align-items:baseline; padding:11px 12px; cursor:pointer;
  border:1px solid #e8e0cd; border-radius:8px; margin-bottom:7px; background:#fdfcf8;
}
#dossierPage .dp-etape:hover{ border-color:#ddd4c2; }
#dossierPage .dp-etape .dp-num{
  font-family:'Cormorant SC', Georgia, serif; font-size:14px; color:#8a5a3c;
  min-width:20px; text-align:right; flex-shrink:0;
}
#dossierPage .dp-etape b{ color:#2c2b26; }
#dossierPage .dp-etape span.dp-lieu{ font-size:14.5px; line-height:1.45; color:#47463f; }
#dossierPage .dp-voie{ font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:#6f6a58; margin:18px 0 8px; display:flex; align-items:center; gap:8px; }
#dossierPage .dp-voie i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
#dossierPage .dp-carte{
  margin-top:30px; border-top:1px solid #ddd4c2; padding-top:24px;
}
#dossierPage .dp-bascule{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0 4px;
}
#dossierPage .dp-bascule .dp-bt{ font-size:14.5px; color:#2c2b26; }
#dossierPage .dp-bascule .dp-bs{ font-size:12.5px; color:#6f6a58; margin-top:2px; }
#dossierPage .dp-aller{
  display:block; width:100%; margin-top:16px; padding:15px 18px; border:0; border-radius:9px;
  background:#8a5a3c; color:#faf7f0; font-family:'Cormorant SC', Georgia, serif;
  font-size:15px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
}
#dossierPage .dp-aller:hover{ background:#7a4f34; }
#dossierPage .dp-lien{ display:inline-block; margin-top:18px; font-size:14px; color:#8a5a3c; }

/* La barre du mode parcours, posée au-dessus de la carte */
#parcoursBar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:1200;
  display:none; align-items:center; gap:12px; max-width:calc(100vw - 24px);
  padding:10px 12px 10px 16px; border-radius:999px;
  background:#2c2b26; color:#faf7f0; box-shadow:0 6px 24px rgba(0,0,0,0.3);
}
#parcoursBar.open{ display:flex; }
#parcoursBar .pb-texte{ min-width:0; }
#parcoursBar .pb-sur{
  font-family:'Cormorant SC', Georgia, serif; font-size:10.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:#b8863b;
}
#parcoursBar .pb-titre{
  font-size:13.5px; line-height:1.3; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:46vw;
}
#parcoursBar .pb-retour{
  flex-shrink:0; border:0; border-radius:999px; padding:9px 14px; cursor:pointer;
  background:#faf7f0; color:#2c2b26; font-size:13px; white-space:nowrap;
}
#parcoursBar .pb-quitter{
  flex-shrink:0; border:0; background:none; color:#c9d1c8; font-size:22px;
  line-height:1; cursor:pointer; padding:0 4px;
}
@media (max-width:520px){
  #parcoursBar .pb-titre{ max-width:38vw; }
  #parcoursBar .pb-retour{ padding:9px 11px; font-size:12.5px; }
}

/* ---------- La frise du volet Histoire (20 septembre 2026) ---------- */
.gh-frise-wrap{ position:relative; padding-left:46px; }
.ghf-rail{ position:absolute; left:13px; top:6px; bottom:6px; width:2px; background:#e0d7c2; border-radius:2px; }
.ghf-fill{ width:100%; height:0; background:#9c3b2e; border-radius:2px; transition:height .12s linear; }
.gh-frise-wrap .gh-card{ position:relative; overflow:visible; }
.ghf-dot{ position:absolute; left:-38px; top:14px; width:12px; height:12px; border-radius:50%; background:#faf7f0; border:2px solid #cfc4a8; box-sizing:border-box; z-index:1; }
.ghf-dot span{ position:absolute; left:-16px; top:14px; width:40px; text-align:center; font-family:'Cormorant SC', Georgia, serif; font-size:10.5px; letter-spacing:0.04em; color:#a8a293; white-space:nowrap; }
.gh-card.ghf-passe .ghf-dot span{ color:#9c3b2e; font-weight:700; }
.gh-card.ghf-passe .ghf-dot{ border-color:#9c3b2e; background:#9c3b2e; }
.ghf-curseur{
  position:sticky; top:4px; z-index:3; float:left; margin-left:-46px; margin-bottom:-22px;
  font-family:'Cormorant SC', Georgia, serif; font-weight:700; font-size:11.5px; letter-spacing:0.08em; color:#faf7f0;
  background:#9c3b2e; border-radius:9px; padding:2px 7px; opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.ghf-curseur.show{ opacity:1; }
.gh-frise-wrap .gh-period{ padding-left:0; }
.gh-card{ border:1px solid #e4dccb; border-radius:12px; margin-bottom:12px; background:var(--paper); overflow:hidden; }
.gh-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; cursor:pointer; }
.gh-header:hover{ background:#f3efe1; }
.gh-htext{ flex:1; }
.gh-title{ font-family:'Cormorant SC',serif; font-weight:700; font-size:14.5px; color:var(--granite-dark); margin-bottom:3px; }
.gh-period{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; color:var(--moss); font-weight:600; margin-bottom:4px; }
.gh-teaser{ font-size:12px; color:#5a5646; line-height:1.5; }
.gh-chevron{ flex-shrink:0; width:18px; height:18px; color:var(--bracken); transition:transform 0.2s; }
.gh-card.open .gh-chevron{ transform:rotate(180deg); }
.gh-body{ display:none; padding:0 14px 14px; border-top:1px solid #e9e1cf; }
.gh-card.open .gh-body{ display:block; padding-top:12px; }
.gh-body h5{ font-family:'Cormorant SC',serif; font-size:12px; font-weight:700; color:var(--granite-dark); text-transform:uppercase; letter-spacing:0.5px; margin:14px 0 6px; }
.gh-body h5:first-child{ margin-top:0; }
.gh-body p{ font-size:12.5px; line-height:1.6; color:#5a5646; margin-bottom:8px; }
.gh-sources{ margin-top:2px; }

/* ---------- Frise chronologique (20 septembre 2026) ---------- */
.frise{ position:relative; margin:6px 0 4px; padding-left:18px; border-left:2px solid #d9cfb6; }
.fr-ev{ position:relative; margin:0 0 14px; padding:0 0 0 12px; }
.fr-ev::before{ content:''; position:absolute; left:-24px; top:6px; width:10px; height:10px; border-radius:50%; background:#faf7f0; border:2px solid #9c3b2e; box-sizing:border-box; }
.fr-ev.fr-lieu{ cursor:pointer; }
.fr-ev.fr-lieu:hover .fr-titre{ color:#9c3b2e; }
.fr-an{ font-family:'Cormorant SC', Georgia, serif; font-size:12.5px; letter-spacing:0.08em; color:#9c3b2e; font-weight:700; }
.fr-titre{ font-family:'Cormorant SC', Georgia, serif; font-size:15px; font-weight:700; color: var(--granite-dark); line-height:1.25; margin-top:1px; }
.fr-texte{ font-size:12.5px; line-height:1.55; color:#4a4738; margin-top:2px; }
.fr-lieu-nom{ font-size:11.5px; color:#8a8570; margin-top:3px; }
#dossierPage .frise{ margin:14px 0 6px; padding-left:22px; }
#dossierPage .fr-ev{ margin-bottom:18px; }
#dossierPage .fr-ev::before{ left:-28px; top:8px; }
#dossierPage .fr-an{ font-size:13.5px; }
#dossierPage .fr-titre{ font-size:18px; }
#dossierPage .fr-texte{ font-size:14.5px; line-height:1.6; color:#3f3c30; }
#dossierPage .fr-lieu-nom{ font-size:12.5px; }
.gh-zone-label{ background:transparent; border:0; box-shadow:none; font-family:'Cormorant SC', Georgia, serif; font-weight:700; font-size:13px; letter-spacing:0.06em; color:#2c2b26; text-shadow:0 0 3px #faf7f0, 0 0 3px #faf7f0, 0 0 6px #faf7f0; pointer-events:none; }
.gh-zone-label::before{ display:none; }
/* 27-c (porté de Menhirs) : un nom d'aire long passe à la ligne au lieu de s'étirer sur une seule
   ligne, et un nom qui en chevauche un autre s'efface (voir majEtiquettesZones). */
.gh-zone-label{ white-space:normal; width:max-content; max-width:170px; text-align:center; line-height:1.2; font-size:12px; }
.gh-zone-label.zone-cachee{ display:none; }
.gh-trace-label{ background:transparent; border:0; box-shadow:none; font-family:'Spectral', Georgia, serif; font-style:italic; font-size:11.5px; color:#2c2b26; text-shadow:0 0 3px #faf7f0, 0 0 3px #faf7f0; pointer-events:none; }
.gh-trace-label::before{ display:none; }
.gh-source{ font-size:12px; line-height:1.5; color:#5a5646; margin-bottom:8px; padding-left:12px; border-left:2px solid var(--mist); }
.gh-source .gh-src-auteur{ font-weight:700; color:var(--granite-dark); }
.gh-source .gh-src-titre{ font-style:italic; }
.gh-source .gh-src-annee{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--moss); }
.gh-source .gh-src-note{ display:block; color:#8a8570; font-size:11.5px; margin-top:2px; }
.gh-sitelist .el-item{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.gh-sitelist .el-num{ flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--bracken); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; }
.gh-voie-label{ display:flex; align-items:center; gap:7px; font-family:'Cormorant SC',serif; font-size:13px; font-weight:600; color:#5b5744; margin:14px 0 6px; }
.gh-voie-label:first-child{ margin-top:6px; }
.gh-voie-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.gh-linkback{ margin-top:10px; padding:9px 12px; background:#f1ece0; border-radius:9px; font-size:12px; color:var(--bracken); font-weight:600; cursor:pointer; }
.gh-linkback:hover{ background:#e9e1cf; }
.gh-linkback strong{ color:var(--granite-dark); }

/* ---------- 11 septembre 2026 : l'annonce visible qui double la voix ----------
   Une alerte qui n'existe qu'en son est invérifiable : si la synthèse vocale est
   muette (téléphone en silencieux, voix jamais déverrouillée, casque débranché),
   on ne peut pas savoir si l'alerte a eu lieu ou si l'appli n'a rien vu passer.
   Elle s'écrit donc aussi à l'écran, en haut, au-dessus de la carte. */
#alerteVisible{
  position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 10px);
  transform:translateX(-50%) translateY(-150%); z-index:4000;
  max-width:min(92vw, 430px); box-sizing:border-box;
  background:var(--granite-dark); color:#fdfbf5; padding:11px 16px; border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.32);
  font-size:14.5px; line-height:1.35; font-weight:600; text-align:center;
  pointer-events:none; opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
#alerteVisible.montre{ transform:translateX(-50%) translateY(0); opacity:1; }
#alerteVisible .av-fine{ display:block; font-weight:400; font-size:12px; opacity:.82; margin-top:3px; }
@media (prefers-reduced-motion: reduce){ #alerteVisible{ transition:none; } }

/* ---------- 14 septembre 2026 : l'annonce devient une carte d'alerte ----------
   Deux gros boutons sous le texte, « Y aller » et « Fermer », pensés pour un
   doigt au volant : hauts, larges, contrastés. L'annonce ne s'efface plus
   d'elle-même quand elle concerne un site : elle attend « Fermer ». */
#alerteVisible.avec-boutons{ pointer-events:auto; width:min(92vw, 430px); padding:13px 14px 12px; }
#alerteVisible .av-fine.av-nom{ font-size:15px; font-weight:700; opacity:1; margin-top:4px; }
#alerteVisible .av-actions{ display:none; gap:10px; margin-top:12px; }
#alerteVisible.avec-boutons .av-actions{ display:flex; }
#alerteVisible .av-btn{
  flex:1; min-height:56px; border-radius:12px; border:0; cursor:pointer;
  font-family:inherit; font-size:17px; font-weight:700; letter-spacing:.2px;
}
#alerteVisible .av-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
#alerteVisible .av-aller{ background:var(--gold, #c9a45c); color:#2a2620; }
#alerteVisible .av-fermer{ background:rgba(255,255,255,.14); color:#fdfbf5; border:1.5px solid rgba(255,255,255,.45); }

/* L'état du GPS, sur la carte : ne s'affiche que quand les alertes sont actives. */
#gpsEtat{
  position:absolute; z-index:500; left:16px; bottom:calc(28px + env(safe-area-inset-bottom));
  max-width:calc(100vw - 100px); box-sizing:border-box;
  background:rgba(20,29,27,0.9); color:var(--stone-light, #e9e4d6);
  font-size:11.5px; line-height:1.4; padding:7px 11px; border-radius:10px;
  display:none; pointer-events:none;
}
#gpsEtat.show{ display:block; }
#gpsEtat b{ font-weight:700; }
body.parcours-ouvert #gpsEtat{ bottom:calc(96px + env(safe-area-inset-bottom)); }
/* Au téléphone (21 septembre 2026, 21-g, « les infos de position prennent trop de
   place ») : une seule ligne. Un point de couleur dit si le GPS livre (vert : moins
   de 10 s, orange : moins de 30 s, rouge : plus rien), suivi de la distance du lieu le plus
   proche puis de son nom (un nom trop long est coupé, jamais la distance). Le détail complet (secondes, précision, nombre de positions)
   reste dans l'écran des alertes. En haut, juste sous l'en-tête et à droite du
   rouleau : en bas, elle passait sous les boutons de zoom. */
#gpsEtat .ge-court{ display:none; }
#gpsEtat .ge-point{ display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:6px; vertical-align:1px; background:#d9534f; }
#gpsEtat .ge-point.ok{ background:#5cb85c; }
#gpsEtat .ge-point.lent{ background:#f0ad4e; }
@media (max-width: 700px){
  #gpsEtat{ font-size:11px; padding:4px 9px; border-radius:8px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:calc(100vw - 104px);
    left:30px; top:72px; bottom:auto; }
  body.parcours-ouvert #gpsEtat{ bottom:auto; }
  #gpsEtat .ge-long{ display:none; }
  #gpsEtat .ge-court{ display:inline; }
}
.va-gps{ margin:-4px 0 12px; font-size:12.5px; line-height:1.45; color:#8a8570; }
.va-gps:empty{ display:none; }

/* Le bandeau qui dit la vérité sur l'état des alertes (arrière-plan). */
.va-avert{
  margin:-4px 0 12px; padding:9px 11px; border-radius:9px;
  background:#fdf3e0; color:#7a5a17; border:1px solid #f0dfbb;
  font-size:12.5px; line-height:1.45;
}
.va-avert[hidden]{ display:none; }

/* ---------- Bandeau « Installer l'application » (11 septembre 2026) ----------
   Thierry, téléphone en main : « Chrome ne me le propose pas, seulement de
   télécharger un raccourci. » L'application n'écoutait pas du tout l'événement
   d'installation du navigateur — elle laissait donc toute l'affaire au menu de
   Chrome, qui est l'endroit où personne ne va. Elle l'écoute maintenant, et
   propose elle-même. Un appui, c'est installé.

   Et c'est aussi le meilleur diagnostic qu'on puisse avoir : si ce bandeau
   n'apparaît jamais sur un téléphone, c'est que le navigateur ne considère pas
   le site comme installable — et on sait qu'il faut chercher ailleurs. */
#barreInstall{
  position:fixed; left:10px; right:10px; z-index:3500;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  max-width:520px; margin:0 auto; box-sizing:border-box;
  display:flex; align-items:center; gap:12px;
  padding:11px 12px 11px 15px; border-radius:13px;
  background:var(--granite-dark); color:#fdfbf5;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  animation:biMonte .3s ease-out;
}
@keyframes biMonte{ from{ transform:translateY(130%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){ #barreInstall{ animation:none; } }
#barreInstall[hidden]{ display:none !important; }
#barreInstall .bi-txt{ flex:1; min-width:0; line-height:1.3; }
#barreInstall .bi-txt b{ display:block; font-size:14.5px; font-weight:700; }
#barreInstall .bi-txt span{ display:block; font-size:12px; opacity:.8; margin-top:2px; }
#barreInstall .bi-oui{
  flex-shrink:0; border:0; border-radius:9px; cursor:pointer;
  padding:9px 15px; font-size:14px; font-weight:700;
  background:var(--gold); color:#2a2620; font-family:inherit;
}
#barreInstall .bi-non{
  flex-shrink:0; border:0; background:none; color:#fdfbf5; opacity:.6;
  font-size:22px; line-height:1; cursor:pointer; padding:2px 4px;
}
#barreInstall .bi-non:hover{ opacity:1; }

/* ---------- Choix de l'application de navigation (11 septembre 2026) ----------
   Une feuille qui monte du bas, comme le partage natif du téléphone : c'est le
   geste que tout le monde connaît, et il laisse la fiche visible derrière. */
#choixGps{ position:fixed; inset:0; z-index:5000; display:none; }
#choixGps.montre{ display:block; }
#choixGps .cg-fond{ position:absolute; inset:0; background:rgba(20,19,16,.55); }
#choixGps .cg-feuille{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--paper); color:var(--granite-dark);
  border-radius:16px 16px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.28);
  padding:18px 18px calc(16px + env(safe-area-inset-bottom));
  max-width:520px; margin:0 auto;
  animation:cgMonte .22s ease-out;
}
@keyframes cgMonte{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ #choixGps .cg-feuille{ animation:none; } }
#choixGps h3{ margin:0 0 3px; font-family:'Cormorant SC',serif; font-size:17px; font-weight:700; }
#choixGps .cg-fine{ margin:0 0 13px; font-size:12.5px; color:#7d7864; line-height:1.4; }
#choixGps .cg-appli{
  display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
  padding:12px 14px; margin-bottom:8px; border:1px solid var(--stone); border-radius:11px;
  background:#fff; color:inherit; text-decoration:none;
  font-size:15px; font-weight:600; text-align:left; cursor:pointer;
}
#choixGps .cg-appli:hover{ background:var(--stone-light); }
#choixGps .cg-pastille{
  flex-shrink:0; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:#fff;
}
#choixGps .cg-habituel{ margin-left:auto; font-size:11px; font-weight:600; color:#8a8570; text-transform:lowercase; }
#choixGps .cg-fermer{
  width:100%; box-sizing:border-box; margin-top:6px; padding:11px;
  border:0; border-radius:11px; background:var(--stone); color:var(--granite-dark);
  font-size:14px; font-weight:600; cursor:pointer;
}

/* ---------- Les légendes par familles (1er octobre 2026) : le sommaire reprend .gh-themes ; titres des parties et des familles */
#mythologieContent .mf-partie{ font-family:'Cormorant SC', serif; font-size:15.5px; font-weight:700; color:var(--granite-dark); margin:22px 0 4px; padding-bottom:4px; border-bottom:1px solid #e4dccb; }
#mythologieContent .mf-titre{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; color:var(--moss); margin:14px 0 8px; }
#mythologieContent .mf-nb{ font-weight:400; color:#9a937e; font-size:0.92em; letter-spacing:0; }
.myth-familles .ght-lien{ display:block; }   /* une famille par ligne : leurs noms sont longs */
.myth-familles .ght-lien .mf-nb{ font-size:11.5px; }

/* ---------- Grandes histoires : part publique (3 octobre 2026) ---------- */
.gh-lecture{ font-size:10.5px; letter-spacing:0.6px; text-transform:uppercase; color:#8a7a52; margin:-2px 0 6px; }
.gh-pres{ margin:0 0 16px; padding:12px 13px 4px; background:var(--paper); border:1px solid #e4dccb; border-radius:10px; }
.gh-pres h3{ font-family:'Cormorant SC', serif; font-size:15.5px; font-weight:700; color:var(--granite-dark); margin:0 0 4px; }
.gh-appel{ padding:10px 0 12px; border-top:1px dashed #e4dccb; cursor:pointer; overflow:hidden; }
.gh-appel:first-of-type, .gh-pres h3 + .gh-appel{ border-top:0; }
.gh-appel .gh-title{ font-family:'Cormorant SC', serif; font-size:15.5px; font-weight:700; color:var(--granite-dark); line-height:1.25; }
.gh-appel .gh-teaser{ font-size:13px; color:#5f5a4c; line-height:1.45; }
.gh-appel:hover .gh-title, .gh-appel:focus-visible .gh-title{ color:#9c3b2e; }
#dossierPage .dp-lecture{ font-family:'Cormorant SC', Georgia, serif; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#8a7a52; margin-top:8px; }
#dossierPage .dp-suite-cle{ clear:both; margin-top:30px; padding:18px 20px; background:#f3efe4; border:1px solid #ddd4c2; border-left:4px solid #8a5a3c; border-radius:8px; }
#dossierPage .dp-suite-cle h3{ margin:0 0 6px; }
#dossierPage .dp-suite-cle p{ margin:0 0 4px; font-size:15px; line-height:1.5; }
#dossierPage .dp-suite{ clear:both; margin-top:30px; border-top:1px solid #ddd4c2; padding-top:18px; }
#dossierPage .dp-suite h3{ margin:0 0 6px; }
#dossierPage .dp-suite .gh-appel{ padding:12px 0 14px; }
#dossierPage .dp-suite .gh-appel .gh-title{ font-size:19px; }
#dossierPage .dp-suite .gh-appel .gh-teaser{ font-size:14.5px; }
#dossierPage .dp-suite .gh-couv{ max-width:150px; }
#dossierPage .dp-partager{ background:transparent; color:#8a5a3c; border:1px solid #8a5a3c; margin-top:22px; }
#dossierPage .dp-partager:hover{ background:#f3efe4; }