/* ------------------------------------------------------------------
   Château Gazin — One Page (teaser)
   Studio DADA
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Gazin";
  src: url("../Fonts/Gazin-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gazin";
  src: url("../Fonts/Gazin-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pomerol";
  src: url("../Fonts/Pomerol-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pomerol";
  src: url("../Fonts/Pomerol-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --flat:       #1d0201;  /* aplat de fond */
  --red-base:   #9F332B;  /* rouge de base Gazin — sceau */
  --logo-color: var(--red-base);
  --ui-color:   #f0e4dc;  /* interface sur la photo (FR/EN, flèche) */
  --panel-text: #e8dcd4;  /* texte du panneau contact */

  /* Minutage de la séquence : 1. le sceau apparaît sur l'aplat rouge
     foncé — 2. il remonte en tête de page — 3. la photo se dévoile. */
  --t-logo-in:      0.6s;
  --t-logo-move:    2s;
  --t-bg-in:        3.3s;
  --t-ui-in:        4.5s;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Débord du panneau contact sur l'image, en haut */
  --panel-overlap: 50px;
}

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

html {
  scroll-behavior: smooth;
  /* Le snap est piloté en JS (voir main.js) : le CSS scroll-snap-type
     reste peu fiable sur Safari iOS (blocages à mi-parcours). */
}

body {
  margin: 0;
  font-family: "Gazin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  background: var(--flat);
  color: var(--red-base);
  -webkit-font-smoothing: antialiased;
}

/* --- Couches de fond ------------------------------------------------
   .flat et .bg sont fixes : le panneau contact remonte par-dessus
   au scroll, l'image reste en place.
   -------------------------------------------------------------------- */

.flat {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--flat);
}

/* Cadre exactement à la taille de l'écran : la photo est vue en entier,
   sans surdimensionnement (plus de réserve de hauteur pour le parallax). */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Aucun voile, aucun filtre : la photo garde sa teinte d'origine.
   Léger mouvement vertical continu, indépendant du scroll. */
.bg__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.05) translateY(0);
  transition: opacity 2.4s var(--ease);
  animation: slow-pan 26s ease-in-out var(--t-bg-in) infinite alternate;
}

/* Image active du diaporama (voir main.js) */
.bg__img.is-active {
  opacity: 1;
}

/* --- Scène (premier écran) ------------------------------------------ */

.stage {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
}

/* Contenu réservé aux moteurs et aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Séquence : le sceau — reste fixe à l'écran, taille inchangée ;
   le panneau rouge remonte et défile sous lui (z-index). */
.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: clamp(100px, 16vw, 185px);
  transform: translate(-50%, -50%);
  /* fill "backwards" (et non "forwards") : l'état de repos vient de
     cette règle, donc .is-scrolled peut reprendre la main au scroll */
  opacity: 1;
  animation:
    appear 1s var(--ease) var(--t-logo-in) backwards,
    rise 1.1s var(--ease) var(--t-logo-move) forwards;
  transition: opacity 0.6s var(--ease);
}

/* La disparaît avec la flèche, à mi-page (voir main.js) */
body.is-scrolled .logo {
  opacity: 0;
  pointer-events: none;
}

.logo svg,
.panel__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.logo svg path,
.logo svg polygon,
.logo svg rect,
.logo svg circle,
.panel__logo svg path,
.panel__logo svg polygon,
.panel__logo svg rect,
.panel__logo svg circle {
  fill: var(--logo-color);
}

/* Petit sceau, réapparaît au-dessus de l'adresse dans le panneau */
.panel__logo {
  width: clamp(92px, 13vw, 140px);
  margin: 0 auto clamp(1.5rem, 4vh, 2.25rem);
}

/* --- Flèche de scroll ------------------------------------------------ */

/* Centrée dans la bande rouge de 50 px qui déborde sur l'image.
   translateX ici, translateY (nudge) sur le SVG : pas de conflit. */
.scroll-cue {
  position: absolute;
  top: calc((var(--panel-overlap) - 20px) / 2);
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  color: var(--red-base);
  opacity: 1;
  animation: appear 1.4s var(--ease) var(--t-ui-in) backwards;
  transition: opacity 0.6s var(--ease);
}

.scroll-cue__arrow {
  display: block;
  height: 20px;
  width: auto;
  animation: nudge 2.6s var(--ease) infinite;
}

.scroll-cue:hover .scroll-cue__arrow,
.scroll-cue:focus-visible .scroll-cue__arrow {
  animation-duration: 1.4s;
}

/* La flèche s'efface à mi-page, avec le sceau (voir main.js) */
body.is-scrolled .scroll-cue {
  opacity: 0;
  pointer-events: none;
}

/* --- Panneau contact -------------------------------------------------
   Remonte par-dessus l'image fixe.
   -------------------------------------------------------------------- */

.panel {
  position: relative;
  z-index: 2;
  /* Remonte de 50 px : la bande rouge déborde sur l'image */
  margin-top: calc(var(--panel-overlap) * -1);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(clamp(4rem, 12vh, 9rem) + var(--panel-overlap)) 1.5rem clamp(4rem, 12vh, 9rem);
  background: var(--flat);
  box-shadow: 0 -40px 80px rgba(29, 2, 1, 0.55);
}

