/* Styles pour la page de catégorie Nylon (Layout Maquette) */

/* Reset minimaliste et pleine largeur (nécessite ajustement selon thème) */
body.nylon-category-full-width #primary,
body.nylon-category-full-width .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important; /* Ou ajuster le padding ici */
    float: none !important;
    border: none !important;
    box-shadow: none !important;
}
body.nylon-category-full-width #secondary,
body.nylon-category-full-width .widget-area,
body.nylon-category-full-width aside.sidebar {
    display: none !important;
}
/* Reset plus agressif si nécessaire (à utiliser avec précaution) */
body.nylon-custom-template-active #main > *:not(.category-header):not(.category-posts-layout-container) {
     /* display: none; */ /* Cache les éléments par défaut du thème */
}
body.nylon-custom-template-active {
     background-color: #fff; /* Assurer un fond blanc */
}

.nylon-category-page {
    font-family: Calibri, 'Segoe UI', sans-serif;
    box-sizing: border-box;
    padding: 20px 30px; /* Padding global */
    max-width: 1600px; /* Augmenter la largeur max pour ce layout */
    margin: 0 auto;
}

/* Header Catégorie (Titre) - SUPPRIMÉ */
/*
.category-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
}
.category-title {
    font-size: 5rem;
    margin-top: 0.5em;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #000;
    line-height: 1;
    letter-spacing: -1px;
}
*/
/* La description est maintenant gérée inline dans le template si nécessaire,
   ou vous pouvez conserver ce style s'il est toujours utilisé */
.category-description {
    font-size: 1em;
    color: #666;
    max-width: 700px;
    margin: 0 auto 30px auto; /* Ajustement marge inférieure car header supprimé */
    text-align: center; /* Ajout pour centrer */
}

.nylon-grid-item {
    margin-bottom: 25px !important;
    margin-top: 15px !important;
}

.nylon-fullwidth-article {
    margin-bottom: 45px !important;
}

/* Conteneur Layout Grid */
.category-posts-layout-container {
    display: grid;
    padding-right: 30px;
    padding-left: 30px;
    /* Colonnes: 1 fraction, 2 fractions (centre), 1 fraction */
    grid-template-columns: 1fr 2fr 1fr;
    gap: 30px; /* Espace entre colonnes */
    align-items: start; /* Aligner en haut */
}
/* Sur mobile, passer en une colonne */
@media (max-width: 992px) {
    .category-posts-layout-container {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 40px;
    }
    /* Inverser l'ordre sur mobile si souhaité (ex: centre en premier) */
    .cat-layout-center { order: 1; }
    .cat-layout-left { order: 2; }
    .cat-layout-right { order: 3; }
}

/* Colonnes spécifiques */
.cat-layout-column {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espace entre les articles dans une colonne latérale */
}


/* --- Styles pour les SLOTS PETITS (colonnes latérales) --- */
.cat-post-small {
    /* Pas besoin de flex ici, déjà empilé par .cat-layout-column */
}
.cat-post-small .post-thumbnail-small a { line-height: 0; display: block; }
.cat-post-small .post-thumbnail-small img,
.cat-post-small .post-thumbnail-small video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Image carrée */
    object-fit: cover;
    margin-bottom: 15px;
}
.cat-post-small .post-content-small { } /* Pas de style spécifique nécessaire a priori */

.cat-post-small .entry-title-small {
    font-size: 1.4em; /* Ajuster taille */
    margin: 0 0 5px 0;
    font-weight: bold; /* Plus gras */
    line-height: 1.2;
}
.cat-post-small .entry-title-small a { color: #000; text-decoration: none; }
.cat-post-small .entry-title-small a:hover { text-decoration: underline; }

.cat-post-small .entry-meta-small {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.cat-post-small .entry-summary-small {
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
}
.cat-post-small .ad-custom-text-small { /* Texte custom pub petite */
     font-size: 0.9em; color: #666; margin-top: 8px;
}


/* --- Styles pour le SLOT LARGE (colonne centrale) --- */
.cat-post-large { }
.cat-post-large .post-thumbnail-large a { line-height: 0; display: block; }
.cat-post-large .post-thumbnail-large img,
.cat-post-large .post-thumbnail-large video {
    display: block;
    width: 100%;
    height: auto;
    /* aspect-ratio: 16 / 9; ou autre ratio */
    object-fit: cover;
    margin-bottom: 20px;
}
.cat-post-large .post-content-large {
     text-align: left; /* Ou center selon besoin */
}

.cat-post-large .entry-title-large {
    font-size: 2.5em; /* Ajuster */
    margin: 0 0 8px 0;
    font-weight: bold;
    line-height: 1.1;
}
.cat-post-large .entry-title-large a { color: #000; text-decoration: none; }
.cat-post-large .entry-title-large a:hover { text-decoration: underline; }

.cat-post-large .entry-meta-large {
    font-size: 0.8em;
    color: #777;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.cat-post-large .entry-summary-large {
    font-size: 1.1em;
    color: #333;
    line-height: 1.6;
}
.cat-post-large .ad-custom-text-large { /* Texte custom pub large */
    font-size: 1.1em; color: #333; line-height: 1.6; margin-top: 15px;
}

/* Styles spécifiques Pubs si besoin (bordure, fond...) */
.cat-ad-small, .cat-ad-large {
    /* border: 1px solid #eee; */ /* Moins visible que dashed */
    /* background-color: #fafafa; */
}
.cat-ad-small .ad-title-small a,
.cat-ad-large .ad-title-large a {
    /* Styles spécifiques liens pubs */
}
.cat-ad-small .ad-meta-small,
.cat-ad-large .ad-meta-large {
    font-style: italic;
    color: #a0a0a0; /* Griser un peu plus le tag 'Publicité' */
}

/* --- Styles pour la pagination --- */
.nylon-cat-pagination {
    margin-top: 20px; /* Espace au-dessus de la pagination */
    margin-bottom: 30px;
    text-align: center;
}

.nylon-cat-pagination .nav-links {
    display: inline-block; /* Centre les liens */
}

.nylon-cat-pagination .nav-links .page-numbers {
    display: inline-flex; /* Utiliser flex pour centrer */
    align-items: center;  /* Centrer verticalement */
    justify-content: center; /* Centrer horizontalement */
    width: 38px;  /* Largeur fixe */
    height: 38px; /* Hauteur fixe (égale à la largeur pour un carré) */
    padding: 0;   /* Retirer le padding */
    margin: 0 3px; /* Légère marge entre les carrés */
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    box-sizing: border-box; /* Assurer que padding/border sont inclus */
    font-size: 0.9em; /* Ajuster si nécessaire */
    line-height: 1; /* Pour aider au centrage vertical */
}

/* Styles pour l'élément courant et au survol */
.nylon-cat-pagination .nav-links .page-numbers:hover,
.nylon-cat-pagination .nav-links .page-numbers.current {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

/* Styles pour les points de suspension "..." */
.nylon-cat-pagination .nav-links .page-numbers.dots {
    border: none;
    background-color: transparent;
    width: auto;
    padding: 0 5px;
}

/* Cacher le h2 pour lecteurs d'écran */
.nylon-cat-pagination .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}