/* Pixim Attente — page d'attente du Clos de l'Abbaye
   Police EB Garamond (SIL Open Font License, voir fonts/OFL.txt) hébergée avec la page :
   aucune requête vers Google Fonts, donc aucune adresse IP de visiteur transmise. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-500-italic.woff2") format("woff2");
}

:root {
  --ink: #0b0a09;
  --paper: #f4efe6;
  --hair: rgba(244, 239, 230, .5);
  --gutter: clamp(16px, 3.2vw, 44px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --logo-w: clamp(190px, 25vw, 370px);   /* largeur du logo seul (sans la marge d'ombre) */
  /* lisibilité du blanc sur une vidéo presque sans voile */
  --text-shadow: 0 0 2px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.45), 0 2px 16px rgba(0,0,0,.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { overscroll-behavior: none; }
body {
  background: var(--ink) url("../../../images/videos/clos-abbaye-bourgueil-vue-aerienne.webp") center / cover no-repeat;
  color: var(--paper);
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fond : vidéo à 95 % de luminosité + voile noir 5 % ---------- */
.bg {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.95);
}
.veil {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, .05);
}

/* ---------- Ouverture : écran noir percé de la silhouette du château ---------- */
.door {
  display: none;
  position: fixed; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.door path, .door rect { fill: var(--ink); }
.js-door .door { display: block; }
.js-door.is-open .door { display: none; }

/* ---------- Logo + phrase, centrés ---------- */
main { position: relative; z-index: 3; }
.hero {
  position: fixed; inset: 0;
  z-index: 1;   /* au-dessus du triangle des contacts : logo et phrase jamais assombris */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--gutter);
  pointer-events: none;
}
.brand { line-height: 0; }
.brand__door { display: block; }
/* L'ombre portée est intégrée au PNG (marge de 72 px autour du logo de 900 × 732) :
   un filter CSS sur le logo animé peut le rendre en rectangle blanc dans Safari. */
.brand img {
  display: block;
  width: calc(var(--logo-w) * 1044 / 900);
  height: auto;
  opacity: 0;
  transform: translateY(10px);
  animation: logo-in 2.2s .5s var(--ease) forwards;
}
@keyframes logo-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.tagline {
  /* remonte sous le logo : compense la marge d'ombre du PNG */
  margin-top: calc(var(--logo-w) * -36 / 900);
  max-width: 30em;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.3;
  letter-spacing: .015em;
  text-align: center;
  /* italique fin sur vidéo claire : ombre plus dense que le reste du texte */
  text-shadow: 0 0 2px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.6), 0 2px 20px rgba(0,0,0,.6);
  opacity: 0;
  animation: fade-in 1.6s 1.2s var(--ease) forwards;
}

/* Pendant l'ouverture, le logo est piloté par le script ; le reste attend l'ouverture */
.js-door .brand img { animation: none; opacity: 1; transform: none; }
.js-door .brand__door { opacity: 0; }
.js-door.is-open .brand__door {
  opacity: 1;
  transition: opacity 1.3s var(--ease) .1s, transform 1.6s var(--ease) .1s;
}
.js-door:not(.is-open) .tagline,
.js-door:not(.is-open) .contact,
.js-door:not(.is-open) .toggle { animation: none; opacity: 0; }
/* invisibles = ni cliquables ni atteignables au clavier pendant l'ouverture */
.js-door:not(.is-open) .contact,
.js-door:not(.is-open) .toggle { visibility: hidden; pointer-events: none; }
/* ouverture passée au clavier : tout apparaît sans attendre (le focus doit être visible) */
.is-skipped .tagline, .is-skipped .contact, .is-skipped .toggle { animation-duration: .4s; animation-delay: 0s; }
.js-door .tagline { animation-delay: .6s; }
.js-door .contact { animation-delay: 1s; }
.js-door .toggle  { animation-delay: 1.2s; }

/* ---------- Contacts ---------- */
.contact {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  font-style: normal;
  text-align: right;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.45;
  letter-spacing: .01em;
  text-shadow: var(--text-shadow);
  opacity: 0;
  animation: fade-in 1.6s 1.4s var(--ease) forwards;
  --edge-r: max(var(--gutter), env(safe-area-inset-right));
  --edge-b: max(var(--gutter), env(safe-area-inset-bottom));
  --tri: 2.3;  /* taille du triangle en multiple du bloc contacts + marge : couvre tout le texte */
}
/* Triangle noir 70 % ancré dans l'angle bas-droit du navigateur, sous le texte */
.contact::before {
  content: "";
  position: absolute; z-index: -1;
  right: calc(-1 * var(--edge-r));
  bottom: calc(-1 * var(--edge-b));
  width:  calc((100% + var(--edge-r)) * var(--tri));
  height: calc((100% + var(--edge-b)) * var(--tri));
  background: rgba(0, 0, 0, .7);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.contact__label {
  display: block;
  font-size: .74em;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: .55em;
}
.contact__rule {
  display: block;
  width: 32px; height: 1px;
  margin: 0 0 .9em auto;
  background: var(--hair);
  box-shadow: 0 0 6px rgba(0,0,0,.45);
}
.contact a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.contact a:hover, .contact a:focus-visible { background-size: 100% 1px; background-position: 0 100%; }
/* focus visible sur fond clair comme sombre : anneau crème + halo sombre */
.contact a:focus-visible, .toggle:focus-visible {
  outline: 2px solid var(--paper); outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(0,0,0,.25), 0 0 0 8px rgba(0,0,0,.45);
  border-radius: 1px;
}
.contact__tel { font-variant-numeric: lining-nums; letter-spacing: .04em; }
.contact p + p { margin-top: .5em; }

/* ---------- Pause (WCAG 2.2.2) ---------- */
.toggle {
  position: fixed; z-index: 3;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .6em;
  background: none; border: 0; cursor: pointer;
  color: var(--paper);
  text-shadow: var(--text-shadow);
  font: inherit; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 0;
  opacity: 0;
  animation: fade-in 1.6s 1.6s var(--ease) forwards;
}
.toggle:hover .toggle__text { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.toggle__icon { width: 9px; height: 10px; display: inline-block; position: relative; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.toggle__icon::before, .toggle__icon::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: currentColor;
}
.toggle__icon::before { left: 1px; }
.toggle__icon::after { right: 1px; }
.toggle[data-paused="true"] .toggle__icon::before {
  left: 1px; width: 0; height: 0; background: none;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}
.toggle[data-paused="true"] .toggle__icon::after { display: none; }

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

@media (max-width: 600px) {
  .contact { font-size: 17px; }
  .toggle { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand img, .tagline, .contact, .toggle { animation-duration: .01s; animation-delay: 0s; }
}