/*
============================================================================================================
1. STYLES GLOBAUX POUR L'AFFICHAGE DES MOTIFS DE CONSULTATION (pour spectra et blocksy)
============================================================================================================

/*
COLORISATION SVG : Gestion des couleurs des icônes SVG. Classe motifs-style-svg-color
------------------------------------------------------------------------------------------------
*/

/* Déclaration des variables de couleur pour la portée de nos SVGs */
.motifs-style-svg-color svg {
  --color-quasi-noir: var(--wp--preset--color--palette-color-1);
  --color-gris: var(--wp--preset--color--palette-color-6);
  --color-blanc: var(--wp--preset--color--palette-color-8);
}

/* Remplacement des couleurs spécifiques trouvées dans le code des SVGs */
.motifs-style-svg-color svg [style*="fill:rgb(1,1,1)"] {
  fill: var(--color-quasi-noir) !important;
}

.motifs-style-svg-color svg [style*="fill:rgb(192,192,192)"] {
  fill: var(--color-gris) !important;
}

.motifs-style-svg-color svg [style*="fill:white"] {
  fill: var(--color-blanc) !important;
}

/* Cibler spécifiquement les SVGs DANS le carrousel Spectra, --> éviter bug d'affichage lors du rechargement de la boucle du carousel */
.motifs-style-svg-color.motifs-style-spectra-carousel svg [style*="fill:rgb(1,1,1)"] {
    fill: var(--color-quasi-noir) !important;
}

.motifs-style-svg-color.motifs-style-spectra-carousel svg [style*="fill:rgb(192,192,192)"] {
    fill: var(--color-gris) !important;
}

.motifs-style-svg-color.motifs-style-spectra-carousel svg [style*="fill:white"] {
    fill: var(--color-blanc) !important;
}


/*
============================================================================================================
2. STYLES POUR LES BLOCS SPECTRA
============================================================================================================
*/

/*
MISE EN PAGE: CAROUSEL
------------------------------------------------------------------------------------------------
*/

/* On force la taille de l'icône, qu'elle soit une <img> ou un <svg> */
.motifs-style-spectra-carousel .uagb-post__image img,
.motifs-style-spectra-carousel .uagb-post__image svg {
  height: 60px !important;  
  width: auto !important;
}

/* Supprime l'espace vide du contenu de post */
.motifs-style-spectra-carousel .uagb-post__text.uagb-post-grid-byline {
    display: none !important;
}


/*
============================================================================================================
3. STYLES POUR LES MOTIFS AVEC SHORTCODE BLOCKSY
============================================================================================================
*/


/*
BLOCKSY 1 : LISTE COMPLETE (avec description). Classe motifs-style-blocksy-list
------------------------------------------------------------------------------------------------
*/

/* --- 1. Règle principale pour chaque bloc --- */
/*
 * On cible chaque carte (.entry-card) dans notre liste personnalisée.
 * Cette règle contient les deux corrections : l'auto-alignement et l'espacement.
 */
.motifs-style-blocksy-list .entry-card {
    /* COMMANDE D'AUTO-ALIGNEMENT : Force le bloc à se coller en haut de sa rangée. */
    align-self: start !important;

    /* DÉFINITION DE LA GRILLE INTERNE : Icône + Titre / Description en dessous */
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
        "icon title"
        "excerpt excerpt" !important;
    align-items: center !important;  /* Aligne l'icône et le titre sur leur propre ligne */
    column-gap: 25px !important;     /* Espace horizontal entre l'icône et le titre */

    /* ESPACEMENT VERTICAL RÉDUIT : Espace entre le titre et la description. */
    row-gap: 4px !important;
}

/* --- 2. On assigne chaque élément à sa zone dans la grille --- */

/* L'icône va dans la zone "icon" */
.motifs-style-blocksy-list .ct-media-container {
    grid-area: icon !important;
    /* On s'assure que l'icône reste bien en haut si le titre prend plusieurs lignes */
    align-self: start !important;
}

/* Le titre va dans la zone "title" */
.motifs-style-blocksy-list .entry-title {
    grid-area: title !important;
    margin: 0 !important;
}

/* L'extrait/description va dans la zone "excerpt" */
.motifs-style-blocksy-list .entry-excerpt {
    grid-area: excerpt !important;
    margin: 0 !important;
}

/* --- 3. Réglages de l'icône --- */
.motifs-style-blocksy-list .ct-media-container svg {
    height: 60px !important;
    width: auto !important;
    display: block !important;
}

/* --- 4. Modificateur : cache la description et compacte la grille --- */
.motifs-style-blocksy-list.motifs-style-blocksy-list--no-desc .entry-excerpt {
  display: none !important;
}

/* La carte n’a plus de 2e ligne "excerpt" */
.motifs-style-blocksy-list.motifs-style-blocksy-list--no-desc .entry-card {
  grid-template-areas: "icon title" !important;
  row-gap: 0 !important;         /* plus d’espace vertical inutile */
  align-items: center !important; /* icône et titre bien alignés */
}

/* Optionnel : ajuste les espacements du titre si besoin */
.motifs-style-blocksy-list.motifs-style-blocksy-list--no-desc .entry-title {
  margin: 0 !important;
}