/* dimmax.css */

:root{
  /* Ajuste seulement ces valeurs si tu veux déplacer les textes */
  --pad-left: 60px;      /* distance du texte par rapport au bord de la zone blanche */
  --year-top: 120px;     /* position verticale de l'année */
  --email-top: 420px;    /* position verticale du courriel */
  --copy-top: 640px;     /* position verticale du copyright */
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  background:#fff;
  font-family: Arial, Helvetica, sans-serif;
}

/* ===== Layout 2 colonnes ===== */
.page{
  min-height:100vh;
  display:flex;
  align-items:stretch;
}

/* Colonne gauche = image pleine hauteur écran */
.left{
  flex:0 0 auto;
  height:100vh;
  background:#fff;
}

.left img{
  height:100vh;      /* prend toute la hauteur écran */
  width:auto;        /* largeur auto = pas de déformation */
  display:block;
}

/* Colonne droite = espace flexible */
.right{
  flex:1 1 auto;
  position:relative;
  min-height:100vh;
  background:#fff;
}

/* Textes ancrés près de l'image (pas centrés) */
.year{
  position:absolute;
  left: var(--pad-left);
  white-space:nowrap;
}

.year{
  top: var(--year-top);
  color:#999;
  font-size:16px;
}

.footer{
  position:absolute;
  bottom:30px;              /* distance du bas écran */
  left: var(--pad-left);
  color:#666;
  font-size:12px;
}

.footer .email{
  margin-bottom:6px;
  font-size:14px;
  color:#999;
}

.footer .email a{
  color:#999;
  text-decoration:none;
}
.footer .email a:hover{
  text-decoration:underline;
}

/* ===== Mobile: empiler ===== */
@media (max-width: 900px){
  .page{
    flex-direction:column;
  }

  .left{
    height:auto;
  }

  .left img{
    height:auto;
    width:100%;
    max-height:60vh;
    object-fit:contain;
  }

  .right{
    min-height:40vh;
  }

  :root{
    --pad-left: 20px;
    --year-top: 20px;
    --email-top: 80px;
    --copy-top: 140px;
  }
}