/* ============================================================
   PAGE D'ACCUEIL — ARCHITECTURE À DEUX DESIGNS
   La BASE (sans media query) EST le design VERTICAL.
   Un SEUL @media, la chaîne HORIZONTAL, bascule vers le design PC + 4K.
   ============================================================ */

/* ============================================================
   1. VARIABLES ET BASE
   ============================================================ */


body { 
  user-select: none; 
  position: relative; 
}

header {
  min-height: calc(clamp(36.5px, calc(-5.2px + 5.21vh), 66.0px) + 1.6svh + 5px);
}

main {
  margin: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.cross { 
  cursor: pointer; 
  -webkit-tap-highlight-color: transparent; 
}

#backgroundmask {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-image: url('../ui/elricback.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 62% top;
  filter: brightness(1.5);
  clip-path: polygon(
    0 0, 
    100% 0%, 
    100% 100%, 
    
    
    clamp(18%, calc(55.85px + 12.55vw), 30%) /* Axe X : descend de 30% (mobile) à 18% (tablette) */
    100%, 

    0   
    clamp(61%, calc(368.52px + 0.61vw), 63%) /* Axe Y : descend de 63% (mobile) à 61% (tablette) */
  );
}

#gridlogo,
#navindex,
nav { 
  display: none; 
}

/* ============================================================
   2. COMPOSANTS SOCLE : DESIGN PORTRAIT (Mobile + Tablette)
   ============================================================ */
#boutonrectangle {
  position: relative;
  display: block;
  width: clamp(233px, calc(148.45px + 26.42vw), 419px);
  margin: clamp(17px, calc(15.64px + 0.43vw), 20px) 0 0 0;
  align-self: flex-start;
  overflow: visible;
  text-decoration: none;
}

#boutonrectangle img {
  opacity: 0.9;
  border-top-right-radius: 0.2vw;
  border-bottom-right-radius: 0.2vw;
  position: absolute; 
  left: 0; 
  top: 50%; 
  transform: translateY(-50%);
  width: 100%; 
  height: auto;
  object-fit: contain; 
  z-index: 0;
  filter: drop-shadow(0.2vw 0.2vw 0.3vw #00000070);
}

#boutonrectangle .text {
  position: relative; 
  z-index: 1; 
  width: fit-content;
  display: flex; 
  flex-direction: column; 
  align-items: center;
  gap: clamp(2.0px, calc(-0.27px + 0.71vw), 7.0px);
  margin-left: clamp(10.0px, calc(2.73px + 2.27vw), 26.0px);
  font-size: clamp(15.0px, calc(10px + 1.56vw), 26.0px); 
  line-height: 1.8; /* Control GAP bis */
  font-family: "FLOGREEN", sans-serif; 
  color: #dddddd;
}

#boutonrectangle .text span { 
  display: block; 
  transform: scaleY(1.3); /* Control FONT bis */
}

#boutonrectangle:hover .text span { 
  transform: rotate(450deg); 
  transition: 0.3s ease;  
}

#main-buttons {
  display: grid;
  grid-template-columns: clamp(178px, calc(113.45px + 20.17vw), 320px) 0;
  grid-template-rows: clamp(178px, calc(113.45px + 20.17vw), 320px) clamp(178px, calc(113.45px + 20.17vw), 320px);
  justify-items: center; 
  align-items: center;
  transform: rotate(-45deg);
  filter: brightness(1.7);
  align-self: flex-start;
  margin: clamp(12.0px, calc(-0.73px + 3.98vw), 40.0px) 0 0 5%; 
}

.diamond-button {
  display: flex;
  width: 40%;
  height: 40%;
  transform: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #55555566;
  border: none;
  border-radius: .2vw;
  border-bottom-left-radius: 25px;
  transition: background-color 0.7s ease;
}

.diamond-button:nth-child(1) { grid-column: 1; grid-row: 1; transform: translate(40%, 0%); }
.diamond-button:nth-child(2) { display: none; }
.diamond-button:nth-child(3) { grid-column: 1; grid-row: 2; transform: translate(40%, 10%); }

.diamond-button a {
  position: relative;
  font-family: "FLOGREEN";
  color: #dddddd;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(45deg);
  writing-mode: vertical-lr;
  letter-spacing: clamp(8.0px, calc(-0.18px + 2.56vw), 26.0px);
  font-size: clamp(15.0px, calc(10px + 1.56vw), 26.0px);
  line-height: 1.5; /* Control GAP bis */
}

.diamond-button a.whitefont { 
  color: #f0f0f0; 
}

.diamond-button a span {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: rotate(-90deg) scaleX(1.3); /* Control FONT bis */
}

.diamond-button a img {
  position: absolute;
  top: 0;
  left: 0;
  filter: drop-shadow(0.2vw 0.2vw 0.3vw #00000070);
}

@media (hover: hover) {
  .diamond-button:hover { 
    background-color: #555; 
    box-shadow: 2px 2px 10px #252525; 
  }
  .diamond-button a:hover span { 
    transform: rotate(360deg) scaleX(1.3); 
    transition: 0.3s ease; 
  }
}

footer {
  position: static;
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 clamp(20px, calc(6.36px + 4.26vw), 50px) clamp(0.6vw, calc(5.59px + 0.05vw), 1.8vw);
  padding: 0;
  z-index: 5;
}

address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(30px, calc(14.09px + 4.97vw), 65px);
  margin: 0;
}

