@import url('fonts.css');

/* =========================================================================
   112 bis rampe Saint-Gervais
   Feuille de style unique, écrite mobile d'abord.
   Les points de rupture : 600 px (tablette), 900 px (deux colonnes), 1100 px.
   ========================================================================= */

:root {
  color-scheme: light;

  /* fonds */
  --page:      #FAF8F5;
  --carte:     #FFFDFA;
  --calme:     #F1EDE6;
  --chaud:     #F4EDE6;
  --gris:      #F4F0E9;

  /* textes */
  --encre:     #1E1B18;
  --texte:     #3C362F;
  --discret:   #6B6259;
  --etiquette: #665E55;

  /* traits */
  --trait:     #E6E0D8;
  --trait-fin: #EDE7DE;
  --trait-fort:#E0D9CE;
  --pointille: #C9C0B4;
  --survol:    #C9B79F;

  /* accent unique, tiré des tons chauds de la brique */
  --accent:      #9E5B33;
  --accent-fonce:#7C4526;

  /* typographie */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* rythme */
  --gouttiere: 16px;
  --section:   48px;
  --rayon:     4px;
}

@media (min-width: 600px) {
  :root { --gouttiere: 20px; --section: 64px; }
}
@media (min-width: 900px) {
  :root { --section: 76px; }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fonce); text-decoration: underline; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.invisible {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saut {
  position: absolute; left: var(--gouttiere); top: -100px;
  background: var(--accent); color: #FFF;
  padding: 10px 16px; border-radius: 2px; font-weight: 600;
  z-index: 50; transition: top .15s;
}
.saut:focus { top: 12px; color: #FFF; text-decoration: none; }

/* ---------- structure ---------- */

.enveloppe {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.bloc { padding-top: var(--section); }

.titre-bloc { font-size: 26px; line-height: 1.15; }
.chapo { margin-top: 8px; color: var(--texte); max-width: 62ch; }

.sur-titre {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--etiquette);
  font-weight: 500;
}

@media (min-width: 600px) { .titre-bloc { font-size: 30px; } }

/* ---------- en-tête et pied ---------- */

.tete {
  display: flex; flex-wrap: wrap;
  gap: 4px 16px; align-items: baseline; justify-content: space-between;
  padding-top: 18px;
}
.tete__nom { font-family: var(--serif); font-size: 19px; color: var(--encre); }
.tete__nom:hover { text-decoration: none; color: var(--accent-fonce); }
.tete__note { font-size: 14px; color: var(--discret); }

.pied {
  margin-top: var(--section);
  border-top: 1px solid var(--trait);
  padding-block: 22px 40px;
  display: grid; gap: 8px;
  font-size: 13px; color: var(--discret);
}
@media (min-width: 720px) {
  .pied { grid-template-columns: 1fr auto; gap: 8px 32px; }
  .pied p:last-child { text-align: right; }
}

/* ---------- ouverture ---------- */

.ouverture { padding-top: 20px; display: grid; gap: 22px; }

.ouverture__images { display: grid; gap: 8px; }
.ouverture__grande {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon); background: var(--calme);
}
.ouverture__vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ouverture__vignettes img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 3px; background: var(--calme);
}

.ouverture__titre { font-size: 34px; line-height: 1.08; letter-spacing: -.01em; }
.ouverture__texte { margin-top: 16px; font-size: 18px; color: var(--texte); max-width: 40ch; }

