/* ===================================================================
   ACCUEIL.CSS - Styles pour les pages d'accueil
   =================================================================== */

/* --- Accueil Public --- */
.hero {
    padding: 4rem 2rem;
    text-align: center;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero h1 { font-size: 3rem; margin-bottom: 1rem; color: var(--hero-text-color, white); }
.hero h2 { font-size: 1.1rem; color: var(--hero-text-color, white); }
.hero p  { font-size: 1.2rem; max-width: 600px; margin: 0 auto; color: var(--hero-text-color, white); }

.sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 4rem 2rem;
}
.section-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    max-width: 300px;
    text-align: center;
    transition: transform 0.3s ease;
    color: #222;
}
.section-card:hover { transform: translateY(-5px); }
.section-card h2 { font-size: 1.1rem; margin-bottom: 1rem; color: #222; }
.section-card a { display: inline-block; margin-top: 1rem; }

/* --- Accueil Connecté --- */
.page-template-accueil-dynamique .bloc {
    background-color: rgba(255, 250, 240, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.page-template-accueil-dynamique .bloc h5,
.page-template-accueil-dynamique .bloc p,
.page-template-accueil-dynamique .bloc a {
    color: #333 !important;
}
.page-template-accueil-dynamique .bloc h5 {
    margin-top: -20px;
    margin-bottom: 20px;
}

/* --- Layout connecté --- */
.user-home { max-width: 1200px; margin: 80px auto 40px; padding: 20px; }

/* Chaque ligne est une grille indépendante — les colonnes sont injectées en inline style */
.home-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

/* --- Bloc Président --- */
.president-message { text-align: center; }
.president-message .wp-block-media-text__media {
    max-width: 150px;
    margin: 0 auto 20px auto !important;
}
.page-template-accueil-dynamique .president-block { margin-top: 0; }

/* --- Bloc Bulletin --- */
.bulletin-block .bulletin-card-image-container {
    aspect-ratio: auto;
    background-color: #f0f0f0;
}
.bulletin-block .bulletin-card-image {
    object-fit: contain;
    height: auto;
    max-height: 400px;
    width: 100%;
}
.bulletin-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    display: block;
    text-decoration: none;
}
.bulletin-card-image-container { width: 100%; overflow: hidden; }
.bulletin-card-image { width: 100%; height: 100%; object-fit: cover; }
.bulletin-title {
    text-align: center;
    font-size: .85rem;
    color: #666 !important;
    margin: 8px 0 0;
    padding: 0 10px 10px;
}

/* --- Bloc Nos Joies, Nos Peines --- */

/* Le bloc devient flex-column pour que le contenu s'étire à la hauteur du bloc voisin */
.page-template-accueil-dynamique .joies-peines-block {
    display: flex;
    flex-direction: column;
}

/* ── Pile de cartes complètes (count 1-3) ── */
.joies-peines-block .jp-cards-stack {
    flex: 1;            /* remplit l'espace entre h5 et bloc-link */
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;      /* autorise le rétrécissement dans un flex parent */
}
/* Chaque carte prend une part égale */
.joies-peines-block .jp-cards-stack .jp-card-single {
    flex: 1;
    min-height: 0;
}
/* La photo doit s'étirer sur toute la hauteur de la carte */
.joies-peines-block .jp-cards-stack .rb-annonce-photo-wrapper {
    align-self: stretch;
}
.joies-peines-block .jp-cards-stack .rb-annonce-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Count=2 : padding réduit, typographie légèrement plus petite */
.jp-stack-2 .rb-annonce-badge  { padding: 5px 12px; font-size: 0.73em; }
.jp-stack-2 .rb-annonce-details { padding: 10px 14px; }
.jp-stack-2 .rb-annonce-details h3 { font-size: 1rem; margin-bottom: 4px; }
.jp-stack-2 .rb-annonce-details p  { font-size: 0.82em; line-height: 1.4; }

/* Count=3 : très compact mais tous les éléments restent lisibles */
.jp-stack-3 .rb-annonce-badge  { padding: 3px 10px; font-size: 0.68em; }
.jp-stack-3 .rb-annonce-details { padding: 5px 10px; }
.jp-stack-3 .rb-annonce-details h3 { font-size: .88rem; margin-bottom: 2px; }
.jp-stack-3 .rb-annonce-details p  { font-size: .75em; line-height: 1.3; margin: 0; }

/* ── Liste compacte (count=4) ── */
.joies-peines-block .joies-peines-list {
    flex: 1;
    margin-bottom: 12px;
}
.joies-peines-block .joies-peines-list .jp-item {
    flex: 1;
}

.joies-peines-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.jp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 4px solid #ccc;
}
.jp-icon { font-size: 1.3rem; flex-shrink: 0; }

/* Photo avatar dans les listes */
.jp-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #eee;
}
.jp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jp-photo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.jp-photo-sm {
    width: 36px;
    height: 36px;
}
.jp-photo-sm .jp-photo-fallback { font-size: .9rem; }

/* Logo Ribainbelle en fallback (pas de photo) */
.jp-photo-logo,
.rb-annonce-photo-wrapper .jp-photo-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: block;
}

