/* ------------------------------------------------------------------ *
 * Page de maintenance — Avays
 * Layout fidèle à la maquette Figma (Desktop 1440×837 / Mobile 375×837)
 * Approche mobile-first, breakpoint desktop à 768px.
 * ------------------------------------------------------------------ */

/* --- Police du titre : General Sans Variable (auto-hébergée) -------- */
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/general-sans-variable.woff2") format("woff2");
  font-weight: 200 700; /* fichier variable : plage de graisses */
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f4ff;           /* Fond fallback (derrière l'image) */
  --title: #000043;        /* Couleur du titre */
  --title-weight: 500;     /* Graisse du titre : General Sans Medium (200 → 700) */

  /* Positions issues de la maquette (en % de la largeur / hauteur du cadre) */
  --content-left-mobile: 8%;      /* 30 / 375  */
  --content-top-mobile: 13.38dvh; /* 112 / 837 */
  --content-left-desktop: 10.417%;/* 150 / 1440 */
  --content-top-desktop: 34.65dvh;/* 290 / 837  */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  color: var(--title);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Cadre plein écran avec image de fond --------------------------- */
.page {
  position: relative;
  min-height: 100vh;      /* fallback navigateurs sans dvh */
  min-height: 100dvh;
  background-color: var(--bg);
  /* WebP en priorité, JPG en repli (navigateurs sans image-set/webp) */
  background-image: url("assets/background-mobile.jpg");
  background-image: -webkit-image-set(
    url("assets/background-mobile.webp") type("image/webp"),
    url("assets/background-mobile.jpg") type("image/jpeg")
  );
  background-image: image-set(
    url("assets/background-mobile.webp") type("image/webp"),
    url("assets/background-mobile.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

/* --- Bloc contenu (titre + logo), ancré comme sur la maquette ------- */
.content {
  position: absolute;
  left: var(--content-left-mobile);
  top: var(--content-top-mobile);
  width: 84%;             /* 315 / 375 */
  max-width: 315px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.title {
  margin: 0;
  font-weight: var(--title-weight);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--title);
  /* ~37px à 375px de large, borné pour rester fidèle */
  font-size: clamp(1.75rem, 9.87vw, 2.3125rem);
}

.logo {
  display: block;
  height: auto;
  width: 112px;           /* logo mobile : 112 px */
  margin-top: 19px;       /* écart titre → logo (maquette) */
}

/* --- Entrée douce (désactivée si l'utilisateur préfère moins d'animation) */
@media (prefers-reduced-motion: no-preference) {
  .content {
    animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ------------------------------------------------------------------ *
 * DESKTOP — à partir de 768px : cadre 1440×837 de la maquette
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .page {
    background-image: url("assets/background-desktop.jpg");
    background-image: -webkit-image-set(
      url("assets/background-desktop.webp") type("image/webp"),
      url("assets/background-desktop.jpg") type("image/jpeg")
    );
    background-image: image-set(
      url("assets/background-desktop.webp") type("image/webp"),
      url("assets/background-desktop.jpg") type("image/jpeg")
    );
  }

  .content {
    left: var(--content-left-desktop);
    top: var(--content-top-desktop);
    width: 41.94%;        /* 604 / 1440 */
    max-width: 604px;
  }

  .title {
    /* ~72px à 1440px de large, borné à 72px au-delà */
    font-size: clamp(2.3125rem, 5vw, 4.5rem);
  }

  .logo {
    width: 215px;         /* logo desktop : 215 px */
    margin-top: 37px;     /* écart titre → logo (maquette) */
  }
}

/* Grands écrans : on évite que l'image ne « saute » de netteté */
@media (min-width: 1920px) {
  .content {
    left: 200px; /* on fige la marge gauche au-delà du cadre de design */
  }
}