/* ==========================================================
   CAZAUBON · BARBOTAN — Identité « patrimoine moderne »
   Feuille de styles commune à toutes les pages
   Palette tirée du lieu : eau thermale, armagnac, papier d'archive
   ========================================================== */
:root{
  --papier:      #F5F0E4;   /* fond principal, papier ancien */
  --papier-2:    #ECE4D2;   /* fond alterné */
  --carton:      #FBF8F0;   /* cartes / encarts */
  --encre:       #251F16;   /* texte principal, encre sépia-noire */
  --sepia:       #7C6A50;   /* texte secondaire, légendes */
  --eau:         #2F6D62;   /* accent principal : eau thermale */
  --eau-fonce:   #1C463F;   /* accent sombre */
  --armagnac:    #A05E2C;   /* accent secondaire : armagnac */
  --laiton:      #B98A3E;   /* laiton : poignées, filets dorés */
  --ligne:       #D8CDB4;

  --f-display:'Fraunces', Georgia, serif;
  --f-texte:'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --larg: 1120px;
  --rayon: 14px;
  --ombre: 0 10px 30px rgba(37,31,22,.10);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--f-texte);
  background:var(--papier);
  color:var(--encre);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color:var(--eau); }
:focus-visible{ outline:3px solid var(--eau); outline-offset:3px; border-radius:4px; }

.conteneur{ width:min(var(--larg), 92%); margin-inline:auto; }

/* ---------- Typographie ---------- */
h1,h2,h3{ font-family:var(--f-display); font-weight:500; line-height:1.12; letter-spacing:-.01em; }
.surtitre{
  font-family:var(--f-texte); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--eau);
  display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem;
}
.surtitre::before{ content:""; width:42px; height:2px; background:var(--laiton); }
.titre-section{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom:.7rem; }
.chapo{ color:var(--sepia); max-width:62ch; font-size:1.05rem; }

section{ padding:clamp(4rem, 8vw, 6.5rem) 0; }
.fond-alt{ background:var(--papier-2); }

