/* ============================================================
   STYLE DU SITE — koenji archives
   Palette : blanc, noir, gris #B5B4B4. Rien d'autre.
   ============================================================ */

/* --- Police de détail : Ticketing ---
   Mettez votre fichier dans le dossier /fonts/ et, si besoin,
   changez le nom ci-dessous pour qu'il corresponde au fichier. */
@font-face {
  font-family: "Ticketing";
  src: url("../fonts/ticketing.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Variables : on change une couleur ici, elle change partout --- */
:root {
  --blanc: #ffffff;
  --noir: #000000;
  --gris: #B5B4B4;
  --gris-fonce: #8A8989;   /* gris un peu plus soutenu, pour les tailles et prix sous les pièces */
  --lavande: #B88CF0;       /* lavande clair : couleur de l'écriture quand on touche un bouton ou un lien, ou qu'un choix est actif */

  --titre: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --detail: "Ticketing", "Courier New", Courier, monospace; /* repli monospace */

  --marge: 20px;                 /* marge sur mobile */
}

/* Marge plus large sur grand écran */
@media (min-width: 800px) {
  :root { --marge: 40px; }
}

/* --- Base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--titre);
  font-weight: bold;
  text-transform: lowercase;     /* tout en minuscules */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Style « détail » : prix, tailles, boutons, légendes */
.detail {
  font-family: var(--detail);
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ============================================================
   PAGE DE COUVERTURE
   ============================================================ */
.couverture {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;            /* hauteur correcte sur téléphone */
  background: var(--blanc);
}

/* Photo paysage pleine largeur, collée en haut, sans marge. */
.couverture__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;              /* téléphone : photo entière, pleine largeur */
  object-fit: cover;
  object-position: center 0%;       /* sur ordinateur : le recadrage garde le haut de la photo (chapeau et visage) */
  background: var(--gris);       /* gris en attendant la vraie photo */
  animation: fondu 1.2s ease both;   /* apparition en fondu */
}

/* Ordinateur : la photo reste pleine largeur et s'arrête avant le bas de l'écran
   (pour laisser la ligne blanche avec le logo) ; elle est donc légèrement recadrée en hauteur */
@media (min-width: 701px) {
  .couverture__photo {
    aspect-ratio: auto;
    height: min(calc(100svh - 130px), 75vw);
  }
}

/* Logo en bas à gauche, sur le fond blanc */
.couverture__logo {
  position: absolute;
  left: var(--marge);
  bottom: var(--marge);
  width: clamp(175px, 25vw, 250px);
  color: var(--noir);            /* sert au texte de repli si pas de logo */
  font-size: 18px;
}
.couverture__logo img { display: block; width: 100%; height: auto; }

/* Liens « looks » et « boutique » en bas à droite */
.couverture__liens {
  position: absolute;
  right: var(--marge);
  bottom: var(--marge);
  display: flex;
  gap: 24px;
}
.couverture__cta {
  color: var(--noir);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}
.couverture__cta:hover { border-bottom-color: var(--noir); }

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

/* ============================================================
   EN-TÊTE (boutique et fiche pièce)
   ============================================================ */
.entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--marge);
}
.entete__nom { font-size: 16px; }
.entete__liens { display: flex; gap: 20px; }
.entete__liens a,
.entete__nom { transition: color 0.3s ease; }
.entete__liens a:hover,
.entete__nom:hover { color: var(--gris); }

/* ============================================================
   BOUTIQUE : grille de pièces
   ============================================================ */
.boutique { padding: 40px var(--marge) 80px; }

/* 2 colonnes sur mobile, 3 sur tablette, 4 sur grand écran */
.grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 12px;
}
@media (min-width: 700px)  { .grille { grid-template-columns: repeat(3, 1fr); gap: 56px 20px; } }
@media (min-width: 1100px) { .grille { grid-template-columns: repeat(4, 1fr); } }

.carte { display: block; }

/* Cadre photo au format 4:5 ; l'image zoome très légèrement au survol */
.carte__image {
  aspect-ratio: 4 / 5;
  background: var(--gris);
  overflow: hidden;
}
.carte__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease, opacity 0.4s ease;
}
.carte:hover .carte__image img { transform: scale(1.03); }

.carte__nom { margin-top: 12px; font-size: 13px; }
.carte__info {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--gris-fonce);
}

