/* ==========================================================
   modules.css — Styles front partagés de tous les modules
   Scope : .{module}-{view}  ex. .blogs-index, .blogs-detail
   ========================================================== */

/* ----------------------------------------------------------
   Layout générique avec sidebar
   ---------------------------------------------------------- */
.modules-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.modules-layout--sidebar-left  { flex-direction: row; }
.modules-layout--sidebar-right { flex-direction: row-reverse; }
.modules-layout--full          { flex-direction: column; }

.modules-main    { flex: 1; min-width: 0; }
.modules-sidebar { width: 280px; flex-shrink: 0; }

@media (max-width: 991px) {
    .modules-layout--sidebar-left,
    .modules-layout--sidebar-right { flex-direction: column; }
    .modules-sidebar { width: 100%; }
}

/* ----------------------------------------------------------
   Module : Blogs — Liste (blogs-index)
   ---------------------------------------------------------- */
.blogs-index { padding: 2rem 0; }
.blogs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.blogs-title  { font-size: 2rem; font-weight: 700; margin: 0; }
.blogs-search { display: flex; gap: .5rem; }
.blogs-search input { padding: .4rem .8rem; border: 1px solid #ddd; border-radius: 4px; }
.blogs-empty  { text-align: center; padding: 3rem; color: #999; }
.blogs-search-label { font-style: italic; margin-bottom: 1rem; color: #666; }

.blogs-grid           { display: grid; gap: 1.5rem; }
.blogs-grid--cards    { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.blogs-grid--grid     { grid-template-columns: repeat(3, 1fr); }
.blogs-grid--list     { grid-template-columns: 1fr; }
.blogs-grid--masonry  { columns: 3; column-gap: 1.5rem; }
.blogs-grid--masonry .blogs-card { break-inside: avoid; margin-bottom: 1.5rem; }

.blogs-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.blogs-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.blogs-card__color   { height: 4px; }
.blogs-card__body    { padding: 1.25rem; }
.blogs-card__date    { font-size: .8rem; color: #999; display: block; margin-bottom: .4rem; }
.blogs-card__title   { font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; line-height: 1.4; }
.blogs-card__title a { color: inherit; text-decoration: none; }
.blogs-card__title a:hover { color: var(--brand-color, var(--bs-primary, #0d6efd)); }
.blogs-card__excerpt { font-size: .9rem; color: #555; margin-bottom: 1rem; line-height: 1.5; }
.blogs-card__more    { font-size: .85rem; font-weight: 600; color: var(--brand-color, var(--bs-primary, #0d6efd)); text-decoration: none; }
.blogs-card__more:hover { text-decoration: underline; }

.blogs-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.blogs-pagination__item { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333; font-size: .9rem; }
.blogs-pagination__item.active,
.blogs-pagination__item:hover { background: var(--brand-color, var(--bs-primary, #0d6efd)); color: #fff; border-color: var(--brand-color, var(--bs-primary, #0d6efd)); }

/* Layout avec sidebar — grille adaptée */
.modules-layout--sidebar-left  .blogs-grid--cards,
.modules-layout--sidebar-right .blogs-grid--cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.modules-layout--sidebar-left  .blogs-grid--grid,
.modules-layout--sidebar-right .blogs-grid--grid  { grid-template-columns: repeat(2, 1fr); }
.modules-layout--sidebar-left  .blogs-grid--masonry,
.modules-layout--sidebar-right .blogs-grid--masonry { columns: 2; }

/* ----------------------------------------------------------
   Module : Blogs — Détail (blogs-detail)
   ---------------------------------------------------------- */
.blogs-detail { max-width: 800px; margin: 0 auto; padding: 2rem 0; }
.blogs-detail__header { margin-bottom: 2rem; }
.blogs-detail__category { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-color, var(--bs-primary, #0d6efd)); }
.blogs-detail__title { font-size: 2.2rem; font-weight: 700; margin: .5rem 0; line-height: 1.3; }
.blogs-detail__meta { font-size: .9rem; color: #888; margin-bottom: 1rem; }
.blogs-detail__excerpt { font-size: 1.1rem; color: #555; font-style: italic; }
.blogs-detail__content { line-height: 1.8; font-size: 1rem; color: #333; }
.blogs-detail__content img { max-width: 100%; height: auto; border-radius: 4px; }
.blogs-detail__video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 2rem 0; border-radius: 8px; }
.blogs-detail__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.blogs-detail__contact { background: #f8f9fa; padding: 1.25rem; border-radius: 8px; margin: 2rem 0; }
.blogs-detail__contact p { margin: .3rem 0; }
.blogs-detail__socials { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
.blogs-detail__socials a { font-size: .85rem; font-weight: 600; text-decoration: none; padding: .3rem .8rem; border-radius: 4px; background: #f0f0f0; color: #333; }
.blogs-detail__nav { display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #eee; gap: 1rem; flex-wrap: wrap; }
.blogs-detail__nav a { text-decoration: none; color: var(--brand-color, var(--bs-primary, #0d6efd)); font-size: .9rem; max-width: 45%; }
.blogs-detail__nav-next { text-align: right; }
.blogs-detail__faqs { margin: 2rem 0; }
.blogs-detail__faqs h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.blogs-faq-item { border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: .5rem; }
.blogs-faq-item summary { padding: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.blogs-faq-item summary::before { content: '+ '; color: var(--brand-color, var(--bs-primary, #0d6efd)); }
.blogs-faq-item[open] summary::before { content: '− '; }
.blogs-faq-item p { padding: 0 1rem 1rem; color: #555; line-height: 1.6; margin: 0; }

/* ----------------------------------------------------------
   Sidebar widgets
   ---------------------------------------------------------- */
.modules-sidebar__widget { margin-bottom: 1.5rem; }
.modules-sidebar__widget-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--brand-color, var(--bs-primary, #0d6efd)); }

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .blogs-grid--grid    { grid-template-columns: 1fr 1fr; }
    .blogs-grid--masonry { columns: 2; }
    .blogs-detail { padding: 1rem; }
    .blogs-detail__title { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .blogs-grid--grid,
    .blogs-grid--cards   { grid-template-columns: 1fr; }
    .blogs-grid--masonry { columns: 1; }
}