/**
* Theme Name: TownPress Child
* Theme URI: http://preview.lsvr.sk/townpress
* Description: TownPress child theme
* Author: LSVRthemes
* Author URI: http://themeforest.net/user/LSVRthemes/portfolio
* Template: townpress
* Version: 3.1.1
*/

/* Add your custom CSS after this comment */

/* -----------------------------------------------------------------------------

    RESPONSIVE DEFINITIONS

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        LARGE DEVICES
		devices with width between 992px and 1199px
    ------------------------------------------------------------------------- */

    @media ( max-width: 1199px ) {

		/* your CSS here */

	}

    /* -------------------------------------------------------------------------
        MEDIUM DEVICES
		devices with width between 768px and 991px
    ------------------------------------------------------------------------- */

    @media ( max-width: 991px ) {

		/* your CSS here */

	}

	/* -------------------------------------------------------------------------
        SMALL DEVICES
		devices with width between 481px and 767px
    ------------------------------------------------------------------------- */

    @media ( max-width: 767px ) {

		/* your CSS here */

	}

	/* -------------------------------------------------------------------------
        EXTRA SMALL DEVICES
		devices with width up to 480px
    ------------------------------------------------------------------------- */

	@media ( max-width: 480px ) {

		/* your CSS here */

	}

.widget__title, 
.widget-title {
    text-transform: none !important; /* Annule le texte en majuscules */
    font-size: 1.2rem !important; /* Agrandit légèrement le texte */
}

/* Arrondi uniquement sur le bloc conteneur central */
.page_content, 
.c-content-box, 
.section.lsvr-townpress-posts {
    border-radius: 10px !important;
    overflow: hidden; /* Nécessaire pour que l'arrondi soit visible */
    background-color: #ffffff;
    border: none !important; /* Pour être sûr qu'aucun trait ne vienne gêner */
}

/* Conteneur arrondi */
.widget-col-portet {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.col-lien-global {
    display: block;
    position: relative;
    text-decoration: none !important;
}

.col-image-fond {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Effet zoom au survol */
.col-lien-global:hover .col-image-fond {
    transform: scale(1.06);
}

/* Positionnement et lisibilité du grand texte blanc */
.col-texte-superpose {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Padding augmenté pour le grand texte */
    padding: 30px 20px 20px 20px;
    /* Dégradé plus prononcé pour la lisibilité */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    box-sizing: border-box;
    text-align: left;
    line-height: 1.3;
}

/* Agrandir la zone de l'image sur le fil d'actus */
.lsvr-townpress-posts__post-thumbnail-link {
    height: 250px !important; /* Augmente la hauteur (par défaut c'est souvent 150px) */
    border-radius: 8px; /* Optionnel : pour assortir aux autres widgets */
    background-size: cover !important; /* L'image remplit toute la zone */
    background-position: center !important; /* Centre l'image pour éviter de couper les visages ou textes */
}

/* Ajuster sur mobile pour que ça ne soit pas trop imposant */
@media (max-width: 768px) {
    .lsvr-townpress-posts__post-thumbnail-link {
        height: 180px !important;
    }
}

/* Arrondir le bloc complet de recherche */
.c-search-form__inner {
    border-radius: 8px !important; /* Ajuste le chiffre pour plus ou moins d'arrondi */
    overflow: hidden; /* Important pour que le bouton bleu suive l'arrondi */
}

/* Changer le texte en blanc pour le titre de bienvenue */
.main__header .main__title {
    color: #ffffff !important;
}

/* Ajouter un fond sombre dégradé (l'effet ombre) sur le header */
.main__header {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
    padding-bottom: 20px !important; /* Espacement pour l'ombre */
}

/* --- 1. STRUCTURE ET COULEURS DE FOND --- */

/* Couleur de fond du site (Gris clair Material) */
body, #main, .site-content {
    background-color: #F5F5F6 !important;
}

/* Force le conteneur principal à prendre toute la place (98%) */
.lsvr-container {
    max-width: 98% !important;
    width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Élargit la zone de contenu et les sidebars */
.l-main-container .lsvr-container {
    padding-left: 1% !important;
    padding-right: 1% !important;
}

/* --- 2. ARRONDIS ET BLOCS --- */

.lsvr-container, 
.l-main-container article, 
.widget, 
.lsvr-townpress-sitemap-inner,
.lsvr-townpress-icon-blocks-inner,
.lsvr-townpress-icon-blocks-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: none !important;
}

/* --- 3. BANDEAU DE BIENVENUE AVEC IMAGE ET DÉGRADÉ --- */

header.main__header {
    /* On met le dégradé EN PREMIER, puis l'image séparée par une virgule */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%), 
	url('/wp-content/uploads/2026/04/image0.jpeg') !important;    
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    border-radius: 10px !important;
    padding: 80px 40px 40px 40px !important; 
    margin-bottom: 20px !important; 
    text-align: left !important;
    position: relative;
}

/* Style du texte en blanc */
header.main__header h1, 
header.main__header h2, 
header.main__header .header-title,
header.main__header .main__title {
    color: #ffffff !important;
    font-size: 2.2rem !important;
    margin: 0 !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5) !important;
}
/* 1. Créer l'espace entre les publications */
.lsvr-townpress-posts__item {
    margin-bottom: 40px !important; /* Ajuste à 30px si c'est trop large */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background-color: #ffffff !important;
    border-radius: 10px !important;
}

/* 2. L'effet au survol (soulèvement + légère ombre) */
.lsvr-townpress-posts__item:hover {
    transform: translateY(-3px) !important; /* L'article monte un peu */
}