/* ClubOS 7.9 — galerie du composeur, cartes multi-images et navigation média. */
.cab-composer-gallery-wrap { border:1px solid #d9e1ec; border-radius:14px; padding:12px; background:#f8fafc; }
.cab-composer-gallery-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cab-composer-gallery-head > div { display:flex; align-items:baseline; gap:8px; }
.cab-composer-gallery-head span { color:#64748b; font-size:.8rem; }
.cab-composer-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cab-composer-gallery-card { min-width:0; overflow:hidden; border:1px solid #d7dfeb; border-radius:12px; background:#fff; box-shadow:0 3px 10px rgba(15,23,42,.05); }
.cab-composer-gallery-card.is-dragging { opacity:.45; }
.cab-composer-gallery-visual { position:relative; aspect-ratio:16/10; overflow:hidden; background:#080b11; display:grid; place-items:center; }
.cab-composer-gallery-visual img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; display:block; }
.cab-composer-gallery-position { position:absolute; top:7px; left:7px; padding:3px 7px; border-radius:999px; color:#fff; background:rgba(15,23,42,.8); font-size:.7rem; font-weight:750; }
.cab-composer-gallery-toolbar { position:absolute; top:6px; right:6px; display:flex; gap:4px; opacity:0; transform:translateY(-2px); transition:.15s ease; }
.cab-composer-gallery-card:hover .cab-composer-gallery-toolbar,
.cab-composer-gallery-card:focus-within .cab-composer-gallery-toolbar { opacity:1; transform:none; }
.cab-composer-gallery-action { display:grid; width:30px; height:30px; padding:0; place-items:center; border-radius:50%; box-shadow:0 2px 7px rgba(15,23,42,.18); }
.cab-composer-gallery-drag-handle { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:#334155; background:#fff; box-shadow:0 2px 7px rgba(15,23,42,.18); cursor:grab; user-select:none; }
.cab-composer-gallery-drag-handle:active { cursor:grabbing; }
.cab-composer-gallery-alt { display:grid; gap:5px; padding:9px; }
.cab-composer-gallery-alt label { font-size:.76rem; font-weight:700; }
.cab-composer-gallery-alt small { justify-self:end; }
.cab-composer-gallery-help { margin-top:8px; color:#64748b; font-size:.76rem; }
.cab-composer-preview-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.cab-composer-preview-gallery-item { margin:0; overflow:hidden; border-radius:10px; background:#080b11; }
.cab-composer-preview-gallery-item img { width:100%; aspect-ratio:4/3; object-fit:contain; display:block; }
.cab-composer-preview-gallery-item figcaption { padding:6px 8px; color:#64748b; font-size:.72rem; }
.cab-composer-link-choices { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cab-composer-link-choice { border:1px solid #cbd5e1; border-radius:999px; padding:4px 10px; color:#334155; background:#fff; font-size:.75rem; }
.cab-composer-link-choice.is-selected { border-color:#2563eb; color:#fff; background:#2563eb; }
.cab-composer-link-preview-card { align-items:stretch; }
.cab-composer-link-preview-visual { position:relative; flex:0 0 145px; min-height:110px; overflow:hidden; border-radius:10px; background:#e9eef5; }
.cab-composer-link-preview-visual img { width:100%; height:100%; object-fit:cover; }
.cab-composer-link-preview-thumbnail-button { position:absolute; right:6px; bottom:6px; font-size:.7rem; }
.cab-composer-link-preview-copy { display:grid; gap:6px; align-content:start; }
.cab-composer-link-preview-source { overflow:hidden; color:#64748b; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }

.blog-post-gallery { position:relative; display:grid; gap:3px; overflow:hidden; border-radius:12px; aspect-ratio:16/10; margin-top:.35rem; margin-bottom:.37rem; background:#e7edf5; }
.blog-post-gallery-count-1 { grid-template-columns:1fr; }
.blog-post-gallery-count-2 { grid-template-columns:repeat(2,1fr); }
.blog-post-gallery-count-3 { grid-template-columns:1.35fr 1fr; grid-template-rows:repeat(2,1fr); }
.blog-post-gallery-count-3 .blog-post-gallery-item:first-child { grid-row:1/3; }
.blog-post-gallery-count-4 { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); }
.blog-post-gallery-item { position:relative; min-width:0; min-height:0; overflow:hidden; display:block; text-decoration:none; }
.blog-post-gallery .blog-post-image-link { margin:0; }
.blog-post-gallery-item .blog-post-image { width:100%; height:100%; object-fit:cover; display:block; }
.blog-post-gallery-more { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(15,23,42,.58); font-size:1.35rem; font-weight:800; }
.blog-post-gallery .blog-post-visibility-badge { position:absolute; right:8px; bottom:8px; z-index:2; pointer-events:none; }

.blog-post-page-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0; }
.blog-post-page-gallery-count-1 { grid-template-columns:1fr; }
.blog-post-page-gallery-count-3 .blog-post-page-gallery-item:first-child { grid-row:span 2; }
.blog-post-page-gallery-item { display:block; overflow:hidden; min-height:180px; border-radius:14px; background:#e8edf4; }
.blog-post-page-gallery-item img { width:100%; height:100%; max-height:540px; object-fit:cover; display:block; }

.post-display-reading-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 1.25rem; overflow:hidden; border-radius:16px; }
.post-display-reading-gallery-count-3 .post-display-reading-gallery-item:first-child { grid-row:span 2; }
.post-display-reading-gallery-item { position:relative; min-height:180px; padding:0; overflow:hidden; border:0; background:#e8edf4; }
.post-display-reading-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.post-display-reading-gallery-more { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(15,23,42,.58); font-size:2rem; font-weight:800; }

.post-display-media-stage { position:relative; }
.post-display-media-thumbnails { position:absolute; right:14px; bottom:14px; left:14px; display:flex; gap:7px; overflow-x:auto; padding:7px; border-radius:13px; background:rgba(5,10,20,.72); backdrop-filter:blur(8px); z-index:4; }
.post-display-media-thumbnail { flex:0 0 64px; width:64px; height:48px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:8px; background:#111827; }
.post-display-media-thumbnail.is-active { border-color:#4aa3ff; box-shadow:0 0 0 2px rgba(74,163,255,.25); }
.post-display-media-thumbnail img { width:100%; height:100%; object-fit:cover; display:block; }
.post-display-media-nav { position:absolute; top:50%; z-index:4; display:grid; width:44px; height:44px; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(15,23,42,.76); transform:translateY(-50%); font-size:2rem; line-height:1; }
.post-display-media-nav:hover,
.post-display-media-nav:focus-visible { background:rgba(37,99,235,.92); }
.post-display-media-nav.is-previous { left:14px; }
.post-display-media-nav.is-next { right:14px; }
.post-display-media-counter { position:absolute; top:14px; right:14px; z-index:4; padding:5px 9px; border-radius:999px; color:#fff; background:rgba(15,23,42,.72); font-size:.76rem; font-weight:700; }

:root[data-theme="dark"] .cab-composer-gallery-wrap,
:root[data-theme="dark"] .cab-composer-gallery-card { border-color:#334155; background:#142033; }
:root[data-theme="dark"] .cab-composer-link-choice { color:#e5edf8; border-color:#475569; background:#172238; }

@media (max-width:767.98px) {
  .cab-composer-gallery-grid { grid-template-columns:1fr; }
  .cab-composer-gallery-toolbar { opacity:1; transform:none; }
  .cab-composer-link-preview-card { display:grid; }
  .cab-composer-link-preview-visual { min-height:170px; }
  .blog-post-page-gallery { grid-template-columns:1fr; }
  .blog-post-page-gallery-item { min-height:150px; }
  .post-display-reading-gallery { grid-template-columns:1fr 1fr; }
  .post-display-reading-gallery-item { min-height:125px; }
  .post-display-media-thumbnails { right:8px; bottom:8px; left:8px; }
  .post-display-media-nav { width:38px; height:38px; }
  .post-display-media-nav.is-previous { left:8px; }
  .post-display-media-nav.is-next { right:8px; }
}


/* AV.1.1 R6 FIX5 — one portrait image is media, not a crop tile. */
.blog-post-gallery-count-1.is-portrait,
.blog-post-gallery-count-1.is-contained { background:#080b11; }
.blog-post-gallery-count-1.is-portrait .blog-post-gallery-item,
.blog-post-gallery-count-1.is-contained .blog-post-gallery-item { display:flex; align-items:center; justify-content:center; }
.blog-post-gallery-count-1.is-portrait .blog-post-gallery-item .blog-post-image,
.blog-post-gallery-count-1.is-contained .blog-post-gallery-item .blog-post-image { width:auto; max-width:100%; height:100%; max-height:100%; object-fit:contain; }
@media (max-width:767.98px) {
  .blog-post-gallery-count-1.is-portrait,
  .blog-post-gallery-count-1.is-contained { aspect-ratio:auto; min-height:0; }
  .blog-post-gallery-count-1.is-portrait .blog-post-gallery-item,
  .blog-post-gallery-count-1.is-contained .blog-post-gallery-item { display:block; height:auto; min-height:0; }
  .blog-post-gallery-count-1.is-portrait .blog-post-gallery-item .blog-post-image,
  .blog-post-gallery-count-1.is-contained .blog-post-gallery-item .blog-post-image { width:100%; height:auto; max-width:100%; max-height:none; object-fit:contain; }
}


/* AV.1.1 R6 FIX7 — a single image is never a crop tile.
 * Desktop keeps the card rhythm and contains the full media; mobile lets the
 * image define its natural height. Multi-image galleries keep their tile crop. */
.blog-post-gallery-count-1 {
  background:#080b11;
}
.blog-post-gallery-count-1 .blog-post-gallery-item {
  display:flex;
  align-items:center;
  justify-content:center;
}
.blog-post-gallery-count-1 .blog-post-gallery-item .blog-post-image {
  width:auto !important;
  max-width:100% !important;
  height:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  transform:none;
}
.blog-post-gallery-count-1 .blog-post-image-link:hover .blog-post-image,
.blog-post-gallery-count-1 .blog-post-image-link:focus-visible .blog-post-image {
  transform:none;
}
@media (max-width:767.98px) {
  .blog-post-gallery-count-1 {
    aspect-ratio:auto !important;
    min-height:0 !important;
  }
  .blog-post-gallery-count-1 .blog-post-gallery-item {
    display:block;
    height:auto !important;
    min-height:0 !important;
  }
  .blog-post-gallery-count-1 .blog-post-gallery-item .blog-post-image {
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}


/* AV.1.1 R6 FIX8 — cache-safe single-media fit + viewport-aware portrait stage.
 * One media item is never a crop tile. The same image supplies a blurred,
 * colour-adaptive backdrop while the foreground remains completely visible. */
.blog-post-gallery-count-1 {
  background:#080b11;
}
.blog-post-gallery-count-1 .blog-post-gallery-item {
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.blog-post-gallery-count-1 .blog-post-gallery-item .blog-post-image {
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  transform:none !important;
}
@media (max-width:767.98px) {
  .blog-post-gallery-count-1 {
    aspect-ratio:auto !important;
    min-height:0 !important;
  }
  .blog-post-gallery-count-1 .blog-post-gallery-item {
    width:100%;
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
  }
  .blog-post-gallery-count-1 .blog-post-gallery-item .blog-post-image {
    width:auto !important;
    height:auto !important;
    max-width:calc(100% - 12px) !important;
    max-height:min(68svh, 620px) !important;
    object-fit:contain !important;
    margin-inline:auto;
  }
}



.cab-composer-preview-gallery-item { position:relative; isolation:isolate; background:#080b11; }
.cab-composer-preview-gallery-item::before { content:""; position:absolute; inset:-10px; z-index:0; background-image:var(--cab-composer-image-bg, none); background-size:cover; background-position:center; filter:blur(24px) saturate(.86); transform:scale(1.08); opacity:.38; pointer-events:none; }
.cab-composer-preview-gallery-item > img { position:relative; z-index:1; object-fit:contain !important; object-position:center center !important; }

/* AV.1.1 R6 FIX9 — deterministic single-media stage.
 * Do not infer presentation from portrait metadata and do not rely on cascade luck.
 * A single image is a photograph, not a crop tile. */
.cab-composer-gallery-visual {
  position:relative;
  isolation:isolate;
  background:#080b11;
}
.cab-composer-gallery-visual::before {
  content:"";
  position:absolute;
  inset:-12px;
  z-index:0;
  background-image:var(--cab-composer-image-bg, none);
  background-size:cover;
  background-position:center;
  filter:blur(28px) saturate(.86);
  transform:scale(1.08);
  opacity:.42;
  pointer-events:none;
}
.cab-composer-gallery-visual > img {
  position:relative;
  z-index:1;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.blog-post-gallery.is-single-media {
  position:relative;
  isolation:isolate;
  background:#080b11;
}
.blog-post-gallery.is-single-media::before {
  opacity:.42 !important;
  filter:blur(32px) saturate(.86) !important;
  transform:scale(1.10) !important;
}
.blog-post-gallery.is-single-media .blog-post-gallery-item {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block !important;
}
.blog-post-gallery.is-single-media .blog-post-image {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}
@media (max-width:767.98px) {
  .blog-post-gallery.is-single-media {
    aspect-ratio:auto !important;
    height:min(68svh, 620px) !important;
    min-height:min(48svh, 390px);
  }
  .blog-post-gallery.is-single-media .blog-post-gallery-item,
  .blog-post-gallery.is-single-media .blog-post-image {
    width:100% !important;
    height:100% !important;
  }
}

/* AV.1.1 R6 FIX11 — composer gallery layout hardening.
 * FIX10 was accidentally serialized with literal backslash-n sequences.
 * Controls live in a dedicated header outside the clipped media viewport. */
.cab-composer-gallery-card {
  min-width:0;
  overflow:hidden;
  border:1px solid #d7dfeb;
  border-radius:12px;
  background:#fff;
}
.cab-composer-gallery-card-head {
  position:relative;
  z-index:10;
  min-height:44px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  overflow:visible;
}
.cab-composer-gallery-card-head .cab-composer-gallery-position {
  position:static !important;
  flex:0 0 auto;
  padding:3px 7px;
  color:#fff;
  background:rgba(15,23,42,.86);
}
.cab-composer-gallery-card-head .cab-composer-gallery-toolbar {
  position:static !important;
  z-index:11;
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:4px;
  margin-left:auto;
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.cab-composer-gallery-card-head .cab-composer-gallery-action,
.cab-composer-gallery-card-head .cab-composer-gallery-drag-handle {
  position:relative;
  z-index:12;
  flex:0 0 30px;
  width:30px;
  height:30px;
}
.cab-composer-gallery-card-head .cab-composer-gallery-action:disabled {
  opacity:.35;
  cursor:not-allowed;
}
.cab-composer-gallery-visual {
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:var(--cab-composer-media-ratio, 16 / 10) !important;
  min-height:150px;
  max-height:min(52vh, 460px);
  overflow:hidden;
  background:#080b11;
}
.cab-composer-gallery-visual > img {
  position:relative;
  z-index:1;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
:root[data-theme="dark"] .cab-composer-gallery-card-head {
  background:#142033;
  border-bottom-color:#334155;
}
@media (max-width:767.98px) {
  .cab-composer-gallery-card-head { padding:6px; }
  .cab-composer-gallery-card-head .cab-composer-gallery-toolbar { gap:3px; }
  .cab-composer-gallery-visual { max-height:min(58svh, 520px); }
}

/* OVH R6 HOTFIX2 — mobile single-media ratio correction.
 * A landscape image must keep a landscape stage. Only portrait media uses the
 * viewport-height stage introduced for tall phone photos. */
@media (max-width:767.98px) {
  .blog-post-gallery.is-single-media:not(.is-portrait) {
    aspect-ratio:16 / 10 !important;
    height:auto !important;
    min-height:0 !important;
  }
  .blog-post-gallery.is-single-media:not(.is-portrait) .blog-post-gallery-item,
  .blog-post-gallery.is-single-media:not(.is-portrait) .blog-post-image {
    width:100% !important;
    height:100% !important;
  }
  .blog-post-gallery.is-single-media.is-portrait {
    aspect-ratio:auto !important;
    height:min(68svh, 620px) !important;
    min-height:min(48svh, 390px) !important;
  }
}