/* Pièce vendue : grisée */
.carte--vendue .carte__image img { opacity: 0.4; }
.carte--vendue .carte__nom { color: var(--gris); }

.message { padding: 40px 0; color: var(--gris); }

/* ============================================================
   FICHE PIÈCE
   ============================================================ */
.fiche {
  display: grid;
  grid-template-columns: 1fr;       /* mobile : tout en colonne */
  gap: 32px;
  padding: 24px var(--marge) 80px;
}
@media (min-width: 800px) {
  .fiche { grid-template-columns: 3fr 2fr; gap: 60px; align-items: start; }
  .infos { position: sticky; top: var(--marge); }
}

.galerie__principale { aspect-ratio: 4 / 5; background: var(--gris); overflow: hidden; }
.galerie__principale img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.galerie__principale:hover img { transform: scale(1.03); }

.galerie__miniatures { display: flex; gap: 8px; margin-top: 8px; }
.miniature {
  width: 64px;
  aspect-ratio: 4 / 5;
  border: 0;
  padding: 0;
  background: var(--gris);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniature:hover, .miniature--active { opacity: 1; }

.infos__nom { font-size: 20px; font-weight: bold; }
.infos__prix { margin-top: 8px; font-size: 15px; }
.infos__liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; margin-top: 28px; }
.infos__liste dt { color: var(--gris); }
.infos__description { margin-top: 28px; font-size: 14px; line-height: 1.5; font-weight: normal; }

/* Bouton « voir sur vinted » */
.bouton {
  display: inline-block;
  margin-top: 36px;
  padding: 14px 28px;
  border: 1px solid var(--noir);
  color: var(--noir);
  transition: background 0.3s ease, color 0.3s ease;
}
a.bouton:hover { background: var(--noir); color: var(--blanc); }
.bouton--inactif { border-color: var(--gris); color: var(--gris); cursor: default; }

/* ============================================================
   OPTIMISATIONS TÉLÉPHONE
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }            /* empêche le téléphone d'agrandir le texte tout seul */
body { -webkit-tap-highlight-color: transparent; }  /* pas de halo gris au toucher */

/* Zones de toucher plus grandes (≈44 px) pour les liens de l'en-tête, sans changer l'apparence */
.entete { align-items: center; padding-top: max(var(--marge), env(safe-area-inset-top)); }
.entete a { display: inline-block; padding: 12px 6px; }
.entete__nom { margin-left: -6px; }
.entete__liens { gap: 4px; margin-right: -6px; }

/* Couverture : tient compte de l'encoche et de la barre du bas des iPhone */
.couverture__logo, .couverture__liens { bottom: max(var(--marge), env(safe-area-inset-bottom)); }
.couverture__cta { padding: 12px 0 2px; }

/* Les effets de survol (zoom) ne servent que sur ordinateur : sur téléphone ils restent « collés » après un toucher */
@media (hover: none) {
  .carte:hover .carte__image img,
  .galerie__principale:hover img { transform: none; }
  a.bouton:hover { background: var(--blanc); color: var(--noir); }
}

/* Petits écrans */
@media (max-width: 600px) {
  .detail { font-size: 14px; }
  .carte__nom { font-size: 13.5px; }
  .bouton { display: block; width: 100%; text-align: center; padding: 16px 28px; }   /* bouton pleine largeur, facile à toucher */
  .miniature { width: 72px; }
  .galerie__miniatures { overflow-x: auto; }
}

/* Très petits écrans (iPhone SE, 320 px) : l'en-tête passe sur deux lignes si besoin */
@media (max-width: 360px) {
  .entete { flex-wrap: wrap; padding-top: 8px; padding-bottom: 0; }
  .entete__liens { margin-left: -6px; flex-wrap: wrap; }
}

/* Les liens de l'en-tête ne se coupent jamais en deux lignes ; s'il n'y a pas la place, ils passent à la ligne entiers */
.entete__liens { flex-wrap: wrap; justify-content: flex-end; }
.entete__liens a { white-space: nowrap; }
.entete__nom { white-space: nowrap; }

/* ============================================================
   BOUTIQUE : filtre par taille et tri
   ============================================================ */