.disponibilites { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.disponibilites__note { margin-top: 14px; font-size: 15px; color: var(--discret); }

@media (min-width: 860px) {
  .ouverture {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 32px; align-items: center;
  }
  .ouverture__grande { aspect-ratio: 3 / 2; }
  .ouverture__titre { font-size: 44px; }
}

/* ---------- pastilles de statut ---------- */

.statut {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; line-height: 1.2;
  padding: 5px 10px; border-radius: 2px;
  border: 1px solid transparent;
}
.statut--libre { background: var(--accent); color: #FFF; border-color: var(--accent); }
.statut--date  { background: var(--carte); color: var(--accent-fonce); border: 1.5px solid var(--accent); }
.statut--loue  { background: var(--calme); color: var(--discret); border-color: var(--trait-fort); }

.statut--grand { font-size: 16px; padding: 9px 14px; }

/* ---------- schéma d'implantation ---------- */

.coupe {
  margin-top: 22px;
  border: 1px solid var(--trait);
  background: var(--carte);
  border-radius: var(--rayon);
  padding: 12px;
}

/* L'aile sur cour porte deux logements de front à deux niveaux : elle a besoin
   de plus de largeur que l'aile sur rue, qui n'en aligne qu'un par étage. */
.coupe__plan {
  display: grid;
  grid-template-columns: minmax(0, .85fr) 30px minmax(0, 1.45fr);
  gap: 5px;
  align-items: stretch;
}

.coupe__aile { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-width: 0; }
.coupe__aile-titre { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--etiquette); }
/* Le trait de sol de chaque aile. La hauteur minimale les garde alignés même
   quand un libellé passe sur deux lignes et l'autre non. */
.coupe__sol {
  border-top: 2px solid var(--encre); padding-top: 5px; min-height: 2.9em;
  font-family: var(--mono); font-size: 10px; line-height: 1.3; color: var(--discret);
}
.coupe__sol--cour { border-top: 1px dashed var(--pointille); }

.coupe__cour {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; padding-bottom: 26px;
}
.coupe__cour-nom {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--etiquette);
  padding-block: 8px;
}
/* La cage d'escalier : une bande étroite entre les deux ailes. Son libellé est
   vertical, sans quoi il déborderait sur les logements voisins en mobile. */
.coupe__escalier {
  width: 100%; height: 120px; overflow: hidden;
  border-left: 1px dashed var(--pointille); border-right: 1px dashed var(--pointille);
  display: flex; align-items: center; justify-content: center;
}
.coupe__escalier span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  color: var(--etiquette); white-space: nowrap;
}

.coupe__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

.lot {
  display: flex; flex-direction: column; justify-content: space-between; gap: 3px;
  min-height: 68px; padding: 8px 9px;
  border: 1px solid var(--trait-fort); border-radius: 3px;
  color: var(--encre); text-decoration: none;
  transition: border-color .12s, transform .12s;
}
.lot:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.lot--libre { background: var(--accent); color: #FFF; border-color: var(--accent); }
.lot--libre:hover { color: #FFF; border-color: var(--accent-fonce); }
.lot--date  { background: var(--carte); border: 1.5px solid var(--accent); }
.lot--loue  { background: var(--calme); }

.lot__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.lot__n { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1; }
.lot__etage { font-family: var(--mono); font-size: 10px; opacity: .78; text-align: right; }
/* Surface et statut sur deux lignes : le statut est l'information la plus
   regardée de la page, il doit se lire sans effort même dans 70 px. */
.lot__detail { display: grid; gap: 1px; font-size: 11px; line-height: 1.2; }
.lot__detail b { font-weight: 700; }
.lot__note {
  font-family: var(--mono); font-size: 9.5px; line-height: 1.3;
  border-top: 1px dotted var(--pointille); padding-top: 4px;
}
.lot--libre .lot__note { border-top-color: rgba(255,255,255,.45); }

.legende {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait);
  font-size: 13px; color: var(--discret);
}
.legende li { display: flex; align-items: center; gap: 7px; }
.legende i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.legende i.libre { background: var(--accent); }
.legende i.date  { background: var(--carte); border: 1.5px solid var(--accent); }
.legende i.loue  { background: var(--calme); border: 1px solid var(--trait-fort); }

@media (min-width: 560px) {
  .coupe { padding: 18px; }
  .coupe__plan { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1.4fr); gap: 8px; }
  .coupe__aile, .coupe__paire { gap: 8px; }
  .coupe__aile-titre { font-size: 10px; letter-spacing: .08em; }
  .coupe__escalier { height: 150px; }
  .coupe__escalier span { font-size: 11px; }
  .coupe__cour-nom { font-size: 11px; }
  .lot { min-height: 76px; padding: 10px 12px; }
  .lot__n { font-size: 22px; }
  .lot__etage { font-size: 12px; }
  .lot__detail { font-size: 13px; }
  .lot__note { font-size: 11px; }
  .coupe__sol { font-size: 12px; min-height: 0; }
}

