/* ==========================================================================
   Site public — les couleurs et polices viennent des Réglages du site
   (--fond, --texte, --accent, --police-titres, --police-texte)
   ========================================================================== */

:root {
  --texte-doux: color-mix(in oklab, var(--texte) 62%, var(--fond));
  --texte-discret: color-mix(in oklab, var(--texte) 42%, var(--fond));
  --surface: color-mix(in oklab, var(--texte) 5%, var(--fond));
  --ligne: color-mix(in oklab, var(--texte) 12%, var(--fond));
  --marge: clamp(16px, 4vw, 56px);
  --entete: 76px;
  --rayon: 4px;
  --rangee: 270px;            /* hauteur cible des rangées du mur de photos */
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}
[data-theme="clair"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--fond); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, .logo, .carte-titre, .hero-titre {
  font-family: var(--police-titres);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}

.surtitre {
  margin: 0 0 1rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.surtitre a { text-decoration: none; }
.surtitre a:hover { text-decoration: underline; text-underline-offset: 4px; }
.surtitre .sep { margin: 0 .6em; color: var(--texte-discret); }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 100; padding: .5rem 1rem; background: var(--fond); }

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

.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--entete);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--marge);
  transition: background .4s var(--ease), border-color .4s, height .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.entete.defile {
  height: 64px;
  background: color-mix(in oklab, var(--fond) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-color: var(--ligne);
}
.page-accueil .entete:not(.defile) { color: #fff; }
/* Accueil : le titre est déjà affiché en grand sur la photo */
.page-accueil .entete:not(.defile) .logo { opacity: 0; pointer-events: none; }
.entete .logo { transition: opacity .4s var(--ease); }
.logo { font-size: 1.35rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.liens { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); }
.liens > a {
  font-size: .82rem; letter-spacing: .06em; text-decoration: none;
  opacity: .8; transition: opacity .2s; position: relative;
}
.liens > a:hover, .liens > a[aria-current] { opacity: 1; }
.liens > a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor;
}
.bouton-menu, .bouton-icone {
  display: inline-flex; align-items: center; gap: .6rem;
  font: inherit; font-size: .82rem; letter-spacing: .06em;
  color: inherit; background: none; border: 0; padding: .4rem 0; cursor: pointer;
}
.bouton-icone { padding: .4rem; border-radius: 50%; }
.bouton-icone:hover { background: var(--surface); }
@media (max-width: 560px) {
  .liens > a { display: none; }
}

/* --- Menu latéral ------------------------------------------------------- */

.tiroir-fond {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .4s var(--ease);
}
.tiroir-fond.visible { opacity: 1; }
.tiroir {
  position: fixed; inset: 0 0 0 auto; z-index: 50;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--fond);
  border-left: 1px solid var(--ligne);
  transform: translateX(100%);
  transition: transform .5s var(--ease), visibility 0s .5s;
  visibility: hidden;
}
.tiroir.ouvert { transform: none; visibility: visible; transition: transform .5s var(--ease); }
.tiroir-tete {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--entete); padding: 0 var(--marge);
  flex-shrink: 0;
}
.tiroir-tete .surtitre { margin: 0; }
.tiroir-corps { overflow-y: auto; padding: .5rem var(--marge) 3rem; overscroll-behavior: contain; }
.tiroir-lien {
  display: block; padding: .35rem 0;
  font-family: var(--police-titres); font-size: 1.9rem; line-height: 1.2;
  text-decoration: none; transition: color .2s, transform .3s var(--ease);
}
.tiroir-lien:hover { color: var(--accent); transform: translateX(4px); }
.tiroir-separateur { height: 1px; background: var(--ligne); margin: 1.4rem 0 .6rem; }
.tiroir-groupe { border-bottom: 1px solid var(--ligne); }
.tiroir-groupe summary {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-family: var(--police-titres); font-size: 1.45rem;
}
.tiroir-groupe summary::-webkit-details-marker { display: none; }
.tiroir-groupe summary::after {
  content: "+"; font-family: var(--police-texte); font-size: 1.2rem; font-weight: 300;
  color: var(--texte-discret); margin-left: .8rem; transition: transform .3s var(--ease);
}
.tiroir-groupe[open] summary::after { transform: rotate(45deg); }
.tiroir-groupe summary > span:first-child { flex: 1; }
.tiroir-nb { font-family: var(--police-texte); font-size: .75rem; color: var(--texte-discret); }
.tiroir-groupe ul { list-style: none; margin: 0; padding: 0 0 1.1rem; }
.tiroir-groupe li a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .32rem 0; font-size: .95rem; text-decoration: none; color: var(--texte-doux);
  transition: color .2s;
}
.tiroir-groupe li a span { font-size: .75rem; color: var(--texte-discret); }
.tiroir-groupe li a:hover, .tiroir-groupe li a[aria-current] { color: var(--texte); }
.tiroir-groupe li a[aria-current] { color: var(--accent); }
.tiroir-tout { font-size: .75rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) !important; }
.tiroir-vide { color: var(--texte-discret); font-size: .9rem; }
body.menu-ouvert { overflow: hidden; }