.barre {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 24px;
  margin-bottom: 32px;
}
.barre__tailles { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.barre__titre { color: var(--gris); margin-right: 8px; }

/* bouton de taille : gris au repos, noir et souligné quand il est choisi */
.filtre {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 12px 8px;
  cursor: pointer;
  color: var(--gris);
  text-transform: lowercase;
  transition: color 0.3s ease;
}
.filtre:hover { color: var(--noir); }
.filtre[aria-pressed="true"] { color: var(--noir); border-bottom-color: var(--noir); }

.barre__tri { display: flex; align-items: center; }
.barre__tri select {
  font-family: var(--detail);
  font-size: 13px;
  color: var(--noir);
  background: var(--blanc);
  text-transform: lowercase;
  border: 0;
  border-bottom: 1px solid var(--noir);
  border-radius: 0;
  padding: 12px 4px;
  cursor: pointer;
}
.barre__tri select:focus-visible, .filtre:focus-visible { outline: 1px solid var(--noir); outline-offset: 2px; }

@media (max-width: 600px) {
  .barre__tri select { font-size: 16px; }   /* 16 px : évite le zoom automatique de l'iPhone */
  .barre__tri { width: 100%; }
}

/* Lisibilité : les tailles sont en noir ; la taille choisie est soulignée */
.filtre { color: var(--noir); }
.filtre:hover { color: var(--gris); }
.filtre[aria-pressed="true"] { color: var(--noir); }
@media (hover: none) { .filtre:hover { color: var(--noir); } }

/* ============================================================
   LOGO CODE-BARRES À LANCER (page d'accueil)
   ============================================================ */
.logo-volant {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: clamp(95px, 11vw, 130px);
  height: auto;
  cursor: grab;
  touch-action: none;               /* le doigt déplace le logo au lieu de faire défiler la page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: multiply;         /* le blanc de l'image devient transparent : seul le noir se voit, même sur la photo */
  opacity: 0;                       /* invisible tant que JS ne l'a pas placé */
  transition: opacity 0.6s ease 0.4s;
  will-change: transform;
}
.logo-volant--pret { opacity: 1; }
.logo-volant--saisi { cursor: grabbing; }

/* ============================================================
   PAGE LOOKS : mur de photos + visionneuse
   ============================================================ */
.looks { padding: 24px var(--marge) 80px; }
@media (min-width: 700px) { .looks { padding-bottom: 40px; } }

/* Mur de photos : grille régulière.
   Téléphone : 2 colonnes. Ordinateur : 4 photos par ligne ; les 2 premières lignes (8 photos)
   remplissent exactement l'écran, sans défiler. */
.mur { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) {
  .mur {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc((100svh - 290px) / 2);   /* hauteur d'une ligne : la moitié de l'écran disponible (sous l'en-tête et les filtres) */
    min-height: 300px;
    gap: 20px;
  }
}

.mur__item {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;           /* téléphone */
  padding: 0;
  border: 0;
  background: var(--gris);
  cursor: pointer;
  overflow: hidden;
}
@media (min-width: 700px) { .mur__item { aspect-ratio: auto; height: 100%; } }
.mur__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.mur__item:hover img { transform: scale(1.03); }
@media (hover: none) { .mur__item:hover img { transform: none; } }

/* Photo en grand : plein écran sur fond blanc */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px var(--marge) 72px;
  animation: fondu 0.3s ease both;
}
.visionneuse[hidden] { display: none; }
.visionneuse__image { max-width: 100%; max-height: 100%; object-fit: contain; min-height: 0; }
.visionneuse__legende { position: absolute; bottom: 24px; left: var(--marge); right: var(--marge); text-align: center; color: var(--noir); }
.visionneuse__fermer, .visionneuse__fleche {
  position: absolute;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--noir);
  padding: 14px;
  font-family: var(--detail);
}
.visionneuse__fermer { top: max(8px, env(safe-area-inset-top)); right: 6px; }
.visionneuse__fleche { top: 50%; transform: translateY(-50%); font-size: 22px; }
.visionneuse__fleche--gauche { left: 0; }
.visionneuse__fleche--droite { right: 0; }
.visionneuse__fermer:hover, .visionneuse__fleche:hover { color: var(--gris); }
@media (max-width: 600px) { .visionneuse__fleche { display: none; } }   /* sur téléphone : on glisse le doigt */

/* En-tête : les liens (boutique, moodboard, vinted, instagram) restent toujours sur UNE seule ligne.
   Sur petit écran, le texte et les espaces se resserrent pour que tout tienne. */
