/*
Theme Name:     FFCBL Child
Theme URI:      https://www.manuellamaya.com/
Description:    Thème enfant FFCBL basé sur le thème parent Astra
Author:         Manuella MAYA
Author URI:     https://www.manuellamaya.com/
Template:       astra
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Tags:           radio, communication, association
Text Domain:    ffcbl-child
*/

/* =========================================
   1. STRUCTURE GLOBALE
   ========================================= */
.banner_page {
    margin-top: 150px !important;
}

/* Texte avant icône pour la liste avec la classe list_pv_ag */
.list_pv_ag .elementor-icon-list-item a {
    flex-direction: row-reverse !important; 
    justify-content: space-between !important; 
}

/* Entrée titre */
.entry-header .entry-title {
    color: #003366;
}

/* Article unique */
.single-post .photo_article {
    box-shadow: none !important;
}

.single-post .introduction_article {
    font-size: 22px !important;
}



.photo_article {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.single-post-thumbnail .aligncenter {
    margin-left: 0 !important;
    padding-left: 40px;
}

@media (max-width: 480px) { 
    .single-post-thumbnail .aligncenter {
        margin-left: 0 !important;
        padding-left: 10px;
    }
    
    .single-post header.entry-header:not(.related-entry-header) .entry-title {
        font-size: 1.75rem;
    }
}

/* =========================================
   2. HEADER / MENU PRINCIPAL FIXE
   ========================================= */
/*.site-header {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}*/


	.site-header {
		position: fixed;
		left: 0;
		box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
		width: 100%;
		z-index: 9999;
		transition: all 0.3s ease;
	}

/* Header desktop */
@media (min-width: 1025px) {
	
    /* Conteneur pour logo en absolute */
    .site-header .site-branding {
        position: absolute;
        top: 50%;
        left: 30px;                 /* distance à gauche */
        transform: translateY(calc(-50% + 50px)); /* descend le logo */
        z-index: 10;
    }

    /* Menu reste dans le flux normal */
    .site-header-primary-section-right,
    .ast-builder-menu-1 {
        display: flex;
        align-items: center;
    }

}

/* =========================================
   3. LOADER FULL SCREEN
   ========================================= */
#ffcbl-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #001122, #005580, #C0C0C0);
    z-index: 99999;
}

.loader-container {
    position: relative;
    width: 100px;
    height: 100px;
}

.loader-circle {
    width: 100%;
    height: 100%;
    border: 6px solid #ffffff30;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1.4s linear infinite;
}

.loader-text {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

@keyframes spin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

#ffcbl-loader.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* =========================================
   4. FOOTER
   ========================================= */
.site-footer,
.site-footer * {
    color: #ffffff !important;
}

.site-footer h2 {
    font-size: 22px;    
}

.site-footer a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #CC3333 !important;
}







/* =========================================
   5. ARTICLES ET GRILLES
   ========================================= */

/* Containers */
.toutes_lactualites .premium-blog-post-container {
    display: flex;
    flex-direction: column;
}

.toutes_lactualites_side {
    height: 800px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.toutes_lactualites_side::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.toutes_lactualites_side .post-categories li a {
    background: none !important;
    color: #CC3333 !important;
}

.toutes_lactualites_side .premium-blog-post-container.premium-blog-skin-side { 
    align-items: flex-start;
}

.toutes_lactualites_side .premium-blog-post-container.premium-blog-skin-side img {
   padding-top: 10px;
}

/* Blog layout grid */
.ast-blog-layout-4-grid .ast-article-post {
    width: 25%;
}

.ast-blog-layout-4-grid img {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
}

/* Catégories articles */
.post-categories li a, .cat-link {
    display: inline-block;
    background: none !important;
    text-decoration: none !important;
    color: #CC3333 !important;
}


/* =========================================
   6. PAGE ACTUALITÉS / GRILLE ARTICLES
   ========================================= */
@media (min-width: 922px) {
    .site-content .ast-container:has(.actualites-page) {
		display: block !important;
	}
}

.actualites-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 80%;
    gap: 30px;
    margin: 40px auto 0 auto;
    padding: 0 15px;
    margin-bottom: 100px;
}

.actualite-item {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    padding: 10px;
    min-height: 320px;
}



.actualite-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.actualite-item img {
    width: 90%;
    height: 150px !important;
    object-fit: contain;
    object-position: center;
    background-color: #fff;
    border-radius: inherit;
    display: block;
	margin: 0 auto 10px;
    padding-bottom: 10px;
}

/* Catégories sous image */
.cat-links {
    margin: 0;
}



.archive.category .site-content > .ast-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.archive.category .actualites-page {
    width: 100%;
    max-width: 100%;
}

/* Titres articles */
.entry-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
    overflow: hidden;
    display: -webkit-box;      
    -webkit-line-clamp: 3;    
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: calc(1.3em * 3);
}



