/* ============================================
   DHT1230 Collections - Frontend

   Ce fichier est fait pour être modifié manuellement.

   Il stylise notamment le shortcode :
   - [dht1230_references]
   ============================================ */

/* ============================================
   REFERENCES (shortcode: dht1230_references)

   Structure HTML (résumé):
   .dht1230-collections-references
     h2.dht1230-collections-references__title-collection
     .dht1230-collections-references__section (loop)
       h3.dht1230-collections-references__title-subcollection
       .dht1230-collections-references__grid + .dht1230-collections-references__grid--cols-X
         .dht1230-collections-references__item (loop)
       hr.dht1230-collections-references__separator
   ============================================ */

/* Variables CSS modifiables facilement */
:root {
    --dht1230-collections-grid-gap: 20px;
    --dht1230-collections-separator-color: rgba(0, 0, 0, 0.12);
}

.dht1230-collections-references {
    width: 100%;
}

.dht1230-collections-references__title-collection {
    margin: 0 0 16px;
}

.dht1230-collections-references__section {
    margin: 0;
}

.dht1230-collections-references__title-subcollection {
    margin: 24px 0 12px;
}

.elementor .dht1230-collections-references__separator {
    border: 0;
    border-top: 1px solid var(--dht1230-collections-separator-color);
    margin: 50px 0;
}

/* Grille */
.dht1230-collections-references__grid {
    display: grid;
    grid-template-columns: repeat(var(--dht1230-cols, 4), minmax(0, 1fr));
    gap: var(--dht1230-collections-grid-gap);
}

/* Nombre de colonnes (desktop)
   (Le shortcode ajoute automatiquement la classe --cols-X) */
.dht1230-collections-references__grid--cols-1 { --dht1230-cols: 1; }
.dht1230-collections-references__grid--cols-2 { --dht1230-cols: 2; }
.dht1230-collections-references__grid--cols-3 { --dht1230-cols: 3; }
.dht1230-collections-references__grid--cols-4 { --dht1230-cols: 4; }
.dht1230-collections-references__grid--cols-5 { --dht1230-cols: 5; }
.dht1230-collections-references__grid--cols-6 { --dht1230-cols: 6; }

/* Breakpoints responsive
   - Tablette: max 2 colonnes
   - Mobile: 1 colonne
   (Ajuste ces valeurs si ton thème/Elementor utilise d'autres breakpoints.) */
@media (max-width: 1024px) {
    .dht1230-collections-references__grid {
        grid-template-columns: repeat(min(2, var(--dht1230-cols, 4)), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dht1230-collections-references__grid {
        grid-template-columns: 1fr;
    }
}

/* Item */
.dht1230-collections-references__item h4 {
    margin: 0 0 10px;
}

/* Thumbnail + fallback SVG */
.dht1230-reference-thumbnail img,
.dht1230-reference-silhouette {
    display: block;
    width: 100%;
    height: auto;
}

.dht1230-reference-silhouette {
    color: #111;
}


/* Breadcrumb*/
.dht1230-breadcrumb{
    color: var( --e-global-color-accent );
}

/* ============================================
   TITLE & DESCRIPTION THEMES
   Support pour [dht1230_title theme="light|dark"]
   Support pour [dht1230_description theme="light|dark"]
   ============================================ */

/* Theme light - couleur blanche */
.dht1230-title--theme-light,
.dht1230-description--theme-light {
    color: var(--e-global-color-0c4a1d6, #FFFFFF) !important;
}

/* Theme dark - garde la couleur par défaut du thème (pas de style spécifique) */