.entete__liens { flex-wrap: nowrap; }
@media (max-width: 600px) {
  .entete { gap: 6px; }
  .entete__nom { font-size: 14px; }
  .entete__liens { gap: 0; }
  .entete__liens a { font-size: 12px; padding: 12px 5px; letter-spacing: 0.02em; }
}
@media (max-width: 400px) {
  .entete__nom { font-size: 13px; }
  .entete__liens a { font-size: 11px; padding: 12px 4px; }
}

/* Très petits écrans : le logo « koenji archives » reprend une taille plus modeste pour ne pas toucher les liens */
@media (max-width: 340px) {
  .couverture__logo { width: 135px; }
}

/* Nom « koenji archives » en haut à gauche : taille intermédiaire.
   Le nom et les liens restent toujours sur UNE seule ligne. */
.entete__nom { font-size: 22px; letter-spacing: -0.005em; }
@media (max-width: 600px) {
  .entete { flex-wrap: nowrap; align-items: center; gap: 8px; padding-top: max(var(--marge), env(safe-area-inset-top)); padding-bottom: 0; }
  .entete__nom { font-size: 18px; flex-basis: auto; }
  .entete__liens { margin-left: 0; margin-right: -5px; width: auto; justify-content: flex-end; gap: 0; }
  .entete__liens a { font-size: 12px; padding: 12px 4px; letter-spacing: 0.01em; }
}
@media (max-width: 400px) {
  .entete__nom { font-size: 17px; }
  .entete__liens a { font-size: 11.5px; padding: 12px 3.5px; }
}
@media (max-width: 340px) {
  .entete__nom { font-size: 15px; }
  .entete__liens a { font-size: 11px; padding: 12px 3px; }
}

/* Boutique et moodboard : « taille », « trier » et les filtres sont plus petits, comme les liens de l'en-tête */
.barre__titre, .filtre { font-size: 12px; }
.filtre { padding: 12px 6px; }
.barre__tri select { font-size: 12px; padding: 12px 4px; }
@media (max-width: 600px) {
  .barre__titre, .filtre { font-size: 12px; }
  /* Sur iPhone, un menu en dessous de 16 px fait zoomer la page à l'ouverture : on garde 16 px
     mais on réduit l'affichage pour qu'il paraisse aussi petit que le reste. */
  .barre__tri select { font-size: 16px; transform: scale(0.75); transform-origin: left center; margin: -6px 0; }
}

/* Tri de la boutique : trois choix côte à côte (plus de menu déroulant), comme les tailles.
   Les deux lignes « taille » et « trier » sont l'une sous l'autre, alignées à gauche. */
.barre { flex-direction: column; align-items: flex-start; gap: 0; }
.barre__tri { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }

