/* ============================================
   LANDING/LANDING.CSS — Styles spécifiques des landings (pattern F)
   Charge sur : CPT landing (after landing/shared.css)
   Sections couvertes :
     1. Hero (utilise .section--immersion existant — voir components.css)
     2. .landing__contexte / .landing__contexte-grid — Contexte local 2-col
     3. .landing__formules / .landing__formules-list — Formules compactes
     4. FAQ (composant shared/faq.php — pas de style spécifique ici)
     5. .landing__maillage / .landing__maillage-card — Maillage cards
     6. .landing__cta — Réutilise .hub-event__cta (classes héritées)
   ============================================ */

/* ════════════════════════════════════════════
   1. HERO — cartouche teal signature
   Aucun voile sur l'image, aucun text-shadow : le bloc titre + texte est
   posé sur un rectangle teal profond plein (règle commune
   .hero-landing__copy dans hub-event.css, chargé sur les landings).
   Le hero est ancré bas-gauche comme les heros hubs.
   ════════════════════════════════════════════ */

.single-landing .section--immersion {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

/* L'item flex doit occuper toute la largeur ET lever le plafond de 560px
   posé par components.css (pensé pour les heros centrés des pages main),
   sinon le cartouche retombe à 432px et hache le titre. */
.single-landing .section--immersion .section__content {
  width: 100%;
  max-width: none;
}

.single-landing .section--immersion .section__overlay {
  background: none;
}

.single-landing .hero-immersion__display,
.single-landing .section--immersion .overline {
  text-shadow: none;
}

/* Cartouche landing : plus large que celui des hubs (les H1 locaux sont longs),
   display recalibré, texte aligné à gauche (parité avec les heros hubs —
   components centre les heros des pages main). */
.hero-landing__copy {
  width: min(720px, 100%);
  text-align: left;
}

.hero-landing__copy .hero-immersion__display {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.4rem);
}

/* ════════════════════════════════════════════
   2. CONTEXTE LOCAL — Grid 2 cols (copy + image)
   ════════════════════════════════════════════ */

.landing__contexte-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: start;
}

.landing__contexte-copy h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.125rem + 1.25vw, 2rem);
  line-height: 1.15;
  max-width: 560px;
  margin-bottom: 0;
}

.landing__contexte-copy .accent-line {
  margin-block: var(--space-md) var(--space-lg);
}

.landing__contexte-media {
  position: relative;
  aspect-ratio: var(--aspect-portrait); /* 4/5 — ratio DA strict (cf. 01-research.md §11) */
  overflow: hidden;
}

/* Le wrapper <picture> (jumeau AVIF) casse la chaine height:100% de l'img :
   sans hauteur propre il retombe au ratio intrinseque. Il doit remplir le
   conteneur, comme .hub-hero__media picture. */
.landing__contexte-media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.landing__contexte-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════
   3. FORMULES CONDENSÉES — Liste verticale (vs grid 3 des hubs D)
   ════════════════════════════════════════════ */

.landing__formules-list {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.landing__formules-item.reveal {
  transition-delay: calc(var(--stagger, 0) * 100ms);
}

.landing__formules-item {
  background: var(--em-bg);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'mark mark'
    'head head'
    'sub sub'
    'link link';
  gap: var(--space-sm) var(--space-md);
  /* border-left SaaS supprimé (cf. 01-audit.md finding #14).
     Signature via marqueur top, cohérent avec .card--featured. */
}

.landing__formules-item::before {
  content: "";
  grid-area: mark;
  display: block;
  width: 40px;
  height: 2px;
  background: var(--em-primary);
  margin-bottom: var(--space-xs);
}

.landing__formules-item-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.landing__formules-name {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  color: var(--em-text);
}

.landing__formules-duree {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--em-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.landing__formules-subtitle {
  grid-area: sub;
  margin: 0;
  font-size: var(--t-body);
  color: var(--em-text-light);
  line-height: 1.55;
}

.landing__formules-link {
  grid-area: link;
  justify-self: start;
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--em-primary);
  font-weight: var(--weight-medium);
  border-bottom: var(--border-base) solid transparent;
  padding-bottom: 2px;
  transition: var(--transition-border);
}

.landing__formules-link:hover {
  border-bottom-color: var(--em-primary);
}

.landing__formules-link span {
  display: inline-block;
  margin-left: 6px;
  transition: var(--transition-transform);
}

.landing__formules-link:hover span {
  transform: translateX(4px);
}

.landing__formules-note {
  margin-top: var(--space-xl);
  text-align: center;
  font-size: var(--t-small);
  color: var(--em-text-muted);
  max-width: 640px;
  margin-inline: auto;
}

/* ════════════════════════════════════════════
   5. MAILLAGE — 3 cards (hub event, hub region, neighbors)
   ════════════════════════════════════════════ */

.landing__maillage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.landing__maillage-card.reveal {
  transition-delay: calc(var(--stagger, 0) * 120ms);
}

/* Cartes toutes statiques (parité stricte avec « Villes voisines ») :
   seuls les LIENS texte à l'intérieur portent l'interaction.
   Fond crème : la section est passée en sable (alternance FAQ crème →
   maillage sable → CTA teal). */
.landing__maillage-card {
  display: block;
  padding: var(--space-lg);
  background: var(--em-bg);
  color: var(--em-text);
  text-decoration: none;
}

.landing__maillage-card .overline {
  color: var(--em-accent);
  margin-bottom: var(--space-sm);
}

.landing__maillage-card-title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
  color: var(--em-text);
  max-width: none;
}

.landing__maillage-card-desc {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--em-text-light);
}

.landing__maillage-neighbors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.landing__maillage-neighbors li {
  font-size: var(--t-small);
}

.landing__maillage-neighbors a {
  color: var(--em-primary);
  border-bottom: var(--border-base) solid transparent;
  transition: var(--transition-border);
}

.landing__maillage-neighbors a:hover {
  border-bottom-color: var(--em-primary);
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .landing__contexte-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .landing__contexte-media {
    aspect-ratio: 16 / 10;
    max-width: 720px;
    margin: 0 auto;
  }

  .landing__maillage-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 767px) {
  .landing__formules-item {
    padding: var(--space-md);
  }

  .landing__formules-item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}