/*
 * home.css -- Page d'accueil
 * Commune de Silly -- Theme custom
 *
 * Structure fidele au template Routena.
 * Couleurs adaptees selon brand/charte.md.
 * Convention BEM stricte, mobile-first.
 *
 * @package Silly
 */

/* ============================================
   CAROUSEL "À LA UNE"
   ============================================ */
.carousel {
  position: relative;
  height: 840px;
  overflow: hidden;
}

.carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  height: inherit;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  height: inherit;
}

.carousel__slide--active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.carousel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.carousel__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 30, 0.32) 0%, rgba(26, 26, 46, 0.72) 60%, #1A1A2E 100%);
  z-index: 1;
}

.carousel__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  height: inherit;
  display: flex;
  align-items: center;
}

.carousel__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: calc(var(--total-header-height, 120px) + 24px);
  max-width: 680px;
}

.carousel__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -1.68px;
  color: var(--color-text-light);
}

.carousel__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.8px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 520px;
}

.carousel__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}

/* Flèches de navigation */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.carousel__arrow:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.4);
}

.carousel__arrow svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
}

.carousel__arrow--prev {
  left: 24px;
}

.carousel__arrow--next {
  right: 24px;
}

/* Indicateurs (dots)
   Chaque point est une cible de 24 × 24 px (WCAG 2.5.8, revue du 24 sept.
   2026) : le bouton faisait 10 px et ses voisins étaient à 20 px de centre à
   centre, trop près au doigt. Le point VISIBLE reste de 10 px (28 px pour
   l'actif), dessiné par ::before ; l'écart visible passe de 10 à 14 px, le
   minimum pour des cibles de 24 px. `bottom` recule de 7 px : les points
   restent à la même hauteur qu'avant. */
.carousel__dots {
  position: absolute;
  bottom: 57px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0;
}

.carousel__dot {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.carousel__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
  transition: all var(--transition-base);
}

.carousel__dot:hover::before {
  background: rgba(255, 255, 255, 0.6);
}

.carousel__dot--active {
  width: 42px;
}

.carousel__dot--active::before {
  background: var(--color-text-light);
  width: 28px;
}

/* Pause / Lecture du défilement (revue du 24 sept. 2026, WCAG 2.2.2) : même
   dessin que les flèches, en plus petit, à DROITE des points et centré sur
   leur ligne — à gauche, il mordait sur le bouton d'un slide au titre long
   sur téléphone (les boutons des slides sont alignés à gauche). Le groupe de
   points mesure 18 px + 24 px par slide (la cible active fait 42 px, les
   autres 24) : `--carousel-slides`, posé par front-page.php, le situe quel
   que soit le nombre de slides. Né `hidden`, révélé par initCarousel
   (main.js) : `hidden` doit battre le display. */
.carousel__pause {
  position: absolute;
  bottom: 51px;
  left: calc(50% + (18px + 24px * var(--carousel-slides, 3)) / 2 + 12px);
  z-index: 5;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--color-text-light);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.carousel__pause[hidden] {
  display: none;
}

.carousel__pause:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.4);
}

.carousel__pause-icone {
  display: block;
  width: 16px;
  height: 16px;
}

.carousel__pause-icone--lecture,
.carousel__pause--arrete .carousel__pause-icone--pause {
  display: none;
}

.carousel__pause--arrete .carousel__pause-icone--lecture {
  display: block;
}

/* La flèche « Slide précédent » (48 px, à 24 px du bord ; 40 px sous
   1 024 px) recouvrait le titre ou le chapeau des slides de 769 à 1 391 px
   (revue du 24 sept. 2026). Tant que les flèches s'affichent, la colonne de
   texte garde 88 px de marge ; au-delà de 1 408 px, la largeur maximale du
   conteneur l'en écarte d'elle-même et la marge revient à 24 px. */
@media (min-width: 769px) {
  .carousel__inner {
    padding-inline: max(var(--container-padding, 24px), min(88px, calc(88px - (100% - var(--container-max, 1280px)) / 2)));
  }
}

/* ============================================
   NAVIGATION CARDS
   ============================================ */
.nav-cards {
  background: var(--color-bg);
  padding: 64px 0 0;
  position: relative;
  z-index: 3;
  margin-top: -48px;
}

.nav-cards__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
}

.nav-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.nav-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
}

