/* ------------------------------------------------------------------
   DA.Design — correctifs propres à la page Services
   Référence Figma : nœud 1592:1818 (frame « Service »)
   ------------------------------------------------------------------ */

/* --- Hero jaune ---------------------------------------------------- */
/* La maquette cadre le hero à 130px de retrait haut et 360px bas, la
   hauteur suivant le contenu ; le site le bloquait à 623px et centrait
   le bloc verticalement. Le retrait latéral de 130px est déjà obtenu par
   le cadrage à 1180px, d'où l'annulation du padding interne. */
main > section[class]:first-of-type {
  height: auto;
  align-items: flex-start;
}

/* Figma affiche 360px de retrait bas, mais y sort les trois barres du
   flux (position absolue, 441px du haut) : le hero y mesure 712px et il
   reste 90px sous la dernière barre. Ici les barres restent dans le
   flux, donc c'est cette réserve de 90px qu'il faut reprendre — 360px
   auraient ajouté 300px de jaune vide. */
main > section[class]:first-of-type > div.max-w-7xl {
  padding-top: 130px;
  padding-bottom: 90px;
}

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

  /* Colonne de texte : 768px dans Figma, le site la serrait à 560px,
     ce qui étalait le paragraphe sur une ligne de plus. */
  main > section[class]:first-of-type h1 + p {
    max-width: 768px;
  }
}

/* --- Les trois barres de largeur croissante ------------------------ */
/* Figma pose trois barres blanches pleines de 4px, arrondies à 75px, de
   537 / 617 / 700px, suivies de l'icône de l'appareil (gouttière 23 / 18
   / 31px) — soit des lignes de 593 / 690 / 777px espacées de 10px.
   Le site rendait des filets de 1px sur une piste blanche à 20 %, tous
   calés sur la même trame de 448 / 512 / 576px.

   Les largeurs de ligne sont posées en style inline par le composant :
   `!important` est le seul moyen de reprendre la main dessus sans
   toucher au balisage. */
main > section[class]:first-of-type div[style*="max-width"] {
  max-width: none !important;
}

main > section[class]:first-of-type div[style*="max-width"]:nth-child(1) {
  width: 593px;
  height: 61px;
}

main > section[class]:first-of-type div[style*="max-width"]:nth-child(2) {
  width: 690px;
  height: 55px;
}

main > section[class]:first-of-type div[style*="max-width"]:nth-child(3) {
  width: 777px;
  height: 45px;
}

/* Espacement des lignes : 10px dans la maquette, 24px sur le site. */
main > section[class]:first-of-type div:has(> div[style*="max-width"]) {
  gap: 10px;
}

/* La barre elle-même : 4px pleine et arrondie, au lieu du filet de 1px. */
main > section[class]:first-of-type div[style*="max-width"] > div:last-child > div:first-child {
  height: 4px;
  border-radius: 75px;
}

/* Figma ne pose aucune piste de fond derrière les barres. */
main > section[class]:first-of-type div[style*="max-width"] > div:first-child {
  display: none;
}

/* Gouttière barre / icône, relevée ligne par ligne. */
main > section[class]:first-of-type div[style*="max-width"]:nth-child(1) > div:last-child > div:last-child {
  margin-left: 23px;
}

main > section[class]:first-of-type div[style*="max-width"]:nth-child(2) > div:last-child > div:last-child {
  margin-left: 18px;
}

main > section[class]:first-of-type div[style*="max-width"]:nth-child(3) > div:last-child > div:last-child {
  margin-left: 31px;
}

/* Écart titre / paragraphe / barres : 19px dans la maquette, le site
   empilait 28px (space-y-7) puis 56px avant les barres. */
main > section[class]:first-of-type > div.max-w-7xl > div > * + * {
  margin-top: 19px;
}

main > section[class]:first-of-type > div.max-w-7xl > div > div:last-child {
  padding-top: 121px; /* porte le haut des barres à 441px du hero, comme Figma */
}

/* --- Décor d'angle (mockup d'écran) -------------------------------- */
/* Figma le pose en 441×441 à 1135px du bord gauche et -33px du haut,
   soit un débord de 136px à droite. Le site le rendait à 540px de haut
   avec des décalages en pourcentage, ce qui l'agrandissait d'un tiers
   et le faisait déborder bien plus largement. */
@media (min-width: 1024px) {
  main > section[class]:first-of-type > div[class]:last-child {
    top: -33px;
    right: -136px;
  }

  main > section[class]:first-of-type > div[class]:last-child img {
    width: 441px;
    height: 441px;
    transform: none;
  }
}

/* --- Bandeau photo ------------------------------------------------- */
/* 333px dans la maquette, le site le rendait à 320px (h-80). */
main > section:nth-of-type(2) {
  height: 333px;
}

/* --- Section « Nos services » -------------------------------------- */
/* Figma cadre cette section à 200px de retrait latéral, soit 1040px de
   contenu — plus étroit que les 1180px du reste du site — et 60px de
   retrait vertical au lieu de 80px. */
main > section:nth-of-type(3) {
  padding-top: 60px;
  padding-bottom: 60px;
}

main > section:nth-of-type(3) > .max-w-7xl {
  max-width: 1040px;
}

/* Titre : Poppins Medium 32px dans la maquette, le site sortait 36px. */
main > section:nth-of-type(3) h2 {
  font-size: 32px;
}

/* Trait sous le titre : 201px de large, 3px d'épaisseur. */
main > section:nth-of-type(3) h2 + div {
  width: 201px;
  height: 3px;
}

/* Les trois cartes : 277×300 à rayon 10px, texte centré sur une colonne
   de 214px, gouttière de 104px — 3×277 + 2×104 = 1039px, ce qui cadre
   exactement dans les 1040px de la section.
   Le site les étirait sur toute la largeur (grille fluide), sans rayon,
   texte aligné à gauche et 96px de gouttière. */
@media (min-width: 768px) {
  main > section:nth-of-type(3) div.grid {
    grid-template-columns: repeat(3, 277px);
    gap: 104px;
    justify-content: center;
  }
}

main > section:nth-of-type(3) div.grid > a {
  height: 300px;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  align-items: center;
  text-align: center;
}

main > section:nth-of-type(3) div.grid > a > h3,
main > section:nth-of-type(3) div.grid > a > p {
  width: 214px;
}

/* --- Bouton de retour en haut -------------------------------------- */
/* Figma (nœud 1601:3981) : pastille de 80px en #ffc422, flèche blanche.
   Le site la rendait en 56px sur le bleu de contact. */
main + div button[aria-label="Scroll to top"],
div.bg-white.flex.justify-center > button[aria-label="Scroll to top"] {
  width: 80px;
  height: 80px;
  background-color: #ffc422;
}

div.bg-white.flex.justify-center > button[aria-label="Scroll to top"]:hover {
  background-color: #f0b71c;
}

/* --- Mobile -------------------------------------------------------- */
/* Le retrait haut de 130px et la réserve basse de 90px reprennent une
   maquette cadrée à 1440. Sur mobile, où les trois barres d'appareil
   sont masquées, ils ne laissaient qu'un long aplat jaune vide. */

@media (max-width: 1023px) {
  main > section[class]:first-of-type > div.max-w-7xl {
    padding-top: 56px;
    padding-bottom: 48px;
  }
}