/* ============================================================================
 * placeholder.css — Circuits Paris Ouest
 *
 * Systeme de placeholders pour wireframes / dev.
 * Usage type :
 *   <figure class="placeholder placeholder-16-9"
 *           data-placeholder="📸 HERO · Couple senior souriant · 16:9">
 *   </figure>
 *
 * Le SVG /assets/icons/placeholder.svg est utilise en background.
 * Le texte descriptif est lu depuis data-placeholder en ::after.
 * ============================================================================ */

.placeholder {
  /* Tokens locaux — peuvent etre overrides par classe enfant ou inline style */
  --ph-bg: #e5e5e5;
  --ph-stroke: #a3a3a3;
  --ph-fg: #525252;
  --ph-radius: 8px;
  --ph-font: 'GT America', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ph-size: 13px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  background-color: var(--ph-bg);
  background-image: url('/assets/icons/placeholder.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--ph-radius);
  overflow: hidden;
  color: var(--ph-fg);
  font-family: var(--ph-font);
  font-size: var(--ph-size);
  line-height: 1.4;
  text-align: center;
}

/* Texte descriptif issu de data-placeholder du parent */
.placeholder::after {
  content: attr(data-placeholder);
  display: block;
  padding: 0.5em 0.75em;
  max-width: 85%;
  color: var(--ph-fg);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ------- Ratios utilitaires ------- */
.placeholder-16-9 {
  aspect-ratio: 16 / 9;
}
.placeholder-4-3 {
  aspect-ratio: 4 / 3;
}
.placeholder-1-1 {
  aspect-ratio: 1 / 1;
}
.placeholder-9-16 {
  aspect-ratio: 9 / 16;
}

/* ------- Variantes optionnelles ------- */
.placeholder--dark {
  --ph-bg: #1f1f1f;
  --ph-stroke: #525252;
  --ph-fg: #d4d4d4;
}
.placeholder--accent {
  --ph-bg: #fef3ec;
  --ph-stroke: #c2410c;
  --ph-fg: #7c2d0c;
}