/* Tri : discret. Seul « trier + » se voit ; les 3 choix apparaissent au toucher, sous les tailles. */
.barre { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
.barre__tri { display: flex; flex-direction: column; align-items: flex-start; margin-top: -6px; }
.tri-ouvrir {
  background: none;
  border: 0;
  padding: 10px 0;
  cursor: pointer;
  font-size: 11px;
  color: var(--gris);
  text-transform: lowercase;
  transition: color 0.3s ease;
}
.tri-ouvrir:hover, .tri-ouvrir[aria-expanded="true"] { color: var(--noir); }
.tri-ouvrir:focus-visible { outline: 1px solid var(--noir); outline-offset: 2px; }
@media (hover: none) { .tri-ouvrir:hover { color: var(--gris); } .tri-ouvrir[aria-expanded="true"] { color: var(--noir); } }
.tri-choix { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -6px; }
.tri-choix[hidden] { display: none; }
.tri-choix .filtre { font-size: 11px; padding: 8px 6px; }

/* Tailles : même principe que le tri (« taille + » ouvre la liste), les deux lignes sont l'une sous l'autre */
.barre__tailles { display: flex; flex-direction: column; align-items: flex-start; }
.barre__tailles .tri-ouvrir { color: var(--gris); }
.barre__tailles .tri-ouvrir[aria-expanded="true"], .barre__tailles .tri-ouvrir:hover { color: var(--noir); }
@media (hover: none) { .barre__tailles .tri-ouvrir:hover { color: var(--gris); } .barre__tailles .tri-ouvrir[aria-expanded="true"] { color: var(--noir); } }
.barre__tri { margin-top: 0; }

/* ============================================================
   ÉCRITURE EN LAVANDE CLAIR
   Quand on touche un bouton, ou quand un choix est actif (taille, tri, filtre),
   son texte passe en lavande clair (pas de fond).
   ============================================================ */
.filtre[aria-pressed="true"],
.tri-ouvrir[aria-expanded="true"],
.barre__tailles .tri-ouvrir[aria-expanded="true"],
.filtre:active,
.tri-ouvrir:active {
  color: var(--lavande) !important;
}
.filtre[aria-pressed="true"] { border-bottom-color: var(--lavande); }   /* le petit soulignement du choix actif prend la même couleur */

/* bouton « voir sur vinted » : texte et cadre en lavande au toucher */
a.bouton:active, button.bouton:active { background: var(--blanc); color: var(--lavande); border-color: var(--lavande); }

/* Liens du haut (moodboard, boutique, vinted, instagram) et liens de la page d'accueil :
   l'écriture passe en lavande quand on passe dessus ou qu'on appuie */
.entete__liens a:hover, .entete__liens a:active, .entete__liens a:focus-visible,
.couverture__cta:hover, .couverture__cta:active, .couverture__cta:focus-visible {
  color: var(--lavande);
}
.couverture__cta:hover, .couverture__cta:active { border-bottom-color: var(--lavande); }

/* ============================================================
   TEXTE QUI S'ÉCRIT (page d'accueil) : sous la photo, à gauche
   ============================================================ */
.ecriture {
  margin: 14px var(--marge) 0;
  min-height: 1.6em;                 /* la place est réservée : rien ne bouge pendant l'écriture */
  font-size: 13px;
  line-height: 1.6;
  font-weight: normal;
  color: var(--noir);
  text-transform: none;
  letter-spacing: 0.02em;
}
.ecriture__curseur {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--noir);
  animation: clignote 0.9s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }

/* 💢 qui apparaît au-dessus du petit visage, à droite, quand le logo code-barres le touche.
   L'émoji est teinté en rose fuchsia. */
.ecriture__visage { position: relative; display: inline-block; }   /* inline-block : permet de le faire vibrer */
.ecriture__colere {
  position: absolute;
  right: -0.3em;
  top: -0.95em;
  font-size: 0.92em;                 /* le 💢 garde à peu près sa taille (12 px) quand le texte rapetisse */
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) rotate(-25deg);
  transform-origin: 20% 80%;
  transition: transform 0.28s cubic-bezier(0.3, 1.7, 0.5, 1), opacity 0.18s ease;
  filter: hue-rotate(-32deg) saturate(1.9) brightness(1.05);   /* rouge de l'émoji -> rose fuchsia */
}
.ecriture__visage--colere .ecriture__colere { opacity: 1; transform: scale(1) rotate(0deg); }

/* Quand le logo touche le visage : il vibre un court instant (0,5 s, petites secousses très rapides) */
.ecriture__visage--vibre { animation: vibre-visage 0.07s linear infinite alternate; }
@keyframes vibre-visage {
  from { translate: -1.2px 0.4px; }
  to   { translate: 1.2px -0.4px; }
}
@media (prefers-reduced-motion: reduce) { .ecriture__visage--vibre { animation: none; } }

/* ============================================================
   BOUTIQUE : autres photos d'une pièce (survol sur ordinateur, balayage sur téléphone)
   ============================================================ */
.carte__image { position: relative; }
.carte .carte__image img.carte__alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.8s ease;
}
.carte .carte__image img.carte__alt--visible { opacity: 1; }
.carte--vendue .carte__image img.carte__alt--visible { opacity: 0.4; }   /* pièce vendue : toujours grisée */

/* Mot « nouveau » sur les pièces ajoutées depuis moins de 7 jours */
.carte__nouveau {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 7px;
  background: var(--blanc);
  color: var(--noir);
  font-size: 11px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ============================================================
   FICHE PIÈCE : photo en grand, bouton partager, pièce réservée
   ============================================================ */
.galerie__principale img { cursor: zoom-in; }

.partager {
  display: block;
  margin-top: 18px;
  padding: 8px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--noir);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.partager:hover, .partager:active { color: var(--lavande); }
@media (hover: none) { .partager:hover { color: var(--noir); } }

/* pièce réservée : grisée comme une pièce vendue */
.carte--reservee .carte__image img { opacity: 0.4; }
.carte--reservee .carte__nom { color: var(--gris); }
.carte--reservee .carte__image img.carte__alt--visible { opacity: 0.4; }

/* Phrase d'annonce en haut de la boutique */
.annonce {
  margin: 0 0 28px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--noir);
  text-transform: lowercase;
}