.jp-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    flex: 1;
    color: inherit;
}
.jp-content:hover .jp-nom { text-decoration: underline; }
.jp-nom { font-size: .9rem; font-weight: 600; color: inherit; }
.jp-meta { font-size: .78rem; color: inherit; opacity: .75; }

/* Couleurs automatiques via CSS custom property --rbb-jp-color.
   Ces sélecteurs ont une spécificité plus haute que .bloc a/p { color:!important }
   ce qui permet de contourner le forçage en #333. */
.page-template-accueil-dynamique .bloc .jp-card-single,
.page-template-accueil-dynamique .bloc .jp-item,
.page-template-accueil-dynamique .bloc .jp-item .jp-content,
.page-template-accueil-dynamique .bloc .jp-card-single p,
.page-template-accueil-dynamique .bloc .jp-card-single h3,
.page-template-accueil-dynamique .bloc .jp-item .jp-nom,
.page-template-accueil-dynamique .bloc .jp-item .jp-meta {
    color: var(--rbb-jp-color, inherit) !important;
}

/* Carte unique joies/peines (count=1) */
.jp-card-single {
    display: flex !important;
    text-decoration: none !important;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.jp-card-single:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.jp-card-single .rb-annonce-details h3 { margin: 0 0 6px; }
.jp-extra-info {
    margin: 6px 0 0;
    font-size: .8rem;
    opacity: .8;
}

/* Densité 2 éléments */
.jp-list-medium .jp-item-medium {
    padding: 8px 12px;
}

/* Densité 3-4 éléments */
.jp-list-compact .jp-item-compact {
    padding: 5px 10px;
    gap: 8px;
}
.jp-icon-sm { font-size: 1rem; }
.jp-list-compact .jp-nom { font-size: .85rem; }
.jp-list-compact .jp-meta { font-size: .72rem; }

/* --- Bloc Album — carte couverture --- */
.album-cover-card {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.album-cover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.album-cover-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f0f0f0;
}
.album-cover-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.album-cover-card:hover .album-cover-thumb img { transform: scale(1.05); }
.album-cover-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #ccc;
}
.album-cover-card .album-title {
    padding: 10px 14px;
    margin: 0;
}

/* --- Bloc Album --- */
.album-title {
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 12px;
    color: #333;
}
.album-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    border-radius: 8px;
    overflow: hidden;
}
.album-preview-item { display: block; aspect-ratio: 1; overflow: hidden; }
.album-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.album-preview-item:hover img { transform: scale(1.08); }
.album-cover-img { width: 100%; border-radius: 8px; }

/* --- Lien de bas de bloc --- */
.bloc-link {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    color: #2c7a2c !important;
    text-decoration: none;
    margin-top: 8px;
}
.bloc-link:hover { text-decoration: underline; }

/* --- Recette Meta --- */
.recette-meta { font-size: 0.9em; color: #666; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }

/* --- No Image Placeholder --- */
.no-image { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 0.9em; color: #999; min-height: 150px; }

/* --- Responsive --- */
@media (max-width: 768px) {
    /* Blocs connectés : empilement vertical sur mobile/tablette.
       !important nécessaire pour surcharger le grid-template-columns injecté en inline style. */
    .home-row { grid-template-columns: 1fr !important; }
    .hero h1 { font-size: 2rem; }
    .sections { flex-direction: column; }
    .user-home { margin-top: 40px; padding: 12px; }

    /* ── Fond beige + coins arrondis : clipper tout débordement ─────── */
    .page-template-accueil-dynamique .bloc {
        overflow: hidden;
        padding: 16px;
    }

    /* ── Bloc Président : maintenir photo + texte côte à côte ─────────
       Gutenberg force grid-template-columns:100%!important sous 600px.
       On surclasse avec une spécificité plus haute ET !important. */
    .president-block .wp-block-media-text {
        grid-template-columns: 110px 1fr !important;
        grid-template-rows: auto !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    .president-block .wp-block-media-text__media {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding: 0 !important;
    }
    .president-block .wp-block-media-text__media img {
        width: 110px !important;
        height: auto !important;
        border-radius: 8px;
        display: block;
    }
    .president-block .wp-block-media-text__content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 0 !important;
    }

    /* ── Cartes Joies/Peines : garder photo à gauche, texte à droite ── */
    .rb-annonce-card {
        flex-direction: row !important;
    }
    .rb-annonce-photo-wrapper {
        flex: 0 0 36% !important;
        min-width: 36% !important;
        max-height: 130px !important;
        overflow: hidden;
    }
    .rb-annonce-details {
        padding: 8px 10px !important;
    }
    .rb-annonce-details h3 { font-size: .9rem !important; margin-bottom: 4px !important; }
    .rb-annonce-details p  { font-size: .78em !important; }
    .rb-annonce-badge      { font-size: .72em !important; padding: 5px 10px !important; }
}
@media (min-width: 600px) {
    .president-message .wp-block-media-text__media {
        margin-right: 30px !important;
        margin-bottom: 0 !important;
    }
}