/**
 * Hero viewport-height fix (LG/XL + grande hauteur)
 * Réduit le vide vertical du hero sur desktop à grande hauteur (ex: 4K).
 * Actif uniquement : min-width 1024px ET min-height 900px.
 * Aucun impact sur mobile ni sur les règles 2xl.
 */
/* La ligne « { PROJETS COMPLEXES } » reste sur une seule ligne,
   pour que l'accolade fermante ne descende pas sur le paragraphe. */
#hero .hero-accent-line {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
}

#hero .hero-accent-line__text {
  display: block;
  white-space: nowrap;
  line-height: 1.2;
  font-size: clamp(1.35rem, 8.6cqi, 1em);
}

@media (min-height: 900px) and (min-width: 1024px) {
  #hero {
    min-height: 72vh;
  }
  #hero .hero-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
/* Keep the original gaps around the braces without unstable whitespace nodes. */
#hero .hero-accent-line__text.absolute {
  display: flex;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.25em;
}
@media (min-width: 1024px) {
  #hero .hero-accent-line__text.absolute { justify-content: flex-start; }
}
/* Each animated token occupies its final width; the typewriter still reveals
   the same characters with the original delays, within a stable centered line. */
#hero .hero-type-token { display: inline-grid; }
#hero .hero-type-token::before,
#hero .hero-type-token > [data-current] { grid-area: 1 / 1; }
#hero .hero-type-token::before { visibility: hidden; }
#hero .hero-type-token > [data-current] { text-align: left; }

/* Une hauteur minimale sur une boîte avec aspect-ratio imposait aussi sa
   largeur intrinsèque, au-delà de la colonne disponible sur tablette. */
.vitrine-site[data-page="Index"] [class~="aspect-[4/3]"] { min-width: 0; width: 100%; }
@media (min-width: 768px) and (max-width: 1099px) {
  .vitrine-site[data-page="Index"] [class~="aspect-[4/3]"] { min-height: 0; }
}
.vitrine-site[data-page="Index"] h3.line-clamp-2 { display: block; -webkit-line-clamp: unset; overflow: visible; }

@media (min-width: 1600px) {
  #hero { min-height: clamp(48rem, 65vh, 72rem); }
  #hero .vitrine-page__inner { padding-block: clamp(3rem, 3vw, 6rem); }
  #hero .origin-center { max-width: 95rem; }
  #hero .font-mono { font-size: clamp(.875rem, calc(.625rem + .25vw), 1.375rem); }
  #hero .origin-center > .absolute { width: clamp(26.25rem, calc(16rem + 9vw), 40rem); }
  .vitrine-site[data-page="Index"] main section:not(#hero) p:not(.font-mono) { max-width: 68ch; }
}

/* Accueil CTA projet — gabarit, marges, grille 2 colonnes */
#cta-projet .home-projet-cta__content {
  box-sizing: border-box;
  width: 100%;
  padding-inline: clamp(1.25rem, 6.5vw, 8.75rem); /* ~100–140 px @1920 */
  padding-block: clamp(2.75rem, 4.8vw, 5.75rem);
}

#cta-projet .home-projet-cta__grid {
  width: 100%;
  column-gap: 2.5rem;
  row-gap: 2.75rem;
}

@media (min-width: 1024px) {
  #cta-projet .home-projet-cta__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(4.375rem, 4.5vw, 6.25rem); /* ~70–100 px */
    row-gap: 0;
  }
}

/* Titre : présence colonne, retours forcés via <br> desktop */
#cta-projet .home-projet-cta__title {
  max-width: none;
}

/* Intro ~3 lignes, sans rejoindre la colonne droite */
#cta-projet .home-projet-cta__lead {
  max-width: min(100%, 44ch) !important;
}

/* Situations : texte occupe la largeur restante de la colonne */
#cta-projet .home-projet-cta__situation-copy {
  max-width: min(100%, 48ch) !important;
}

#cta-projet .home-projet-cta__situation-copy p {
  max-width: none !important;
}

#cta-projet .home-projet-cta__situation + .home-projet-cta__situation {
  margin-top: 0;
}

#cta-projet .home-projet-cta__rule {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 1px;
  margin-block: clamp(2.25rem, 3.2vw, 3.5rem);
  background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 1920px) {
  #cta-projet .home-projet-cta__shell {
    min-height: 45.5rem; /* ~728 px — cible 680–740 @1920 */
  }
}