/* ============================================================
   EN-TÊTE : « + » qui ouvre vinted et instagram
   ============================================================ */
.entete__liens { position: relative; }
.plus {
  background: none;
  border: 0;
  padding: 10px 8px;
  margin-left: 2px;
  font-family: var(--detail);
  font-size: 18px;
  line-height: 1;
  color: var(--noir);
  cursor: pointer;
  transition: color 0.3s ease;
}
.plus:hover, .plus:active, .plus[aria-expanded="true"] { color: var(--lavande); }
@media (hover: none) { .plus:hover { color: var(--noir); } .plus[aria-expanded="true"] { color: var(--lavande); } }
.plus:focus-visible { outline: 1px solid var(--noir); outline-offset: 2px; }

/* petite liste qui s'ouvre sous le « + », alignée à droite, sans décaler la page */
.plus-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 2px 0 8px 14px;
  background: var(--blanc);
}
.plus-menu[hidden] { display: none; }
.plus-menu a { display: block; padding: 8px 5px; white-space: nowrap; }

/* « koenji archives » de la page d'accueil (en bas à gauche) : même taille de lettres que celui de l'en-tête
   des autres pages (22 px sur ordinateur, 17-18 px sur téléphone). */
.couverture__logo { width: 238px; }                     /* ≈ 22 px de texte */
@media (max-width: 600px) { .couverture__logo { width: 195px; } }   /* ≈ 18 px */
@media (max-width: 400px) { .couverture__logo { width: 184px; } }   /* ≈ 17 px */
@media (max-width: 340px) { .couverture__logo { width: 160px; } }   /* ≈ 15 px */

/* ============================================================
   BOUTIQUE : « all + » en haut à droite (taille, tri, vinted, instagram)
   ============================================================ */
.plus--all { font-size: 13px; letter-spacing: 0.02em; padding: 12px 6px; }
.plus-menu--large {
  width: min(340px, calc(100vw - 2 * var(--marge)));
  align-items: stretch;
  padding: 14px 16px 12px;
  border: 1px solid var(--gris);
  gap: 4px;
  margin-top: 2px;
}
.panneau__ligne { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; }
.panneau__titre { flex: 0 0 44px; color: var(--gris); font-size: 11px; }
.panneau__choix { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -6px; }
.panneau__choix .filtre { font-size: 12px; padding: 8px 6px; }
.panneau__liens { padding-left: 56px; gap: 14px; margin-top: 4px; border-top: 1px solid var(--gris); padding-top: 12px; }
.panneau__liens a { padding: 8px 0; }
.panneau__liens a { display: inline-block; }

/* Fenêtre du « + » : le trait de séparation n'apparaît que s'il y a des réglages (taille, tri...) au-dessus des liens */
.panneau__liens:first-child { border-top: 0; padding-top: 4px; padding-left: 0; margin-top: 0; }
.panneau__liens { flex-wrap: wrap; }
.plus { font-size: 20px; padding: 8px 6px 8px 10px; }
/* moodboard : plus de barre de filtre sous l'en-tête, la grille peut être un peu plus haute */
@media (min-width: 701px) { .mur { grid-auto-rows: calc((100svh - 200px) / 2); } }

/* ============================================================
   « + » centré sous le nom (taille et tri sur la boutique, filtre sur le moodboard)
   ============================================================ */
.filtres { position: relative; text-align: center; margin: 0 0 18px; }
.filtres[hidden] { display: none; }
.plus--filtres { font-size: 22px; padding: 6px 14px; margin: 0; }
.filtres__menu {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(340px, calc(100vw - 2 * var(--marge)));
  text-align: left;
  padding: 12px 16px 10px;
  background: var(--blanc);
  border: 1px solid var(--gris);
}
.filtres__menu[hidden] { display: none; }
/* moodboard : la grille retrouve de la place pour la ligne du « + » */
@media (min-width: 701px) { .mur { grid-auto-rows: calc((100svh - 250px) / 2); } }
.boutique { padding-top: 14px; }   /* le « + » centré se place juste sous le nom */

