@charset "UTF-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* -----------------------------------
   STRUCTURE DE LA PAGE
----------------------------------- */
.ecran {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, contenu, footer */
  height: 100vh;
}

/* -----------------------------------
   HEADER
----------------------------------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
}
.header a {
  text-decoration: none;
  color: black;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
}
.header a:hover {
  color: lightgray;
}
		
.header-left, .header-center, .header-right {
  width: 33.33%; /* Chaque section occupe 1/3 de la largeur */
}
.header-left { text-align: left; }
.header-center { text-align: center; }
.header-right { text-align: right;}

/* Responsive header */
@media (max-width: 760px) {
  .header {
    padding: 0 8px;
  }
}

/* -----------------------------------
   CONTENU - HOME
----------------------------------- */
.contenu-home {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* pas de scroll */
}
.contenu-home img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  padding: 0 14px;
}

/* Responsive image */
@media (max-width: 760px) {
  .contenu-home img {
    content: url('IMG-VID/LOGO_GRAVA_02.png');
    padding: 0 8px; 
  }
}

/* -----------------------------------
   CONTENU - ABOUT
----------------------------------- */
.contenu-about {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* pas de scroll */
}
.contenu-about img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  padding: 0 14px;
}

/* Responsive image */
@media (max-width: 760px) {
  .contenu-about img {
    content: url('IMG-VID/ABOUT_02.png');
    padding: 0 8px; 
  }
}


/* -----------------------------------
   TEXTE
----------------------------------- */
.texte {
  font-family: "Cutive Mono", monospace;
  font-weight: 200;
  font-size: 12px;
  text-transform: uppercase;
  padding-left: 14px;
  padding-right: 14px; 
  padding-top: 10px;
  padding-bottom: 4px;
}
/* Versions desktop & mobile */
.texte-mobile { display: none; }
@media (max-width: 760px) {
  .texte-desktop { display: none; }
  .texte-mobile { display: block; }
  .texte {
    padding-left: 8px;
	padding-right: 8px;   
    padding-top: 8px;
  }
}

/* -----------------------------------
   FOOTER
----------------------------------- */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
}
.footer a {
  text-decoration: none;
  color: black;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
}
.footer a:hover {
  color: lightgray;
}	
.footer-left, .footer-center, .footer-right {
  width: 33.33%;
}
.footer-left { text-align: left; }
.footer-center { text-align: center; }
.footer-right { text-align: right; }

/* Responsive footer */
@media (max-width: 760px) {
  .footer {
    padding: 0 8px;
  }
}

/* -----------------------------------
   IMAGE CENTER - HOME
----------------------------------- */
.img-centre-home {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  width: 40%;
  max-width: 500px;
  max-height: 500px;
  z-index: 1000;
  pointer-events: none; /* ignore les clics */
}

/* SLIDESHOW — conteneur centré sur la viewport */
.img-centre-home-js {
  position: fixed;
  inset: 0;            
  display: flex;
  align-items: center;      /* centre verticalement */
  justify-content: center;  /* centre horizontalement */
  z-index: 1000;
  pointer-events: none;
  background: transparent;  /* mettre #000 si besoin pour cacher transparences */
}

/* L'image s'adapte en conservant ses proportions.
   max-width / max-height évitent qu'elle déborde de l'écran. */
.img-centre-home-js img {
  display: block;
  width: auto;
  height: auto;
  max-width: 76vw; 
  max-height: 76vh; 
  object-fit: contain;
}

/* Ajustement mobile (optionnel) */
@media (max-width: 760px) {
  .img-centre-home-js img {
    max-width: 68vw;
    max-height: 68vh;
  }
}
/* -----------------------------------
   IMAGE CENTER - ABOUT
----------------------------------- */
.img-centre img {
  position: fixed;
  width: 34%;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  mix-blend-mode: hard-light;
	
}
@media (max-width: 760px) {
  .img-centre img {
    width: 65%;
    top: 45.5%;
    left: 50%;
  }
}