.panel__inner {
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

/* --- Texte d'introduction ---------------------------------------------- */

.panel__intro {
  margin: 0 0 2.4em;
  font-family: "Pomerol", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--panel-text);
  text-align: justify;
  text-justify: inter-word;
  /* Safari / iOS exigent le préfixe : sans césures, le justifié creuse
     de gros blancs sur une colonne étroite et paraît mal réglé. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* --- Adresse (Pomerol / Gazin) ----------------------------------------- */

.address {
  font-family: "Pomerol", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--panel-text);
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.address__name {
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.95em;
  margin-bottom: 0.15em;
  border-top: 1px solid var(--red-base);
  padding-top: 1.4em;
}

.address__sep {
  margin: 0 0.5em;
  opacity: 0.5;
}

/* Retours à la ligne réservés aux petits écrans */
.address__break,
.address__break-social {
  display: none;
}

.address__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin-top: 2.2em;
  font-size: 0.88em;
  line-height: 1.6;
  opacity: 0.8;
}

.address__insta {
  display: block;
  width: 22px;
  color: inherit;
  transition: color 0.4s var(--ease);
}

.address__insta svg {
  display: block;
  width: 100%;
  height: auto;
}

.address__insta:hover,
.address__insta:focus-visible {
  color: var(--ui-color);
}

/* --- Apparition en cascade du panneau ---------------------------------- */

.panel__logo,
.panel__intro,
.address > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.panel.is-revealed .panel__logo,
.panel.is-revealed .panel__intro,
.panel.is-revealed .address > * {
  opacity: 1;
  transform: translateY(0);
}

/* Sortie rapide et simultanée avant un changement de langue :
   durée courte, aucun décalage — la cascade est rejouée juste après. */
.panel.is-resetting .panel__logo,
.panel.is-resetting .panel__intro,
.panel.is-resetting .address > * {
  transition-duration: 0.22s;
  transition-delay: 0s;
}

.panel.is-revealed .panel__logo        { transition-delay: 0s; }
.panel.is-revealed .panel__intro       { transition-delay: 0.14s; }
.panel.is-revealed .address__name      { transition-delay: 0.26s; }
.panel.is-revealed .address__line      { transition-delay: 0.38s; }
.panel.is-revealed .address__contact   { transition-delay: 0.5s; }
.panel.is-revealed .address__social    { transition-delay: 0.62s; }

.address__contact {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.15em;
}

.address__tel,
.address__mail {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 220, 212, 0.25);
  padding-bottom: 0.15em;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.address__tel:hover,
.address__tel:focus-visible,
.address__mail:hover,
.address__mail:focus-visible {
  color: var(--ui-color);
  border-bottom-color: var(--red-base);
}

/* --- Bascule de langue ------------------------------------------------ */

.lang {
  position: fixed;
  z-index: 4;
  top: clamp(1.25rem, 3.5vh, 2.5rem);
  right: clamp(1.25rem, 3.5vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Pomerol", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  /* Sur le ciel clair : le rouge. Sur le panneau sombre : la crème. */
  color: var(--red-base);
  opacity: 0;
  animation: fade-in 1.6s var(--ease) var(--t-ui-in) forwards;
  transition: color 0.5s var(--ease);
}

body.is-scrolled .lang { color: var(--ui-color); }

.lang__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.4em 0.2em;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}

.lang__btn:hover,
.lang__btn:focus-visible { opacity: 1; }
.lang__btn.is-active { opacity: 1; }

.lang__sep { opacity: 0.35; }

/* --- Animations --------------------------------------------------------- */

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes appear {
  from { opacity: 0; }
}

/* Le sceau remonte du centre vers le haut de la page */
@keyframes rise {
  to { top: clamp(180px, 22vh, 260px); }
}

/* Va-et-vient vertical très lent — la marge vient du scale(1.05) */
@keyframes slow-pan {
  from { transform: scale(1.05) translateY(1.2%); }
  to   { transform: scale(1.05) translateY(-1.2%); }
}

/* Descente douce, temps mort, puis reprise */
@keyframes nudge {
  0%, 100% { transform: translateY(0);   opacity: 0.65; }
  18%      { transform: translateY(7px); opacity: 1; }
  40%      { transform: translateY(0);   opacity: 0.65; }
}

/* --- Accessibilité ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .logo, .lang, .scroll-cue {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  /* Pas de va-et-vient : on coupe slow-pan (sinon 0.01ms + infinite
     le ferait clignoter) et on garde seulement le fondu d'entrée. */
  .bg__img {
    animation: fade-in 0.01ms linear forwards;
    transform: none;
  }
  .scroll-cue__arrow { animation: none; }

  .panel__logo,
  .panel__intro,
  .address > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --panel-overlap: 40px;
  }

  .logo {
    width: min(32vw, 135px);
  }

  .panel {
    padding: calc(3.5rem + var(--panel-overlap)) 1.5rem 3.5rem;
  }

  .panel__inner {
    max-width: 26rem;
  }

  .panel__logo {
    width: 104px;
  }

  .panel__intro {
    margin-bottom: 2em;
  }

  /* Retour à la ligne après « Gazin » dans la phrase Instagram */
  .address__break-social {
    display: block;
  }

  /* Téléphone et e-mail l'un sous l'autre plutôt qu'une ligne qui déborde */
  .address__contact {
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.5em;
  }

  .address__contact .address__sep {
    display: none;
  }

  .lang {
    top: 1.1rem;
    right: 1.1rem;
  }
}

/* Petits téléphones */
@media (max-width: 400px) {
  .logo {
    width: 38vw;
  }

  /* L'adresse tient mieux sur deux lignes que sur une seule à rallonge */
  .address__line .address__sep {
    display: none;
  }

  .address__break {
    display: block;
  }
}