/* --- Boutons et liens --------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.bouton:hover { transform: translateY(-1px); }
.bouton-plein { background: #fff; color: #111; }
.bouton-plein:hover { background: var(--accent); color: #111; }
.bouton-clair { border: 1px solid rgba(255, 255, 255, .45); color: #fff; backdrop-filter: blur(6px); }
.bouton-clair:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

.lien-fleche {
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--texte-doux); white-space: nowrap; transition: color .2s;
}
.lien-fleche span { display: inline-block; transition: transform .3s var(--ease); }
.lien-fleche:hover { color: var(--accent); }
.lien-fleche:hover span { transform: translateX(4px); }

/* --- Accueil : grande photo -------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--entete) + 2rem) var(--marge) clamp(4.5rem, 11vh, 8rem);
  overflow: hidden; color: #fff;
  background: #1a1b19;
}
.hero-image {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  animation: apparaitre 1.2s var(--ease) both;
}
/* Photo entière : aucune partie coupée ; les bandes libres sont remplies par la même
   photo, très floutée et assombrie */
.hero-entiere .hero-image { object-fit: contain; }
.hero-flou {
  position: absolute; inset: -60px; z-index: -3;
  width: calc(100% + 120px); height: calc(100% + 120px); max-width: none;
  object-fit: cover;
  filter: blur(48px) brightness(.45) saturate(1.15);
}
.hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .25) 38%, transparent 62%),
    linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, transparent 22%);
}
.hero-contenu { max-width: 62rem; animation: monter 1.2s .2s var(--ease) both; }
.hero-titre {
  font-size: clamp(3rem, 9vw, 8.5rem);
  letter-spacing: -0.035em; line-height: .95;
  text-wrap: balance;
}
.hero-sous-titre {
  margin: 1.4rem 0 0; max-width: 34rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 300; line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }
.hero-defiler {
  position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0;
  width: 1px; height: 46px; overflow: hidden;
  background: rgba(255, 255, 255, .2);
}
.hero-defiler span {
  position: absolute; inset: 0; background: #fff;
  animation: defiler 2.4s var(--ease) infinite;
}
@keyframes defiler { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@keyframes monter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .hero-defiler { display: none; }
}

/* --- Sections ----------------------------------------------------------- */

.section { padding: clamp(4rem, 10vw, 8rem) var(--marge) 0; }
.section:last-of-type { padding-bottom: clamp(4rem, 8vw, 6rem); }
.section-tete { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-tete h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.section-tete-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }

/* --- En-tête des pages de galerie --------------------------------------- */

.page-tete {
  padding: calc(var(--entete) + clamp(3rem, 9vw, 7rem)) var(--marge) clamp(2rem, 5vw, 3.5rem);
  animation: monter .9s var(--ease) both;
}
.page-tete h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); letter-spacing: -0.03em; text-wrap: balance; }
.latin {
  margin: .6rem 0 0;
  font-family: var(--police-titres); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--texte-doux);
}
.meta { margin: 1.4rem 0 0; font-size: .8rem; letter-spacing: .08em; color: var(--texte-discret); }
.page-corps { padding: 0 var(--marge) clamp(4rem, 8vw, 6rem); }
.vide { color: var(--texte-discret); }

/* --- Cartes (groupes, espèces) ----------------------------------------- */