.nav-card:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-4px);
  border-color: transparent;
}

.nav-card__bar {
  display: block;
  height: 4px;
  background: var(--nav-card-color, var(--color-primary));
  width: 100%;
}

.nav-card__logo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 24px 0;
  min-height: 114px;
}

.nav-card__logo-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.nav-card__logo-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-card__logo-icon svg {
  width: 28px;
  height: 28px;
  color: var(--nav-card-color, var(--color-primary));
}

.nav-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 24px;
  flex: 1;
}

.nav-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.6px;
  color: var(--color-text);
}

.nav-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.42px;
  color: var(--color-text-secondary);
}

.nav-card__arrow {
  padding: 0 24px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-card__arrow svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  transition: color var(--transition-base), transform var(--transition-base);
}

.nav-card:hover .nav-card__arrow svg {
  color: var(--nav-card-color, var(--color-primary));
  transform: translateX(4px);
}

/* ============================================
   UTILITY BAR (compact quick access)
   ============================================ */
.utility-bar {
  padding: 32px 0 64px;
}

.utility-bar__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.utility-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.utility-bar__item:hover {
  border-color: var(--color-primary);
  background: var(--color-bg);
  box-shadow: var(--shadow-natural);
}

.utility-bar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.utility-bar__icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.utility-bar__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.26px;
  color: var(--color-text);
}

/* ============================================
   ARTICLES / ACTUALITÉS SECTION
   ============================================ */
.articles {
  padding: var(--section-padding, 112px) 0;
  background: var(--color-bg-alt);
}

.articles__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
}

.articles__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.articles__left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.articles__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.articles__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: var(--color-text);
}

.articles__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--color-text-secondary);
  max-width: 480px;
}

.articles__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.articles__cta {
  padding-top: 24px;
}

/* Article card — featured (colonne gauche) */
.article-card {
  display: flex;
  flex-direction: column;
}

.article-card__image {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}

.article-card__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.article-card:hover .article-card__image img,
.article-card--horizontal:hover .article-card__thumb img {
  transform: scale(1.03);
}

.article-card--featured .article-card__image img {
  aspect-ratio: 16 / 10;
}

.article-card--featured .article-card__body {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-card__categories {
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--badge-color, var(--color-primary));
  color: var(--color-text-light);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.24px;
  white-space: nowrap;
}

.article-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.72px;
  color: var(--color-text);
}

.article-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.article-card__title a:hover {
  color: var(--color-primary-ink);
}

.article-card--featured .article-card__title {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.84px;
}

.article-card__excerpt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.3px;
  color: var(--color-text-secondary);
}

.article-card__date {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.26px;
  color: rgba(26, 26, 26, 0.62);
}

/* Article card — horizontal (colonne droite) */
.article-card--horizontal {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.article-card--horizontal:hover {
  box-shadow: var(--shadow-natural);
  transform: translateY(-2px);
}

.article-card--horizontal .article-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.article-card__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-card--horizontal .article-card__title {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.36px;
}

.article-card--horizontal .article-card__excerpt {
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.28px;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
  padding-top: 4px;
}

.article-card__link:hover {
  color: var(--color-primary-ink-dark);
}

.article-card__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.article-card__link:hover svg {
  transform: translateX(3px);
}

.article-card__thumb {
  flex-shrink: 0;
  width: 120px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}

.article-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* ============================================
   AGENDA / EVENTS SECTION
   ============================================ */
.agenda {
  background: var(--color-bg-dark);
  padding: var(--section-padding, 112px) 0;
}

.agenda__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.agenda__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.agenda__header-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.agenda__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 67.2px;
  letter-spacing: -1.68px;
  color: var(--color-text-light);
}

.agenda__header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.agenda__header-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.72px;
  color: rgba(255, 255, 255, 0.64);
  max-width: 380px;
}

.agenda__list {
  display: flex;
  flex-direction: column;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  transition: all var(--transition-base);
}

.event-item:first-child {
  padding-top: 0;
}

.event-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.event-item:hover {
  opacity: 0.85;
}

.event-item__date {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.event-item__day {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.84px;
  color: var(--color-text-light);
}

.event-item__month {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.26px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

.event-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-item__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 31.2px;
  letter-spacing: -0.72px;
  color: var(--color-text-light);
}

.event-item__info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.event-item__detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.42px;
  color: rgba(255, 255, 255, 0.64);
}

