/* ============================================================
   Royaume des Vivants — galerie de la nature
   ============================================================ */

:root{
  --noir:#0c0e0d;
  --noir-2:#131715;
  --noir-3:#1b201d;
  --creme:#f2ede4;
  --creme-dim:rgba(242,237,228,.62);
  --creme-faint:rgba(242,237,228,.34);
  --or:#e0a44a;
  --rose:#e0679a;
  --vert:#7fa87a;
  --ligne:rgba(242,237,228,.13);

  --r:16px;
  --r-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --titre:"Fraunces", Georgia, serif;
  --texte:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max:1300px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--noir);
  color:var(--creme);
  font-family:var(--texte);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* iOS (Safari et Chrome, qui partage son moteur) : pas de flash gris à l'appui,
   pas d'attente de double-tap, et on garde la main sur les appuis longs. */
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
::selection{background:var(--or);color:var(--noir)}

.container{
  width:100%;max-width:var(--max);margin-inline:auto;
  padding-inline:calc(26px + env(safe-area-inset-left,0px)) calc(26px + env(safe-area-inset-right,0px));
}

h1,h2{font-family:var(--titre);font-weight:300;line-height:1.06;margin:0;letter-spacing:-.025em}

.eyebrow{
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  font-weight:600;color:var(--or);margin:0 0 18px;
}

/* ---------- Barre de progression ---------- */

.progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--vert),var(--or),var(--rose));
  z-index:300;transition:width .1s linear;
}

/* ---------- Boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:999px;
  border:1px solid var(--creme);background:var(--creme);color:var(--noir);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--or);border-color:var(--or);color:var(--noir);transform:translateY(-3px)}
.btn--ghost{background:transparent;color:var(--creme);border-color:var(--creme-faint)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:transparent;color:var(--or);border-color:var(--or)}
.btn--sm{padding:10px 20px;font-size:13.5px}

/* ---------- En-tête ---------- */

.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:20px 0;
  transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:rgba(12,14,13,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .4s var(--ease);
}
.header.is-stuck::before{opacity:1}
.header.is-stuck{
  padding:11px 0;
  border-bottom-color:var(--ligne);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{display:flex;align-items:center;gap:12px}
.logo__mark{width:32px;height:32px;flex:none;color:var(--or)}
.logo__mark svg{width:100%;height:100%;animation:tourne 34s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.logo__text{font-family:var(--titre);font-size:18px;line-height:1.05;display:flex;flex-direction:column}
.logo__text em{font-size:11px;font-style:italic;letter-spacing:.2em;text-transform:uppercase;color:var(--creme-dim)}

.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:14.5px;font-weight:500;position:relative;display:inline-flex;align-items:baseline;gap:8px}
.nav a i{font-family:var(--titre);font-style:italic;font-size:12px;color:var(--or);opacity:.85}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:1.5px;width:24px;margin-inline:auto;background:var(--creme);transition:all .35s var(--ease)}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:100vh;      /* repli : iOS < 15.4 ne connaît pas svh */
  min-height:100svh;
  display:flex;align-items:center;
  padding:150px 0 120px;overflow:hidden;
}
.hero__slides{position:absolute;inset:0}
.hero__slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.1);
  transition:opacity 2.4s ease-in-out;
}
.hero__slides img.is-on{opacity:1;animation:derive 11s linear forwards}
@keyframes derive{from{transform:scale(1.1)}to{transform:scale(1.02)}}

.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(95deg, rgba(12,14,13,.94) 0%, rgba(12,14,13,.76) 44%, rgba(12,14,13,.22) 82%),
    linear-gradient(to top, var(--noir) 2%, rgba(12,14,13,.1) 46%);
}
.hero__content{position:relative;max-width:720px}

.hero__title{font-size:clamp(3.2rem,9vw,7.2rem);margin-bottom:26px}
.hero__title em{font-style:italic;color:var(--or);font-weight:300}
.hero__text{font-size:clamp(1rem,1.6vw,1.18rem);max-width:50ch;color:var(--creme-dim);margin:0 0 34px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.hero__count{
  margin:40px 0 0;padding-top:22px;border-top:1px solid var(--ligne);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-faint);
}
.hero__count strong{color:var(--creme);font-weight:600}

