/* Toutes les cotes sont celles de la maquette Figma (frame de 718 px),
   écrites en calc(N * var(--u)). --u = 1px à 718 px de large, puis la page
   grandit proportionnellement jusqu'à --page-max. */

:root {
  --black: #000; --gold: #EFD990; --red: #7C2323; --cream: #FFFAE8; --white: #fff;
  --font-title:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Noto Serif Display", Georgia, "Times New Roman", serif; /* à confirmer dans Figma */
  --page-max: 1100px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--gold); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
figure, h1, h2, p { margin: 0; }

.page { --u: calc(100cqw / 718); container-type: inline-size; width: 100%; max-width: var(--page-max); margin-inline: auto; overflow: hidden; }

.title, .exhibition, .life, .rules, .contact { position: relative; }
.hero       { height: calc(424 * var(--u)); }
.title      { height: calc(296 * var(--u)); }
.exhibition { height: calc(730 * var(--u)); }
.life       { height: calc(810 * var(--u)); }
.rules      { height: calc(80  * var(--u)); }
.contact    { height: calc(193 * var(--u)); }
.footer__img { width: 100%; height: calc(478 * var(--u)); object-fit: cover; }

.heading, .text, .frame, .btn, .title__name, .contact__title, .contact__text { position: absolute; }

/* HERO */
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* TITRE */
.title__name {
  left: calc(39 * var(--u)); top: calc(40 * var(--u));
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(90 * var(--u)); line-height: calc(105 * var(--u));
  color: var(--gold); white-space: nowrap;
}
.title__first, .title__last { display: block; }
.title__first { letter-spacing: calc(5 * var(--u)); }
.title__last  { letter-spacing: calc(16 * var(--u)); transition: letter-spacing .6s var(--ease-out); }
.title__name:hover .title__last { letter-spacing: calc(26 * var(--u)); }

/* TITRES DE SECTION */
.heading { font-family: var(--font-heading); font-weight: 700; color: var(--red); }

/* TEXTES */
.text { font-family: var(--font-body); font-weight: 400; color: var(--gold);
        font-size: calc(14 * var(--u)); line-height: calc(19 * var(--u)); }

/* IMAGES : zoom au survol */
.frame { overflow: hidden; background: #111; }
.frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1);
             transition: transform .9s var(--ease-out), filter .6s ease; }
.frame:hover img { transform: scale(1.08); filter: saturate(1.15) brightness(1.05); }