.event-item__detail svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.64;
}

.event-item__category {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.24px;
  color: rgba(255, 255, 255, 0.8);
}

.event-item__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--transition-base), transform var(--transition-base);
}

.event-item__arrow svg {
  width: 24px;
  height: 24px;
}

.event-item:hover .event-item__arrow {
  color: var(--color-text-light);
  transform: translateX(4px);
}

.agenda__footer {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

/* ============================================
   CARTE INTERACTIVE (sur la page d'accueil)
   La carte + filtres est integree en full width via le template-part
   carte-section.php. Le header (titre + description) garde la grille
   centree comme les autres sections home.
   ============================================ */
.map-section {
  background: var(--color-bg);
  padding: var(--section-padding, 112px) 0 64px;
}

/* En-tete centre (titre + tag + description) avec largeur contrainte */
.map-section__header-inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto 40px;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  align-items: center;
}

.map-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: var(--color-text);
}

.map-section__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--color-text-secondary);
  max-width: 560px;
}

/* Sur la home, on retire le fond gris alterne de la section carte
   pour eviter le double background (la home a deja son background propre).
   Le template-part conserve son padding interne. */
.map-section .carte__main {
  background: transparent;
  padding: 0;
}

/* ============================================
   RESPONSIVE -- TABLETTE (1024px)
   ============================================ */
@media (max-width: 1024px) {
  .carousel__title {
    font-size: 52px;
    line-height: 1.08;
  }

  .carousel__content {
    padding-bottom: 100px;
  }

  .carousel__arrow {
    width: 40px;
    height: 40px;
  }

  .carousel__arrow svg {
    width: 18px;
    height: 18px;
  }

  .nav-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .articles__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .articles__title {
    font-size: 40px;
    line-height: 44px;
  }

  .agenda__header {
    flex-direction: column;
  }

  .agenda__title {
    font-size: 40px;
    line-height: 48px;
  }

  .map-section__title {
    font-size: 40px;
    line-height: 44px;
  }
}

/* ============================================
   RESPONSIVE -- MOBILE (768px)
   ============================================ */
@media (max-width: 768px) {
  .carousel {
    height: 540px;
  }

  .carousel__title {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1px;
  }

  .carousel__subtitle {
    font-size: 17px;
    line-height: 25px;
  }

  .carousel__content {
    padding-bottom: 80px;
  }

  .carousel__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Flèches cachées en mobile (glissé, points et bouton Pause / Lecture) */
  .carousel__arrow {
    display: none;
  }

  /* Cibles de 24 px : 7 px de moins que les 48 px d'avant, même hauteur visible. */
  .carousel__dots {
    bottom: 41px;
  }

  .carousel__pause {
    bottom: 35px;
  }

  .nav-cards__grid {
    grid-template-columns: 1fr;
  }

  .nav-cards {
    margin-top: -24px;
    padding: 48px 0 0;
  }

  .articles__title {
    font-size: 32px;
    line-height: 38px;
  }

  .article-card--horizontal {
    flex-direction: column;
    gap: 16px;
  }

  .article-card--horizontal .article-card__thumb {
    width: 100%;
    height: 200px;
    order: -1;
  }

  .article-card__meta-row {
    flex-wrap: wrap;
  }

  .agenda__title {
    font-size: 32px;
    line-height: 38px;
  }

  .event-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .map-section__title {
    font-size: 32px;
    line-height: 38px;
  }

  .article-card--featured .article-card__title {
    font-size: 24px;
    line-height: 30px;
  }
}

/* ============================================
   RESPONSIVE -- SMALL MOBILE (375px)
   ============================================ */
@media (max-width: 375px) {
  .carousel__title {
    font-size: 30px;
    line-height: 34px;
  }

  .utility-bar__item {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}

/* Sous 360 px, un titre long (« Saison culturelle 2026 ») débordait du
   carrousel de 540 px — contenu de −23 à 563 px, bouton posé sur la rangée des
   points (revue du 24 sept. 2026). Un peu plus de hauteur, un titre un cran
   plus petit. */
@media (max-width: 360px) {
  .carousel {
    height: 620px;
  }

  .carousel__title {
    font-size: 28px;
    line-height: 32px;
  }
}