.hero__scroll{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  width:24px;height:40px;border:1px solid var(--creme-faint);border-radius:999px;
  display:grid;place-items:center;z-index:2;
}
.hero__scroll span{width:3px;height:3px;border-radius:50%;background:var(--creme);animation:goutte 2s var(--ease) infinite}
@keyframes goutte{0%{transform:translateY(-7px);opacity:0}40%{opacity:1}100%{transform:translateY(8px);opacity:0}}

/* ---------- Seuil ---------- */

.seuil{padding:clamp(80px,11vw,140px) 0;border-bottom:1px solid var(--ligne)}
.seuil__inner{max-width:760px;margin-inline:auto;text-align:center}
.seuil__lead{
  font-family:var(--titre);font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.35;
  margin:0 0 28px;
}
.seuil__text{color:var(--creme-dim);margin:0 auto;max-width:60ch}
.seuil__hint{
  margin-top:44px;padding:20px 24px;
  border:1px solid var(--ligne);border-radius:var(--r);
  display:flex;gap:18px;align-items:center;text-align:left;
  background:var(--noir-2);
}
.seuil__hint span{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);font-weight:700;flex:none;
}
.seuil__hint p{margin:0;font-size:14px;color:var(--creme-dim)}
kbd{
  display:inline-block;padding:2px 7px;margin:0 1px;
  border:1px solid var(--ligne);border-radius:6px;
  background:var(--noir-3);font-family:var(--texte);font-size:12px;color:var(--creme);
}

/* ---------- Chapitres ---------- */

.chapitre{padding:clamp(80px,11vw,150px) 0}
.chapitre--alt{background:var(--noir-2)}

.chapitre__head{max-width:640px;margin-bottom:clamp(40px,6vw,70px)}
.chapitre__num{
  font-family:var(--titre);font-style:italic;font-size:14px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:0 0 14px;
}
.chapitre__title{font-size:clamp(2.2rem,5.4vw,4.2rem);margin-bottom:24px}
.chapitre__title em{display:block;font-style:italic;color:var(--creme-dim)}
.chapitre__text{color:var(--creme-dim);margin:0}
.chapitre__meta{
  margin:26px 0 0;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--creme-faint);
}

/* ---------- Galerie (mosaïque en colonnes) ---------- */

.galerie{column-count:4;column-gap:18px}

.vignette-col{
  -webkit-column-break-inside:avoid;
  break-inside:avoid;
  display:block;margin:0 0 18px;
}

