/* Virginie photographie · composants
   Toutes les valeurs viennent de tokens.json (var(--…)). Seules les tailles mobiles
   des styles de texte sont déclarées ici, sous 640px. */

/* ---------- Socle ---------- */
.vp {
  font-family: var(--font-sans);
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
.vp img { display: block; max-width: 100%; }
.vp :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Fraunces : forme douce, sans les lettres « bancales » par défaut */
.affiche, .titre-1, .titre-2, .titre-3, .citation, .prix, .vp-serif {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-optical-sizing: auto;
  color: var(--titre);
  margin: 0;
}
.citation { color: var(--titre); }
.chapeau, .corps, .corps-petit, .legende, .etiquette, .navigation, .bouton { margin: 0; }
.legende { color: var(--texte-doux); }
.etiquette { text-transform: uppercase; color: var(--lien); }
.vp :where(a:not([class])) { color: var(--lien); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vp :where(a:not([class])):hover { color: var(--titre); }

@media (max-width: 640px) {
  .affiche { font-size: 40px; line-height: 44px; }
  .titre-1 { font-size: 34px; line-height: 40px; }
  .titre-2 { font-size: 27px; line-height: 34px; }
  .titre-3 { font-size: 21px; line-height: 28px; }
  .citation { font-size: 20px; line-height: 30px; }
  .chapeau { font-size: 18px; line-height: 29px; }
  .corps { font-size: 16px; line-height: 26px; }
}

.vp-filet { border: 0; border-top: 1px solid var(--filet); margin: 0; }

/* ---------- Bouton ---------- */
.vp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: 48px; padding: var(--espace-3) var(--espace-5);
  border: 1px solid transparent; border-radius: var(--rayon-1);
  font: 600 16px/20px var(--font-sans); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.vp-btn--principal { background: var(--action); color: var(--sur-action); }
.vp-btn--principal:hover, .vp-btn--principal:active { background: var(--action-survol); }
.vp-btn--secondaire { background: transparent; color: var(--titre); border-color: var(--bordure); }
.vp-btn--secondaire:hover { border-color: var(--titre); background: var(--fond-alt); }
.vp-btn--lien { min-height: 0; padding: var(--espace-1) 0; color: var(--lien); background: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.vp-btn--lien:hover { color: var(--titre); }
.vp-btn[disabled], .vp-btn[aria-disabled="true"] { background: var(--fond-alt); color: var(--texte-doux); border-color: var(--filet); cursor: not-allowed; }
.vp-btn--rond { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: var(--rayon-rond); }
.vp-btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Navigation ---------- */
.vp-nav { background: var(--fond); border-bottom: 1px solid var(--filet); }
.vp-nav__barre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espace-5);
  height: var(--hauteur-navigation); max-width: var(--largeur-contenu); margin: 0 auto; padding: 0 var(--espace-6);
}
.vp-nav__logo img { height: 40px; width: auto; }
.vp-nav__liens { display: flex; gap: var(--espace-6); list-style: none; margin: 0; padding: 0; }
.vp-nav__liens a { color: var(--texte); text-decoration: none; padding: var(--espace-2) 0; border-bottom: 1px solid transparent; }
.vp-nav__liens a:hover { color: var(--titre); border-bottom-color: var(--filet); }
.vp-nav__liens a[aria-current="page"] { color: var(--titre); border-bottom-color: var(--lien); }
.vp-nav__menu { display: none; }
@media (max-width: 760px) {
  .vp-nav__barre { height: 64px; padding: 0 var(--espace-4); }
  .vp-nav__logo img { height: 34px; }
  .vp-nav__liens { display: none; }
  .vp-nav__menu { display: block; }
}
.vp-nav__menu summary { list-style: none; cursor: pointer; }
.vp-nav__menu summary::-webkit-details-marker { display: none; }
.vp-nav__panneau { padding: var(--espace-4) var(--espace-4) var(--espace-6); border-top: 1px solid var(--filet); background: var(--fond); }
.vp-nav__panneau ul { list-style: none; margin: 0; padding: 0; }
.vp-nav__panneau a { display: block; padding: var(--espace-3) 0; border-bottom: 1px solid var(--filet); color: var(--titre); text-decoration: none; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 24px; line-height: 32px; }

/* ---------- Pied de page ---------- */
.vp-pied { background: var(--fond-profond); color: var(--sable); padding: var(--espace-8) var(--espace-6) var(--espace-6); }
.vp-pied__grille { max-width: var(--largeur-contenu); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--espace-7); }
.vp-pied__logo img { height: 46px; width: auto; }
.vp-pied h2 { font: 600 13px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sable); margin: 0 0 var(--espace-4); }
.vp-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.vp-pied a { color: var(--leman-clair); text-decoration: none; }
.vp-pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vp-pied :focus-visible { outline-color: var(--leman-clair); }
.vp-pied__bas { max-width: var(--largeur-contenu); margin: var(--espace-7) auto 0; padding-top: var(--espace-5); border-top: 1px solid var(--leman); display: flex; justify-content: space-between; gap: var(--espace-4); flex-wrap: wrap; }
@media (max-width: 760px) {
  .vp-pied { padding: var(--espace-7) var(--espace-4) var(--espace-5); }
  .vp-pied__grille { grid-template-columns: 1fr; gap: var(--espace-6); }
}

