/* ==========================================================================
   Opulart
   --------------------------------------------------------------------------
   Toutes les couleurs et les mesures récurrentes sont déclarées une seule
   fois ici, dans :root. Pour changer la couleur d'accent partout dans le
   site, il n'y a qu'une ligne à modifier.
   ========================================================================== */

:root {
  --fond:          #0A0A0A;
  --fond-carte:    #151515;
  --trait:         #1A1917;
  --trait-clair:   #2E2C29;
  --trait-survol:  #6A645C;

  --texte:         #EDE9E1;
  --texte-vif:     #F4F1EA;
  --texte-doux:    #A7A198;
  --texte-discret: #918C83;

  --accent:        #E9A8BC;

  --fond-visionneuse: #070707;
  --texte-panneau:    #B5AFA4;
  --texte-sourd:      #8A847B;

  --titre: 'Cormorant Garamond', Georgia, serif;
  --corps: Karla, 'Helvetica Neue', Arial, sans-serif;

  --marge:  48px;   /* marge latérale de la page */
  --espace: 20px;   /* espace entre les oeuvres */
}

/* --------------------------------------------------------------------------
   Bases
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Réserve la place de la barre de défilement même quand elle disparaît :
   sans ça, la grille se décalerait de quelques pixels à l'ouverture de la
   visionneuse, qui bloque le défilement de la page. */
html { scrollbar-gutter: stable; }
html.visionneuse-ouverte { overflow: hidden; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--texte); text-decoration: none; }
a:hover { color: #FFFFFF; }

img { display: block; max-width: 100%; }

/* L'attribut HTML hidden doit toujours cacher, quelle que soit la règle
   display d'une classe. C'est le piège qu'on a eu avec le compteur. */
[hidden] { display: none !important; }

/* Le contour de mise au point, pour la navigation au clavier. On le retire
   à la souris seulement, jamais au clavier. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

.entete {
  height: 74px;
  padding: 0 var(--marge);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--trait);
}

.marque {
  display: inline-block;
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .34em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--texte);
  padding-left: 3px;
  /* Les lettres sont étirées en hauteur : Cormorant Garamond n'a pas de
     version étroite dessinée, on force donc l'allongement. */
  transform: scaleY(1.16);
}

/* margin-left: auto pousse les actions tout à droite, quel que soit ce qui
   se trouve entre elles et le nom du site (le champ de recherche, ou rien). */
.actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }

/* --------------------------------------------------------------------------
   Le choix de la langue
   Deux lettres grises à côté de la loupe, qui déroulent les cinq langues.
   Volontairement discret : le site est fait d'images, pas de menus.
   -------------------------------------------------------------------------- */

/* position: relative ancre le menu sous le bouton, et nulle part ailleurs. */
.langues { position: relative; display: flex; }

.langue-bouton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--texte-discret);
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color .25s ease;
}
.langue-bouton:hover { color: var(--texte); }
.langue-bouton svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
/* Le chevron se retourne quand la liste est ouverte. */
.langue-bouton[aria-expanded="true"] { color: var(--texte); }
.langue-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.langue-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;   /* au-dessus de la grille, et du bouton Encore flottant */
  min-width: 136px;
  margin: 0;
  padding: 5px;
  list-style: none;
  border: 1px solid var(--trait-clair);
  border-radius: 6px;
  background: #121212;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.langue-menu button {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--texte-doux);
  font-family: var(--corps);
  font-size: 13px;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.langue-menu button:hover { color: var(--texte); background: var(--fond-carte); }
/* La langue en cours, dans le rose du site. */
.langue-menu button[aria-current="true"] { color: var(--accent); }

/* Un texte réservé aux lecteurs d'écran : présent dans la page, invisible
   à l'oeil. */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   La recherche
   -------------------------------------------------------------------------- */

.loupe {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texte-discret);
  cursor: pointer;
  transition: color .25s ease, background .22s ease;
}
.loupe:hover { color: var(--texte); background: var(--fond-carte); }