/* ---------- liste des logements ---------- */

.groupe-titre { margin-top: 28px; margin-bottom: 12px; }
.groupe-titre:first-of-type { margin-top: 22px; }

.grille-logements {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.fiche-carte {
  display: flex; flex-direction: column;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); overflow: hidden;
  color: var(--encre); text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.fiche-carte:hover {
  text-decoration: none; color: var(--encre);
  border-color: var(--survol); box-shadow: 0 2px 10px rgba(30, 27, 24, .07);
}
.fiche-carte__image { position: relative; background: var(--calme); }
.fiche-carte__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fiche-carte__statut { position: absolute; right: 8px; bottom: 8px; }
.fiche-carte__corps { padding: 12px 14px 14px; display: grid; gap: 8px; }
.fiche-carte__nom { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fiche-carte__nom b { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1; }
.fiche-carte__nom span { font-size: 16px; color: var(--texte); }
.fiche-carte__lieu { font-size: 15px; color: var(--texte); line-height: 1.35; }
.fiche-carte__clim {
  justify-self: start; font-size: 13px; font-weight: 600;
  color: var(--accent-fonce); background: var(--chaud);
  border-radius: 2px; padding: 3px 8px;
}
.fiche-carte__dpe { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--discret); }

.pastille-dpe {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 2px;
  font-weight: 700; font-size: 13px; flex: none;
}

/* ---------- l'immeuble ---------- */

.immeuble {
  margin-top: 20px;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 20px;
  display: grid; gap: 24px;
}
.immeuble__texte { display: grid; gap: 12px; color: var(--texte); max-width: 54ch; }
.faits li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--trait-fin);
}
.faits li:last-child { border-bottom: 0; padding-bottom: 0; }
.faits span { color: var(--discret); flex: none; }
.faits b { font-weight: 600; text-align: right; }

@media (min-width: 820px) {
  .immeuble { grid-template-columns: 1fr 1fr; gap: 36px; padding: 26px; align-items: center; }
}

/* ---------- quartier ---------- */

.quartier { margin-top: 20px; display: grid; gap: 22px; }
.carte-cadre {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; background: var(--calme);
}
.carte-cadre iframe { width: 100%; height: 300px; border: 0; display: block; }
.carte-note {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between;
  margin-top: 8px; font-size: 13px; color: var(--discret);
}
.trajets li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--trait-fin);
}
.trajets li:last-child { border-bottom: 0; }
.trajets b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (min-width: 860px) {
  .quartier { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .carte-cadre iframe { height: 380px; }
}

/* ---------- contact ---------- */

.contact {
  margin-top: var(--section);
  border-top: 1px solid var(--trait);
  padding-top: 30px;
  display: grid; gap: 24px;
}
.contact__texte { margin-top: 10px; color: var(--texte); max-width: 48ch; }
.contact__appoint { font-size: 15px; color: var(--discret); line-height: 1.6; display: grid; gap: 10px; }
.contact__appoint b { color: var(--encre); font-weight: 700; }

@media (min-width: 820px) {
  .contact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: start; }
}

