/* === POLICES === */
@font-face {
  font-family: 'Outfit';
  src: url('./fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('./fonts/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('./fonts/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BricolageGrotesque';
  src: url('./fonts/BricolageGrotesque-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BricolageGrotesque';
  src: url('./fonts/BricolageGrotesque-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BricolageGrotesque';
  src: url('./fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* === VARIABLES === */
:root {
  --primary-color: #6a8c6a;
  --text-color: #333;
  --background-color: #fff;
  --font-family-body: 'Outfit', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-family-logo: 'BricolageGrotesque', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; line-height: 1.6; scroll-behavior: smooth; }
body {
  font-family: var(--font-family-body);
  font-weight: 400;
  color: var(--text-color);
  background-color: var(--background-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }

/* Contenant fluide avec padding responsive (évite le “collé aux bords” sur mobile) */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 28px);
}

/* === HEADER === */
.header { padding-top: env(safe-area-inset-top, 0); }
.header-container { display: flex; justify-content: space-between; align-items: center; padding-block: 16px; }
.contact-button {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600;
  border: 1px solid var(--primary-color);
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s, box-shadow .25s;
}
.contact-button:hover { background-color: var(--primary-color); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* === LOGO === */
.logotext { font-family: var(--font-family-logo); font-weight: 400; font-size: 20px; }
.logotextBold { font-family: var(--font-family-logo); font-weight: 800; font-size: 20px; }

/* === HERO (desktop : overlay sur image / mobile : titre au-dessus, image dessous) === */
.hero-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: 24px;
}

.hero-stack {
  position: relative;
  margin-inline: auto;
}

/* Image toujours entière (pas de crop) */
.hero-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay par-dessus l'image (DESKTOP) */
.hero-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;                      /* = 0vh comme souhaité */
  width: min(92%, 900px);      /* limite la largeur → 2 lignes naturelles */
  text-align: center;
  padding-inline: 16px;
  z-index: 2;
}

.hero-text-and-button h2 {
  font-family: var(--font-family-logo);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw + 1rem, 3.4rem);
  line-height: 1.12;
  margin-bottom: 22px;
  color: #222;
}

/* Bouton App Store centré */
.app-store-button { display: inline-block; margin-inline: auto; }
.app-store-button img { width: 200px; display: block; margin-inline: auto; }

/* === FEATURES === */
.features-section { background-color: #fff; padding-block: 64px; }
.features-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; }
.text-block h3 { font-family: var(--font-family-logo); line-height: normal; font-size: 2rem; font-weight: 800; margin-bottom: 20px; }
.textbig { font-family: var(--font-family-body);  font-size: 30px; line-height: 1.3; }
.textnotsobig { font-family: var(--font-family-body); font-weight: 400; font-size: 20px; line-height: 1.4; }

/* === VISUELS === */
.visual-section { background-color: #fff; padding-block: 64px; }
.visual-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.visual-text-block { max-width: 600px; margin-bottom: 30px; padding: 0 20px; }
.visual-text-block h3 { font-family: var(--font-family-logo); font-size: 2rem; font-weight: 800; line-height: normal;}
.visual-image-container { position: relative; width: 100%; overflow: hidden; }
.visual-phone, .visual-phoneAlt { position: absolute; top: 50%; height: 90%; transform: translateY(-50%); z-index: 2; }
.visual-phone { right: 100px; }
.visual-phoneAlt { left: 100px; }
.visual-drawing { width: 100%; height: auto; z-index: 1; }

/* === FOOTER (centré) === */
.mz-footer { background-color: #0d0d0d; color: #f5f5f5; padding: 2rem 1.5rem 1rem; }
.mz-footer__container { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 1200px; margin: 0 auto; }
.mz-footer__brand { text-align: center; }
.mz-footer__brand p { margin-top: 0.25rem; font-size: 0.9rem; color: #ccc; }
.mz-footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
.mz-footer__nav a { color: #f5f5f5; text-decoration: none; font-size: 0.95rem; transition: color 0.25s ease; }
.mz-footer__nav a:hover { color: #999; }
.mz-footer__bottom { text-align: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #333; font-size: 0.8rem; color: #aaa; }

/* === MOBILE === */
@media (max-width: 768px) {
  .container { padding-inline: clamp(20px, 6vw, 28px); }
  .header-container { padding-block: 14px; }

  /* SUR MOBILE : on passe en pile “titre AU-DESSUS / image EN DESSOUS” */
  .hero-stack { 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .hero-overlay {
    position: static;         /* plus d’overlay absolu */
    transform: none;
    width: min(94%, 720px);
    padding-inline: 16px;
    order: 1;                 /* titre en premier */
  }

  .hero-text-and-button h2 {
    font-size: clamp(1.8rem, 5.6vw, 2.4rem); /* un poil plus petit → 2 lignes naturelles */
    margin-bottom: 18px;
  }

  .app-store-button img { width: 180px; }

  .hero-image {
    order: 2;                 /* image en dessous */
    width: 100%;
    /* On accepte de “manger” un peu les oiseaux si l’asset est très large */
  }

  .features-section { padding-block: 40px; }
  .features-content { grid-template-columns: 1fr; gap: 30px; }

  .visual-section { padding-block: 44px; }
  .visual-phone, .visual-phoneAlt {
    position: static;
    width: 92%;
    max-width: 460px;
    height: auto;
    margin: 10px auto 0;
    transform: none;
  }
}

/* iPhone avec notch : évite le collage au bord haut */
@supports (padding: max(0px)) {
  .header { padding-top: max(env(safe-area-inset-top), 0px); }
}