/* ------------------------------------------------------------------
   DA.Design — correctifs propres à la page d'accueil
   Référence Figma : nœud 1584:1598 (hero « Créez un site à votre image »)
   ------------------------------------------------------------------ */

/* Le hero est bloqué à 623px ; la maquette en fait 731 (70px de padding
   vertical, contenu libre). Le retrait latéral vaut 130px, déjà obtenu
   par le cadrage à 1180px — on annule donc le padding interne qui
   s'ajoutait par-dessus. */
main > section[class]:first-of-type {
  height: 731px;
}

main > section[class]:first-of-type > div.max-w-7xl {
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (min-width: 1024px) {
  main > section[class]:first-of-type > div.max-w-7xl {
    padding-left: 0;
    padding-right: 0;
  }

  /* Titre : 96px Semi Bold dans la maquette, le site sortait 80px Bold. */
  main > section[class]:first-of-type h1 {
    font-size: 96px;
    font-weight: 600;
    line-height: normal;
  }

  /* Paragraphe : même graisse que le titre dans Figma (Semi Bold),
     interligne 25px, colonne de 476px. */
  main > section[class]:first-of-type h1 + p {
    font-weight: 600;
    line-height: 25px;
    max-width: 476px;
  }
}

/* Bouton « Voir nos services » : pill blanc 212×50, Inter Semi Bold 16px. */
main > section[class]:first-of-type button[class] {
  width: 212px;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  border-radius: 200px;
}

/* Répartition des deux colonnes du hero.
   Figma : bloc texte de 669px, bloc visuels de 501px, gouttière de 10px
   — soit 1180px. Le site les mettait à 50/50 avec 80px de gouttière, ce
   qui rétrécissait la colonne de texte et cassait le titre en 4 lignes
   au lieu de 2. */
@media (min-width: 1024px) {
  main > section[class]:first-of-type div.grid {
    grid-template-columns: 669px 501px;
    gap: 10px;
    align-items: center;
  }

  main > section[class]:first-of-type h1 {
    width: 669px;
  }
}

/* Figma ancre le contenu en haut du hero avec 70px de retrait ; le site
   le centrait verticalement, ce qui le faisait descendre d'une centaine
   de pixels. */
main > section[class]:first-of-type {
  align-items: flex-start;
}

/* Courbe décorative en bas à gauche : 1314px de large dans la maquette,
   le site la rendait à 40 % de la fenêtre (~576px). */
@media (min-width: 1024px) {
  main > section[class]:first-of-type > div[class]:first-child img {
    width: 1372px;
    height: 432px;
    max-width: none;
    margin-left: -396px;  /* la courbe déborde à gauche, comme dans Figma */
    margin-bottom: -76px;
    transform: scaleY(-1); /* Figma applique un miroir vertical au tracé */
  }
}

/* --- Section « Les avantages » (3e section) ------------------------ */
/* Référence Figma : nœud 1654:8730.
   Écarts : les icônes n'avaient pas leur pastille ronde bordée, l'image
   était en paysage pleine colonne au lieu d'un portrait 504×560, et la
   grille était en 50/50 au lieu de 504 / 569. */

@media (min-width: 1024px) {
  main > section:nth-of-type(3) {
    padding-top: 60px;
    padding-bottom: 30px;
  }

  main > section:nth-of-type(3) div.grid {
    grid-template-columns: 504px 569px;
    justify-content: space-between;
    gap: 0;
  }

  /* Visuel : portrait 504×560, rayon 42px (le site le rendait en
     paysage sur toute la largeur de colonne, rayon 22px). */
  main > section:nth-of-type(3) div.grid > div:first-child {
    width: 504px;
    height: 560px;
    border-radius: 42px;
  }

  main > section:nth-of-type(3) div.grid > div:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Chaque avantage est centré verticalement sur sa pastille. */
  main > section:nth-of-type(3) div.grid > div:last-child > div {
    align-items: center;
    gap: 33px;
  }
}

/* Pastille ronde autour de l'icône : 76px, fond #fff6ee, bordure orange.
   Le site posait le glyphe nu. */
main > section:nth-of-type(3) div.grid > div:last-child > div > div.flex-shrink-0 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 200px;
  background-color: #fff6ee;
  border: 1px solid var(--cta-orange);
}

/* --- Mobile -------------------------------------------------------- */
/* La hauteur de 731px vient de la maquette desktop. Le contenu du hero
   occupe plus de lignes sur mobile : on laisse la hauteur libre pour
   qu'il ne soit pas rogné. */

@media (max-width: 1023px) {
  main > section[class]:first-of-type {
    height: auto;
    min-height: 480px;
  }
}