.bouton {
  display: inline-block; margin-top: 18px;
  background: var(--accent); color: #FFF;
  padding: 13px 20px; border-radius: 2px;
  font-weight: 700; font-size: 17px;
}
.bouton:hover { background: var(--accent-fonce); color: #FFF; text-decoration: none; }

/* =========================================================================
   Fiche d'un logement
   ========================================================================= */

.fil { padding-top: 18px; font-size: 15px; color: var(--discret); }
.fil span { color: var(--pointille); padding-inline: 4px; }

.fiche-tete { padding-top: 16px; display: grid; gap: 12px; }
.fiche-tete__titre { font-size: 32px; line-height: 1.08; }
.fiche-tete__sous { margin-top: 6px; font-size: 18px; color: var(--texte); }
.fiche-tete__statut { justify-self: start; }

@media (min-width: 700px) {
  .fiche-tete {
    grid-template-columns: 1fr auto; align-items: end;
    gap: 16px 24px;
  }
  .fiche-tete__titre { font-size: 40px; }
  .fiche-tete__statut { justify-self: end; }
}

.fiche-corps { padding-top: 26px; display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) {
  .fiche-corps { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 30px; }
}

/* galerie */

.galerie__principale {
  display: block; width: 100%;
  border-radius: var(--rayon); overflow: hidden;
  background: var(--calme); position: relative;
}
.galerie__principale img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Une bonne partie du fonds est en portrait. Un cadrage 3:2 y couperait trop :
   les logements dont la première photo est verticale gardent le 4:3. */
@media (min-width: 700px) {
  .galerie__principale img { aspect-ratio: 3 / 2; }
  .galerie__principale--portrait img { aspect-ratio: 4 / 3; }
}

.galerie__reste {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.galerie__reste a { display: block; border-radius: 3px; overflow: hidden; background: var(--calme); }
.galerie__reste img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.galerie__reste a:hover img, .galerie__principale:hover img { transform: scale(1.02); }

.galerie__pied {
  display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between;
  margin-top: 10px; font-size: 13px; color: var(--discret);
}
.galerie__pied em { font-family: var(--mono); font-size: 11px; font-style: normal; }

.video { margin-top: 28px; }
.video video {
  width: 100%; margin-top: 12px; display: block;
  border-radius: var(--rayon); background: var(--encre);
  aspect-ratio: 16 / 9; object-fit: cover;
}

.plan { margin-top: 28px; }
.plan img { margin-top: 12px; border-radius: var(--rayon); border: 1px solid var(--trait); }

/* panneaux latéraux */

.panneau {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 18px;
}
.panneau + .panneau { margin-top: 16px; }
.panneau__titre { font-size: 22px; margin-bottom: 12px; }

.specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--trait-fin);
}
.specs li:last-child { border-bottom: 0; padding-bottom: 0; }
.specs span { color: var(--discret); flex: none; }
.specs b { font-weight: 600; text-align: right; }

/* Valeur trop longue pour tenir en regard de son intitulé : elle passe dessous,
   alignée à gauche, ce qui se lit bien mieux sur trois lignes. */
.specs li.specs__bloc { display: block; }
.specs li.specs__bloc b { display: block; text-align: left; margin-top: 3px; }
.panneau__note { margin-top: 14px; font-size: 15px; color: var(--texte); }

/* étiquettes énergie et climat */

.etiquettes { display: grid; gap: 20px; }
@media (min-width: 420px) { .etiquettes { grid-template-columns: 1fr 1fr; gap: 16px; } }