.vignette{
  position:relative;display:block;width:100%;
  border-radius:var(--r);overflow:hidden;
  background:var(--noir-3);
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.vignette.is-visible{opacity:1;transform:none}
.vignette img{
  width:100%;height:auto;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
  filter:saturate(.94);
}
/* Le survol n'est appliqué QUE sur les appareils qui en ont un. Sur iPhone,
   un simple appui laissait sinon la vignette figée en état survolé (zoom et
   voile bloqués) jusqu'à ce qu'on touche ailleurs. */
.vignette:focus-visible img{transform:scale(1.05);filter:saturate(1.06)}
@media (hover:hover){
  .vignette:hover img{transform:scale(1.05);filter:saturate(1.06)}
}

/* Le dégradé seul ne suffisait pas : sur une photo claire (ciel, sable, mur
   blanc) le titre blanc devenait illisible. Dégradé plus haut et plus dense,
   plus une ombre portée qui garantit le contraste quel que soit le fond. */
.vignette__voile{
  position:absolute;inset:auto 0 0 0;
  padding:64px 18px 16px;
  background:linear-gradient(to top,
    rgba(8,10,9,.94) 0%,
    rgba(8,10,9,.88) 38%,
    rgba(8,10,9,.62) 66%,
    rgba(8,10,9,.24) 85%,
    rgba(8,10,9,0) 100%);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  text-align:left;pointer-events:none;
}
.vignette:focus-visible .vignette__voile{opacity:1;transform:none}
@media (hover:hover){
  .vignette:hover .vignette__voile{opacity:1;transform:none}
}
.vignette__legende{
  display:block;font-family:var(--titre);font-size:1.05rem;line-height:1.25;
  text-shadow:0 1px 3px rgba(8,10,9,.9),0 0 16px rgba(8,10,9,.65);
}
.vignette__cat{
  display:block;margin-top:4px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  text-shadow:0 1px 3px rgba(8,10,9,.95),0 0 12px rgba(8,10,9,.7);
}
.vignette__loupe{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(12,14,13,.6);backdrop-filter:blur(6px);
  display:grid;place-items:center;font-size:14px;
  opacity:0;transform:scale(.8);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.vignette:focus-visible .vignette__loupe{opacity:1;transform:scale(1)}
@media (hover:hover){
  .vignette:hover .vignette__loupe{opacity:1;transform:scale(1)}
}

.galerie__vide{
  grid-column:1/-1;color:var(--creme-dim);
  border:1px dashed var(--ligne);border-radius:var(--r);
  padding:40px;text-align:center;
}
.galerie__vide code{
  display:inline-block;margin-top:8px;padding:4px 10px;border-radius:6px;
  background:var(--noir-3);font-size:13.5px;color:var(--or);
}

/* ---------- Respiration ---------- */

.respiration{margin:0;padding:clamp(70px,9vw,120px) 0;text-align:center;border-block:1px solid var(--ligne)}
.respiration blockquote{
  margin:0;font-family:var(--titre);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.25;
}

/* ---------- Fin ---------- */

.fin{padding:clamp(80px,11vw,150px) 0;text-align:center;border-top:1px solid var(--ligne)}
.fin__inner{max-width:660px;margin-inline:auto}
.fin__title{font-size:clamp(2.1rem,5vw,3.6rem);margin-bottom:22px}
.fin__title em{display:block;font-style:italic;color:var(--or)}
.fin__text{color:var(--creme-dim);margin:0 0 34px}
.fin__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- Pied de page ---------- */

.footer{background:var(--noir-2);padding:56px 0 30px;border-top:1px solid var(--ligne)}
.footer__inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--ligne);
}
.footer__nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14.5px}
.footer__nav a{color:var(--creme-dim);transition:color .3s}
.footer__nav a:hover{color:var(--or)}
.footer__bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:22px;padding-bottom:env(safe-area-inset-bottom,0px);font-size:12.5px;color:var(--creme-faint);
}
.footer__bottom p{margin:0}
.signature{display:inline-flex;align-items:center;gap:6px;color:var(--creme-dim)}
.signature strong{color:var(--creme);font-weight:600}
.signature .coeur{
  color:var(--rose);font-style:normal;
  display:inline-block;animation:battement 2.4s var(--ease) infinite;
}
@keyframes battement{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.22)}
  28%{transform:scale(1)}
  42%{transform:scale(1.16)}
  56%{transform:scale(1)}
}

/* ---------- Retour en haut ---------- */

.haut{
  position:fixed;z-index:90;
  right:calc(24px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:50px;height:50px;border-radius:50%;
  border:1px solid var(--ligne);
  background:rgba(19,23,21,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--creme);font-size:19px;line-height:1;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease),
             visibility .4s var(--ease),border-color .3s,color .3s;
}
.haut.is-visible{opacity:1;visibility:visible;transform:none}
.haut:hover,.haut:focus-visible{border-color:var(--or);color:var(--or);transform:translateY(-3px)}
body.viewer-open .haut,body.nav-open .haut{opacity:0;visibility:hidden}

/* ---------- Visionneuse ---------- */

.viewer[hidden]{display:none}

.viewer{
  /* Hauteurs FIXES pour la barre et le panneau de texte : c'est ce qui garantit
     que chaque photographie est cadrée exactement pareil, quelle que soit la
     longueur de sa description, et que le texte ne passe jamais sur l'image. */
  /* Les encoches et la barre d'accueil de l'iPhone sont intégrées aux deux
     hauteurs : tous les calculs qui en dépendent restent justes. */
  --barre:calc(64px + env(safe-area-inset-top,0px));
  --panneau:calc(206px + env(safe-area-inset-bottom,0px));
  --marge-scene:24px;

  position:fixed;inset:0;z-index:200;
  background:rgba(8,10,9,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;
  grid-template-rows:var(--barre) minmax(0,1fr) var(--panneau);
  opacity:0;transition:opacity .35s var(--ease);
}
.viewer.is-open{opacity:1}

.viewer__bar{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--barre);gap:16px;
  padding:env(safe-area-inset-top,0px) calc(22px + env(safe-area-inset-right,0px)) 0 calc(22px + env(safe-area-inset-left,0px));
}
.viewer__count{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme-faint)}
.viewer__tools{display:flex;gap:10px}
.viewer__tool{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--ligne);background:rgba(242,237,228,.05);
  font-size:13px;transition:all .3s var(--ease);
}
.viewer__tool:hover{border-color:var(--or);color:var(--or)}
.viewer__tool--close{padding:9px 14px;font-size:15px}
.viewer__tool.is-playing{border-color:var(--or);color:var(--or)}