.groupes, .especes {
  display: grid; gap: clamp(10px, 1.2vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.carte {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3; border-radius: var(--rayon);
  background: var(--surface); color: #fff; text-decoration: none;
}
.carte-haute { aspect-ratio: 4 / 5; }
.carte img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease), filter .6s;
}
.carte::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 45%, transparent 70%);
  transition: opacity .5s;
}
.carte:hover img { transform: scale(1.05); }
.carte-texte {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: .25rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}
.carte-titre { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.carte-haute .carte-titre { font-size: clamp(2rem, 3.6vw, 3rem); }
.carte-latin { font-family: var(--police-titres); font-size: 1rem; opacity: .8; }
.carte-meta { margin-top: .35rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.carte-fleche {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .4s, transform .4s var(--ease);
}
.carte:hover .carte-fleche { opacity: 1; transform: none; }

/* --- Mur de photos justifié -------------------------------------------- */
/* Chaque tuile grandit proportionnellement à son ratio : toutes les photos d'une
   rangée ont la même hauteur, sans recadrage. */

.mur { display: flex; flex-wrap: wrap; gap: clamp(6px, .8vw, 12px); }
.mur::after { content: ""; flex-grow: 1e6; }   /* la dernière rangée n'est pas étirée */
.tuile {
  position: relative; margin: 0;
  flex: var(--r) 1 calc(var(--r) * var(--rangee));
  overflow: hidden; border-radius: var(--rayon);
  background: var(--surface);
}
.tuile a { display: block; cursor: zoom-in; }
.tuile img {
  width: 100%; aspect-ratio: var(--r); object-fit: cover;
  transition: transform .9s var(--ease), opacity .6s;
}
.tuile img[loading="lazy"] { opacity: 0; }
.tuile img.chargee { opacity: 1; }
.tuile:hover img { transform: scale(1.03); }
.tuile figcaption {
  position: absolute; inset: auto 0 0 0; pointer-events: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 2.4rem 1rem .8rem;
  font-size: .85rem; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s var(--ease);
}
.tuile:hover figcaption { opacity: 1; transform: none; }
.tuile-nom { font-family: var(--police-titres); font-size: 1.05rem; }
.tuile-date { font-size: .72rem; opacity: .75; white-space: nowrap; }
@media (max-width: 900px) { :root { --rangee: 200px; } }
@media (max-width: 640px) {
  .tuile { flex-basis: 100%; }
  .tuile figcaption { opacity: 1; transform: none; }
}
@media (hover: none) { .tuile figcaption { display: none; } }

/* --- Pagination --------------------------------------------------------- */

.pagination {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--ligne);
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.pagination a { text-decoration: none; color: var(--texte-doux); transition: color .2s; }
.pagination a:hover { color: var(--accent); }
.pagination a[rel="next"] { justify-self: end; }
.pagination-num { font-family: var(--police-titres); font-size: 1.3rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.pagination-num span { color: var(--texte-discret); font-size: .9rem; }

/* --- Visionneuse plein écran ------------------------------------------- */

.visionneuse {
  position: fixed; inset: 0; z-index: 100;
  height: 100vh; height: 100dvh;   /* dvh : tient compte des barres du navigateur mobile */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  background: #080808; color: #f2f1ec;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.visionneuse.ouverte { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.vis-barre {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  font-size: .8rem; letter-spacing: .08em; color: rgba(255, 255, 255, .6);
}
.vis-barre .vis-actions { display: flex; gap: .4rem; }
.vis-barre button { color: #fff; }
.vis-barre button:hover, .vis-barre button[aria-pressed="true"] { background: rgba(255, 255, 255, .1); }
.vis-scene {
  --vis-marge-x: clamp(.75rem, 6vw, 6rem);
  --vis-marge-y: clamp(.5rem, 2vh, 1.5rem);
  position: relative; grid-column: 1; grid-row: 2;
  min-height: 0; min-width: 0; overflow: hidden;
  touch-action: pan-y;
}
/* L'image occupe la scène moins ses marges et s'y inscrit sans jamais déborder */
.vis-image {
  position: absolute;
  inset: var(--vis-marge-y) var(--vis-marge-x);
  width: calc(100% - 2 * var(--vis-marge-x));
  height: calc(100% - 2 * var(--vis-marge-y));
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .55));
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.vis-image.change { opacity: 0; transform: scale(.985); }
.vis-nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, .06); border: 0; border-radius: 50%;
  cursor: pointer; transition: background .2s;
}
.vis-nav:hover { background: rgba(255, 255, 255, .16); }
.vis-nav[disabled] { opacity: .2; cursor: default; }
.vis-prec { left: clamp(.5rem, 1.5vw, 1.5rem); }
.vis-suiv { right: clamp(.5rem, 1.5vw, 1.5rem); }
.vis-pied {
  grid-column: 1; grid-row: 3;
  padding: 1rem clamp(1rem, 5vw, 5rem) 1.4rem; text-align: center;
}
.vis-titre { font-family: var(--police-titres); font-size: 1.4rem; }
.vis-titre a { text-decoration: none; }
.vis-titre a:hover { color: var(--accent); }
.vis-titre em { font-size: 1rem; opacity: .65; margin-left: .5rem; }
.vis-sous { margin-top: .2rem; font-size: .8rem; color: rgba(255, 255, 255, .55); }
.vis-infos {
  grid-column: 2; grid-row: 2 / 4;
  width: 0; overflow: hidden;
  transition: width .45s var(--ease);
}
.visionneuse.infos .vis-infos { width: min(340px, 85vw); }
.vis-infos dl {
  width: min(340px, 85vw); margin: 0; padding: 1rem 2rem 2rem;
  border-left: 1px solid rgba(255, 255, 255, .1); height: 100%; overflow-y: auto;
}
.vis-infos dt {
  margin-top: 1.4rem; font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.vis-infos dd { margin: .3rem 0 0; font-size: .92rem; color: rgba(255, 255, 255, .85); }
body.vis-ouverte { overflow: hidden; }
@media (max-width: 640px) {
  .vis-nav { display: none; }
  .vis-scene { --vis-marge-x: 0px; }
  .visionneuse.infos .vis-infos { position: absolute; inset: auto 0 0 0; width: auto; max-height: 60%; background: #111; }
  .vis-infos dl { width: auto; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
}

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

.pied {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem;
  margin: 0 var(--marge); padding: 2rem 0 2.4rem;
  border-top: 1px solid var(--ligne);
  font-size: .78rem; color: var(--texte-discret);
}
.pied .logo { font-size: 1.1rem; color: var(--texte-doux); }

/* --- Apparition au défilement ------------------------------------------ */

.apparition { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.apparition.visible { opacity: 1; transform: none; }
.no-js .apparition, .no-js .tuile img[loading="lazy"] { opacity: 1; transform: none; }

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