/* Le champ, en forme de pilule. Il rétrécit si la fenêtre manque de place. */
.recherche {
  flex: 0 1 330px;
  min-width: 150px;
  height: 38px;
  margin-left: 34px;
  padding: 0 8px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #332F2B;
  border-radius: 999px;
  background: #121212;
  color: var(--texte-sourd);
  transition: border-color .25s ease;
}
/* Le contour habituel serait coincé dans la pilule : c'est la pilule
   entière qui s'éclaire quand on tape dedans. */
.recherche:focus-within { border-color: var(--texte-sourd); }
.recherche svg { flex: none; }

.recherche input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texte);
  font-family: var(--corps);
  font-size: 13.5px;
  letter-spacing: .02em;
  -webkit-appearance: none;
  appearance: none;
}
.recherche input::placeholder { color: #6E6963; }
/* Chrome et Safari ajoutent leur propre croix : on a déjà la nôtre. */
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.effacer {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6E6963;
  cursor: pointer;
}
.effacer:hover { color: var(--texte); background: #1E1E1E; }

/* --- Le bandeau sous l'en-tête : résultats, retour, thèmes --- */

.bandeau { padding: 22px var(--marge) 0; }

.bandeau-haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-bottom: 14px;
}

.resume {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.resume-nombre {
  font-family: var(--titre);
  font-size: 27px;
  font-weight: 300;
  color: var(--texte-vif);
}
.resume-detail {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--texte-sourd);
}

.retour {
  margin-left: auto;   /* reste à droite, même quand le résumé est caché */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--texte-sourd);
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  cursor: pointer;
}
.retour:hover { color: var(--texte); }

.themes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.themes-titre {
  margin-right: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texte-sourd);
}

.theme {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border: 1px solid #2A2724;
  border-radius: 999px;
  background: transparent;
  color: var(--texte-doux);
  font-family: var(--corps);
  font-size: 12px;
  letter-spacing: .03em;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.theme:hover { border-color: var(--trait-survol); color: var(--texte); background: #131313; }
/* Le thème en cours : la couleur d'accent, réservée aussi aux favoris. */
.theme[aria-pressed="true"],
.theme[aria-pressed="true"]:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* --------------------------------------------------------------------------
   Ma collection
   -------------------------------------------------------------------------- */

.collection {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 26px var(--marge) 0;
}
.collection-titre {
  margin: 12px 0 0;
  font-family: var(--titre);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  color: var(--texte-vif);
}
.collection-nombre {
  margin: 0;
  padding-bottom: 5px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--texte-sourd);
}

/* Une oeuvre qu'on vient de retirer de sa collection reste en place, pâlie,
   avec son coeur visible pour pouvoir la reprendre. */
.carte.retiree .cadre { opacity: .35; }
.carte.retiree .coeur { opacity: 1; }

/* --- Voir la suite des résultats --- */

.suite {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 auto 60px;
  padding: 12px 22px;
  border: 1px solid var(--trait-clair);
  border-radius: 999px;
  background: transparent;
  color: var(--texte);
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.suite:hover { border-color: var(--trait-survol); background: #131313; }
.suite-compte {
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--texte-sourd);
}

.compteur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent);
}
.compteur svg { fill: currentColor; }
/* Le compteur est un lien vers "Ma collection". */
.compteur:hover { color: #F4C6D4; }
/* Sans cette ligne, l'attribut hidden du HTML ne ferait rien : la règle
   display du navigateur pour [hidden] est moins prioritaire que .compteur. */
.compteur[hidden] { display: none; }

.encore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 19px;
  border: 1px solid var(--trait-clair);
  border-radius: 999px;
  background: transparent;
  color: var(--texte);
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.encore:hover { border-color: var(--trait-survol); background: #131313; }
.encore svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.encore:hover svg { transform: rotate(140deg); }
.encore[disabled] { opacity: .45; cursor: default; }
.encore[disabled]:hover { border-color: var(--trait-clair); background: transparent; }

/* --------------------------------------------------------------------------
   La grille
   Chaque colonne est une pile verticale. C'est le JavaScript qui décide
   dans quelle colonne va chaque oeuvre, pour que toutes finissent à peu
   près à la même hauteur.
   -------------------------------------------------------------------------- */

.grille {
  display: flex;
  align-items: flex-start;
  gap: var(--espace);
  padding: 26px var(--marge) var(--marge);
}

.colonne {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace);
}

/* --------------------------------------------------------------------------
   Une oeuvre
   -------------------------------------------------------------------------- */

.carte {
  position: relative;
  animation: apparition .55s cubic-bezier(.2, .7, .3, 1) both;
  /* En fermant la visionneuse, la page défile jusqu'à la dernière oeuvre
     vue. Cette marge la garde à l'écart des bords, et du bouton "Encore"
     qui flotte en bas sur mobile. */
  scroll-margin: 24px 0 96px;
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Le cadre est un bouton (il ouvre la visionneuse). On efface donc tout
   l'habillage qu'un navigateur donne par défaut à un bouton. */
.cadre {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  overflow: hidden;
  background: var(--fond-carte);
  border-radius: 2px;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease;
}
.carte:hover .cadre {
  transform: translateY(-7px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .66);
}

.cadre img { width: 100%; height: auto; }

/* Le titre et l'artiste, révélés au survol */
.legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 46px 15px 13px;
  opacity: 0;
  transition: opacity .32s ease;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .90) 0%,
    rgba(0, 0, 0, .55) 48%,
    rgba(0, 0, 0, 0) 100%);
}
.carte:hover .legende,
.carte:focus-within .legende { opacity: 1; }