.viewer__stage{
  position:relative;
  display:grid;place-items:center;
  padding:0 96px;min-height:0;
}
/* Signale une photo qui met du temps à arriver (la précédente reste à l'écran
   pendant ce temps-là, on ne se retrouve jamais devant une scène vide). */
.viewer__stage.is-loading::after{
  content:"";
  position:absolute;top:16px;right:22px;
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--ligne);border-top-color:var(--or);
  animation:tourne .8s linear infinite;
}
/* max-height en % ne s'applique pas ici (la rangée en 1fr n'est pas une
   hauteur « définie » pour l'image) : la photo débordait sous le panneau et le
   texte se peignait par-dessus. On calcule donc la hauteur disponible. */
.viewer__stage img{
  max-width:100%;
  max-height:calc(100vh - var(--barre) - var(--panneau) - var(--marge-scene));
  max-height:calc(100dvh - var(--barre) - var(--panneau) - var(--marge-scene));
  width:auto;height:auto;object-fit:contain;
  border-radius:8px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  /* sur iPhone, l'appui long ouvrait « Enregistrer l'image » au milieu d'un
     balayage : le glissement d'une photo à l'autre en devenait imprévisible */
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  touch-action:pan-y;
}
.viewer__stage img.is-swapping{opacity:0;transform:scale(.985)}
.viewer__stage img{transition:opacity .3s var(--ease),transform .45s var(--ease)}

.viewer__panel{
  height:var(--panneau);
  display:flex;flex-direction:column;justify-content:center;
  padding:16px 26px calc(24px + env(safe-area-inset-bottom,0px));
  max-width:760px;margin-inline:auto;text-align:center;
  overflow-y:auto;overscroll-behavior:contain;
}
.viewer__chapitre{
  margin:0 0 8px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or);
}
.viewer__legende{
  font-family:var(--titre);font-weight:300;font-size:clamp(1.4rem,3vw,2rem);
  margin:0 0 10px;letter-spacing:-.02em;
}
.viewer__desc{margin:0;color:var(--creme-dim);font-size:15.5px;line-height:1.7}

.viewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--ligne);background:rgba(242,237,228,.05);
  font-size:28px;line-height:0;display:grid;place-items:center;
  transition:all .3s var(--ease);z-index:2;
}
.viewer__nav:hover{background:rgba(242,237,228,.14);border-color:var(--or)}
.viewer__nav--prev{left:18px}
.viewer__nav--next{right:18px}

.viewer__timer{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--or);
}
.viewer__timer.is-running{transition:width linear}

body.viewer-open{overflow:hidden}

/* Grand écran : le texte passe en colonne, la photographie prend toute la
   hauteur. Le cadrage ne bouge toujours pas d'une image à l'autre. */
@media (min-width:1100px){
  .viewer{
    --colonne:360px;
    grid-template-rows:var(--barre) minmax(0,1fr);
    grid-template-columns:minmax(0,1fr) var(--colonne);
  }
  .viewer__bar{grid-column:1 / -1}
  .viewer__stage{grid-column:1;grid-row:2;padding:0 84px 26px}
  .viewer__stage img{
    max-height:calc(100vh - var(--barre) - 52px);
    max-height:calc(100dvh - var(--barre) - 52px);
  }
  .viewer__panel{
    grid-column:2;grid-row:2;
    height:auto;max-height:100%;max-width:none;margin:0;
    text-align:left;padding:0 44px 40px 4px;
    justify-content:center;
  }
  .viewer__legende{font-size:clamp(1.5rem,2vw,2.05rem)}
  .viewer__nav--next{right:calc(var(--colonne) + 18px)}
}

/* ---------- Apparition ---------- */

.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */

@media (max-width:1180px){ .galerie{column-count:3} }

