@property --rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ============================================================
   Thème « Indigo nuit » — bleu nuit profond, accent indigo-violet,
   titres sans-serif gras, coins arrondis, esprit app moderne.
   ============================================================ */
:root {
  --ink: #0b0d17;
  --ink-soft: #161a2b;
  --paper: #eef0f6;
  --paper-dim: #9298ad;
  --line: #232841;
  --accent: #6d6cf7;
  --accent-soft: rgba(109,108,247,0.14);
  --safelight: #2b2e5c;
  --ok: #4ade80;
  --ko: #f87171;
  --serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Thème clair : mêmes variables, valeurs inversées. Activé par le
   bouton ☀️/🌙 flottant (script commun enteteTheme() dans lib.php), le
   choix est mémorisé par le navigateur (localStorage). ---- */
[data-theme="clair"] {
  --ink: #eef0f7;
  --ink-soft: #ffffff;
  --paper: #191c2e;
  --paper-dim: #5b6178;
  --line: #d7dbe9;
  --accent: #5352e6;
  --accent-soft: rgba(83,82,230,0.12);
  --safelight: #e4e5f9;
  --ok: #15803d;
  --ko: #b91c1c;
}
[data-theme="clair"] .grain { display: none; }
[data-theme="clair"] .ambiance .lueur { opacity: 0.13; }

/* Bouton flottant de bascule clair/sombre */
#bascule-theme {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink-soft); border: 1px solid var(--line);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, border-color 0.3s;
}
#bascule-theme:hover { transform: scale(1.08); border-color: var(--accent); }
body.lightbox-ouverte #bascule-theme { display: none; }

/* Accès discret à l'espace admin, en pied de page des pages publiques */
.lien-admin { text-decoration: none; font-size: 0.8rem; opacity: 0.35; transition: opacity 0.3s; }
.lien-admin:hover { opacity: 1; }

/* Easter egg : avalanche d'emojis + petit message (script commun) */
.flocon-egg { position: fixed; top: -6vh; z-index: 90; pointer-events: none; animation: chute-egg 4.6s linear forwards; }
@keyframes chute-egg { to { transform: translateY(114vh) rotate(340deg); } }
.toast-egg {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 91;
  background: var(--ink-soft); border: 1px solid var(--accent); color: var(--paper);
  border-radius: 12px; padding: 0.9rem 1.4rem; font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); animation: toast-egg-pop 0.4s ease;
  white-space: nowrap;
}
@keyframes toast-egg-pop { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Ambiance : lueurs douces + halo qui suit le curseur ----
   Coupées pendant que la lightbox est ouverte (masquées de toute façon, et
   le flou animé en continu est coûteux en GPU — surtout en plein écran). */
body.lightbox-ouverte .ambiance, body.lightbox-ouverte .grain { display: none; }
/* Bloque le défilement de la page derrière la visionneuse ouverte */
body.lightbox-ouverte { overflow: hidden; }
.ambiance { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambiance .lueur { position: absolute; width: 38vw; height: 38vw; border-radius: 50%; filter: blur(70px); opacity: 0.22; will-change: transform; }
.ambiance .l1 { background: radial-gradient(circle, var(--accent), transparent 68%); top: -14%; left: -10%; animation: derive1 30s ease-in-out infinite; }
.ambiance .l2 { background: radial-gradient(circle, #4f46e5, transparent 68%); bottom: -18%; right: -14%; animation: derive2 36s ease-in-out infinite; }
.ambiance .l3 { background: radial-gradient(circle, #2b6cb0, transparent 68%); top: 40%; left: 58%; animation: derive3 42s ease-in-out infinite; }
@keyframes derive1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw,9vh) scale(1.16); } }
@keyframes derive2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8vw,-6vh) scale(1.1); } }
@keyframes derive3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw,7vh) scale(1.2); } }

.grain {
  position: fixed; inset: -60%; z-index: 3; pointer-events: none; opacity: 0.02; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.8s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0,0); } 25% { transform: translate(-2%,3%); }
  50% { transform: translate(2%,-2%); } 75% { transform: translate(-1%,-3%); } 100% { transform: translate(0,0); }
}

