/**
 * styles.css - Base globale, Variables et Composants partagés
 */

/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
  /* Couleurs de fond et structure */
  --bg-main: #0a0a0a;
  --bg-secondary: #121212;
  --bg-modal: #202020;
  
  /* Typographie */
  --text-primary: #e2e2e2;
  --text-secondary: #b1b1b1;
  --text-muted: #706c69;
  --text-dark: #504d4b;
  
  /* Identité visuelle (Pink) */
  --brand-pink: #ef3d90;
  --brand-darkpink: #ff0077;
  --brand-gradient: linear-gradient(to bottom, var(--brand-pink), var(--brand-darkpink));
  
  /* Polices */
  --font-flogreen: 'FLOGREEN', sans-serif;
  --font-standard: Verdana, Tahoma, sans-serif;
}

/* ============================================================
   RESET ET BASE
   ============================================================ */
@font-face {
  font-family: "FLOGREEN";
  src: url("FLOGREEN.ttf.woff") format("woff");
  font-display: swap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  background-color: var(--bg-main);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

/* Typographie de base */
p, ul {
  color: var(--text-muted);
  font-family: var(--font-standard);
}

/* ============================================================
   LIENS ET BOUTONS 
   ============================================================ */
/* Socle commun à TOUS les liens */
a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
}

/* Couleurs par défaut */
a:link, a:visited, a:active { color: var(--text-dark); }
a:hover { color: var(--text-secondary); }


a.whitefont:link, a.whitefont:visited, a.whitefont:active { color: #878787; }
a.whitefont:hover { color: var(--text-secondary); }

/* ============================================================
   STRUCTURE COMMUNE (Header, Nav, Main)
   ============================================================ */
header {
  background-color: transparent;
  padding: clamp(10px, 1vw, 1vw);
  user-select: none;
}

#baniere {
  filter: brightness(1.58);
  width: 12.75vw;
  height: auto;
  aspect-ratio: 677/223;
}

nav {
  filter: brightness(1.5);
  background-color: var(--bg-secondary);
  padding: clamp(5px, 0.536vw, 0.536vw) clamp(30px, 6vw, 6vw) clamp(3px, 0.268vw, 0.268vw);
  box-shadow: 2px 2px 10px #000000;
  border-bottom: solid clamp(1px, 0.1vw, 0.1vw) #18181886;
  border-radius: clamp(3px, 0.2vw, 0.2vw);
  font-family: var(--font-flogreen);
  font-size: clamp(16px, 1.2vw, 1.2vw); 
  letter-spacing: clamp(1px, 0.15vw, 0.15vw); 
  word-spacing: clamp(12px, 1.7vw, 1.7vw); 
  float: right;
  margin-right: 4%;
  margin-top: 2.3%;
}

#smartnav {
  filter: brightness(1.5);
  user-select: none;
  display: none;
}
#smartnav a { display: none; }

main {
  display: flex;
  flex-grow: 1;
  margin-top: clamp(40px, 6vw, 6vw);
  margin-bottom: clamp(60px, 8vw, 8vw);
}
section { margin-right: 0; margin-bottom: 0; }

/* ============================================================
   COMPOSANTS PARTAGÉS (Animation de Scroll)
   ============================================================ */
.scroll-indicator {
  position: fixed;
  bottom: clamp(30px, 6vw, 6vw); 
  right: clamp(15px, 2.15vw, 2.15vw);
  z-index: 9;
  filter: brightness(1);
  user-select: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.scroll-arrow-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: center;
  justify-content: space-between;
  gap: 0.57em; 
  position: relative;
  height: 100%;
  width: 100%;
  font-family: var(--font-flogreen);
  font-size: clamp(16px, 1.25vw, 1.25vw);
  text-shadow: 0.05em 0.05em 0.25em #252525;
}

.scroll-arrow {
  position: relative;
  top: 1.33em;
  height: 3.33em;
  left: 0;
  width: 0.06em;
  background: #9d9d9d; 
  line-height: 0; 
  box-shadow: 0.05em 0.05em 0.25em #252525;
  will-change: transform;
  animation: elasticus 2s cubic-bezier(1, 0, 0, 0.8) infinite;
}

.scroll-text {
  writing-mode: vertical-rl;
  color: var(--text-secondary);
  letter-spacing: 0.14em;
  line-height: 0; 
}

#fleche {
  writing-mode: vertical-rl;
  color: var(--text-secondary);
  line-height: 0.35; 
  margin-top: -0.5em; 
}

@keyframes elasticus {
  0% { transform-origin: 0 0; transform: scale(1, 0); }
  50% { transform-origin: 0 0; transform: scale(1, 1); }
  50.1% { transform-origin: 0 100%; }
  100% { transform-origin: 0 100%; transform: scale(1, 0); }
}

/* ============================================================
   LE FOOTER ET RÉSEAUX SOCIAUX
   ============================================================ */