/* BOUTON */
.btn {
  display: flex; align-items: center; justify-content: center;
  isolation: isolate; overflow: hidden;
  background: var(--red); color: var(--white);
  font-family: var(--font-heading); font-weight: 600;
  font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u));
  text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .35s ease;
}
.btn::before {                       /* voile doré qui glisse */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.btn:hover, .btn:focus-visible {
  color: var(--red);
  transform: translateY(calc(-3 * var(--u)));
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(239, 217, 144, .25);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* THE EXHIBITION */
.exhibition__title   { left: calc(61 * var(--u)); top: calc(30 * var(--u)); width: calc(250 * var(--u));
                       font-size: calc(40 * var(--u)); line-height: calc(60 * var(--u)); }
.exhibition__intro   { left: calc(61 * var(--u)); top: calc(190 * var(--u)); width: calc(255 * var(--u));
                       font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
.exhibition__hall    { left: calc(440 * var(--u)); top: calc(262 * var(--u)); width: calc(231 * var(--u)); height: calc(184 * var(--u)); }
.exhibition__snow    { left: calc(61 * var(--u));  top: calc(336 * var(--u)); width: calc(316 * var(--u)); height: calc(182 * var(--u)); }
.exhibition__btn     { left: calc(92 * var(--u));  top: calc(573 * var(--u)); width: calc(200 * var(--u)); height: calc(44 * var(--u)); }
.exhibition__details { left: calc(338 * var(--u)); top: calc(549 * var(--u)); width: calc(370 * var(--u)); }

/* THE LIFE OF A MASTER */
.life__title    { left: 0; top: calc(37 * var(--u)); width: calc(733 * var(--u)); text-align: center;
                  font-size: calc(36 * var(--u)); line-height: calc(54 * var(--u)); }
.life__intro    { left: calc(58 * var(--u));  top: calc(144 * var(--u)); width: calc(614 * var(--u)); }
.life__portrait { left: calc(428 * var(--u)); top: calc(350 * var(--u)); width: calc(213 * var(--u)); height: calc(212 * var(--u)); }
.life__teahouse { left: calc(58 * var(--u));  top: calc(404 * var(--u)); width: calc(313 * var(--u)); height: calc(212 * var(--u)); }
.life__legacy   { left: calc(197 * var(--u)); top: calc(673 * var(--u)); width: calc(520 * var(--u)); }

/* BARRES : s'étendent au survol */
.rules__bar { position: absolute; left: 0; height: calc(6 * var(--u)); transition: width .9s var(--ease-out); }
.rules__bar--red  { top: calc(25 * var(--u)); width: calc(527 * var(--u)); background: var(--red); }
.rules__bar--gold { top: calc(62 * var(--u)); width: calc(673 * var(--u)); background: var(--gold); }
.rules:hover .rules__bar { width: 100%; }

/* CONTACT */
.contact__title, .contact__text { left: 0; width: calc(741 * var(--u)); text-align: center; }
.contact__title { top: calc(35 * var(--u)); width: calc(736 * var(--u));
                  font-family: var(--font-body); font-weight: 400;
                  font-size: calc(20.5 * var(--u)); line-height: calc(28 * var(--u)); color: var(--gold); }
.contact__text  { top: calc(79 * var(--u)); padding-inline: calc(140 * var(--u));
                  font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); color: var(--cream); }
.contact__text--links { top: calc(133 * var(--u)); }
.contact__text a {
  color: inherit; text-decoration: none; padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease-out), color .3s ease;
}
.contact__text a:hover, .contact__text a:focus-visible { color: var(--gold); background-size: 100% 1px; }

/* ACCESSIBILITÉ */
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:focus-visible { outline-color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .frame:hover img, .btn:hover, .btn:focus-visible { transform: none; }
  .title__name:hover .title__last { letter-spacing: calc(16 * var(--u)); }
}

/* MOBILE : une colonne */
@media (max-width: 600px) {
  .page { --u: 1px; }
  .hero { height: 60vw; }
  .title, .exhibition, .life, .rules, .contact { height: auto; }
  .heading, .text, .frame, .btn, .title__name, .contact__title, .contact__text { position: static; width: auto; height: auto; }
  .title { padding: 32px 20px 24px; }
  .title__name { font-size: 11.5vw; line-height: 1.15; }
  .exhibition, .life { padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 24px; }
  .heading { font-size: 32px; line-height: 1.3; }
  .life__title { text-align: left; }
  .text { font-size: 15px; line-height: 1.55; }
  .exhibition__intro { font-size: 17px; line-height: 1.5; }
  .exhibition__hall { aspect-ratio: 231 / 184; }
  .exhibition__snow { aspect-ratio: 316 / 182; }
  .life__portrait   { aspect-ratio: 213 / 212; max-width: 320px; }
  .life__teahouse   { aspect-ratio: 313 / 212; }
  .btn { width: 100%; height: 52px; }
  .rules { padding-block: 8px 32px; }
  .rules__bar { position: relative; display: block; top: auto; margin-bottom: 20px; }
  .rules__bar--red { width: 73%; } .rules__bar--gold { width: 94%; }
  .contact { padding: 8px 20px 36px; text-align: center; }
  .contact__title { font-size: 22px; line-height: 1.4; margin-bottom: 16px; }
  .contact__text { padding: 0; font-size: 15px; line-height: 1.5; }
  .contact__text--links { margin-top: 16px; }
  .footer__img { height: 66vw; }
}