footer address a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-artstation { 
  width: clamp(18px, calc(11.64px + 1.99vw), 32px); 
  height: clamp(18px, calc(11.64px + 1.99vw), 32px); 
}

/* ============================================================
   3. RESPONSIVE : EXCEPTION MOBILE PAYSAGE
   ============================================================ */
@media only screen and (max-width: 950px) and (orientation: landscape) {
  

  #backgroundmask {
    clip-path: none;
    min-height: 107%; 
  }

  
  #boutonrectangle {
    width: 45vw;    
  }
  
  #boutonrectangle .text {
    font-size: 2.5vw;
  }
  
  #main-buttons {
    grid-template-columns: 48vw 0;
    grid-template-rows: 25vw 25vw;
    margin: 0;
    transform: rotate(-45deg) translate(160px, 0px);
  }


  .diamond-button:nth-child(1) {
    transform: translate(-50%, 55%);
  }

  .diamond-button:nth-child(3) {
     transform: translate(-50%, 50%);
  }

  .diamond-button {
    width: 55%; 
    height: 55%;
  }
  
  .diamond-button a {
    font-size: 2.5vw; 
    letter-spacing: 4.1vw;
  }
  
  footer {
   position: absolute;
    align-self: auto;
    width: auto;
    right: 10px;
    bottom: -2.5vw;  /* Compenser min-height:107%*/ 
    margin: 0;
  }

  address {
    gap: 3.5vw;
  }
  
  
  .icon-artstation { 
  width: 2.75vw; 
  height: 2.75vw;
  }
  
}

/* ============================================================
   4. RESPONSIVE : DESIGN HORIZONTAL (PC, Souris & Tablette Paysage)
   ============================================================ */
@media only screen and (min-width: 951px) and (pointer: fine),      
       only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (max-resolution: 1.9dppx) and (pointer: coarse),
       only screen and (min-width: 1025px) {
  
  header { 
    display: block; 
    min-height: 0; 
  }
  
  .cross, #smartnav, #boutonrectangle { 
    display: none; 
  }

  main {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    gap: 0;
    padding: 0 4%;
  }

  #backgroundmask {
    position: absolute;
    inset: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-size: 62%;
    background-position: 100% 58%;
    filter: brightness(1.5);
    clip-path: polygon(49% 0%, 100% 0%, 100% 100%, 47% 100%, 64% 67%);
  }

  #main-buttons {
    display: grid;
    grid-template-columns: 13.54vw 16.14vw; /*Dépend aussi de .diamond button a {font-size:}*/
    grid-template-rows: 13.54vw 13.54vw; /*Dépend aussi de .diamond button a {font-size:}*/
    justify-items: center;
    align-items: center;
    transform: rotate(-45deg) scale(1.12);
    align-self: center;
    margin: 0 0 0 clamp(20px, 2vw, 90px);
  }
  
  .diamond-button {
    width: 52%;
    height: 52%;
    transform: none;
    background-color: transparent;
    margin: 0;
    border-radius: .2vw;
    border-bottom-left-radius: 30px;
  }
  
  .diamond-button:nth-child(1) { order: 0; grid-column: 1; grid-row: 1; width: 48%; height: 48%; transform: translate(30%, -8%); margin: 0; }
  .diamond-button:nth-child(2) { display: flex; order: 0; grid-column: 2; grid-row: 2; width: 71%; height: 85%; transform: translate(0%, 0%); margin: 0; }
  .diamond-button:nth-child(3) { order: 0; grid-column: 1; grid-row: 2; width: 48%; height: 48%; transform: translate(34%, 14%); margin: 0; }
  
  .diamond-button a {
    letter-spacing: 0.61vw;
    line-height: 1.5vw;
    font-size: 1.05vw; 
  }

  #gridlogo { 
    position: absolute; 
    left: 50%; 
    top: 76.5%; 
    transform: translateX(-50%); 
    display: block; 
  }
  
  #baniere {    
    width: 13.5vw; 
  }
  
  #navindex { 
    position: absolute; 
    top: 9%; 
    right: 5%; 
    display: block; 
  }
  
  nav { 
    display: block; 
    float: none; 
    margin: 0; 
    background-color: #0c0c0c; 
    white-space: nowrap; 
  }

  footer {
    position: absolute;
    align-self: auto;
    width: auto;
    bottom: 1.5vw;
    right: 1vw;
    margin: 0;
  }

  address { 
    gap: 1.75vw;
  }
  
  .icon-artstation { 
    width: 1.4vw; 
    height: 1.4vw; 
  }

}

/* ============================================================
   5. RESPONSIVE : DESIGN 4K ET ÉCRANS GÉANTS (> 1920px)
   ============================================================ */
@media only screen and (min-width: 1921px) {
    
  #baniere { 
    width: 13.8vw; 
  }

}