.legende .titre {
  display: block;
  font-family: var(--titre);
  font-size: 17px;
  line-height: 1.25;
  color: var(--texte-vif);
}
.legende .auteur {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--texte-doux);
}

/* Le bouton favori */
.coeur {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 12, 12, .60);
  color: var(--texte);
  cursor: pointer;
  opacity: 0;
  transition: opacity .32s ease, background .2s ease, color .2s ease;
}
.carte:hover .coeur,
.carte:focus-within .coeur { opacity: 1; }
.coeur:hover { background: rgba(12, 12, 12, .92); color: var(--accent); }

.coeur svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
/* Une oeuvre gardée : le coeur reste visible et se remplit. */
.coeur[aria-pressed="true"] { opacity: 1; color: var(--accent); }
.coeur[aria-pressed="true"] svg { fill: currentColor; }

/* --------------------------------------------------------------------------
   Ligne d'état (chargement, erreur)
   -------------------------------------------------------------------------- */

.etat {
  margin: 0;
  padding: 0 var(--marge) 60px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--texte-discret);
}
.etat[hidden] { display: none; }
.etat.erreur { color: var(--accent); }

/* --------------------------------------------------------------------------
   Écrans étroits
   Le bouton Encore quitte l'en-tête et vient flotter en bas, à portée du
   pouce. C'est le même bouton, seulement déplacé.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --marge: 16px; --espace: 12px; }

  /* Quand la recherche est ouverte, l'en-tête passe sur deux lignes : le
     champ prend toute la largeur, sous le nom du site. */
  .entete { height: auto; min-height: 56px; flex-wrap: wrap; }
  .marque { font-size: 20px; letter-spacing: .30em; padding-left: 2px; }
  .actions { height: 56px; gap: 16px; }
  .recherche { order: 3; flex: 1 0 100%; margin: 0 0 12px; }

  /* La page garde de la place en bas pour le bouton Encore, qui flotte. */
  main { padding-bottom: 90px; }
  .grille { padding-top: 14px; padding-bottom: 26px; }
  .etat { padding-bottom: 26px; }
  .suite { margin-bottom: 26px; }

  .bandeau { padding-top: 14px; }
  .collection { padding-top: 14px; }
  .collection-titre { font-size: 30px; }
  .resume-nombre { font-size: 22px; }
  /* Les thèmes défilent de côté, plutôt que d'occuper trois lignes. */
  .themes {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--marge));
    padding: 0 var(--marge) 2px;
    scrollbar-width: none;
  }
  .themes::-webkit-scrollbar { display: none; }
  .themes-titre { flex: none; }

  .encore {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 10;
    height: 48px;
    padding: 0 30px;
    border-color: #38352F;
    background: #131313;
    font-size: 12px;
    letter-spacing: .2em;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
  }
}

