/* ============================================================
   HOME — grille éditoriale
   Système U — 7 colonnes × 3 lignes — gap 8px — marges 2vw
   ============================================================ */

.page-home { overflow: hidden; }

/* ── Grille principale ────────────────────────────────────── */

.home-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* 4 lignes en 1fr : la grille remplit toute la hauteur visible sous le header.
     Hauteur = 100vh − hauteur du header (--asb-top, le contenu démarre dessous via
     body{margin-top}) − une réserve pour le footer. */
  grid-template-rows: repeat(4, 1fr);
  gap: var(--home-gap);
  height: calc(100vh - var(--asb-top) - 49px);
  padding: 0 0 var(--home-gap); /* collé sous le header (pas de marge en haut) */
  box-sizing: border-box;
  background: #fff;
}

/* ── Placement des cellules (7 col × 4 lignes) ────────────────
   ATLAS 3×3 ┆ DESSIN/EVENT/JEUX 2×2 ┆ bandeau bas R4. */

.hc-atlas     { grid-column: 1 / 4; grid-row: 1 / 4; }
.hc-instagram { grid-column: 4;     grid-row: 1; }
.hc-agenda    { grid-column: 5;     grid-row: 1; }
.hc-dessin    { grid-column: 6 / 8; grid-row: 1 / 3; }
.hc-event     { grid-column: 4 / 6; grid-row: 2 / 4; }
.hc-jeux      { grid-column: 6 / 8; grid-row: 3 / 5; }
.hc-contact   { grid-column: 1;     grid-row: 4; }
.hc-chantier  { grid-column: 2 / 4; grid-row: 4; }
.hc-empty     { grid-column: 4;     grid-row: 4; }
.hc-compte    { grid-column: 5;     grid-row: 4; }

/* ── Modules U (aspect-ratio désactivé — la grille gère les dimensions) ── */

.hc-1x1, .hc-2x1, .hc-2x2 { aspect-ratio: unset; }

/* ── Cellule commune ──────────────────────────────────────── */

.hc { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; color: #fff; background: #f0ede8; min-width: 0; min-height: 0; }

/* ── Image de fond ────────────────────────────────────────── */

.hc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.hc:hover .hc-img { transform: scale(1.03); }

/* ── Overlay ──────────────────────────────────────────────── */

.hc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.05) 100%); }

/* ── Texte ────────────────────────────────────────────────── */

.hc-info  { position: relative; z-index: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.hc-tag   { font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.7); display: block; }
.hc-title { font-family: "The Bigmouth Regular", sans-serif; font-size: clamp(14px, 1.2vw, 24px); font-weight: normal; text-transform: lowercase; color: #fff; display: block; line-height: 1.15; }
.hc-sub   { font-family: "Archivo", sans-serif; font-size: clamp(10px, 0.75vw, 13px); font-weight: 300; color: rgba(255,255,255,0.75); display: block; line-height: 1.3; }

.hc-atlas .hc-info, .hc-event .hc-info, .hc-jeux .hc-info,
.hc-chantier .hc-info, .hc-dessin .hc-info,
.hc-instagram .hc-info { text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ── Vignettes fond clair ─────────────────────────────────── */

.hc-agenda,
.hc-compte,
.hc-contact { background: #FFFAF2; justify-content: flex-start; transition: filter 0.2s; }
.hc-agenda:hover,
.hc-compte:hover,
.hc-contact:hover { filter: brightness(0.95); }

.hc-agenda .hc-tag,
.hc-compte .hc-tag,
.hc-contact .hc-tag { color: var(--color-main); }

.hc-agenda .hc-title,
.hc-compte .hc-title,
.hc-contact .hc-title { color: var(--color-text); font-size: clamp(11px, 0.9vw, 17px); }

.hc-compte .hc-sub,
.hc-contact .hc-sub { color: var(--color-text); }

/* Emplacement vide (placeholder — contenu à venir). */
.hc-empty { background: #FFFAF2; }

/* ── Calendrier ───────────────────────────────────────────── */

.hc-cal        { flex: 1; padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.hc-cal-header { font-family: "Archivo", sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-muted); }
.hc-cal-grid   { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.hc-cal-day    { font-family: "Archivo", sans-serif; font-size: 9px; font-weight: 300; color: var(--color-text); text-align: center; padding: 1px 0; line-height: 1.4; }
.hc-cal-head   { font-weight: 700; color: var(--color-muted); font-size: 9px; }
.hc-cal-empty  { opacity: 0; }
.hc-cal-today  { background: var(--color-main); color: #fff; border-radius: 2px; font-weight: 700; }

/* ── Instagram placeholder ────────────────────────────────── */

.hc-insta-placeholder { position: absolute; inset: 0; background: #1a1a1a; display: flex; align-items: center; justify-content: center; }
.hc-insta-icon { font-size: 32px; color: rgba(255,255,255,0.15); }

/* ── Responsive mobile ────────────────────────────────────── */

@media (max-width: 900px) {
  .page-home { overflow: visible; }
  .home-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 120px 120px 160px 120px 120px;
    height: auto;
    padding: 0 0 8px;
  }
  .hc-atlas     { grid-column: 1 / 3; grid-row: 1; }
  .hc-empty     { grid-column: 1;     grid-row: 2; }
  .hc-agenda    { grid-column: 2;     grid-row: 2; }
  .hc-chantier  { grid-column: 1;     grid-row: 3; }
  .hc-dessin    { grid-column: 2;     grid-row: 3; }
  .hc-event     { grid-column: 1 / 3; grid-row: 4; }
  .hc-compte    { grid-column: 1;     grid-row: 5; }
  .hc-contact   { grid-column: 2;     grid-row: 5; }
  .hc-instagram { grid-column: 1;     grid-row: 6; }
  .hc-jeux      { grid-column: 2;     grid-row: 6; }
  .hc-title { font-size: clamp(15px, 4vw, 22px); }
}

@media (max-width: 500px) {
  .home-grid { padding: 0 0 6px; gap: 6px; }
}