/* ---------- Photo plein écran ---------- */
.vp-photo { margin: 0; background: var(--fond); }
.vp-photo__cadre { display: flex; justify-content: center; align-items: center; padding: var(--espace-6); }
.vp-photo__cadre img { max-height: 82vh; width: auto; max-width: min(100%, var(--largeur-photo)); object-fit: contain; border-radius: var(--rayon-0); }
.vp-photo__pied { max-width: var(--largeur-contenu); margin: 0 auto; padding: 0 var(--espace-6) var(--espace-6); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--espace-5); }
.vp-photo__texte { display: grid; gap: var(--espace-1); }
.vp-photo__nav { display: flex; align-items: center; gap: var(--espace-3); }
.vp-photo__compteur { color: var(--texte-doux); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: center; }
@media (max-width: 640px) {
  .vp-photo__cadre { padding: 0; }
  .vp-photo__cadre img { max-height: none; width: 100%; }
  .vp-photo__pied { grid-template-columns: 1fr; padding: var(--espace-4); }
}

/* ---------- Vignette de série ---------- */
.vp-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espace-7) var(--espace-5); }
.vp-series--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .vp-series { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-6) var(--espace-3); }
  .vp-series .titre-3 { font-size: 18px; line-height: 24px; }
  .vp-series--3 { grid-template-columns: 1fr; gap: var(--espace-6); }
  .vp-series--3 .titre-3 { font-size: 21px; line-height: 28px; }
}
.vp-serie { display: grid; gap: var(--espace-2); color: inherit; text-decoration: none; }
.vp-serie__image { aspect-ratio: 4 / 5; overflow: hidden; background: var(--fond-alt); border-radius: var(--rayon-0); }
.vp-serie__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vp-serie:hover .vp-serie__image img { transform: scale(1.02); }
.vp-serie__titre { margin-top: var(--espace-3); }
.vp-serie__meta { color: var(--texte-doux); }
.vp-serie:hover .vp-serie__titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--lien); }
@media (prefers-reduced-motion: reduce) { .vp-serie__image img { transition: none; } .vp-serie:hover .vp-serie__image img { transform: none; } }

/* ---------- Carte de format de tirage ---------- */
.vp-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--espace-5); }
.vp-format { background: var(--fond-alt); border: 1px solid transparent; border-radius: var(--rayon-2); padding: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-4); }
.vp-format > .vp-btn { margin-top: auto; }
.vp-format__apercu { background: var(--fond); padding: var(--espace-6) var(--espace-5); display: flex; justify-content: center; }
.vp-format__apercu img { box-shadow: var(--ombre-tirage); }
.vp-format__entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--espace-3); row-gap: var(--espace-1); }
.vp-format__entete .titre-3 { white-space: nowrap; }
.vp-format__details { list-style: none; margin: 0 0 var(--espace-2); padding: 0; display: grid; gap: var(--espace-1); align-content: start; color: var(--texte-doux); }
.vp-format[aria-current="true"], .vp-format--choisi { border-color: var(--lien); background: var(--brume); }
.vp-format__etat { color: var(--erreur); font-weight: 600; }