/* --------------------------------------------------------------------------
   Écrans tactiles, et écrans étroits
   Pas de survol au doigt : le coeur reste donc toujours visible, sinon on
   ne pourrait pas garder une oeuvre depuis la grille (c'était le cas sur
   tablette). Le titre, lui, n'est pas affiché sur l'oeuvre : sur les
   oeuvres larges, il la couvrait presque entièrement. On le lit en
   touchant l'oeuvre, qui s'ouvre en grand (choix de Théo).
   "hover: none" vise les écrans tactiles, quelle que soit leur taille.
   -------------------------------------------------------------------------- */

@media (hover: none), (max-width: 720px) {
  .legende { display: none; }
  .coeur { opacity: 1; }
  .carte:hover .cadre { transform: none; box-shadow: none; }

  /* Un doigt vise moins bien qu'une souris : les lignes de la liste des
     langues sont plus hautes au toucher. La hauteur est imposée plutôt que
     déduite du texte, pour ne pas dépendre de la police du visiteur. */
  .langue-menu button { display: flex; align-items: center; min-height: 42px; }
}

/* ==========================================================================
   La visionneuse
   --------------------------------------------------------------------------
   Une oeuvre en grand, le texte du musée à droite. Un bouton en haut permet
   de masquer le texte pour ne voir que l'oeuvre.
   ========================================================================== */

.visionneuse {
  /* Un <dialog> arrive avec une bordure, des marges et une taille maximale.
     On retire tout pour qu'il occupe l'écran entier. */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--fond-visionneuse);
  color: var(--texte);
  overflow: hidden;
}
.visionneuse[open] { animation: fondu .28s ease both; }
.visionneuse::backdrop { background: var(--fond-visionneuse); }

@keyframes fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Les icônes au trait de la visionneuse */
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Les boutons du haut : mode et fermeture --- */

.v-haut {
  position: fixed;
  top: 30px;
  right: 34px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.v-icone {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texte-discret);
  cursor: pointer;
  transition: color .25s ease, background .22s ease;
}
.v-icone:hover { color: var(--texte); background: #141414; }

/* Le bouton de mode porte deux icônes, une seule est visible à la fois. */
.ico-reduire { display: none; }
.visionneuse.seule .ico-agrandir { display: none; }
.visionneuse.seule .ico-reduire { display: block; }

/* --- Oeuvre précédente, oeuvre suivante --- */

.v-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #242220;
  border-radius: 50%;
  background: rgba(18, 18, 18, .7);
  color: var(--texte-discret);
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.v-nav:hover { border-color: #56504A; color: var(--texte); background: #161616; }
.v-prec { left: 26px; }
.v-suiv { right: 26px; }

/* --- L'image et le texte, côte à côte --- */

.v-corps {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 72px 104px 64px;
}

.v-image {
  flex: 1 1 0;
  /* Sans ces deux lignes, la zone ne pourrait pas devenir plus petite que
     l'image qu'elle contient, et l'image ne rétrécirait plus quand on
     réduit la fenêtre. */
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* La taille exacte de l'image est calculée par le JavaScript (fonction
   ajusterImage) : elle remplit l'espace sans jamais être déformée, et
   l'ombre épouse l'oeuvre au lieu d'un rectangle trop grand. */
.v-image img {
  flex: none;
  max-width: none;
  background: var(--fond-carte);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .72);
}

.v-panneau {
  flex: 0 0 386px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.v-titre {
  margin: 0;
  font-family: var(--titre);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: .005em;
  color: var(--texte-vif);
}
.v-artiste {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--texte-panneau);
}
.v-vie {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--texte-sourd);
}

.v-infos {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid #1E1C1A;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}
.v-infos dt {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texte-sourd);
}
.v-infos dd {
  margin: 6px 0 0;
  font-size: 13px;
  color: #CFC9BF;
}

.v-description {
  margin-top: 24px;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--texte-panneau);
}

.v-anecdote {
  margin-top: 24px;
  padding: 18px 20px;
  background: #131313;
  border-radius: 3px;
}
.v-anecdote-titre {
  margin: 0;
  font-family: var(--titre);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
}
#v-anecdote-texte {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #C2BCB2;
}

/* Le bouton "Garder" reste en vue même quand le texte est long : il colle
   au bas du panneau pendant qu'on fait défiler, sur un léger fondu. */