.spot-page {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(360px circle at var(--sx,50%) var(--sy,50%), var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity 0.5s ease;
}
.spot-page.actif { opacity: 1; }

header.bar, .sub, .albums, .grid, .charger-plus, .empty, footer.bar { position: relative; z-index: 2; }

header.bar {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 1rem; padding: 4vh 6vw 3vh;
}
header.bar .title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem,4vw,2.9rem); letter-spacing: -0.035em; }
header.bar .title em { font-style: normal; font-weight: 700; color: var(--accent); }
header.bar nav { display: flex; flex-wrap: wrap; gap: 1.2rem 1.9rem; }
header.bar nav a, header.bar .back, header.bar nav .courant {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--paper-dim); text-decoration: none; transition: color 0.3s;
}
header.bar nav a:hover, header.bar .back:hover { color: var(--paper); }
.sub {
  padding: 0 6vw 2vh; color: var(--paper-dim); font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* Enchaînement d'un album au suivant, en bas de page. Les albums étant
   triés du plus récent au plus ancien, « ← » remonte vers le plus récent :
   on garde le sens de lecture de la galerie. */
.suite-albums {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  margin: 4vh 6vw 0; padding-top: 2.5rem; border-top: 1px solid var(--line);
}
.suite-lien {
  display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none;
  padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color 0.25s, transform 0.25s;
}
.suite-lien.suiv { text-align: right; }
.suite-lien:hover { border-color: var(--accent); transform: translateY(-2px); }
.suite-sens {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim);
}
.suite-nom { font-family: var(--serif); font-size: 1.05rem; color: var(--paper); }
.suite-index {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  text-decoration: none; color: var(--paper-dim);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.25s;
}
.suite-index:hover { color: var(--accent); }
.suite-index small { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: none; }
/* Sur téléphone les trois colonnes deviennent illisibles : on empile. */
@media (max-width: 640px) {
  .suite-albums { grid-template-columns: 1fr; gap: 0.7rem; }
  .suite-lien.suiv { text-align: left; }
  .suite-index { order: 3; margin-top: 0.4rem; }
}
.sortie-info { padding: 0 6vw 2.5vh; position: relative; z-index: 2; }
.sortie-ligne {
  color: var(--paper-dim); font-size: 0.85rem; letter-spacing: 0.02em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem;
}
.sortie-ligne .sep { color: var(--line); }
.sortie-notes {
  margin-top: 0.7rem; max-width: 70ch; color: var(--paper-dim);
  font-size: 0.98rem; line-height: 1.65;
}
.badge-difficulte {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.5rem; color: var(--paper-dim);
}
.badge-difficulte.facile { border-color: var(--ok); color: var(--ok); }
.badge-difficulte.modere { border-color: var(--accent); color: var(--accent); }
.badge-difficulte.difficile { border-color: var(--ko); color: var(--ko); }
.recherche-zone { padding: 0 6vw 2vh; position: relative; z-index: 2; }
.recherche {
  width: 100%; max-width: 360px; padding: 0.75rem 1rem; background: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 12px; color: var(--paper);
  font-family: var(--sans); font-size: 0.9rem; transition: border-color 0.3s, box-shadow 0.3s;
}
.recherche::placeholder { color: var(--paper-dim); }
.recherche:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.outils-galerie { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.outils-galerie .recherche { flex: 1 1 260px; }
.filtres-annee { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtre-annee, .sortie-hasard {
  min-height: 42px; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--ink-soft); color: var(--paper-dim); font: 600 .72rem/1 var(--sans);
  letter-spacing: .06em; cursor: pointer; transition: color .25s, border-color .25s, background .25s;
}
.filtre-annee:hover, .sortie-hasard:hover { color: var(--paper); border-color: var(--accent); }
.filtre-annee.actif { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.sortie-hasard { color: var(--accent); margin-left: auto; }
.album[hidden] { display: none; }
.empty-recherche {
  padding: 0 6vw 4vh; color: var(--paper-dim);
  position: relative; z-index: 2;
}
.onglets {
  display: flex; gap: 1.6rem; padding: 3vh 6vw 0; position: relative; z-index: 2;
  border-bottom: 1px solid var(--line);
}
.onglet {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--paper-dim); font-family: var(--serif); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em;
  padding: 0 0.1rem 0.9rem; margin-bottom: -1px; cursor: pointer;
  display: flex; align-items: baseline; gap: 0.55rem;
  transition: color 0.3s, border-color 0.3s;
}
.onglet:hover { color: var(--paper); }
.onglet.actif { color: var(--paper); border-color: var(--accent); }
.onglet-cnt {
  font-family: var(--sans); font-weight: 500; font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-dim);
}
.onglet.actif .onglet-cnt { color: var(--accent); }
.panneau-media { padding-top: 0.5vh; }