/* ---------- Comment commander ---------- */
.vp-commande { background: var(--fond-alt); border-radius: var(--rayon-2); padding: var(--espace-7) var(--espace-6); }
.vp-commande__etapes { list-style: none; margin: var(--espace-6) 0 var(--espace-6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-6); counter-reset: etape; }
.vp-commande__etape { position: relative; display: grid; gap: var(--espace-2); align-content: start; }
.vp-commande__pastille {
  width: 48px; height: 48px; border-radius: var(--rayon-rond); background: var(--brume); color: var(--titre);
  display: grid; place-items: center; margin-bottom: var(--espace-2);
  font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 24px; line-height: 1;
}
.vp-commande__etape:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 64px; right: calc(-1 * var(--espace-6) + 16px); border-top: 1px solid var(--bordure); }
@media (max-width: 760px) {
  .vp-commande { padding: var(--espace-6) var(--espace-5); }
  .vp-commande__etapes { grid-template-columns: 1fr; gap: var(--espace-5); }
  .vp-commande__etape { grid-template-columns: 48px 1fr; column-gap: var(--espace-4); }
  .vp-commande__etape > :not(.vp-commande__pastille) { grid-column: 2; }
  .vp-commande__pastille { grid-row: span 2; margin: 0; }
  .vp-commande__etape:not(:last-child)::after { top: 56px; bottom: calc(-1 * var(--espace-5) + 8px); left: 24px; right: auto; border-top: 0; border-left: 1px solid var(--bordure); }
}

/* ---------- Formulaire ---------- */
.vp-form { background: var(--fond-alt); border-radius: var(--rayon-2); padding: var(--espace-6); display: grid; gap: var(--espace-5); max-width: var(--largeur-lecture); }
.vp-champ { display: grid; gap: var(--espace-2); align-content: start; }
.vp-champ label { font: 600 15px/20px var(--font-sans); color: var(--texte); }
.vp-champ input, .vp-champ select, .vp-champ textarea {
  width: 100%; min-height: 48px; padding: var(--espace-3) var(--espace-4);
  font: 400 16px/24px var(--font-sans); color: var(--texte);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon-1);
}
.vp-champ textarea { min-height: 144px; resize: vertical; }
.vp-champ input:hover, .vp-champ select:hover, .vp-champ textarea:hover { border-color: var(--titre); }
.vp-champ input:focus-visible, .vp-champ select:focus-visible, .vp-champ textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--titre); }
.vp-champ__aide { color: var(--texte-doux); }
.vp-champ--erreur input, .vp-champ--erreur textarea { border: 2px solid var(--erreur); padding: 11px 15px; }
.vp-champ__erreur { color: var(--erreur); font-weight: 600; display: flex; gap: var(--espace-2); align-items: baseline; }
.vp-form__mention { color: var(--texte-doux); }
.vp-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-5); }
@media (max-width: 640px) { .vp-form { padding: var(--espace-5); } .vp-form__duo { grid-template-columns: 1fr; } }

/* ---------- Agenda d'exposition ---------- */
.vp-agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.vp-expo { display: grid; grid-template-columns: 112px 1fr auto; gap: var(--espace-5); padding: var(--espace-5) 0; border-bottom: 1px solid var(--filet); align-items: start; }
.vp-expo__date { display: grid; color: var(--titre); }
.vp-expo__jour { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 40px; line-height: 44px; font-weight: 340; font-variant-numeric: lining-nums; }
.vp-expo__infos { display: grid; gap: var(--espace-1); }
.vp-expo__statut { font: 600 13px/16px var(--font-sans); letter-spacing: 0.06em; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-rond); background: var(--brume); color: var(--titre); white-space: nowrap; }
.vp-expo--passee .vp-expo__date, .vp-expo--passee .titre-3 { color: var(--texte-doux); }
.vp-expo--passee .vp-expo__statut { background: transparent; color: var(--texte-doux); border: 1px solid var(--filet); }
@media (max-width: 640px) {
  .vp-expo { grid-template-columns: 1fr; gap: var(--espace-2); }
  .vp-expo__date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--espace-2); }
  .vp-expo__jour { font-size: 28px; line-height: 32px; }
  .vp-expo__statut { justify-self: start; }
}

/* ---------- Filigrane ---------- */
.vp-filigrane { position: relative; display: inline-block; }
.vp-filigrane__marque { position: absolute; right: 3%; bottom: 3%; width: 22%; min-width: 120px; max-width: 320px; pointer-events: none; user-select: none; }
.vp-filigrane__marque--mono { width: 7%; min-width: 36px; max-width: 96px; }