.v-pied {
  position: sticky;
  bottom: 0;
  margin-top: 8px;
  padding: 18px 0 4px;
  background: linear-gradient(rgba(7, 7, 7, 0), var(--fond-visionneuse) 14px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.v-garder {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--trait-clair);
  border-radius: 999px;
  background: transparent;
  color: var(--texte);
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.v-garder svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.v-garder:hover,
.v-garder[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.v-garder[aria-pressed="true"] svg { fill: currentColor; }

.v-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--texte-sourd);
}
.v-source:hover { color: var(--texte); }

.v-aide {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--texte-sourd);
  pointer-events: none;
}

/* --- Le mode "oeuvre seule" --- */

.v-legende {
  display: none;
  flex: none;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  text-align: center;
}
.v-legende-titre {
  font-family: var(--titre);
  font-size: 18px;
  color: #C9C3B9;
}
.v-legende-auteur {
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--texte-sourd);
}

.visionneuse.seule .v-panneau { display: none; }
/* Peu de marge en haut : les boutons sont dans le coin, pas au-dessus de
   l'oeuvre. Sans ça, une oeuvre très haute rapetissait dans ce mode, à
   cause de la légende ajoutée dessous. */
.visionneuse.seule .v-corps { padding: 28px 130px 64px; }
.visionneuse.seule .v-legende { display: flex; }

/* --- La visionneuse sur écran moyen (petit portable, tablette couchée) ---
   Même disposition, en plus serré : sinon le texte et les marges mangent
   la place de l'oeuvre. */

@media (max-width: 1200px) {
  .v-corps { padding: 72px 84px 64px; gap: 40px; }
  .v-panneau { flex-basis: 340px; }
  .v-prec { left: 18px; }
  .v-suiv { right: 18px; }
  .visionneuse.seule .v-corps { padding: 28px 96px 64px; }
}

/* --- La visionneuse sur écran étroit (téléphone, tablette debout) ---
   L'image passe au-dessus du texte, et c'est toute la visionneuse qui
   défile. Le seuil est plus haut que celui de la grille : côte à côte sur
   une tablette debout, il resterait à peine 100 pixels pour l'oeuvre. */

@media (max-width: 960px) {
  .visionneuse { overflow-y: auto; }

  .v-haut { top: 10px; right: 10px; }
  .v-icone { background: rgba(7, 7, 7, .72); }

  .v-corps {
    height: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    padding: 62px 16px 48px;
  }

  /* La zone de l'image fait au plus 62 % de la hauteur de l'écran. Le
     JavaScript la resserre ensuite sur l'image (variable --hauteur-image),
     pour qu'une oeuvre en largeur n'ait pas un grand vide autour d'elle.
     Les flèches se placent au milieu de cette zone. */
  .v-image { flex: none; height: var(--hauteur-image, 62vh); }
  .v-panneau {
    flex: none;
    width: 100%;
    max-width: 620px;   /* des lignes pas trop longues, sur tablette */
    max-height: none;
    align-self: center;
    overflow: visible;
    padding-right: 0;
  }
  .v-titre { font-size: 30px; }

  .v-nav {
    position: absolute;
    top: calc(62px + var(--hauteur-image, 62vh) / 2);
    width: 40px;
    height: 40px;
  }

  /* dvh tient compte de la barre d'adresse des téléphones, qui apparaît et
     disparaît. Les navigateurs trop anciens pour le connaître gardent vh. */
  @supports (height: 1dvh) {
    .v-image { height: var(--hauteur-image, 62dvh); }
    .v-nav { top: calc(62px + var(--hauteur-image, 62dvh) / 2); }
  }
  .v-prec { left: 8px; }
  .v-suiv { right: 8px; }

  .v-aide { display: none; }

  .visionneuse.seule { overflow: hidden; }
  .visionneuse.seule .v-corps { height: 100%; padding: 62px 16px 28px; }
  .visionneuse.seule .v-image { flex: 1 1 0; height: auto; }
  .visionneuse.seule .v-nav { top: 50%; }
}

/* --------------------------------------------------------------------------
   Pour les personnes qui ont demandé moins d'animations dans leur système
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}