/* ---- Albums : grille de cartes modernes, alignées ---- */
.albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
  padding: 1vh 6vw 8vh;
}
.album {
  position: relative; display: block; text-decoration: none; color: var(--paper);
  aspect-ratio: 4 / 3; cursor: pointer;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.album .cadre-album {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  background: var(--ink-soft); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.album:hover .cadre-album { box-shadow: 0 24px 55px rgba(0,0,0,0.6); border-color: var(--accent); }
.album img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.92; transition: transform 0.7s ease, opacity 0.5s ease;
}
.album:hover img { transform: scale(1.05); opacity: 1; }
.album .halo {
  position: absolute; inset: -40%; z-index: 1; pointer-events: none;
  background: radial-gradient(220px circle at var(--x,50%) var(--y,50%), rgba(150,150,255,0.30), transparent 65%);
  opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: soft-light;
}
.album:hover .halo { opacity: 1; }
.album .anneau {
  position: absolute; inset: 3px; z-index: 2; border-radius: 14px; pointer-events: none; padding: 2px;
  background: conic-gradient(from var(--rot,0deg), transparent 0%, var(--accent) 18%, transparent 38%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.45s ease;
  animation: tourner 3s linear infinite paused;
}
.album:hover .anneau { opacity: 1; animation-play-state: running; }
@keyframes tourner { to { --rot: 360deg; } }
.album .meta {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1.4rem;
  background: linear-gradient(to top, rgba(6,8,18,0.9), transparent 60%);
  border-radius: 16px;
}
.album .nom { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.02em; }
.album .cnt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-dim); margin-top: 0.4rem; }
.album .periode { font-size: 0.72rem; color: var(--paper-dim); opacity: 0.85; margin-top: 0.15rem; }
.album:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Grille de médias (dans un album) : révélation, tilt, halo ---- */
.grid { column-count: 4; column-gap: 14px; padding: 0 6vw 8vh; }
@media (min-width: 1500px) { .grid { column-count: 5; } }
@media (max-width: 1000px) { .grid { column-count: 3; } }
@media (max-width: 680px) { .grid { column-count: 2; } }
@media (max-width: 480px) { .grid { column-count: 1; } .albums { grid-template-columns: 1fr; } }
.item {
  position: relative; display: block; width: 100%; margin: 0 0 14px;
  break-inside: avoid; border: none; padding: 0; background: var(--ink-soft);
  cursor: pointer; overflow: hidden; border-radius: 12px;
  opacity: 0; transform: translateY(28px) scale(0.97); will-change: transform;
  transition: opacity 0.75s cubic-bezier(.2,.8,.2,1), transform 0.75s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.35s ease;
}
.item.visible { opacity: 1; transform: translateY(0) scale(1); }
.item:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.5); }
.item img, .item video {
  display: block; width: 100%; height: auto;
  transition: transform 0.6s ease, opacity 0.6s ease; opacity: 0.95;
}
.item:hover img, .item:hover video { transform: scale(1.03); opacity: 1; }
.item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.item.is-video::before {
  content: "▶"; position: absolute; bottom: 12px; left: 12px; z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: #fff; background: var(--accent); border-radius: 50%; opacity: 0.95;
}
.item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(170px circle at var(--x,50%) var(--y,50%), rgba(120,120,255,0.26), transparent 70%);
  opacity: 0; transition: opacity 0.35s ease; mix-blend-mode: soft-light;
}
.item:hover::after { opacity: 1; }

.charger-plus { display: flex; justify-content: center; padding: 0 6vw 8vh; margin-top: -3vh; }
.btn-plus {
  background: transparent; color: var(--paper-dim); border: 1px solid var(--line);
  padding: 0.85rem 2rem; border-radius: 12px; font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; cursor: pointer; transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.btn-plus:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.empty {
  text-align: center; color: var(--paper-dim); padding: 12vh 6vw;
  font-size: 1.25rem;
}
.empty small { display: block; margin-top: 1rem; font-family: var(--sans);
  font-size: 0.8rem; letter-spacing: 0.06em; }
.empty a { color: var(--accent); text-decoration: none; }

/* ---- Lightbox : fondu doux, pellicule ---- */
.lightbox {
  position: fixed; inset: 0; background: var(--ink);
  display: none; align-items: center; justify-content: center; flex-direction: column;
  z-index: 100; padding: 4vh 4vw;
}
.lightbox.open { display: flex; }
.lightbox .voile {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(6,7,14,0.5), rgba(6,7,14,0.92) 85%);
}
.lightbox .flash { position: absolute; inset: 0; z-index: 6; background: var(--safelight); opacity: 0; pointer-events: none; }
.lightbox .flash.jouer { animation: flash-veilleuse 0.6s ease-out; }
@keyframes flash-veilleuse { 0% { opacity: 0.4; } 100% { opacity: 0; } }

