/* ═══════════════════════════════════════════════════════════════
   CamiBijoux — Habillage de la galerie Smash Balloon

   On ne remplace rien : on reprend la main sur la disposition de ce
   qu'ils produisent déjà.

   Le !important est ici indispensable, et pas par confort : leur
   extension pose ses largeurs de colonnes en styles EN LIGNE, calculés
   par son propre JavaScript. Un style en ligne ne se surcharge pas
   autrement.
   ═══════════════════════════════════════════════════════════════ */

.cbig-skin {
    /* Une seule taille, quel que soit l'écran : l'encart mesure 215
       pixels de côté partout. Les proportions internes sont réglées
       pour cette dimension — un titre de 24 pixels, calibré pour un
       encart de 300, serait à l'étroit ici. */
    --cbig-card: 215px;
    --cbig-ink: #3A2317;
    /* Le filet du cadre et celui du bouton : une seule valeur, pour
       qu'ils restent accordés. Marron foncé plein, le même que le
       texte — le cadre se lit alors franchement, y compris posé sur
       une photo sombre. */
    --cbig-line: #3A2317;

    position: relative !important;
    font-family: "DM Sans", Arial, sans-serif !important;
}

/* ── La grille ───────────────────────────────────────────────── */
.cbig-skin #sb_instagram {
    padding: 0 !important;
    width: 100% !important;
}

/* La gouttière disparaît — les vignettes se touchent. Le NOMBRE de
   colonnes, lui, reste celui réglé dans Smash Balloon : ils ont déjà
   un réglage par taille d'écran, et en poser un second ici créerait
   deux sources de vérité pour la même décision. */
.cbig-skin #sbi_images {
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.cbig-skin #sbi_images .sbi_item {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Les vignettes, carrées et jointives ─────────────────────── */
.cbig-skin .sbi_photo_wrap,
.cbig-skin .sbi_photo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden !important;
}

.cbig-skin .sbi_photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .5s ease !important;
}

/* Le zoom au survol n'existe que là où il y a un vrai pointeur : sur
   un écran tactile il resterait figé après le toucher. */
@media (hover: hover) {
    .cbig-skin .sbi_photo:hover img { transform: scale(1.04) !important; }
}

/* ── Ce qu'on masque ─────────────────────────────────────────
   L'en-tête et le bouton « Charger plus » de leur extension : l'encart
   ci-dessous joue déjà ce rôle, et deux invitations à suivre le compte
   dans le même bloc se neutralisent. */
.cbig-skin #sbi_header_wrap,
.cbig-skin .sb_instagram_header,
.cbig-skin #sbi_load {
    display: none !important;
}

/* ── L'encart ──────────────────────────────────────────────────
   Carré, comme les vignettes qu'il recouvre. Le corps se centre dans
   la place disponible, le bouton reste collé en bas : c'est ce qui
   tient la mise en page quelle que soit la longueur du sous-titre. */
.cbig-card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;

    display: flex !important;
    flex-direction: column !important;
    width: min(var(--cbig-card), 78%) !important;
    aspect-ratio: 1 / 1 !important;

    /* Blanc à 92 % : les photos transparaissent juste assez pour que
       l'encart se pose sur elles au lieu de les masquer. Pas plus bas —
       en dessous, un cliché chargé passerait à travers le texte, et
       l'on gagnerait un effet en perdant la lisibilité. */
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid var(--cbig-line) !important;
    text-align: center !important;
    box-shadow: 0 10px 40px rgba(28, 20, 15, .12) !important;
}

.cbig-card__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 16px !important;
}

.cbig-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Le tracé hérite de la couleur du texte : une seule déclaration
   accorde le logo, le titre et le sous-titre. */
.cbig-card__logo {
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    color: var(--cbig-ink) !important;
}

.cbig-card__logo-dot {
    fill: currentColor !important;
    stroke: none !important;
}

.cbig-card__title {
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--cbig-ink) !important;
    line-height: 1.1 !important;
}

.cbig-card__handle {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--cbig-ink) !important;
}

.cbig-card__button {
    flex: 0 0 auto !important;
    display: block !important;
    padding: 13px 16px !important;
    border-top: 1px solid var(--cbig-line) !important;
    color: var(--cbig-ink) !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background .2s ease !important;
}

@media (hover: hover) {
    a.cbig-card__button:hover { background: rgba(42, 37, 34, .05) !important; }
}