/**
 * ILIA CMS — Styles des blocs de page d'accueil
 * Réf. docs/THEME_DESIGN_SYSTEM.md.
 *
 * Ce fichier ne fait que l'appoint : la mise en forme générique
 * (titres, boutons, cartes, grilles, tableaux, états vides) vient de
 * components.css. Ici : uniquement ce qui est propre à la mise en page
 * d'un bloc précis, jamais une couleur en dur (toujours un token).
 *
 * Couvre exactement les classes émises par les fichiers de blocs réels
 * (themes/_blocks/{nom}.php et modules/{module}/blocks/{nom}.php),
 * vérifié fichier par fichier — pas supposé. Volontairement très
 * proche du fichier équivalent de themes/modern/ : seule la valeur des
 * tokens diffère.
 */

/* ── Base commune à tous les blocs (espacement ENTRE blocs) ────────── */
.block{
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.block:last-child{ border-bottom: none; padding-bottom: 0 }
@media (max-width: 600px){
  .block{ margin-bottom: var(--space-md); padding-bottom: var(--space-md) }
}

/* ── Héros — Bannière (themes/_blocks/banner.php) ───────────────────
   Utilise .section-eyebrow/.section-title/.section-subtitle et .btn
   (components.css) — rien de spécifique à styler ici hormis
   l'espacement propre au Hero (famille Héros, section 3). */
.block-banner{
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: none;
}
.block-banner__actions{ margin-top: var(--space-md) }
@media (max-width: 600px){
  .block-banner{ padding: var(--space-lg) 0 var(--space-md) }
}

/* ── Texte libre (themes/_blocks/text.php) ──────────────────────── */
.block-text__body{
  font-family: var(--font-body);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.75;
}
.block-text__body p{ margin: 0 0 .75em }
.block-text__body p:last-child{ margin-bottom: 0 }

/* ── Contact (themes/_blocks/contact.php) — s'appuie sur .card ────── */
.block-contact__item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text);
}
.block-contact__item:last-child{ margin-bottom: 0 }
.block-contact__icon{ flex-shrink: 0; width: 18px; color: var(--color-primary); margin-top: 2px }
.block-contact__item a{ color: var(--color-primary); text-decoration: none; font-weight: 600 }
.block-contact__item a:hover{ text-decoration: underline }

/* ── Galerie — Grille (modules/gallery/blocks/grid.php) ─────────────
   La mise en grille responsive vient de .grid (components.css) ;
   ici uniquement le rendu propre à une vignette de galerie. */
.block-gallery__item{
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  min-width: 0;
}
.block-gallery__item img{
  width: 100%; max-width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fast);
}
.block-gallery__item:hover img{ transform: scale(1.03) }
.block-gallery__item figcaption{
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: 6px 2px 0;
  text-align: center;
}
@media (max-width: 600px){
  .block-gallery__item img{ height: 140px }
}

/* ── Horaires (modules/opening-hours/blocks/week.php) — .table ──────
   La structure du tableau vient de .table (components.css) ; ici
   uniquement la mise en évidence du jour courant, propre à ce bloc. */
.block-hours__row--today .block-hours__day{ color: var(--color-primary); font-weight: 700 }
.block-hours__row--today .block-hours__time{ font-weight: 600 }
.block-hours__day{ width: 110px }
.block-hours__closed{ color: var(--text-muted) }
.block-hours__sep{ color: var(--text-muted); margin: 0 2px }
.block-hours__note{ margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--text-muted); font-style: italic }
@media (max-width: 400px){ .block-hours__day{ width: 85px } }

/* ── Blog — Derniers articles (modules/blog/blocks/latest.php) ──────
   S'appuie sur .list (components.css) pour l'empilement des articles. */
.block-blog-latest__item a{
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
}
.block-blog-latest__item a:hover{ color: var(--color-primary) }
.block-blog-latest__meta{ font-size: var(--text-xs); color: var(--text-muted); margin: 3px 0 0 }

/* ── News — Dernières actualités (modules/news/blocks/latest.php) ───
   Même besoin que Blog — Derniers articles, scopé séparément plutôt
   que de faire dépendre un module d'une classe nommée d'après un
   autre (ADR-0033 : News et Blog restent deux modules distincts). */
.block-news-latest__item a{
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
}
.block-news-latest__item a:hover{ color: var(--color-primary) }
.block-news-latest__meta{ font-size: var(--text-xs); color: var(--text-muted); margin: 3px 0 0 }

/* ── CTA — Bandeau d'action (modules/cta/blocks/action.php) ─────────
   Famille Action (design system, section 3). Repose presque
   entièrement sur .card et .btn — seule la mise en page flex
   titre/bouton est propre à ce bloc. */
.block-cta-action__card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.block-cta-action__btn{ flex-shrink: 0 }