.entry-title a {
    text-decoration: none;
    color: #003366;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}

/* pagination */
/* Container */
.actualites-pagination {
    margin: 30px 0;
    text-align: center;
}

/* Liste */
.actualites-pagination ul.pagination-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
}

/* Items */
.actualites-pagination li.pagination-item a,
.actualites-pagination li.pagination-item span {
    display: block;
    padding: 6px 12px;
    background-color: #f2f2f2;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

/* Hover */
.actualites-pagination li.pagination-item a:hover {
    background-color: #0073aa;
    color: #fff;
}

/* Active */
.actualites-pagination li.active span {
    background-color: #0073aa;
    color: #fff;
}

/* Flèches SVG */
.pagination-icon {
    fill: none;
    stroke: #333;
    stroke-width: 2;
    vertical-align: middle;
    margin: 0 2px;
    transition: stroke 0.2s;
}

.pagination-item a:hover .pagination-icon {
    stroke: #fff;
}

/* Ellipsis (… pour longues pages) */
.actualites-pagination li span.dots {
    background: none;
    padding: 0 6px;
    color: #666;
}

/* Responsive mobile */
@media (max-width: 480px) {
    .actualites-pagination li.pagination-item a,
    .actualites-pagination li.active span {
        padding: 5px 8px;
        font-size: 14px;
    }

    .pagination-icon {
        width: 14px;
        height: 14px;
    }
}

/* Post meta */
.post-meta {
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
}

.post-meta .author,
.post-meta .date {
    font-weight: 400;
}

.post-meta .author::after {
    content: " . ";
    margin: 0 4px;
    color: #999999;
}

.post-meta .date::after {
    content: "";
}

/* Reset margin/padding pour la grille actualités */
.actualites-grid .actualite-item {
    margin: 0;        
    padding: 0;      
}

/* Si la grille est à l’intérieur d’un conteneur Astra avec padding */
.actualites-grid {
    padding: 0;      
    margin: 0 auto;  
}

.actualites-grid .actualite-item {
    padding: 1rem; 
}

.category-return-link a, .single-return-link a {
    font-weight: 600;
    text-decoration: none;
    color: #333;
}

.category-return-link, .single-return-link{
    padding-top: 20px;
}

.category-return-link a:hover, .single-return-link a:hover {
    text-decoration: underline;
}

.actualite-item .read-more {
    display: block;
    margin-top: 15px;
	color: #333333;
    text-decoration: none;
}

.actualite-item .read-more:hover {
    text-decoration: underline;
}



/* =========================================
   7. DÉROULANT CATEGORIES
   ========================================= */
.actualites-category-select {
    width: 100%;
    max-width: 300px;
    margin: 30px auto 30px auto;
}

.actualites-category-select select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    transition: 0.2s ease;
}

.actualites-category-select select:hover {
    border-color: #0066cc;
    background: #eef6ff;
    color: #003366;
}

.category-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* =========================================
   8. BANNIÈRE CATEGORIES
   ========================================= */
.category-banner {
    min-height: 20vh;
    margin-top: 200px;
    padding: 0 20px;
    border-radius: 10px;
    background:
        linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
        url("https://ffcbl.manuellamaya.com/wp-content/uploads/2026/02/AdobeStock_441226902_Editorial_Use_Only-scaled.jpeg")
        center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.category-banner-title {
    color: #fff;
}

.category-header-wrapper{
	width: 80%;
	margin: 0 auto;
}


   /* ===============================
   FORMULAIRE : PAGE /connexion
   =============================== */

.page-template-connexion-page .ffcbl-login-wrapper {
    max-width: 420px;
    margin: 60px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    color: #333333;
    font-family: inherit;
}

/* Titre */
.page-template-connexion-page .ffcbl-login-wrapper h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 25px;
    color: #003366;
    font-weight: 700;
}

/* Labels */
.page-template-connexion-page .ffcbl-login-wrapper label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333333;
}

/* Champs */
.page-template-connexion-page .ffcbl-login-wrapper input[type="text"],
.page-template-connexion-page .ffcbl-login-wrapper input[type="email"],
.page-template-connexion-page .ffcbl-login-wrapper input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 18px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    background: #fafafa;
    transition: all 0.25s ease;
}

/* Focus champs */
.page-template-connexion-page .ffcbl-login-wrapper input:focus {
    border-color: #003366;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.15);
    outline: none;
}

/* Bouton */
.page-template-connexion-page .ffcbl-login-wrapper input[type="submit"] {
    background: #003366;
    color: #fff;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
    font-weight: 600;
}

/* Hover bouton */
.page-template-connexion-page .ffcbl-login-wrapper input[type="submit"]:hover {
    background: #CC3333;
    transform: translateY(-2px);
}

