/* =========================================================
   LE MOULIN PRODUCTIONS — style.css
   ========================================================= */

:root{
  --font-main: 'Futura', 'Jost', 'Century Gothic', 'Segoe UI', sans-serif;

  --color-white: #ffffff;
  --color-dim-1: rgba(255,255,255,0.75);
  --color-dim-2: rgba(255,255,255,0.45);
  --color-dim-3: rgba(255,255,255,0.28);

  --header-pad: clamp(16px, 4vw, 48px);
}

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

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

body{
  font-family: var(--font-main);
  background: #030604;
  color: var(--color-white);
  overflow-x: hidden;
  min-height: 100dvh;
}

img{
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

button{
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- Fond plein écran ---------- */

.bg{
  position: fixed;
  inset: 0;
  background-image: url('../assets/img/home-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* ---------- Sélecteur de langue ---------- */

/* ---------- Sélecteur de langue (utilisé seul, en en-tête direct de la home) ---------- */

header.lang-switch{
  position: fixed;
  top: var(--header-pad);
  right: var(--header-pad);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(6px, 1.2vw, 12px);
}

/* Sur les autres pages, .lang-switch est imbriqué dans .top-bar qui gère déjà
   le position:fixed : ici on reste en flux normal pour ne pas casser l'alignement */
.lang-switch{
  display: flex;
  gap: clamp(6px, 1.2vw, 12px);
  z-index: 10;
}

.lang-item{
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: 0.12em;
  color: var(--color-dim-2);
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 4px 2px;
}

.lang-item:hover,
.lang-item:focus-visible{
  color: var(--color-white);
}

.lang-item.is-active{
  color: var(--color-white);
  font-weight: 600;
}

/* ---------- Zone centrale ---------- */

.hero{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 48px;
  gap: clamp(48px, 12vh, 140px);
}

.logo{
  width: clamp(150px, 22vw, 300px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.35));
}

/* ---------- Menu ---------- */

.menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 18px);
}

.menu-item{
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  transform: scale(1);
  transform-origin: center;
  padding: 6px 10px;
  will-change: transform;

  /* Etat de repos : les 4 mots identiques, bien lisibles à l'œil nu */
  font-size: clamp(15px, 2vw, 22px);
  color: var(--color-dim-1);
  opacity: 0.9;
}

/* --- Ordinateur (souris) : effet au survol classique --- */
@media (hover: hover) and (pointer: fine){
  .menu-item:hover{
    color: var(--color-white) !important;
    opacity: 1 !important;
    transform: scale(1.55);
  }
  .menu:hover .menu-item:not(:hover){
    opacity: 0.5;
  }
}

/* --- Clavier (accessibilité) et Smartphone (tap) : géré par une classe,
   jamais par :hover, pour éviter l'effet "collé" de Safari iOS --- */
.menu-item:focus-visible,
.menu-item.is-touched{
  color: var(--color-white) !important;
  opacity: 1 !important;
  transform: scale(1.55);
}

.menu.is-active-touch .menu-item:not(.is-touched){
  opacity: 0.5;
}

/* ---------- Petits écrans ---------- */

@media (max-width: 640px){
  .hero{
    padding: 84px 20px 40px;
    gap: 56px;
  }
  .lang-switch{
    flex-direction: row;
    gap: 14px;
  }
  .menu ul{
    gap: 14px;
  }
}

@media (max-width: 380px){
  .logo{
    width: 130px;
  }
}

/* ---------- Grands écrans ---------- */

@media (min-width: 1600px){
  .hero{
    gap: 160px;
  }
}

.home-copyright{
  position: fixed;
  bottom: var(--header-pad);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
  z-index: 5;
}

/* ---------- Réduction des animations si demandé ---------- */

@media (prefers-reduced-motion: reduce){
  .menu-item, .lang-item{
    transition: none;
  }
}