.lightbox .zone { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.lightbox .stage { position: relative; max-width: 100%; max-height: 100%; }
.lightbox .cadre {
  position: relative; border-radius: 10px; overflow: hidden;
  opacity: 0; transform: scale(0.97); transition: opacity 0.45s ease, transform 0.45s ease;
}
.lightbox .cadre.actif { opacity: 1; transform: scale(1); }
.lightbox img, .lightbox video {
  display: block; max-width: 92vw; max-height: 80vh; box-shadow: 0 30px 90px rgba(0,0,0,0.65);
  transform-origin: center center;
}
/* Pendant le zoom, la photo peut déborder du cadre (sinon elle serait rognée) */
.lightbox.zoome .cadre { overflow: visible; border-radius: 0; }
.lightbox.zoome .voile { pointer-events: none; }

/* ---- Pellicule (navigation en filmstrip) ---- */
.pellicule-zone { position: relative; z-index: 7; width: min(94vw, 1060px); margin-top: 1.6vh; }
.pellicule {
  display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  /* fondu progressif des vignettes sur les bords, au lieu d'une coupe nette */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.pellicule::-webkit-scrollbar { display: none; } /* ascenseur natif masqué */
.cadre-frame {
  position: relative; flex: 0 0 auto; width: 70px; height: 47px; border-radius: 8px; overflow: hidden;
  cursor: pointer; opacity: 0.5; transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  background: var(--ink-soft); background-size: cover; background-position: center; border: none; padding: 0;
}
.cadre-frame:hover { opacity: 0.85; transform: translateY(-2px); }
.cadre-frame.courant { opacity: 1; transform: scale(1.07); box-shadow: 0 0 0 2px var(--accent); }
.compteur {
  text-align: center; margin-top: 0.6rem; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--paper-dim);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* Rappel discret des raccourcis clavier de la visionneuse. Sans écran
   tactile uniquement : au doigt, il n'y a pas de clavier à annoncer. */
.indice-clavier {
  text-align: center; margin-top: 0.45rem; font-size: 0.66rem;
  color: var(--paper-dim); opacity: 0.75; letter-spacing: 0.04em;
}
.indice-clavier kbd {
  font-family: var(--sans); font-size: 0.62rem;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  padding: 0.1rem 0.35rem; margin: 0 0.05rem; color: var(--paper);
}
@media (hover: none), (max-width: 640px) { .indice-clavier { display: none; } }

/* La croix ne mesurait que 17 x 29 px : la cible la plus utilisée de la
   visionneuse était aussi la plus difficile à viser au doigt. On lui donne
   44 px, le minimum recommandé pour le tactile, sans grossir le glyphe. */
.lightbox .close {
  position: absolute; z-index: 7; top: 3vh; right: 4vw; background: none; border: none;
  color: var(--paper); font-size: 1.8rem; cursor: pointer; line-height: 1; opacity: 0.8;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s, transform 0.3s;
}
.lightbox .close:hover { opacity: 1; transform: rotate(90deg); }
.lightbox .outils {
  position: absolute; z-index: 7; top: 3vh; left: 4vw; display: flex; gap: 0.6rem; align-items: center;
}
.lightbox .outils button, .lightbox .outils a {
  background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--paper);
  line-height: 1; width: 44px; height: 44px; display: flex;
  align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
  opacity: 0.8; transition: opacity 0.3s, border-color 0.3s, color 0.3s, background 0.3s;
}
.lightbox .outils button:hover, .lightbox .outils a:hover { opacity: 1; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lightbox .nav {
  position: absolute; z-index: 7; top: 42%; transform: translateY(-50%); background: none; border: none;
  color: var(--paper); font-size: 2.2rem; cursor: pointer; padding: 1rem; opacity: 0.55;
  transition: opacity 0.3s;
}
.lightbox .nav:hover { opacity: 1; }
.lightbox .prev { left: 1vw; }
.lightbox .next { right: 1vw; }

/* ---- Masquage des contrôles après quelques secondes d'inactivité ---- */
.lightbox .close, .lightbox .outils, .lightbox .nav, .lightbox .pellicule-zone {
  transition: opacity 0.4s ease;
}
.lightbox.masque-controles .close,
.lightbox.masque-controles .outils,
.lightbox.masque-controles .nav,
.lightbox.masque-controles .pellicule-zone { opacity: 0; pointer-events: none; }
.lightbox.masque-controles { cursor: none; }
@media (prefers-reduced-motion: reduce) {
  .lightbox.masque-controles .close,
  .lightbox.masque-controles .outils,
  .lightbox.masque-controles .nav,
  .lightbox.masque-controles .pellicule-zone { opacity: 1; pointer-events: auto; }
  .lightbox.masque-controles { cursor: auto; }
}

footer.bar {
  padding: 2.5rem 6vw; border-top: 1px solid var(--line);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}
footer.bar a { color: var(--paper-dim); text-decoration: none; transition: color 0.3s; }
footer.bar a:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .item, .album { opacity: 1 !important; transform: none !important; }
  .grain, .spot-page { display: none !important; }
  img.lazy { filter: none !important; }
}

/* ---- Chargement progressif : révélation nette (flou -> net) ---- */
img.lazy {
  opacity: 0; background: linear-gradient(110deg, var(--ink-soft) 8%, #242a44 18%, var(--ink-soft) 33%);
  background-size: 200% 100%; animation: shimmer 1.7s ease-in-out infinite;
  filter: saturate(0.7) brightness(0.75) blur(9px); transform: scale(1.05);
  min-height: 120px;
  transition: opacity 0.6s ease, filter 1s cubic-bezier(.16,.9,.2,1), transform 1s cubic-bezier(.16,.9,.2,1);
}
img.lazy.loaded {
  opacity: 0.95; animation: none; background: none;
  filter: none; transform: scale(1);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.item:hover img.lazy.loaded { opacity: 1; transition: transform 0.45s ease, opacity 0.3s ease; transform: scale(1.03); }
.album img.lazy.loaded { opacity: 0.92; }
.video-fallback {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; width: 100%; color: var(--paper-dim);
  background: var(--ink-soft);
}

/* ============================================================
   ALLÈGEMENT MOBILE
   Le décor du site est joli mais coûteux pour le GPU d'un téléphone :
   trois cercles de 38vw floutés à 70px et animés en continu, plus un
   grain plein écran repeint 1,25 fois par seconde en mix-blend-mode.
   Sur un PC ça ne se voit pas ; sur un mobile ça chauffe, ça saccade
   et ça vide la batterie. On garde donc l'ambiance en version sobre :
   les mêmes dégradés, sans flou ni animation (rendu quasi identique,
   le dégradé étant déjà dégressif), et sans grain (opacité 0.02, donc
   invisible en pratique). Le halo de curseur n'a aucun sens au doigt.
   ============================================================ */
@media (max-width: 820px) {
  .ambiance .lueur {
    filter: none; opacity: 0.32; animation: none; will-change: auto;
  }
  .grain { display: none; }
  .spot-page { display: none; }
}

/* Barre compacte sur petit écran.
   Le menu repliable lui-même (bouton « Menu », repli de la liste) et le
   bandeau d'atelier sont stylés par enteteCommun() : ces règles doivent
   aussi s'appliquer à la page d'accueil, qui ne charge pas cette feuille. */
@media (max-width: 640px) {
  header.bar, footer.bar { padding-left: 6vw; padding-right: 6vw; gap: 0.5rem 1rem; }
  header.bar { padding-top: 3vh; padding-bottom: 2vh; align-items: center; }
  header.bar .title { font-size: clamp(1.5rem, 7.5vw, 2.1rem); }
  footer.bar nav { gap: 0.2rem 1.1rem; }
}

/* ============================================================
   ANTBU DES BOIS — identité 2026
   Une cabane contemporaine dans la nuit : bleu sapin, lumière de feu,
   grands titres éditoriaux et surfaces plus calmes.
   ============================================================ */
:root {
  --ink: #08110f;
  --ink-soft: #101c19;
  --paper: #f3f0e8;
  --paper-dim: #a6ada5;
  --line: rgba(214, 222, 210, 0.14);
  --accent: #f2a65a;
  --accent-soft: rgba(242, 166, 90, 0.13);
  --safelight: #442b1b;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ombre-carte: 0 22px 65px rgba(0, 0, 0, 0.32);
  --rayon: 18px;
}
[data-theme="clair"] {
  --ink: #f2efe6;
  --ink-soft: #fffdf8;
  --paper: #17221d;
  --paper-dim: #677169;
  --line: rgba(28, 51, 40, 0.14);
  --accent: #b85e25;
  --accent-soft: rgba(184, 94, 37, 0.10);
  --safelight: #f2dec7;
  --ombre-carte: 0 18px 50px rgba(51, 62, 52, 0.12);
}
body {
  background-image:
    radial-gradient(circle at 12% -8%, rgba(41, 102, 76, 0.22), transparent 35rem),
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 35rem);
}
.ambiance .l1 { background: radial-gradient(circle, #2f7458, transparent 68%); }
.ambiance .l2 { background: radial-gradient(circle, #bb6334, transparent 68%); }
.ambiance .l3 { background: radial-gradient(circle, #24516c, transparent 68%); }

header.bar {
  width: min(1440px, 100%); margin-inline: auto;
  padding: clamp(1.4rem, 4vh, 3rem) clamp(1.2rem, 6vw, 5.5rem) clamp(1rem, 2.5vh, 2rem);
  align-items: center;
}
header.bar .title {
  font-size: clamp(2rem, 4.2vw, 3.7rem); line-height: .95;
  font-weight: 500; letter-spacing: -.045em;
}
header.bar .title::after {
  content: '✦'; display: inline-block; margin-left: .4em;
  color: var(--accent); font-family: var(--sans); font-size: .28em; vertical-align: top;
}
header.bar nav { gap: .45rem; align-items: center; }
header.bar nav a, header.bar nav .courant, header.bar .back {
  letter-spacing: .1em; border: 1px solid transparent; border-radius: 999px;
  padding: .55rem .85rem; transition: color .25s, background .25s, border-color .25s;
}
header.bar nav a:hover { color: var(--paper); background: var(--accent-soft); }
header.bar nav .courant { border-color: var(--line); background: var(--ink-soft); padding-bottom: .55rem; }

.sub, .sortie-info, .recherche-zone, .onglets,
.albums, .grid, main.materiel, main.idees, main.visites {
  width: min(1440px, 100%); margin-inline: auto;
}
.sub { font-family: var(--serif); font-size: 1rem; }

.recherche, .rech-mat, .form-idee input[type=text], .form-idee textarea,
input[type=text], input[type=date], input[type=number], input[type=url], select, textarea {
  border-radius: 12px; border-color: var(--line); background: rgba(16, 28, 25, .82);
}
[data-theme="clair"] .recherche, [data-theme="clair"] .rech-mat,
[data-theme="clair"] input, [data-theme="clair"] select, [data-theme="clair"] textarea {
  background: rgba(255,253,248,.9);
}

.albums { gap: clamp(1rem, 2.4vw, 2.2rem); }
.album .cadre-album, .item, .fiche, .idee, .form-idee, .sortie-wiki,
.suite-lien, .tuiles, .tuile {
  border-color: var(--line); background-color: var(--ink-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
}
.album .cadre-album { border-radius: var(--rayon); }
.album:hover .cadre-album, .fiche[href]:hover, .idee:hover, .suite-lien:hover {
  border-color: rgba(242,166,90,.55); box-shadow: var(--ombre-carte);
}
.album .meta { padding: 1.15rem .25rem 0; }
.album .nom { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 500; }
.album .cnt, .album .periode { letter-spacing: .08em; }
.item { border-radius: 14px; }
.item:hover { box-shadow: var(--ombre-carte); }

.badge-difficulte, .chip, .fp-btn, .btn-plus, .btn-mini, .btn-vote {
  border-radius: 999px;
}
.chip.actif, .fp-btn.actif, .btn-vote:hover:not(:disabled) {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
#bascule-theme, #retour-haut {
  border-color: var(--line); background: rgba(16,28,25,.88); box-shadow: 0 10px 35px rgba(0,0,0,.3);
}
[data-theme="clair"] #bascule-theme, [data-theme="clair"] #retour-haut { background: rgba(255,253,248,.92); }

footer.bar {
  width: min(1440px, calc(100% - 12vw)); margin: 2rem auto 0;
  padding-inline: 0; text-transform: none; letter-spacing: .04em;
}

@media (max-width: 640px) {
  header.bar { align-items: center; }
  header.bar .title { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  header.bar nav { width: 100%; }
  header.bar nav a, header.bar nav .courant { padding: .48rem .65rem; }
  .albums { grid-template-columns: 1fr; }
  .album .cadre-album { border-radius: 14px; }
  footer.bar { width: calc(100% - 12vw); }
}