/* ============================================================
   FICHE-DETAILLEE-LIVRE.CSS (mobile-first)
   Layout mobile+tablette : 1 colonne
   Layout desktop 1200px+ : [visuels | info | méta]
   Hero : identique aux autres pages (pas de min-height override)
   Police : Roboto uniquement
   Tailles de police : em relatif au body (base.css)
   body : 16px → 24px → 28px → 30px → 22px → 18px
============================================================ */

/* ── Hero — transparent (le fond map-bg du body transparaît)
   Aucune override de min-height : comportement identique aux autres pages ── */
.page-single-ouvrage .hero {
  background-color: transparent;
}

/* ─── Corps de page ─── */
.so-body {
  padding: 32px 0 64px;
}

.so-wrap {
  padding: 24px 16px;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT — 1 colonne (mobile + tablette)
   3 colonnes uniquement à partir de 1200px
══════════════════════════════════════════════════════════ */

.so-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

/* ══════════════════════════════════════════════════════════
   COL 1 — VISUELS
   Mobile + tablette : flex-row [thumbs gauche] [cover droite]
══════════════════════════════════════════════════════════ */

.so-visuals {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Vignettes — empilées verticalement, toujours à gauche */
.so-thumbs {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  width: 100px;
}

.so-thumb-btn {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 2px solid rgba(0, 0, 0, .18);
  background: rgba(0, 0, 0, .05);
  padding: 0;
  cursor: zoom-in;
  border-radius: 5px;
  overflow: hidden;
  transition: border-color .2s, transform .25s ease, box-shadow .25s ease;
}

.so-thumb-btn:hover {
  border-color: rgba(201, 170, 110, .8);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.so-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Couverture principale — toujours à droite, flex:1 */
.so-cover-btn {
  order: 2;
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
}

.so-cover-main {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .4));
  transition: transform .3s ease, filter .3s ease;
}

.so-cover-btn:hover .so-cover-main {
  transform: scale(1.03) translateY(-4px);
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, .55));
}

/* ══════════════════════════════════════════════════════════
   COL 2 — INFO PRINCIPALE
══════════════════════════════════════════════════════════ */

.so-info-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.so-genres {
  font-size: 0.875em;
  font-style: italic;
  color: var(--text-muted);
  margin: 0;
}

.so-title {
  font-family: var(--font-sans);
  font-size: 1.625em;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}

.so-subtitle {
  font-family: var(--font-sans);
  font-size: 1em;
  color: var(--text-muted);
  margin: 0;
  font-weight: 400;
}

.so-author {
  font-size: 1em;
  color: var(--text);
  margin: 0;
}
.so-author strong { font-weight: 600; }

/* Description + toggle */
.so-desc { margin: 0; }

.so-desc__inner {
  font-size: 1em;
  line-height: 1.8;
  color: var(--text);
  max-height: 8.5em;
  overflow: hidden;
  transition: max-height .45s ease;
}
.so-desc__inner.is-expanded { max-height: 200em; }
.so-desc__inner p { margin: 0 0 .9em; }
.so-desc__inner p:last-child { margin-bottom: 0; }

.so-desc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875em;
  font-family: var(--font-sans);
  color: var(--btn-blue);
  cursor: pointer;
  font-weight: 500;
  transition: color .2s;
}
.so-desc__toggle:hover { color: var(--btn-blue-hover); }

.so-desc__arrow {
  display: inline-block;
  font-size: 15px;
  transition: transform .3s ease;
}
.so-desc__toggle[aria-expanded="true"] .so-desc__arrow { transform: rotate(90deg); }

/* ══════════════════════════════════════════════════════════
   COL 3 — MÉTA / ACHAT
══════════════════════════════════════════════════════════ */

.so-info-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.so-divider {
  border: none;
  height: 1px;
  background: rgba(27, 27, 27, .15);
  margin: 0;
}