/* Checkbox "se souvenir de moi" */
.page-template-connexion-page .ffcbl-login-wrapper .login-remember {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.page-template-connexion-page .ffcbl-login-wrapper .login-remember label {
    margin-left: 6px;
}

/* Liens sous le bouton */
.page-template-connexion-page .ffcbl-login-wrapper .login-links {
    margin-top: 20px;
    text-align: center;
}

.page-template-connexion-page .ffcbl-login-wrapper .login-links a {
    color: #003366;
    font-weight: 600;
    transition: color 0.2s ease;
}

.page-template-connexion-page .ffcbl-login-wrapper .login-links a:hover {
    color: #CC3333;
}

/* Messages WordPress (erreur, succès) */
.page-template-connexion-page .ffcbl-login-wrapper .message,
.page-template-connexion-page .ffcbl-login-wrapper .login-error {
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}

.page-template-connexion-page .ffcbl-login-wrapper .message {
    background: rgba(0,102,51,0.1);
    border-left: 4px solid #006633;
    color: #006633;
}

.page-template-connexion-page .ffcbl-login-wrapper .login-error {
    background: rgba(204,51,51,0.1);
    border-left: 4px solid #CC3333;
    color: #CC3333;
}


/* =========================================
LOGIN SYSTEM
   ========================================= */
.ffcbl-btn {
    background: #003366;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block; /* utile pour le padding */
}

.ffcbl-btn:hover {
    background: #002855; /* léger effet au survol */
    color: #fff;
}

/* =========================================
BOUTON DECONNEXION
   ========================================= */


.ffcbl-welcome-logout {
    display: flex;
    align-items: center;
    gap: 20px;
	padding-left: 50px;
    font-size: 16px;
    color: #333; /* couleur du texte sobre */
    font-weight: 500;
}

.ffcbl-welcome-logout .ffcbl-welcome {
    font-weight: 600;
    color: #333;
}

.ffcbl-welcome-logout .ffcbl-logout-btn {
    background: none;       /* pas de fond */
    color: #555;            /* gris discret */
    padding: 2px 6px;
    border-radius: 3px;
    text-decoration: underline;
    font-weight: normal;
    transition: color 0.3s ease;
}

.ffcbl-welcome-logout .ffcbl-logout-btn:hover {
    color: #000; /* un peu plus visible au survol */
}
   
   

/* =========================================
   9. CONTENEURS ASTRA
   ========================================= */
.blog .site-content > .ast-container,
.archive .site-content > .ast-container,
.search .site-content > .ast-container {
    max-width: 95%;
}

.ast-separate-container #primary,
.ast-separate-container.ast-left-sidebar #primary,
.ast-separate-container.ast-right-sidebar #primary {
    margin: 10em 0;
}




/* =========================================
   10. BACKGROUND IMAGE BLOG
   ========================================= */
    
   
/* Fond gris + hauteur fixe + arrondis uniquement dans le widget .toutes_lactualites */
.toutes_lactualites .premium-blog-thumbnail-container {
    /*background-color: #FAFAFA;*/
    /*border-radius: 6px;*/
    
}
/*.toutes_lactualites .premium-blog-thumb-effect-wrapper {
    height: 220px !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.08);
    border-radius: 6px;
}*/

.toutes_lactualites .premium-blog-thumbnail-container {
    position: relative;
    height: 200px !important;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toutes_lactualites .premium-blog-thumbnail-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    filter: blur(12px);
    transform: scale(1.2);
    z-index: 1;
    opacity: 0.9;
}

.toutes_lactualites .premium-blog-thumbnail-container img {
    position: relative;
    z-index: 2;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    padding: 10px;
}



@media (max-width: 1024px) {

    .toutes_lactualites .premium-blog-thumbnail-container {
        height: 100px !important;
        width: 90%;
    }

    .toutes_lactualites .premium-blog-even .premium-blog-post-container {
        height: 175px;
    }

    .toutes_lactualites .premium-blog-content-wrapper {
        display: flex;
        align-items: center;
        height: auto !important;
    }
    
     .toutes_lactualites .premium-blog-thumb-effect-wrapper {
        display: flex;
        align-items: center;
    }
}

/* =========================================
   11. RESPONSIVE
   ========================================= */
@media (max-width: 1200px) {
    .actualites-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*@media (max-width: 992px) {
    .actualites-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}*/
/* Tablettes & petits écrans horizontaux : 2 colonnes */
@media (max-width: 1199px) and (min-width: 601px) {
    .actualites-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	
}

@media (max-width: 600px) {
    .actualites-grid {
        grid-template-columns: 1fr;
    }
}

/* Header fixe pour mobile/tablette */
@media (max-width: 1023px) {
    .ast-primary-header-bar.ast-primary-header {
        height: auto !important;
        min-height: auto !important;
    }
	
	.ast-header-break-point #ast-mobile-header {
		/*height: 120px;*/
	}
	.category-banner {
		margin-top: 150px
	}
	
	.ffcbl-welcome-logout {
		font-size: 18px;
	    padding-left: 15px;
	}
}

/*@media (max-width:768px){

	.actualite-item{
		display:flex;
		align-items:center;  
		gap:10px;
		min-height: 175px;
	}
	
	.actualite-thumb{
		flex:0 0 30%;
		max-width:30%;
		height:100%;
	}


}*/