/* Page d'accueil uniquement — mécanique de mise en page propre à cette page
   (plein écran sans défilement, bandeau rose + bordure déchirée, grille 2x2).
   Couleurs, polices, en-tête et pied de page communs : voir css/style.css */

/* ---------- Tenir toute la page sur un seul écran, sans défilement ---------- */

html:has(body.home) { height: 100%; overflow: hidden; }

body.home {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--blue);
}

/* Zone rose (en-tête + titre), jusqu'à la bordure déchirée */

.kv-pink-zone {
  background-color: var(--pink);
  position: relative;
  flex: 0 0 auto;
}

.kv-divider {
  flex: 0 0 auto;
  height: 22px;
  margin-top: -2px;
  display: block;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2022%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C10%20L40%2C12%20L80%2C14%20L120%2C4%20L160%2C8%20L200%2C8%20L240%2C10%20L280%2C4%20L320%2C16%20L360%2C4%20L400%2C8%20L440%2C14%20L480%2C14%20L520%2C8%20L560%2C16%20L600%2C8%20L640%2C14%20L680%2C4%20L720%2C8%20L760%2C16%20L800%2C4%20L840%2C14%20L880%2C4%20L920%2C16%20L960%2C4%20L1000%2C12%20L1040%2C20%20L1080%2C14%20L1120%2C12%20L1160%2C8%20L1200%2C20%20L1200%2C0%20Z%22%20fill%3D%22%23F9BDAE%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

body.home main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

body.home .site-footer { flex: 0 0 auto; }

/* ---------- Hero (titre centré) ---------- */

.home-hero {
  flex: 0 0 auto;
  max-width: 980px;
  margin: 0 auto;
  padding: 0.6rem 0 1.6rem;
  text-align: center;
}

.home-hero h1 {
  font-size: clamp(1.7rem, 4.1vw, 2.75rem);
  line-height: 0.98;
  margin: 0.5rem auto 0.55rem;
}

.home-hero p.lede {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  opacity: 0.75;
}

/* ---------- Grille 2x2 de taille égale ---------- */

.dynamic-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
}

.dyn-tile {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  opacity: 0;
  transform: translateY(14px);
  animation: dynReveal 0.7s cubic-bezier(.2,.7,.3,1) forwards;
}

.dyn-tile:nth-child(1) { animation-delay: 0.05s; }
.dyn-tile:nth-child(2) { animation-delay: 0.15s; }
.dyn-tile:nth-child(3) { animation-delay: 0.25s; }
.dyn-tile:nth-child(4) { animation-delay: 0.35s; }

@keyframes dynReveal { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .dyn-tile { animation: none; opacity: 1; transform: none; }
}

.dyn-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}

.dyn-tile:hover img,
.dyn-tile:focus-visible img { transform: scale(1.08); }

.dyn-tile .overlay { position: absolute; inset: 0; transition: opacity 0.4s ease; }

.dyn-tile:nth-child(1) .overlay { background: linear-gradient(190deg, color-mix(in srgb, var(--navy) 40%, transparent) 0%, color-mix(in srgb, var(--navy-deep) 82%, transparent) 55%, color-mix(in srgb, var(--navy-deep) 97%, transparent) 100%); }
.dyn-tile:nth-child(2) .overlay { background: linear-gradient(190deg, color-mix(in srgb, var(--blue) 40%, transparent) 0%, color-mix(in srgb, var(--blue-deep) 78%, transparent) 55%, color-mix(in srgb, var(--blue-deep) 97%, transparent) 100%); }
.dyn-tile:nth-child(3) .overlay { background: linear-gradient(190deg, color-mix(in srgb, var(--coral) 40%, transparent) 0%, color-mix(in srgb, var(--coral-deep) 78%, transparent) 55%, color-mix(in srgb, var(--coral-deep) 97%, transparent) 100%); }
.dyn-tile:nth-child(4) .overlay { background: linear-gradient(190deg, color-mix(in srgb, var(--pink) 40%, transparent) 0%, color-mix(in srgb, var(--pink-deep) 78%, transparent) 55%, color-mix(in srgb, var(--pink-deep) 97%, transparent) 100%); }

.dyn-tile .content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
  color: #FFFFFF;
  box-sizing: border-box;
}

.dyn-tile h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: #FFFFFF;
  margin: 0 0 0.35rem;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

.dyn-tile p {
  color: rgba(255,255,255,0.92);
  font-size: 0.86rem;
  font-weight: 500;
  max-width: 42ch;
  margin: 0 0 0.7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}

.dyn-tile .tile-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
}

.dyn-tile .tile-arrow svg { width: 16px; height: 16px; transition: transform 0.3s ease; }

.dyn-tile:hover .tile-arrow svg,
.dyn-tile:focus-visible .tile-arrow svg { transform: translateX(5px); }

.dyn-tile:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* ---------- Petits écrans ---------- */

@media (max-width: 640px) {
  body.home main { padding: 0 1rem; }
  .home-hero { padding: 0.5rem 0 1rem; }
  .home-hero p.lede { display: none; }
  .dynamic-grid { gap: 0.6rem; padding: 0.7rem 0; }
  .dyn-tile .content { padding: 0.8rem; }
  .dyn-tile h2 { font-size: 1rem; margin-bottom: 0.2rem; }
  .dyn-tile p { font-size: 0.76rem; margin-bottom: 0.4rem; -webkit-line-clamp: 2; }
  .dyn-tile .tile-arrow { font-size: 0.76rem; }
  .dyn-tile .tile-arrow svg { width: 14px; height: 14px; }
}

@media (max-height: 620px) {
  .home-hero p.lede { display: none; }
  .home-hero h1 { font-size: clamp(1.3rem, 3.2vw, 1.9rem); margin: 0.35rem 0; }
}