/* ---------- Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
}
.nav-int{
  width:min(var(--larg),92%); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 0; gap:1rem; flex-wrap:wrap;
}
.marque{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--encre); }
.marque-logo{
  width:42px; height:42px; object-fit:contain; flex:none;
}
.marque-nom{ font-family:var(--f-display); font-size:1.02rem; line-height:1.15; }
.marque-nom small{ display:block; font-family:var(--f-texte); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sepia); }
.nav-liens{ display:flex; gap:1.4rem; list-style:none; flex-wrap:wrap; }
.nav-liens a{
  text-decoration:none; color:var(--encre); font-weight:500; font-size:.92rem;
  padding:.3rem 0; border-bottom:2px solid transparent; transition:border-color .2s, color .2s;
}
.nav-liens a:hover{ color:var(--eau); border-bottom-color:var(--laiton); }
.nav-liens a[aria-current="page"]{ color:var(--eau); border-bottom-color:var(--laiton); }
@media (max-width:880px){
  .nav-int{ justify-content:center; }
  .nav-liens{ gap:1rem; justify-content:center; }
  .nav-liens a{ font-size:.85rem; }
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:600; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:999px; transition:transform .15s, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-plein{ background:var(--laiton); color:#241C0E; }
.btn-plein:hover{ background:#CDA054; }
.btn-contour{ border:1.5px solid #CFE0D5; color:#F4EEDD; }
.btn-contour:hover{ background:rgba(244,238,221,.12); }
.btn-eau{ background:var(--eau); color:#F4EEDD; }
.btn-eau:hover{ background:var(--eau-fonce); }

/* ---------- Héros (accueil) ---------- */
.heros{
  position:relative; min-height:86vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--eau-fonce);
}
.heros .panorama{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.heros::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,19,13,.35) 0%, rgba(23,19,13,.45) 40%, rgba(23,19,13,.85) 100%);
}
.heros-contenu{
  position:relative; z-index:2; width:min(var(--larg),92%); margin-inline:auto;
  padding:6rem 0 4.5rem; color:#F4EEDD;
  text-shadow:0 2px 14px rgba(23,19,13,.65), 0 1px 3px rgba(23,19,13,.8);
}
.heros-contenu .btn{ text-shadow:none; }
.heros .surtitre{ color:#CFE0D5; }
.heros .surtitre::before{ background:var(--laiton); }
.heros h1{ font-size:clamp(1.7rem, 4.6vw, 3.9rem); font-weight:400; }
.heros h1 .titre-ligne1{ display:block; white-space:nowrap; }
.heros h1 .titre-ligne2{ display:block; }
@media (max-width:560px){
  .heros h1 .titre-ligne1{ white-space:normal; }
}
.heros h1 em{ font-style:italic; color:#D9C48A; }
.heros p{ margin-top:1.2rem; max-width:56ch; color:#E4DCC6; font-size:1.08rem; }
.heros-actions{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- En-tête des sous-pages ---------- */
.entete-page{
  background:var(--eau-fonce); color:#F4EEDD;
  padding:clamp(3.2rem, 6vw, 4.6rem) 0 clamp(2.6rem, 5vw, 3.6rem);
  position:relative; overflow:hidden;
}
.entete-page::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:280px; height:280px; border-radius:50%;
  border:2px solid rgba(185,138,62,.45);
  box-shadow:0 0 0 40px rgba(185,138,62,.12);
  pointer-events:none;
}
.entete-page .surtitre{ color:#CFE0D5; }
.entete-page h1{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); font-weight:400; max-width:22ch; }
.entete-page .chapo{ color:#D8D2BC; margin-top:.9rem; }
.fil-ariane{
  font-size:.8rem; margin-bottom:1.6rem; color:#A9BCAE;
}
.fil-ariane a{ color:#CFE0D5; text-decoration:none; }
.fil-ariane a:hover{ text-decoration:underline; }
.fil-ariane span::before{ content:"› "; margin:0 .3rem; color:var(--laiton); }

/* ---------- Aperçus de sections (accueil) ---------- */
.grille-apercus{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:1.5rem; margin-top:3rem;
}
.carte-apercu{
  background:var(--carton); border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:1.8rem 1.6rem; box-shadow:var(--ombre);
  display:flex; flex-direction:column; gap:.7rem;
  text-decoration:none; color:var(--encre);
  transition:transform .2s, border-color .2s;
}
.carte-apercu:hover{ transform:translateY(-5px); border-color:var(--laiton); }
.apercu-icone{
  width:52px; height:52px; border-radius:12px;
  background:var(--papier-2); border:1px solid var(--ligne);
  display:grid; place-items:center; color:var(--eau);
  font-size:1.5rem;
}
.carte-apercu h3{ font-size:1.25rem; }
.carte-apercu p{ color:var(--sepia); font-size:.93rem; flex:1; }
.apercu-lien{
  font-weight:600; font-size:.9rem; color:var(--eau);
  display:inline-flex; align-items:center; gap:.4rem;
}
.carte-apercu:hover .apercu-lien{ color:var(--armagnac); }

/* ---------- Frise chronologique ---------- */
.frise{ position:relative; margin-top:3.5rem; }
.frise::before{
  content:""; position:absolute; left:11px; top:6px; bottom:6px; width:3px;
  transform:translateX(-50%);
  background:#C9BA96;
  border-radius:2px;
}
.jalon{ position:relative; padding:0 0 2.8rem 3rem; max-width:70ch; }
.jalon:last-child{ padding-bottom:.4rem; }
.jalon::before{
  content:""; position:absolute; left:11px; top:.5rem;
  width:18px; height:18px; border-radius:50%;
  box-sizing:border-box; transform:translateX(-50%);
  background:var(--papier); border:4px solid var(--eau);
}
.jalon.jalon-tradition::before{ border-color:var(--armagnac); }
.jalon-date{ font-family:var(--f-display); font-style:italic; font-size:1.35rem; color:var(--eau-fonce); }
.jalon h3{ font-size:1.18rem; margin:.15rem 0 .35rem; font-weight:600; }
.jalon p{ color:var(--sepia); font-size:.98rem; }
.jalon-memoire{
  border-left:3px solid var(--armagnac);
  background:var(--carton); border-radius:0 var(--rayon) var(--rayon) 0;
  padding:1.1rem 1.3rem; margin-top:.6rem;
}
.jalon-memoire p{ color:var(--encre); }

/* ---------- Comparateurs Hier / Aujourd'hui ---------- */
.grille-comp{ display:grid; gap:3.2rem; margin-top:3rem; }
.comp-bloc h3{ font-size:1.35rem; margin-bottom:.3rem; }
.comp-bloc .comp-legende{ color:var(--sepia); font-size:.95rem; margin-bottom:1rem; max-width:70ch; }

.comparateur{
  position:relative; border-radius:var(--rayon); overflow:hidden;
  box-shadow:var(--ombre); border:1px solid var(--ligne);
  aspect-ratio:16/9; background:var(--papier-2);
  touch-action:none;
}
.comparateur .calque{ position:absolute; inset:0; }
.comparateur .calque svg{ width:100%; height:100%; }
.comparateur .calque-avant{ clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.comparateur input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0; z-index:5;
}
.poignee{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px;
  background:var(--laiton); transform:translateX(-50%); z-index:3;
  pointer-events:none;
}
/* Signature : poignée « loupe » en laiton */
.poignee::after{
  content:"⟨ ⟩";
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #E3C077, var(--laiton) 58%, #8A6425);
  border:2px solid #F1E4C4;
  box-shadow:0 4px 14px rgba(23,19,13,.45);
  display:grid; place-items:center;
  color:#2E230F; font-weight:700; font-size:.85rem; letter-spacing:-2px;
  font-family:var(--f-texte);
}
.comparateur:has(input:focus-visible) .poignee::after{ outline:3px solid #fff; outline-offset:2px; }
.etiquette{
  position:absolute; bottom:12px; z-index:4; pointer-events:none;
  font-family:var(--f-display); font-style:italic; font-size:1rem;
  background:rgba(23,19,13,.68); color:#F1E9D4;
  padding:.25rem .85rem; border-radius:999px;
}
.etiquette-avant{ left:12px; }
.etiquette-apres{ right:12px; }
.comp-aide{
  margin-top:.7rem; font-size:.85rem; color:var(--sepia);
  display:flex; align-items:center; gap:.5rem;
}
.comp-aide::before{ content:"↔"; color:var(--laiton); font-weight:700; }

/* ---------- Figures locales ---------- */
.grille-figures{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:1.6rem; margin-top:3rem;
}
.carte-figure{
  background:var(--carton); border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:2rem 1.7rem 1.8rem; box-shadow:var(--ombre);
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform .2s;
}
.carte-figure:hover{ transform:translateY(-4px); }
.medaillon{
  width:128px; height:128px; border-radius:50%;
  border:3px solid var(--laiton); overflow:hidden;
  background:var(--papier-2);
}
.medaillon svg{ width:100%; height:100%; }
.carte-figure h3{ font-size:1.3rem; }
.figure-epoque{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--armagnac); font-weight:600;
}
.carte-figure p{ color:var(--sepia); font-size:.95rem; }

/* ---------- Bloc contribution ---------- */
.bloc-contribuer{
  margin-top:3.5rem; background:var(--eau-fonce); color:#E4DCC6;
  border-radius:var(--rayon); padding:2.4rem 2.2rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem;
  box-shadow:var(--ombre);
}
.bloc-contribuer h3{ color:#F2ECD9; font-size:1.4rem; margin-bottom:.4rem; }
.bloc-contribuer p{ font-size:.95rem; max-width:60ch; }
.bloc-contribuer > div{ flex:1 1 380px; }

/* ---------- Patrimoine & lieux ---------- */
.grille-lieux{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:1.4rem; margin-top:3rem;
}
.carte-lieu{
  background:var(--carton); border:1px solid var(--ligne); border-radius:var(--rayon);
  overflow:hidden; box-shadow:var(--ombre); transition:transform .2s;
}
.carte-lieu:hover{ transform:translateY(-4px); }
.carte-lieu .visuel{ aspect-ratio:16/10; background:var(--papier-2); }
.carte-lieu .visuel svg{ width:100%; height:100%; }
.carte-lieu .contenu{ padding:1.2rem 1.3rem 1.4rem; }
.carte-lieu h3{ font-size:1.12rem; margin-bottom:.3rem; }
.carte-lieu p{ font-size:.9rem; color:var(--sepia); }

/* ---------- Galerie d'archives (cartes postales) ---------- */
.grille-galerie{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.8rem; margin-top:3rem;
}
.carte-postale{
  background:#FDFAF2; padding:14px 14px 2px;
  transform:rotate(var(--rot,0deg)); transition:transform .25s;
  /* ombre qui épouse la découpe (box-shadow serait rognée par le masque) */
  filter:drop-shadow(0 6px 12px rgba(37,31,22,.22));
  /* Bord dentelé de timbre-poste :
     couche 1 = perforations rondes le long des bords,
     couche 2 = rectangle plein qui protège tout le centre.
     Les deux couches s'additionnent : seuls les bords sont crantés. */
  --dent:6px;
  mask:
    radial-gradient(var(--dent), #0000 98%, #000) round
      calc(-1.5*var(--dent)) calc(-1.5*var(--dent)) / calc(4*var(--dent)) calc(4*var(--dent)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3*var(--dent)) calc(100% - 3*var(--dent));
}
.carte-postale:hover{ transform:rotate(0deg) scale(1.03); }
.carte-postale .visuel{ aspect-ratio:4/3; overflow:hidden; background:var(--papier-2); border:1px solid var(--ligne); }
.carte-postale .visuel svg{ width:100%; height:100%; }
.carte-postale figcaption{
  font-family:var(--f-display); font-style:italic; font-size:.92rem;
  color:var(--sepia); text-align:center; padding:.7rem .4rem .9rem;
}
.note-galerie{
  margin-top:2.4rem; font-size:.85rem; color:var(--sepia);
  border-top:1px dashed var(--ligne); padding-top:1rem; max-width:70ch;
}

/* ---------- Navigation bas de page (précédent / suivant) ---------- */
.nav-pages{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:3.5rem; flex-wrap:wrap;
}
.nav-pages a{
  text-decoration:none; font-weight:600; font-size:.95rem;
  color:var(--eau); border:1.5px solid var(--ligne); border-radius:999px;
  padding:.7rem 1.4rem; background:var(--carton);
  transition:border-color .2s, transform .15s;
}
.nav-pages a:hover{ border-color:var(--laiton); transform:translateY(-2px); }

/* ---------- Pied de page ---------- */
footer{ background:var(--eau-fonce); color:#D9E4DA; padding:3.5rem 0 2.5rem; }
footer .conteneur{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
footer h4{ font-family:var(--f-display); font-weight:500; font-size:1.15rem; color:#F2ECD9; margin-bottom:.7rem; }
footer p, footer li{ font-size:.92rem; }
footer ul{ list-style:none; }
footer a{ color:#CFE0D5; }
.filet-or{ height:3px; background:linear-gradient(90deg, var(--laiton), transparent); border:0; margin-bottom:2.5rem; grid-column:1/-1; }
.copyright{ grid-column:1/-1; border-top:1px solid rgba(217,228,218,.2); margin-top:1.5rem; padding-top:1.4rem; font-size:.8rem; color:#A9BCAE; }

/* ---------- Apparitions au défilement ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover, .carte-figure:hover, .carte-lieu:hover, .carte-postale:hover,
  .carte-apercu:hover, .nav-pages a:hover{ transform:none; }
}

/* ---------- Badges de fiabilité (page Histoire) ---------- */
.fiab{
  display:inline-block; vertical-align:middle;
  font-family:var(--f-texte); font-weight:600; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.18rem .6rem; border-radius:999px; margin-left:.4rem;
  white-space:nowrap;
}
.fiab-etabli{ background:var(--eau); color:#F1E9D4; }
.fiab-tradition{ background:transparent; color:var(--armagnac); border:1.5px solid var(--armagnac); }

/* ---------- Le vrai du faux (page Histoire) ---------- */
.grille-vraifaux{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:1.4rem; margin-top:3rem;
}
.carte-vraifaux{
  background:var(--carton); border:1px solid var(--ligne); border-radius:var(--rayon);
  border-top:4px solid var(--armagnac);
  padding:1.5rem 1.5rem 1.4rem; box-shadow:var(--ombre);
}
.vraifaux-verdict{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--armagnac); margin-bottom:.4rem;
}
.carte-vraifaux h3{ font-size:1.08rem; margin-bottom:.45rem; font-style:italic; font-weight:500; }
.carte-vraifaux p{ font-size:.9rem; color:var(--sepia); }

/* ---------- Liste des sources (page Histoire) ---------- */
.liste-sources{
  margin-top:2.6rem; list-style:none; max-width:78ch;
}
.liste-sources li{
  padding:.85rem 0 .85rem 1.6rem; position:relative;
  border-bottom:1px dashed var(--ligne);
  font-size:.92rem; color:var(--sepia);
}
.liste-sources li::before{
  content:"❧"; position:absolute; left:0; top:.8rem; color:var(--laiton);
}
.liste-sources a{ color:var(--eau); font-weight:500; }

/* ---------- Portraits réels dans les médaillons (page Figures) ---------- */
.medaillon{ position:relative; }
.medaillon .portrait{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}

/* ---------- Photos réelles des lieux (page Patrimoine) ---------- */
.carte-lieu .visuel{ position:relative; }
.carte-lieu .photo-lieu{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}

/* ---------- Cartes cliquables (figures & lieux) ---------- */
a.carte-figure, a.carte-lieu{
  text-decoration:none; color:inherit; cursor:pointer;
}
a.carte-figure:hover, a.carte-lieu:hover{ border-color:var(--laiton); }
a.carte-figure .apercu-lien{ margin-top:auto; }
a.carte-lieu .apercu-lien{ display:inline-block; margin-top:.6rem; }
a.carte-figure:hover .apercu-lien, a.carte-lieu:hover .apercu-lien{ color:var(--armagnac); }

/* ---------- Fiches de détail (pages figure-* et lieu-*) ---------- */
.fiche{
  display:grid; grid-template-columns:auto 1fr; gap:2.6rem;
  align-items:start;
}
.fiche-portrait{
  width:220px; height:220px; border-radius:50%;
  border:4px solid var(--laiton); overflow:hidden;
  background:var(--papier-2); box-shadow:var(--ombre);
  position:sticky; top:90px;
}
.fiche-portrait img{ width:100%; height:100%; object-fit:cover; }
.fiche-banniere{
  grid-column:1 / -1;
  border-radius:var(--rayon); overflow:hidden;
  border:1px solid var(--ligne); box-shadow:var(--ombre);
  aspect-ratio:21/9; background:var(--papier-2);
}
.fiche-banniere img{ width:100%; height:100%; object-fit:cover; }
.fiche-banniere ~ .fiche-texte{
  grid-column:1 / -1;
  max-width:76ch;
  width:100%;
  margin-inline:auto;
}
.fiche-texte{ max-width:72ch; }
.fiche-texte p{ margin-bottom:1.2rem; font-size:1.02rem; }
.fiche-texte p:first-child::first-letter{
  font-family:var(--f-display); font-size:3.2em; float:left;
  line-height:.85; padding:.05em .12em 0 0; color:var(--eau);
}
@media (max-width:760px){
  .fiche{ grid-template-columns:1fr; }
  .fiche-portrait{ position:static; margin-inline:auto; width:180px; height:180px; }
}

/* ---------- Visionneuse plein écran (galerie) ---------- */
.carte-postale{ cursor:zoom-in; }
.visionneuse{
  position:fixed; inset:0; z-index:100;
  background:rgba(23,19,13,.93);
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
}
.visionneuse[hidden]{ display:none; }
.visionneuse-cadre{
  background:#FDFAF2; padding:16px 16px 0;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-width:min(1100px, 92vw);
  display:flex; flex-direction:column;
}
.visionneuse-image{ display:flex; align-items:center; justify-content:center; }
.visionneuse-image svg,
.visionneuse-image img{
  max-width:100%; max-height:76vh;
  width:auto; height:auto; display:block;
}
.visionneuse-image svg{ width:min(1000px, 88vw); height:auto; }
.visionneuse-legende{
  font-family:var(--f-display); font-style:italic; font-size:1.05rem;
  color:var(--sepia); text-align:center; padding:.9rem .5rem 1.1rem;
}
.visionneuse-fermer, .visionneuse-prec, .visionneuse-suiv{
  position:fixed; z-index:101;
  width:52px; height:52px; border-radius:50%;
  border:2px solid #F1E4C4; cursor:pointer;
  background:radial-gradient(circle at 32% 30%, #E3C077, var(--laiton) 58%, #8A6425);
  color:#2E230F; font-size:1.4rem; font-weight:700;
  display:grid; place-items:center;
  transition:transform .15s;
}
.visionneuse-fermer:hover, .visionneuse-prec:hover, .visionneuse-suiv:hover{ transform:scale(1.08); }
.visionneuse-fermer{ top:1.2rem; right:1.2rem; font-size:1.1rem; }
.visionneuse-prec{ left:1.2rem; top:50%; transform:translateY(-50%); }
.visionneuse-suiv{ right:1.2rem; top:50%; transform:translateY(-50%); }
.visionneuse-prec:hover{ transform:translateY(-50%) scale(1.08); }
.visionneuse-suiv:hover{ transform:translateY(-50%) scale(1.08); }
@media (max-width:600px){
  .visionneuse{ padding:1rem; }
  .visionneuse-prec{ left:.5rem; } .visionneuse-suiv{ right:.5rem; }
  .visionneuse-prec, .visionneuse-suiv{ width:42px; height:42px; }
}

/* ---------- Titres de thèmes (galerie) ---------- */
.titre-theme{
  font-size:1.4rem; margin-top:3.2rem;
  display:flex; align-items:center; gap:1rem;
}
.titre-theme::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--laiton), transparent);
}
.grille-galerie{ margin-top:1.6rem; }

/* ---------- Loupe de la visionneuse ---------- */
.visionneuse-image{
  overflow:hidden; touch-action:none;
  cursor:zoom-in;
}
.visionneuse-image.zoome{ cursor:grab; }
.visionneuse-image.zoome:active{ cursor:grabbing; }
.zoom-cadre{
  display:flex; align-items:center; justify-content:center;
  will-change:transform; transform-origin:center center;
}
.zoom-cadre img, .zoom-cadre svg{
  max-width:100%; max-height:76vh; width:auto; height:auto;
  user-select:none; -webkit-user-drag:none;
}
.zoom-cadre svg{ width:min(1000px, 88vw); height:auto; }
.visionneuse-zoom{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:101;
  display:flex; flex-direction:column; gap:.6rem;
}
.visionneuse-zoom button{
  width:46px; height:46px; border-radius:50%;
  border:2px solid #F1E4C4; cursor:pointer;
  background:radial-gradient(circle at 32% 30%, #E3C077, var(--laiton) 58%, #8A6425);
  color:#2E230F; font-size:1.15rem; font-weight:700;
  display:grid; place-items:center;
  transition:transform .15s;
}
.visionneuse-zoom button:hover{ transform:scale(1.08); }
.visionneuse-zoom .zoom-reset{ font-size:.72rem; letter-spacing:.02em; }
@media (max-width:600px){
  .visionneuse-zoom{ right:.5rem; bottom:.8rem; }
  .visionneuse-zoom button{ width:40px; height:40px; }
}

/* ---------- Protection douce des images ---------- */
/* Empêche la sélection et le glisser-déposer des images d'archives */
.carte-postale img, .zoom-cadre img, .zoom-cadre svg,
.fiche-portrait img, .fiche-banniere img, .medaillon img,
.carte-lieu .photo-lieu, .heros .panorama{
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
}
/* Filigrane discret dans la visionneuse, qui suit le zoom */
.zoom-cadre{ position:relative; }
.zoom-cadre::after{
  content:"© Collection Cazaubon-Barbotan";
  position:absolute; right:10px; bottom:10px;
  font-family:var(--f-texte); font-size:11px; letter-spacing:.06em;
  color:rgba(255,255,255,.55);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  pointer-events:none;
}

/* ---------- Comparateurs : images réelles dans les calques ---------- */
.calque img{
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  pointer-events:none;
}