.so-meta__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.so-meta__label {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.so-meta__value {
  font-size: 1em;
  font-weight: 600;
  color: var(--text);
}

/* Badge format — doré, taille du contenu uniquement */
.so-badge {
  display: inline-block;
  align-self: flex-start;   /* ne prend pas toute la largeur du parent */
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a1209;
  background: linear-gradient(135deg, var(--btn-gold-start), var(--btn-gold-end));
  border-radius: 20px;
  padding: 5px 14px;
}

/* Prix */
.so-price {
  font-family: var(--font-sans);
  font-size: 1.75em;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* Dimensions / pages */
.so-dims-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.so-dims {
  font-size: 0.875em;
  color: var(--text-muted);
  margin: 0;
}

/* Bouton acheter */
.so-buy-btn {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--fs-btn);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════ */

.so-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.so-lightbox[hidden] { display: none; }

.so-lightbox.is-open {
  display: flex;
  animation: so-lb-in .22s ease both;
}
@keyframes so-lb-in { from { opacity: 0; } to { opacity: 1; } }

.so-lightbox.is-closing { animation: so-lb-out .18s ease both; }
@keyframes so-lb-out { from { opacity: 1; } to { opacity: 0; } }

.so-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.so-lightbox__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 920px);
  max-height: 90vh;
  animation: so-lb-zoom .3s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes so-lb-zoom {
  from { transform: scale(.86); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.so-lightbox.is-closing .so-lightbox__content {
  animation: so-lb-zoom-out .18s ease both;
}
@keyframes so-lb-zoom-out {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(.86); opacity: 0; }
}

.so-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  object-fit: contain;
}

.so-lightbox__close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.so-lightbox__close:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .55);
  transform: rotate(90deg);
}

/* ══════════════════════════════════════════════════════════
   TABLETTES 768–1199px :
   • visuels centrés et agrandis (1 colonne)
   • so-thumbs centrés verticalement dans so-visuals
   • images so-thumb affichées avec leur aspect-ratio natif (3/4)
══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  .so-body { padding: 40px 0 80px; }
  .so-wrap { padding: 32px 28px; }

  .so-visuals {
    max-width: 520px;
    margin-inline: auto;
    align-items: center;
  }

  /* Thumbs plus larges → cover réduit proportionnellement (flex:1) */
  .so-thumbs { width: 160px; }

  .so-thumb-btn {
    width: 160px;
    aspect-ratio: 3 / 4;
  }

}

@media (min-width: 820px) {

  .so-visuals { max-width: 580px; }

  .so-thumbs    { width: 180px; }
  .so-thumb-btn { width: 180px; aspect-ratio: 3 / 4; }

}

@media (min-width: 992px) {

  .so-body { padding: 48px 0 88px; }
  .so-wrap { padding: 36px 32px; }

  .so-visuals { max-width: 640px; }

  .so-thumbs    { width: 200px; }
  .so-thumb-btn { width: 200px; aspect-ratio: 3 / 4; }

}

/* ══════════════════════════════════════════════════════════
   DESKTOP 1200px+ : 3 colonnes [visuels | info | méta]
══════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {

  .so-body { padding: 56px 0 100px; }
  .so-wrap { padding: 40px 36px; }

  .so-layout {
    grid-template-columns: 460px 1fr 240px;
    gap: 48px;
    align-items: center;   /* les 3 colonnes centrées en hauteur */
  }

  /* so-info-main : plus de gap et légèrement réduite par la colonne so-visuals plus large */
  .so-info-main { gap: 24px; }

  /* En 3 col : visuels sticky, thumbs centrés verticalement */
  .so-visuals {
    max-width: none;
    margin-inline: 0;
    position: sticky;
    top: 110px;
    align-items: center;   /* thumbs centrés en hauteur par rapport au cover */
  }

  .so-thumbs { width: 150px; }

  .so-thumb-btn {
    width: 150px;
    aspect-ratio: 3 / 4;
  }

  .so-info-side {
  gap: 30px;
}

}