address {
  filter: brightness(1.5);
  gap: clamp(10px, 1.1vw, 1.1vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 2% 1% auto;
}

.icon-artstation {
  width: clamp(16px, 1.4vw, 1.4vw);
  height: clamp(16px, 1.4vw, 1.4vw);
  transition: transform 0.2s, filter 0.2s;
}

@media (hover: hover) {
  .icon-artstation:hover {
    transform: scale(1.1); 
    filter: brightness(1.5);
  }
}

/* ============================================================
   LE MODULE LOUPE
   ============================================================ */
.zoom-loupe {
  position: fixed;
  pointer-events: none;
  display: none;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 400px;
  height: 400px;
  border-radius: clamp(3px, 0.2vw, 0.2vw);
  border-bottom-right-radius: 100%;
  overflow: hidden;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.zoom-loupe img {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

@media only screen and (max-width: 425px) {
  .zoom-loupe { 
    width: 80vw;
    height: 80vw;
  }
}


/* ============================================================
   RESPONSIVE : 1. SOCLE PRINCIPAL (MOBILE & TABLETTE PORTRAIT)
   ============================================================ */
@media only screen and (max-width: 767px),
       only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
       only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 1.90001dppx),
       only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (max-resolution: 1.9dppx) and (pointer: fine) {
  
  html, body { overflow-x: hidden; max-width: 100%; }
  
  header {
    background-color: var(--bg-main);
    padding: max(clamp(5px, 1vh, 1vh), env(safe-area-inset-top)) 0 clamp(2px, 0.5vh, 0.5vh) 0;
    box-shadow: clamp(2px, 0.2vw, 0.2vw) clamp(2px, 0.2vw, 0.2vw) clamp(10px, 1vw, 1vw) #000000f6;
    border-bottom: solid clamp(1px, 0.1vw, 0.1vw) #18181886;
    border-radius: clamp(3px, 0.2vw, 0.2vw);
  }

  #baniere { width: clamp(125px, 23.4vw, 175px); margin-left: 2.5%; margin-top: 1.618%; margin-bottom: 0.25%; }
  nav { display: none; }

  #smartnav {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2150;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: stretch; 
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
    background-color: var(--bg-main);
    box-shadow: 0 8px 16px #000000a0;
  }

  #smartnav a {
    display: block; 
    padding: clamp(12px, 3vw, 3vw) 0;
    text-align: center; 
    font-family: var(--font-flogreen); 
    font-size: clamp(16px, 3.3vw, 21px); 
    letter-spacing: 0.1em;
    min-height: 44px;
  }

  #smartnav a:first-child { padding-top: clamp(25px, 7vw, 7vw); }
  #smartnav a:last-child { padding-bottom: clamp(10px, 2vw, 2vw); }

  .cross { filter: brightness(1.2); cursor: pointer; float: right; margin-right: 2.5%; margin-top: 3%; -webkit-tap-highlight-color: transparent; }
  .bar1, .bar2, .bar3 { width: 25px; height: 3px; background-color: #767676; margin: 5px 0; transition: .4s; box-shadow: 1px 1px 4px #050505; }
  .change .bar1 { transform: rotate(-45deg) translate(-8px, 3px); }
  .change .bar2 { opacity: 0; }
  .change .bar3 { transform: rotate(45deg) translate(-8px, -3px); }

  footer { width: 100%; justify-content: center; margin: 0; padding: clamp(5px, 1vh, 1vh) 0 max(clamp(2px, 0.5vh, 0.5vh), env(safe-area-inset-bottom)) 0; }
  
  address { gap: clamp(20px, 3.35vw, 32.1px); display: flex; justify-content: center; margin-right: 0; margin-bottom: 1%; }
  
  footer address a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
  }

  .icon-artstation {
    width:  clamp(17px, 2.77vw, 20.64px);
    height:  clamp(17px, 2.77vw, 20.64px);
  }
   
  .scroll-indicator { right: 0; } 
   
}

/* ============================================================
   RESPONSIVE : 3. SOUS-EXCEPTION (MOBILE PAYSAGE - Hauteur réduite)
   ============================================================ */
@media only screen and (max-width: 767px) and (max-height: 500px),
       only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (max-height: 500px),
       only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 1.90001dppx) and (max-height: 500px),
       only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (max-resolution: 1.9dppx) and (pointer: fine) and (max-height: 500px) {
  #baniere { width: clamp(125px, 15.8vw, 175px); }
  header { padding: clamp(2px, 0.5vh, 0.5vh) 0; }
  #smartnav.open { overflow-y: auto; }
  #smartnav a {
    padding: 3vw 0; 
    font-size: clamp(15px, 2.4vw, 17px);  
  }

  #fleche { line-height: 0.5;}
  .zoom-loupe {
  width: 200px;
  height: 200px;
  }
}

/* ============================================================
   RESPONSIVE : 4. SOUS-EXCEPTION EXTRÊME (< 480px)
   ============================================================ */
@media only screen and (max-width: 480px) {
  .scroll-indicator { display: none; }
}