@media (max-width:820px){
  body{font-size:16px}
  .galerie{column-count:2;column-gap:14px}
  .vignette-col{margin-bottom:14px}
  .burger{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    padding:40px 34px;background:var(--noir-2);
    border-left:1px solid var(--ligne);
    transform:translateX(100%);transition:transform .5s var(--ease);
  }
  .nav.is-open{transform:translateX(0)}
  .nav a{font-family:var(--titre);font-size:22px}
  body.nav-open{overflow:hidden}
  .burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.is-open span:nth-child(2){opacity:0}
  .burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .hero{padding:130px 0 100px}
  .hero__scroll{display:none}
  .footer__inner{flex-direction:column;align-items:flex-start}

  /* Le texte prend plus de lignes sur un écran étroit : on lui réserve une
     bande plus haute, toujours de hauteur fixe pour garder le même cadrage. */
  .viewer{
    --barre:calc(56px + env(safe-area-inset-top,0px));
    --panneau:calc(min(288px,36dvh) + env(safe-area-inset-bottom,0px));
    --marge-scene:16px;
  }
  .viewer__stage{padding:0 14px}
  .viewer__nav{
    width:42px;height:42px;font-size:22px;top:auto;transform:none;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
  }
  .viewer__nav--prev{left:calc(14px + env(safe-area-inset-left,0px))}
  .viewer__nav--next{right:calc(14px + env(safe-area-inset-right,0px))}
  .viewer__panel{padding:14px 20px calc(66px + env(safe-area-inset-bottom,0px))}
  .viewer__desc{font-size:14.5px}
  .viewer__tool span{display:none}

  /* la légende reste lisible sans survol sur écran tactile */
  .vignette__voile{opacity:1;transform:none;padding-top:40px}
  .vignette__loupe{display:none}
}

@media (max-width:820px){
  .haut{
    right:calc(16px + env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:44px;height:44px;font-size:17px;
  }
}

/* Petit téléphone : l'écran est court, la description prend plus de lignes.
   On lui donne un peu plus de bande pour qu'elle tienne sans défilement. */
@media (max-width:820px) and (max-height:720px){
  .viewer{--panneau:min(312px,50dvh)}
}

@media (max-width:460px){
  /* deux colonnes : 45 photos sur une seule colonne faisaient une page
     interminable sur un telephone */
  .galerie{column-count:2;column-gap:10px}
  .vignette-col{margin-bottom:10px}
  .vignette__voile{padding:44px 12px 12px}
  .vignette__legende{font-size:.86rem;line-height:1.2}
  .vignette__cat{font-size:9px;letter-spacing:.16em;margin-top:3px}
  .seuil__hint{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Téléphone en paysage : la hauteur devient la ressource rare (390 px sur un
   iPhone couché). On bascule sur la même disposition en colonnes que le grand
   écran, sinon il ne reste qu'une centaine de pixels pour la photo. */
/* Sur mobile, le flou plein écran de la visionneuse coûte cher à chaque image
   et hache le balayage : le fond est déjà opaque à 97 %, on s'en passe. */
@media (hover:none){
  .viewer{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgb(8,10,9);
  }
}

@media (orientation:landscape) and (max-height:560px){
  .viewer{
    --barre:calc(46px + env(safe-area-inset-top,0px));
    --colonne:min(300px,40vw);
    grid-template-rows:var(--barre) minmax(0,1fr);
    grid-template-columns:minmax(0,1fr) var(--colonne);
  }
  .viewer__bar{grid-column:1 / -1}
  .viewer__tool{padding:7px 13px;font-size:12.5px}
  .viewer__stage{grid-column:1;grid-row:2;padding:0 10px 12px}
  .viewer__stage img{
    max-height:calc(100vh - var(--barre) - 22px);
    max-height:calc(100dvh - var(--barre) - 22px);
  }
  .viewer__panel{
    grid-column:2;grid-row:2;
    height:auto;max-height:100%;max-width:none;margin:0;
    text-align:left;justify-content:center;
    padding:0 calc(16px + env(safe-area-inset-right,0px)) 12px 0;
  }
  .viewer__chapitre{font-size:9.5px;margin-bottom:5px}
  .viewer__legende{font-size:1.12rem;margin-bottom:6px}
  .viewer__desc{font-size:12.8px;line-height:1.55}
  .viewer__nav{top:50%;bottom:auto;transform:translateY(-50%);width:38px;height:38px;font-size:20px}
  .viewer__nav--prev{left:calc(8px + env(safe-area-inset-left,0px))}
  .viewer__nav--next{right:calc(var(--colonne) + 8px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.vignette{opacity:1;transform:none}
}