/* Reset / base */
* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: #fff; /* fond principal */
  background-image: url("img/pattern.png");
  background-repeat: repeat;
  background-size: 640px auto;
  background-position: top left;
  font-family: "Bevan", serif;
}

html, body {
  height: 100%;
  min-height: 100dvh;   /* viewport dynamique mobile */
  overflow-x: hidden;   /* empêche scroll horizontal */
}

@supports not (height: 100dvh) {
  html, body {
    min-height: 100vh;
  }
}

/* Layout centré */
.wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.hero { text-align: center; }

/* Titre */
.title {
  margin: 0;
  text-align: center;
  font-size: clamp(56px, 10vw, 140px);
  line-height: 0.9;
  letter-spacing: 0.01em;
}

/* Texte + surlignage */
.highlight {
  position: relative;
  display: inline-block;
  color: #000;
  isolation: isolate;
}

/* Le “marqueur” */
.highlight::before {
  content: "";
  position: absolute;
  left: -2%;
  width: 104%;
  bottom: 0em;
  height: 0.42em;
  background: #b8efd3;
  z-index: -1;
}

/* Intro (Open Sans Bold 20/24 noir) */
.intro {
  margin: 48px 0 22px;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #000;
  text-align: center;
  margin-top: 48px;
}

.intro strong {
  font-weight: inherit;
}

/* ⬇️ NEW: social au-dessus + CTA en dessous */
.linksBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Social icons */
.social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iconLink {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: 0;
  text-decoration: none;
  padding: 6px;
  color:#000;
}

.iconLink svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
  transition: fill 0.2s ease;
}

.iconLink:hover svg {
  color: #70BC8E;
}

/* CTA (icône au-dessus du texte) */
.cta {
  display: inline-flex;
  flex-direction: column;   /* ⬅️ icône au-dessus */
  align-items: center;
  gap: 6px;

  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 14px;
  text-decoration: none;

  position: relative;
  overflow: hidden;
  color: #000;

  transition: border-color 0.25s ease;
}

.ctaIcon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
}

.ctaIcon svg {
  width: 32px;
  height: 32px;
  fill: #000; /* ⬅️ noir par défaut */
  transition: fill 0.25s ease;
}

.ctaText {
  color: #inherit;
  font-family: "Bevan", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.25s ease;
}

.ctaIcon,
.ctaText {
  position: relative;
  z-index: 1;
}

/* Hover CTA */
.cta:hover {
  border-color: rgba(173,225,193,0.9);
  transform: none;
  color: #000;
}

.cta:hover .ctaIcon svg {
  fill: #000; /* ⬅️ hover icône CTA */
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ADE1C1;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 0;
}

.cta:hover::before {
  transform: translateY(0);
}

/* Ancre */
.contactAnchor { height: 1px; }

@media (max-width: 768px) {
  body {
    background-size: 320px auto;
  }
  .title {
    font-size: 56px;
  }
  .highlight::before {
    left: 0;
    width: 100%;
  }
}