/* ============================================================
   FENÊTRES DES « + » : petites listes verticales (les mots les uns sous les autres)
   Le « + » des filtres se place juste sous « koenji archives », aligné à gauche.
   ============================================================ */
.filtres { text-align: left; margin: 0 0 14px; }
.plus--filtres { margin-left: -10px; padding: 4px 10px; }
.filtres__menu { left: 0; transform: none; width: auto; min-width: 170px; max-width: calc(100vw - 2 * var(--marge)); }

.plus-menu--large { width: auto; min-width: 150px; }

.panneau__ligne { display: block; padding: 2px 0; }
.panneau__ligne + .panneau__ligne { margin-top: 10px; }
.panneau__titre { display: block; flex: none; margin-bottom: 2px; }
.panneau__choix { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; margin-left: 0; gap: 0; }
.panneau__choix .filtre { padding: 6px 0; }

/* liens (moodboard, vinted, instagram...) : aussi les uns sous les autres */
.panneau__liens, .panneau__liens:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; margin: 0; border-top: 0; }
.panneau__liens a { display: block; padding: 6px 0; }

/* ============================================================
   MOTS DES FENÊTRES « + » : violet (lavande) quand on appuie dessus
   (et au survol de la souris sur ordinateur)
   ============================================================ */
.plus-menu a:active, .plus-menu a:focus-visible,
.panneau__liens a:active,
.filtres__menu .filtre:active, .filtres__menu .filtre:focus-visible,
.panneau__choix .filtre:active {
  color: var(--lavande) !important;
}
@media (hover: hover) {
  .plus-menu a:hover,
  .panneau__liens a:hover,
  .filtres__menu .filtre:hover,
  .panneau__choix .filtre:hover {
    color: var(--lavande) !important;
  }
}

/* ============================================================
   SANS « FENÊTRE » : quand on touche un +, les mots apparaissent simplement
   les uns sous les autres (sans cadre ni fond), et poussent la page vers le bas.
   ============================================================ */
/* en-tête : le nom et le + restent alignés en haut ; la liste du + s'ouvre sous le + */
.entete { align-items: flex-start; }
.entete__nom { display: flex; align-items: center; min-height: 44px; }
.entete__liens { flex-direction: column; align-items: flex-end; align-self: flex-start; }
.entete__liens .plus { display: flex; align-items: center; min-height: 44px; margin: 0; padding-top: 0; padding-bottom: 0; }

.plus-menu, .plus-menu--large {
  position: static;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 6px 8px 0;
  border: 0;
  background: none;
  align-items: flex-end;
  text-align: right;
}
.plus-menu .panneau__liens { align-items: flex-end; }

/* le + sous le nom : la liste s'ouvre juste en dessous, alignée à gauche */
.filtres__menu {
  position: static;
  transform: none;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0 0 6px;
  border: 0;
  background: none;
}
.filtres { margin: 0 0 10px; }

/* Le mot « vendu » est en violet (boutique, fiche pièce et bouton de la fiche) */
.mot-vendu { color: var(--lavande) !important; }
.bouton--vendu { color: var(--lavande); border-color: var(--lavande); }

/* Le mot « nouveau » (pièces ajoutées depuis moins de 7 jours) est en violet */
.carte__nouveau { color: var(--lavande); }

/* ============================================================
   MOODBOARD SUR ORDINATEUR : photos au format portrait (4/5), jamais écrasées ni coupées en carré.
   La grille est centrée et limitée en largeur pour que les 2 premières lignes (8 photos) tiennent dans l'écran.
   (Le format téléphone, 2 colonnes, ne change pas.)
   ============================================================ */
@media (min-width: 701px) {
  .mur {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    min-height: 0;
    /* largeur = 4 photos de 4/5 dont la hauteur = la moitié de l'écran disponible, + les espaces */
    max-width: max(560px, calc(1.6 * (100svh - 240px) + 60px));
    margin-left: auto;
    margin-right: auto;
  }
  .mur__item { aspect-ratio: 4 / 5; height: auto; }
  .mur__item img { object-position: center 25%; }   /* en cas de léger recadrage, on garde le haut (visage) */
}