/* ---------- Ouverture (accueil) ---------- */
.vp-ouverture { background: var(--fond); }
.vp-ouverture__photo { margin: 0; padding: var(--espace-5) var(--espace-6) 0; }
.vp-ouverture__photo img { width: 100%; height: min(78vh, 820px); object-fit: cover; border-radius: var(--rayon-0); }
.vp-ouverture__legende { max-width: var(--largeur-contenu); margin: var(--espace-2) auto 0; padding: 0 var(--espace-6); text-align: right; }
.vp-ouverture__texte { max-width: var(--largeur-contenu); margin: 0 auto; padding: var(--espace-8) var(--espace-6) var(--espace-9); display: grid; grid-template-columns: 7fr 5fr; gap: var(--espace-7); align-items: end; }
.vp-ouverture__actions { display: flex; gap: var(--espace-4); flex-wrap: wrap; margin-top: var(--espace-5); }
@media (max-width: 760px) {
  .vp-ouverture__photo { padding: 0; }
  .vp-ouverture__photo img { height: 62vh; }
  .vp-ouverture__legende { padding: 0 var(--espace-4); }
  .vp-ouverture__texte { grid-template-columns: 1fr; gap: var(--espace-4); padding: var(--espace-7) var(--espace-4) var(--espace-8); }
  .vp-ouverture__actions .vp-btn { flex: 1 1 100%; }
}

/* ---------- En-tête de page ---------- */
.vp-entete { max-width: var(--largeur-contenu); margin: 0 auto; padding: var(--espace-9) var(--espace-6) var(--espace-7); display: grid; gap: var(--espace-4); }
.vp-entete > * { max-width: var(--largeur-lecture); }
@media (max-width: 760px) { .vp-entete { padding: var(--espace-7) var(--espace-4) var(--espace-6); } }

/* ---------- Section ---------- */
.vp-section { max-width: var(--largeur-contenu); margin: 0 auto; padding: 0 var(--espace-6) var(--espace-9); }
.vp-section__titre { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espace-4); flex-wrap: wrap; margin-bottom: var(--espace-6); }
@media (max-width: 760px) { .vp-section { padding: 0 var(--espace-4) var(--espace-8); } }

/* ---------- Filtres de galerie ---------- */
.vp-filtres { display: flex; gap: var(--espace-5); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.vp-filtres a { color: var(--texte-doux); text-decoration: none; padding: var(--espace-2) 0; border-bottom: 1px solid transparent; font-variant-numeric: tabular-nums; }
.vp-filtres a:hover { color: var(--titre); }
.vp-filtres a[aria-current="true"] { color: var(--titre); border-bottom-color: var(--lien); }
.vp-filtres span { color: var(--texte-doux); margin-left: var(--espace-1); }

/* ---------- Bande de vignettes (navigation dans une série) ---------- */
.vp-bande { display: flex; gap: var(--espace-3); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--espace-2) var(--espace-1) var(--espace-3); list-style: none; margin: 0; scrollbar-width: thin; }
.vp-bande li { flex: none; scroll-snap-align: start; }
.vp-bande a { display: block; width: 88px; height: 64px; opacity: .72; transition: opacity .18s ease; }
.vp-bande a:hover { opacity: 1; }
.vp-bande img { width: 100%; height: 100%; object-fit: cover; }
.vp-bande a[aria-current="true"] { opacity: 1; outline: 2px solid var(--lien); outline-offset: 2px; }

/* ---------- Citation ---------- */
.vp-citation { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--espace-3); max-width: var(--largeur-lecture); }
.vp-citation::before { content: "«"; font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 64px; line-height: 48px; color: var(--lien); }
.vp-citation blockquote { margin: 0; }
.vp-citation figcaption { grid-column: 2; margin-top: var(--espace-3); }

/* ---------- Message de confirmation ---------- */
.vp-confirmation { background: var(--brume); border-radius: var(--rayon-2); padding: var(--espace-6); display: grid; gap: var(--espace-2); max-width: var(--largeur-lecture); }
.vp-confirmation .titre-3 { display: flex; gap: var(--espace-3); align-items: center; }
.vp-confirmation svg { width: 24px; height: 24px; color: var(--lien); flex: none; }

/* ---------- Bloc deux colonnes (texte + photo) ---------- */
.vp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-8); align-items: center; }
.vp-duo img { width: 100%; height: auto; }
@media (max-width: 760px) { .vp-duo { grid-template-columns: 1fr; gap: var(--espace-6); } }