.etiquette__titre {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--etiquette); margin-bottom: 8px;
}
.echelle li { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.echelle__lettre { width: 12px; font-weight: 700; font-size: 12px; color: var(--discret); flex: none; }
.echelle__barre {
  height: 21px; border-radius: 2px; width: var(--w);
  display: flex; align-items: center; padding-inline: 7px;
  font-weight: 700; font-size: 12px;
}
.echelle li[aria-current='true'] .echelle__lettre { color: var(--encre); }
.echelle li[aria-current='true'] .echelle__barre { box-shadow: 0 0 0 2px var(--encre); }

/* Couleurs réglementaires, consommation d'énergie.
   Le même jeu sert aux barres de l'échelle et à la pastille des cartes. */
[data-energie='A'] { background: #319A3F; color: #FFF; }
[data-energie='B'] { background: #33CC31; color: var(--encre); }
[data-energie='C'] { background: #CBEE31; color: var(--encre); }
[data-energie='D'] { background: #FFF12E; color: var(--encre); }
[data-energie='E'] { background: #FBBA00; color: var(--encre); }
[data-energie='F'] { background: #F07D00; color: #FFF; }
[data-energie='G'] { background: #E2001A; color: #FFF; }

/* Couleurs réglementaires, émissions de gaz à effet de serre. */
[data-climat='A'] { background: #D9D2EE; color: var(--encre); }
[data-climat='B'] { background: #C3BBE4; color: var(--encre); }
[data-climat='C'] { background: #AEA3DA; color: var(--encre); }
[data-climat='D'] { background: #9A8BD0; color: var(--encre); }
[data-climat='E'] { background: #8573C6; color: #FFF; }
[data-climat='F'] { background: #705BBC; color: #FFF; }
[data-climat='G'] { background: #5B43B2; color: #FFF; }

.echelle__valeur { margin-top: 10px; font-size: 15px; line-height: 1.4; }
.echelle__valeur span { color: var(--discret); }

.estimation { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait-fin); }
.estimation__intitule { font-size: 15px; color: var(--discret); }
.estimation__valeur { font-size: 21px; font-weight: 700; margin-block: 2px 4px; }
.estimation__base { font-size: 14px; color: var(--discret); }

.telecharger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 12px 14px;
  border: 1.5px solid var(--accent); border-radius: 2px;
  color: var(--accent-fonce); font-weight: 700;
}
.telecharger:hover { background: var(--chaud); color: var(--accent-fonce); text-decoration: none; }
.telecharger em { font-family: var(--mono); font-size: 11px; font-weight: 500; font-style: normal; }

.conditions { display: grid; gap: 10px; font-size: 16px; }
.conditions li { display: flex; gap: 10px; }
.conditions li::before { content: '·'; color: var(--accent); font-weight: 700; }

/* disponibilité et mentions */

.dispo {
  margin-top: 40px; border-top: 1px solid var(--trait); padding-top: 28px;
  display: grid; gap: 24px; align-items: start;
}
.dispo__titre { font-size: 26px; margin-top: 8px; }
.dispo__texte { margin-top: 10px; color: var(--texte); max-width: 46ch; }
.dispo__apres { margin-top: 14px; font-size: 15px; color: var(--discret); max-width: 46ch; }
.mentions {
  background: var(--gris); border-radius: var(--rayon); padding: 16px;
  font-size: 14px; line-height: 1.6; color: var(--texte);
}
.mentions p { margin-top: 8px; }

@media (min-width: 820px) {
  .dispo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
  .dispo__titre { font-size: 30px; }
}

/* voisins */

.voisins { margin-top: 36px; }
.voisins__liste {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.voisin {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 11px 13px; display: grid; gap: 5px; justify-items: start;
  color: var(--encre); text-decoration: none;
  transition: border-color .12s;
}
.voisin:hover { border-color: var(--survol); color: var(--encre); text-decoration: none; }
.voisin__nom { display: flex; align-items: baseline; gap: 8px; }
.voisin__nom b { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1; }
.voisin__nom span { font-size: 15px; color: var(--texte); }
.voisin__etage { font-size: 13px; color: var(--discret); }

/* =========================================================================
   Visionneuse de photos
   ========================================================================= */

.visionneuse {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 18, 16, .93);
  display: flex; flex-direction: column;
  padding: 10px;
}
.visionneuse[hidden] { display: none; }

.visionneuse__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #F3EFE9; font-size: 14px; flex: none;
}
.visionneuse__compteur { font-family: var(--mono); font-size: 12px; opacity: .8; }

.visionneuse__scene {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.visionneuse__scene img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 3px;
}

.visionneuse__legende {
  flex: none; color: #E7E1D9; font-size: 15px;
  text-align: center; padding: 10px 8px 6px; min-height: 2.6em;
}

.vbouton {
  flex: none;
  background: rgba(250, 248, 245, .1); color: #FAF8F5;
  border: 1px solid rgba(250, 248, 245, .28);
  border-radius: 999px; cursor: pointer;
  width: 44px; height: 44px; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
}
.vbouton:hover { background: rgba(250, 248, 245, .22); }
.vbouton:disabled { opacity: .3; cursor: default; }
.vbouton--fermer { width: auto; padding-inline: 14px; border-radius: 2px; font-size: 15px; height: 38px; }

@media (min-width: 700px) {
  .visionneuse { padding: 16px 20px; }
  .visionneuse__scene { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .galerie__reste img, .galerie__principale img { transform: none !important; }
}